TIKTOK Clone React Native Tutorial 2021 👨‍💻 - React Native Video Feed with FlatList (#9)

[@SimpleCoder]

In this TikTok clone video, we'll be implementing a video feed system by making full use of the FlatList component and optimizing it in a way that we are able to fully control the video playback, making the feed smooth and free from crashes caused by poorly managed memory If you have any questions just let me know down below in the comment section 👇

[@__Time__clock]

This is great. I stopped watching clone tutorials because if I wanted the software to work I would need to deploy and maintain it. but this video is a good entertainment pass time.

[@SimpleCoder]

Awesome Joel! Really glad you are enjoying it 😊

[@justinJ689]

One simple tip, there is a hook tthat lets you find out the actual height of the bar without guessing or having a static value for one device. Its called "useBottomTabBarHeight". This is if you are using react navigation as your navigation library.

[@jeankaelaugustin641]

But you need expo for that.. and expo doesn't recognize most dependencies.

[@fnc.owenmelbz]

@@jeankaelaugustin641 "most" is probably an exaggeration unless you need obscure packages

[@emanuelmejia4525]

@@jeankaelaugustin641 Expo is the way 👍

[@riturajranjan2072]

Awesome series

[@SimpleCoder]

Thank you Rituraj :D

[@zakirbangash3185]

Hello Brother I love your content and I'm reaching out because we've been working on an issue for the past three months. We're experiencing a noticeable delay of 1 or 2 seconds before videos start playing, which creates a different experience from the smooth playback offered by TikTok. We'd greatly appreciate any suggestions you might have on how to achieve a similar level of responsiveness when users swipe to the next video.

[@rehan314]

Hey, Please make a tutorial on java refresher! You make such awesome videos!

[@yoel8538]

great video!

[@sinanayhan2330]

Awesome!! Just awesome!!

[@munirkhan8651]

hi! Good work sir, how to get the video reference from SinglePost. it still playing when I change the navigation.

[@krultorwaru121]

Actually why are you putting the forwardRef here in 26:26?

[@vitbo7981]

This is amazing, thank you so much for the detailed explanation. I just wanted to ask if you would consider implementing video search in the search box before entering the name of the person you are looking for. I think it wouldn't be a big deal to skip the complicated algorithms and just display the most popular videos in the let suppose for the last 12 hours. What do you think about that ?

[@SimpleCoder]

Thanks Vit! I will look into it. The most liked videos of the day is something that would be easy enough to implement for this series. I will evaluate that for sure! Thank you for your suggestion 😊

[@vitbo7981]

@@SimpleCoder The pleasure is all mine 🎩Thank you for listening to me . ... I am honored 😊

[@souvikbanerjee1565]

Awesome

[@GafrongLimited]

U r godsend!

[@ardhendugatait4366]

Is it possible by react-native-video? Not in expo project...if not please make a video for that

[@henrik908]

You are true legend 🙏 Doing great sir

[@SimpleCoder]

Thank toy Navneet 😁

[@henrik908]

@@SimpleCoder you are my teacher i am 15 years old Learning a lot from you as i am from India that's a developing nation i want to become a developer

[@henrik908]

@@SimpleCoder sir i have a question how can we create algorithm like suggest videos to viewers according to their interest

[@SimpleCoder]

Glad to hear it Navneet, it it a great opportunity and we are all rooting for you! If you have any question at all just let me know 😊 You can either implement ML to do that or you can go by simple metrics like the most liked videos of the day and/or categories the user wants to see. This last one is the easiest one to implement

[@henrik908]

@@SimpleCoder please teach us about ml is your upcoming tik tok series videos Thanks for your reply sir 😁

[@ilyesbejia6566]

Hi Sim i'm currently following this part of your tuto to reproduce this video scroll i dinamycly recode what you do while watching your video and i'm currently facing a problem the flatlist doesn't take the whole screen i have try the trick of the backgroundColor to see if it take the whole screen or not and it don't . Here the code i've check it several time and seem identical to the one you display on the video import React from 'react'; import styles from './styles' import { Text, FlatList, View } from 'react-native' export default function FeedScreen () { const array =[1, 2, 3, 4, 5, 6] const renderItem = ({ item, index }) => { return ( {item} ) } return ( ) } styles.js const { StyleSheet } = require('react-native'); const styles = StyleSheet.create({ container: { } }) export default styles; I will appreciate if you could figure out what's wrong with my code I thank you in advance NB: my currrent version are "react": "^18.2.0" "react-native": "^0.69.4", "react-native-web": "^0.18.7",

[@ilyesbejia6566]

i have finally figure it out you display it on a component wich as certainly a predefine size i display it directly as this element in my app.js file so i just had to had an height of "100vh" to the flatlist + i figure out an others problems then the element height in renderItem style view didnt react to changement so i had to set up a maxheight and a minheight to define an height .

[@ilyesbejia6566]

Thats so fuck up i come back on my oproject and face the same problem i check the comment after a whilme and then find the solution i had post thanks me

[@AllahomAnsorGaza]

flatlist is not good choice for production with many videos it will be unstable i switched to RecyclerListView but i have problem there is no onViewableItemsChanged :D do you have any idea about it please ?

[@neel6617]

Did you find a fix?

[@nsyi]

What should we use if want to achieve the same results without using expo?

[@ricodane6847]

Hello, do you have an answer for this?

[@poobyy619]

Hi, I was trying to replicate this but having some issues. When I import dimensions and try to apply the height to it, it doesn't work . I have been troubleshooting this to no success. It saves that info to a variable and printed it out but the dimensions never gets applied to my screen. Any help would be appreciated

[@testingchannel7312]

Hello , Can I install expo av into react native cli project.

[@ricodane6847]

Hello, do you have an answer for this?

[@turji1845]

anyone having issues with the videos not stoping when not viewable ?

[@yoel8538]

yes i am!!!! did you ever figure this out?