Build a TikTok Clone in React Native [Tutorial for Beginners] 🔴

hey everybody welcome to a new uh live build and today we're gonna build the tiktok clone in react native so i'm really excited about this build because i wanted to build it from the beginning of when i started uh building live projects and uh yeah if you're new over here we are cloning popular application that you probably use day by day um and we clone them in react native and also aws for the back end so we've already cloned the instagram twitter spotify and what's up what's up was a instant message messaging up with instant messages coming in so yeah if you haven't seen those ones go check them out but today we're starting a new one we're starting from the beginning and this is uh intended for all levels uh i'm trying to guide you through all the steps that i'm going through um and if you are a beginner this is a great way to get started and in general i'm doing this project based learning because i believe that this is the best way to learn a new technology by doing something and not getting stuck into the tutorial um yeah life cycle where like you do tutorial after tutorial and you never like start actually building something so i want you to guys to start even if when you feel that you're not ready yet because this way you'll learn much faster and you'll see something tangible that will motivate you to keep going and keep learning every day so hello everybody in the chat i see that everyone already knows our tradition to say where are we coming from so hello from ethiopia hello from nepal uh hello everyone so yeah i have my coffee uh everything is ready in shortly we're gonna start let's uh wait like a couple of more minutes until everyone is joining and for people that are watching this afterwards uh i will i'll try to to put the timestamps in the video descriptions so you can skip all the discussions that that we are doing with um with a live stream hello from india from tunisia hello everyone hello from harare i don't know where that is sorry clayton so yeah guys uh thank you once again for supporting me and um yeah you you showed a lot of support lately and it seems that you love this um these live builds and i'll try to do them as long as i can because i'm i'm having fun myself and especially when people are appreciating what i'm doing that's that's even more important for me and uh yeah something new that happened lately i became a youtube partner hey congratulate me thank you very much and because of that now i can start monetizing my videos and um yeah making um making some money and paying for for for for for all my um for everything that i'm doing here for mic and video and everything because yeah i um i rejected that amazon offer employment amazon offer and it was for the next summer and i set myself a goal to to start earning the same amount of money as that offer was in order not to to regret rejecting the offer from amazon and yeah if you there is super chats and yeah don't feel uh obliged to do that but if you do i'll be very thankful i'm so weird doing this stuff guys i'm that's the first time so sorry yep okay so um yeah let's get started and yeah as i said today we're gonna clone uh tick tock in uh react native so what technology we're gonna use yeah guys uh i plan to do this in expo and previous projects were in expo but a lot of people were saying that will rather prefer doing it in rock native cli and i ran a poll on my twitter and i think 70 percent of people said that they would prefer in expo and let's see yeah 65 percent of people said that they would prefer an expo uh in a rock native cli sorry over expo and yeah um we are living in a democratic country so if you prefer react native cli let's go with reg native cli we'll we'll try to switch if in future we'll feel that more people want expo content we will integrate expo but for the tick tock uh we're gonna do it in react native cli without expo and also uh we're gonna use gs javascript without typescript because i felt that um with typescript there is like entry barrier and people might feel um yeah they might feel difficult to get into that so i'll try to keep it as beginner friendly as possible uh we're also gonna work with react navigation and that's for the front end uh for the back end as usual we're gonna work with the beautiful amazing aws amplify that i really love uh yeah we're gonna use the op sync for our graphql backend uh aws cognito for uh user authentications and yeah more more on that later let's let's take it step by step because uh today we're gonna do only the front end the ui we'll have everything ready oh lukas thank you very much for the donation you're the first one bro thank you yeah let's get started so as i was saying yeah that got me excited as i saying uh today we're gonna do the front end the ui uh and in the next uh next week the same for uh next friday uh the same time we're gonna do the back end for for tick tock and at that point we'll probably have a fully working application uh that can be submitted to play store yeah of course you will change the design and you can have your own tick tock so let's get started um let's first of all we need to initialize the react native project and we're gonna do it with npx react native we need tik tok i already did that so but nothing complicated there i am you just run this code because this takes a little a little bit of time to to install so i didn't want everyone to wait in the during live stream after you um ran npx rack native you need tik tok then you go and you open the project in your editor of choice in my case i'm using where is it yeah i'm using webstorm so i um i open the project in webstorm and this is um and yeah this is the bare minimum project that uh the track native generated i didn't change anything else um so right now let's start the server and to start the development server we're gonna run yarn start and after that depending on your system uh you will write yarn ios or yarn android if you are developing for android but uh this build is supposed to to work with both ios and android devices so if you are on windows and uh are not able to work with ios um yeah install android emulator and work with an android i'm gonna go with an ios so i'm gonna write yarn ios so yeah in the first terminal as you see here um where is it yeah i ran yarn start we started the development server and in the second terminal i ran uh yarn ios and go ahead yeah and it opened uh our generated application in react native here in an ios simulator so yeah here is the application you should see the same so from this point i'm going i'm gonna follow all the steps with you guys so let's get going yeah we uh set up a project we run it on ios simulator then we can get started the next step i want to to do before getting into the actual development is to install um vector icons and we're gonna need them for all icons that we're gonna use for the menu for like buttons and so on and yeah we're gonna do that by running yarn add react native vector icons vector icons is a cool library that provides a lot of useful icons and like their directories like it's like thousands and thousands of uh of icons so you'll definitely find uh an icon that you need so yeah i'm i would suggest going with this one um yeah first of all we install uh the library after that we need to add uh the ui up fonts into the info plist file so um for that we need to copy the names of the icon sets uh vector i construct native let's open their github account page oh george thank you for the donation five euro thank you very much i think yeah i think you are for uh one of the first subscribers like active subscribers that were following the builds so yeah thank you very much for the donation uh yeah um if we scroll in the documentation here we see all the icon sets that they provide and in the ios installation the ios installation is a bit outdated in their uh page and you don't need to do anything else besides copying this part of the code this is like all the ui up fonts in a in an array and we copy them and let's go back to come on video let's go back here and we open ios then the name of our application which is tiktok here and then info.plist let's open that one let's scroll uh at the end and before closing the dictionary before closing it we add to space two spaces to new lines and we paste the the array that we just copied and this will make sure that these fonts are copied in our ios bundle so let me check if that's everything we need for ios that's everything that we need uh then for android i know for ios we also need to run npx pod install and this will install all the pod files uh for the for the build uh pod install ios actually that's one of the reasons that i i prefer export during uh the live streams because with ragnay tv cli there is a lot of like setting up and i'm not sure if you'll enjoy that but yeah so uh so we ran npx pod install and the last thing is to change something to uh for icons to work on android and we're gonna add this line that you can also find in their documentation or you can copy it from the presentation that you will find in the github in the github page of our clone so we copy that line we open the android folder and now importantly we open up folder and from web we open build gradle but be sure to open the build gradle from the application and not from android because you see there is a build gradle here and there is a build gradle in the app so we scroll advanced and we add our um yeah apply from vector icons fonts.gradle so we save now we run again our application on ios let's close these two files bit hem i'm using rack native cli i'm not using expo at the moment so yeah maybe that was the confusion but that's what i was saying like this time i'm doing the application without expo bayer rock native cli so our application should run and right now let's let's just find uh icon and we can find vikings in uh react in vector icons and there should be that uh the director where is the director yeah here vector icons directory and let's say from and design i think we have a better place right now um vector yeah no that's for yeah that's for expo sorry yeah vector icons here the director of the vector icons and we're gonna import the end design and probably yeah let's say we're gonna use yeah this um this icon to make sure that everything is working let's open our app.js and find somewhere here like a random place where we can um put vikon let's put it somewhere all welcome to react it doesn't matter actually where we put it well well come come on where is welcome oh that's probably an image so step one yeah here let's so uh and design name will be this one size will be i don't know let's say 30 and yeah after that we will need just to import and design uh yeah important design from no here import and design from react native vector icons slash and design so come on let's save and yeah under the step one we see that the icon uh which means that our vector icons have successfully been installed and they are supposed to work on android as well yeah the first step is done so um yeah right now we can uh move forward but before that i would like to clean up a bit uh this page uh to prepare for for the next step so let me check a bit with chat what are people saying sorry man i could donate but it says i cannot do that in my region yeah thank you very much no worries yeah are you okay why not typescript uh why not typescript um just because i felt that uh with tyscript i'm losing a lot of time during live streams to set up all the types and whenever i don't have time to set up the types then yeah the application of course works but the id shows it with red and for a lot of people this is like uh this is scary so i don't want and and typescript is also another step and another step of friction for beginners to get started so i'm trying to keep the uh to keep down um all the technology that we are using so more people can get started and can um can implement on their own how did you learn aws that's another story i learned it while working the same way as i'm learning everything like i have a project i'm doing i had a project with aws and i started doing it and learning but after that i took the the courses and the certifications so yeah now i'm aws certified so yeah um guys let's uh i'll try to to answer all the questions um but if i don't manage uh should uh write write the messages in our discord channel and the link you can find in the description of the video and there like we can have a chat like without being in a rush but here let's get back to work so uh or all right um yeah i said that we wanted to to clean up a bit so let's do that uh in app.js in app.js let's see what we don't need yeah we don't need the whole scroll view we will need a safe area probably but the scroll view no no um styles we don't need them uh this this up the jazz file should be like as as minimal as possible so let's delete everything but we will not need uh like that empty component ourselves now we'll have here something shortly um okay so um right now let's set up yeah i think here is quite okay uh right now let's try to set up the project structure and the folders that we will need so the first one will be screens and in the screens we'll definitely have a home screen home then we'll have another no actually we need a source directory and everything to put in the source and move the screen in the source yeah besides screens we need a director for our reusable components components and yeah we'll see later what yeah probably assets uh sets yeah and in the assets will have like images fonts and other assets that that we will need um hey lukas thank you very much uh for another donation glad to see that you can support your via donation yeah thank you very much i i really appreciate that um yeah probably that would uh go towards my new camera because i was um yeah shooting a video for you guys uh this week and yesterday i spent almost the whole day trying to edit it but in the end like it was too bad and i i like everything is bad about that video uh and i don't want to publish it and probably i will try to reshoot it because like the camera quality was like really bad i messed up some settings for a camera that i lent out from from my brother and so on so yeah these donations will go towards a new camera so the quality of the streams will be better uh okay so uh now let's create the uh the home the home file and it's gonna be like a very simple file at this moment uh where we'll write everything so import react from react uh let's import also a view and a text so let me just move a bit the microphone this microphone is so heavy that my my microphone army barely holds from react native what else uh so let's say home equals to a component and here we're gonna return view without any styles at the moment and the text on home screen like that and export default home yeah forgot semicolons uh all right so let's the next thing is we need to import this home um component in our application and render it here so let's do that here import home from source screens home and let's render it here in a save view let's save and see if everything is still working yeah everything is clean we see our home screen label here at the top um and i think that this is ready uh for for the next step um yeah one more thing let me try to yeah people were saying that it would be helpful if i commit fast so you can revert back to one of my commits and see what i change or start from that point so let me just commit real quick clean clean up yeah the the link will be uh of this repository will be available shortly after the stream daniel 2279 rubbles how many much is that i think that's that's a lot thank you very much daniel thanks for the support um we're nearly saying hey i'm new here what video do you advise me to start uh yeah start with let's say with what's up what's up was the longest and probably the most successful one on the channel thank you very much once again for for the donation i really appreciate that so uh yeah while we are here someone asked we'll use other aws services like pinpoint amazon dynamodb uh lambda elastic search service um yeah i might use pinpoint uh and yeah that's something that is not very hard to implement and probably um very useful for uh for a lot of applications that's um yeah and amazon dynamodb we are actually using in all of the services uh we're not using it directly but when you create an up sync model mod model it actually creates a dynamodb table yeah let's not get into that details right now because uh we'll scare a lot of people uh about that later so everything will be clear uh okay so let's get started with the next step um so the first step is we're gonna start working on uh the tick tock page and if you have used tick tock who didn't then probably you know that the tick tock pay the tick tock shows i mean the home page shows one post uh the full in in a full screen view so you see it in the full screen and you can swipe to to go to the next post uh i really like i really wanted to do a tick tock especially for for this reason because their feed is very different for from any other applications like facebook instagram twitter and all the all the applications that just have a vertically scrolling feed that goes like that here i really enjoyed that they they tried to do something new and it seems that this is working very well for them so um yeah the first the first step will be to display a full screen video so to to render a video we need a separate library for for vet and that's called react native video let's uh let's grab this command yarn add react native video and run it where is it yeah here let's run it i'm actually using this react native video in my startup which is vitinum um because petinium is heavily based on videos uh and we've been using that for for a long time and it's it's giving us pretty good um results i think we upgraded a couple of times because we started when it was still not very robust so we were having some bugs um yeah we installed it because i'm talking but yeah it was installed so the next thing is for ios we install the pods pods and to do that we run npx pod install ios or you go into the ios directory with cd ios and then run pod install and that's it hey daniel thank you for for another donation um thank you very much love you guys no no homo love you hi andrew how are you doing so the pod has been installed and now the next step would be to render a video so let's uh yeah before doing that let's create a separate component for that because we're going to call it a post component and later on we'll develop it like to to have everything about one post so let's create the index index.js so let's as usual import react from react come on import um what we'll need here probably a view we'll see later we'll need probably a text from react native const post return let's return um simply a view come on no styles yet and a text post and export default post so we're gonna import that web post in our home page and we're gonna render it here we're gonna call it here so let's import post from uh components right no no no it's two times components then post and right now instead of a text here we can render the actual post like this let's save so yeah we see here post so everything now can be done in our post page so right now we can even uh go ahead and close the home because we're gonna do it here so why didn't you like that yeah andrew i already answered why not expo a lot of people wanted me to try without expo so i ran a post on twitter everyone voted for no expo and here we go so now let's import the video player that we just um that we just um installed so where is it one second let me just have a look yeah so uh we import the video player from import video from the library that we just installed react native video and right now we uh yeah we can render it here like so video the first thing that it needs is the source and for the source uh here we send a object with an uri that's similar to how we render a image if you remember so for the uri we either uh specify or give a local video that we import here or we give a video um we give a video a remote video using a url so that will probably be very narcissistic but i couldn't find any videos while i was preparing so i took one video from uh fitting the application and guess who is there one second you you'll see what i mean i think it doesn't like the spaces here so we gave a source um yeah let's give it a style no i think it's uh it should be okay with without and find is that object video instance constants what happened what happened to you oh we installed the library but we didn't rerun the application so yeah let's do yarn ios when we install new libraries we should make sure to rerun the application so everything is loaded again daniel is saying but you might dream that people from our government could import and export like you yeah that's that's interesting analogy uh ana says iran yarn ios yeah thank you very much yeah that was actually the problem uh yeah but before that uh until uh yeah while it's running uh let's create our styles file here because shortly we're gonna start styling this video and this post styles.js and here we import style no style focus and right right my microphone is in the view of a keyboard and like i make mistakes react native probably so const styles equal to stylesheet create and here we export style styles export default styles right yeah it's supposed to work uh let's import our styles here import styles from styles and let's set the styles to the video because it seems that it's rendering but it doesn't have a width and the height and that's why um yeah that's why we we cannot see it so uh let's say style equal styles dot background or video video video and let's declare the style for the video in our styles file so um we want to display our video as a as a background video that will fill the whole page and for that reason uh we're gonna display it with a position absolute uh and we're gonna say that it will be full screen by saying that uh the distance from top to the video will be zero from left will be zero from bottom it will be zero all right zero and yep something like that no no you don't want to do that let's give some styles to the container as well styles container you will want one second container so our container will have a width of 100 and for the height let's say for now like 400 pixels and shortly we're gonna change the height of that so yeah we receive a video there and yeah that's why i said that it will be very narcissistic you if you understand you if you see you understand so for the height uh we want to display uh the video full height of full height of our application of our screen so we're gonna do that by importing uh dimensions from react native and we're gonna say the height will be dimensions dot get window height um and probably that's it let's save i no something is missing there h where here no here yeah the height is now good but the next step is um we need to save at the video even if it doesn't have the same ratio as the screen because all the screens have different ratios one are wider one or taller and to display this video well on any device we will say that the resize mode of the video uh will be a cover and this will tell to cover the whole screen um the whole view that it is displayed in and if we save we see that it covers the whole view as so yep um yeah what else what else i'm not sure why it doesn't play so to debug that uh let's declare let's give a call back function uh to the video on error and it receives a function and we can console log the error directly so let's save let's open the debugger where did it open it didn't open where i wanted so somewhere yeah and let's wait if we see any error no the video started playing but that's good so um yeah what else with a video we set on error listener and if for example if the link is broken uh our error will be displayed in um in the debugger native debugger yeah we see here the error and the reason is a servers with a server with a specified hostname could not be found um yeah let's revert and see it properly here yeah we display the video full screen let me see what else i have here prepared render the video let's right now implement that whenever we press on the video it will pause the video and whenever we press again it will start it from the beginning but before that i see that the video doesn't auto loop so sorry if i'm jumping from from stuff to stuff but let's say loop does it have something like that loop true save [Music] not sure if that's uh how this is called but let's let's open the react native video here we go so loop yeah thank you very much loop repeat repeat determine whether to repeat the video when the end is reached yeah repeat default is false so we need to say repeat is equal to true hey lucas thank you very much contributing a bit more to your new camera yeah thank you very much i think the camera will come much sooner than i earn it so yeah thanks a lot i appreciate it so let's say repeat through let's save and come on come on why why are you running why are you not running let's refresh and hopefully it will loop we'll see it here so the next thing is as i said whenever we press on the video we want to to pause the video and whenever we press again we want to uh to play it back so to do that we need to yeah we see that the video is looping as we actually need so um to do something when the user clicks we need to uh rub the video inside the touchable because touchables uh with touchables we can set on-press listeners so let's do that with a touchable without course touchable like that with touch with touch like that no how to write touchable touchable with oh yeah that's the first time how i wrote no definitely not yeah attachable without feedback on press we will call a function that will define uh right now on play uh pause press and we put our video inside this touchable opacity uh we declare the function inside our component on play pose press and we're gonna console warn right now to make sure that we um we are actually registering the press let's save and let's press and we see a console worn here press press press we see it there so right now we need um we need the state variable that will define the state of a video player if it's paused or not so let's declare a state variable here paused and the setter which is set post will be use state and the initial value or will be false because initially we want the videos to play by default um let's import the use state from react inside the on play press on play post press we will we will change the post variable inside our state we by calling the it's setter and we need to reverse the current value that is actually in state so if the pose uh is true we need to set it to false if it's false we need to set it to true so in order to do that we just write um yeah exclamation mark which is renegation and paused uh yeah we have this one right now we need just to send this prop property to the video like this like save we press the video stops we press again it plays so uh yeah that's good that's good good what else um yeah uh for these steps for this step i think we are done and yeah for this step we are done we are displaying the full screen video as you can see here the video loops continuously when we press the video stops and when we press again the video continues so that's actually what what we intended to do [Music] let's check uh what people are saying with chad uh man your discord is good thank you very much yeah there are a lot of um of cool people there and what i really like that everyone is actually working and implemented implementing these bills or their own projects and everyone is sharing their experience and resources that's really nice so if you didn't join it yet consider joining these guys deserve more subscribers thank you very much uh step by step like i don't deserve anything like we're gonna get there um yeah can you make this application to support other languages english arabic um [Music] yeah that's an interesting question that's very specific um yeah like feature um we are doing that at vitinium we have it multilingual in spanish and uh english yeah it depends like if more people will want a multilingual application i can do that where i can um probably create a separate video just about this we'll see let's see what okay so let's um let's go further all right so the next step is to render the for the post component uh yeah let's start it again so the next step in the post component is to render all the information that we see on the screen which is on top of a video so we displayed the video uh as as a absolute position so it will always be like uh in the background and on top of that we want to display these two components and as as you can see i marked them with yeah a red and a blue border to to understand how uh how we analyze and how we split something into components because when you look at it like there are a lot of moving parts here all around the places and you might find it very difficult to position like this when you don't split into proper components so the first thing is what we see the bottom part is everything from here and we think about this as a separate component and the sidebar is here which is displayed just above the bottom part and it's displayed to the right so we think about all these four buttons as one component and by doing that it's easier to to map it inside your mind and to understand like how to position it like bottom right left uh which one is first which one is second and so on i like your accent yeah thank you very much um someone is saying that uh i sound like maurice i didn't know who boris is but then i google them i don't know so let's uh yeah let's uh continue with the post and then we're gonna commit so for the post here uh what is our uh strategy first of all is first of all is probably to display the bottom part from here so yeah let's let's go ahead and do that so okay after the after our touchable uh feedback after our video we will display um what what we have there let's just play like a view and here will display for the beginning just a simple text like i am the bottom component um why it cannot import the text automatically okay i'm the bottom component and yeah let's save we see that um our bottom component is actually displayed on the top i'm not sure if you can see that but it's here on the top so to display it at the bottom we will assign some styles to the container and we'll say to the container that display all your childs at the bottom of the page so let's go to our container and wait let let's think it again uh so yeah not to the actual container but better to to this view and will will separate everything from the video so style will be not container but let's say um i don't know like ui container for all the ui like buttons and stuff uh yeah let's define it here and our ui will have first of all a height of one hundred percent uh let's declare um the yeah justify content um flex and and this flex end will make sure that all the child components are displayed at the bottom of a container so let's save and see where is our text i don't see it let's declare something like background color i always work with background color when i don't understand like how is very rendered um i'm afraid that it goes uh below the screen so if i do 99 yeah you see that if i do 99 it goes under um even 95 95 yeah well yeah only only right now we can see the the bottom component with the height 95 and i'm wondering why is that oh i think i know yeah uh let's go back to 100 percent come on 100 so we see that um our text is pushed under the screen and that is because um the height of this container is set to the height of the screen but the height of the screen is taking into consideration with the notch so it's from the top till the bottom so i can show you if we just uncomment the save area view our content will be displayed from the top our video you see under the notch and now at the bottom we can see our text let's uh font size uh 20 color white yeah the bottom component we see it here so um in order to do that to fix this issue because we want we don't want to render our video underneath the notch we want this uh safe area to be displayed uh we will go into the dimensions dot get window height and we're gonna um subtract like i don't know like 50 pixels something like that and yeah probably that's i feel that it needs like 49 because i see a very thin white um line underneath like not even 49 yeah 48. so this is like hard-coded uh this is hard-coded and this will probably not work best with all the devices because the notch size of all the devices is different and whenever you will not have a notch this will not work so yeah this is a extra task for you guys if you can fix and uh dynamically get the the the height of the notch or to get the height of a safe area and not of a screen then yeah extra points to you so yeah let's leave it like this we see our bottom top container we see it there yeah i am the bottom component and now let's and the bottom component yeah that's good let's create like the side component and see how how it is displayed and as we see here the side component comes before the bottom component so that's why it's important to to visualize how the components will be rendered so let's go here and just render here side let's just play it with a bit side so we see our site displayed there but it's on the left so we need somehow to make uh it displayed at the end of the screen because our side component should be close to the right border so um let's declare actually a style for that um let's put it into a view because we'll need it into a view text here come on style um and it's going to be called right container and the right container will not have a lot of ui will have only one property and this will be uh align self uh flex end flex and let's save and now we see that the side component is displayed to the right now we manage to fix the positions so right now we can start rendering all the information that we need we will just throw everything there and after that we'll try to style it in order for it to look the same as twitter as a tiktok sorry so um yeah let's have a look here so for the bottom for the bottom um container we have here the name of the creator then the comment and after read the song yeah let's go ahead here and again put them put the bottom container in another view because we will probably need to style it styles not right container but this will be the bottom container and it will be the red box that you see here so the first is going to be the name of a creator so it's going to be let's say david dobrik and for the styles let's uh declare some styles for it um yeah handle like username or something like that after that we will have a text for the description and let's write here uh that's for the description and after that we will have the song name with the song icon so for that we were gonna need to put them inside the view and here we will have to display the icon and underneath we're gonna display the name so for the icon uh let's go ahead and try to find this icon in the vector icons so it's it's a song i can uh it's a sound icon let's try to find it somewhere here uh sound or musical note is called something like that note yeah uh i think this one is pretty accurate so it's from the and typo fonts let's go ahead and import them import and ipo from react native vector icons slash and typo uh and let's display it here and typo name name how is the name i copied it beamnote size i don't know like 24 let's try we'll see how it looks uh color uh will be white okay okay okay and here the name of the song so it's going to be another text okay that's probably everything about them about the bottom container um yeah let's save and see that everything is displayed badly uh and take one by one and uh style it so first of all let's style the handle but yeah let's add the styles for others as well this creation description what else is there uh text style name song name song name and song name and here style will be song raw let's delete these comments and yeah probably we have everything but we need in order to style it so yeah let's start with the handle um first of all uh color white or let's declare it with actual numbers fff [Music] then font size we will say that it's gonna be i don't know like 22 and font weight bold save on size of type string no okay okay okay 22. now better okay that's probably too much 8 18 i guess i don't know even smaller yeah and probably not bold or a value of 500 font size 16 save like that does it work with numbers let's try 700 which is bold yeah it works 600 all right i think it's good so the name is styled okay let's style the description uh let's again go with a white color fff font size uh probably is it smaller i don't know i think it's the same 16 and shouldn't be bold it's actually very very thin can we say font weight like 300 will it be fin yeah that is better okay description is okay now a song row and for the song girl the only thing that we want to to say is to display them the icon and the song name in into the same line and we're gonna do that with flex direction uh row save yeah now we're in the same line um probably it's very hard for you to see so let me add some styles to the bottom container and let's say padding i don't know 10. to add some spacing inside the container um why oh because i miss bottom containers yeah right now is the thing is better um let's add also some margins to the name margin bottom will be five to add some spacing between the name and the description the same things go for the description what else is there yeah i think that's that's good enough um yeah the only thing that is different is um the uh for actual fonts so if you can find the phones that tiktok is using like that would be great uh now let's style the song name let's give it again like color font size uh like this we don't need the font weight i guess oh come on come on come on no no no no no yep it displayed there [Music] we will add some margin left five to have some spacing between the icon and the name let's save yeah we have it and i'm pretty sure that they are not in the same line so to check that let's go crazy with this one and see but the name uh is aligned on the top so to fix that we're gonna uh say align line items item center yup yup i'm so glad whenever i uh center one thing from the first time guys like it's crazy like inside me it's like yeah i centered it so let's go back to size probably 24. um all right i think that the we have the bottom part of the tick tock post looks pretty similar to what we have there maybe more spacing between the description and the song so we'll go here description margin bottom i don't know 10 and let's do the same for the handle 10 a bit bolder nickname and yeah i'm pretty happy with that uh so the next step is the sidebar and in this invest yeah in the sidebar we have three icons and one image so let's go ahead and display that so first of all where is it it's here right container so we don't need this text we will need right container so everything everything everything um okay we'll have um a view style uh profile picture container and inside it will render a image profile picture source uri okay i need to grab an image from somewhere um could you paste here the video uri uh yeah one second let me yeah yeah yeah i was struggling finding a video so i said like okay let's let's take one from uh yeah where i was uh i need the uri of a image and i need also to import the image from react native image so let's grab a david dobrik image come on come on come on come on this will go copy image address and let's paste it in our url right here let's save and yeah we will need just to add the styles to this one because it doesn't have right now a width and height so we're gonna do that shortly but right now let's display our icons and each icon will be displayed like the icon and underneath it the the text so for that reason we will need to display all of the parts here in separate views and i'm going to show you what i mean right now so we will have a view style icon container do i have it already some no i don't okay um inside this icon container will display icon so for now let's just take this one and underneath we're gonna display the how many likes or how many comments are there so let's do like that save all right um yeah we're gonna come back okay besides i can adjust it right now 30 even more like oh it's too much 40. oh perfect so the same thing we need to do three times one two three and then image and what else um plus styles styles stats uh label stats label icon container profile picture profile picture container oh we need to close this view here sorry for that and delete it from here because our profile picture should be alongside with these ones so let's go ahead and declare width and height for the profile picture uh let's add some comments here side uh cont container or left container better left container and we can even oh it's right container i don't i i always uh confuse right with left it's okay right um so what i wanted to do profile picture with will be 50 height will be 50. save yeah we see it here um and right now let's i'm not sure yeah i probably we need to to assign here border radius to make the 25 uh to make the image round so we see it here rounded and i did i put the image inside the view in order to add but no actually we don't need that uh let me try something uh i want to to display the the white circle around the image so i wanted to do it with another view but i think we can say just border right border with two pixels and border color uh white save yep we don't need a separate view for that that's good to know so our uh profile picture is displayed well how is the size of it i think it's pretty good it's it's there all right let's go with the next steps so let's spread them apart because they are too cluttered together and to do that we're going to assign something to the right container we need to set a fixed height to it and to say that all the children should be spread apart to fulfill all the area there so right container will be hide will be high let's say in the beginning 500 we'll adjust it later just to see that it works and uh justify content space bit win like that yep and right now we see that um we said that the height of the right container should be 500 and uh render all reach all the childs with space between so basically spread them apart to fulfill all the area so right now we can adjust this uh height to 300 yeah i think that's pretty pretty good what does it complain i didn't delete it from the top all right i can do that and here okay so right now um let's style the uh label of the studs to make it white first of all color coloroy fff why it's only for one because i didn't assign it to everyone of course like that save now it's for everyone um let's save self align will work here align center save invalid property self align light no align self align itself yeah like this yeah but all all right all right i think we it's it will be better just to save that icons container um where is it icons container align items uh center and without this one and this will uh align both the digit and the icon as we can see here uh yeah that was what we wanted um here let's say that the font size will be let's 16 on size 24 let me okay 16 was okay 16 uh font weight 700. is the style good yeah probably it's not that bold actually uh 500 600 yeah that's good that's good and right now let's uh well yeah our styles are good yeah i'm already stuttering uh let's grab some icons and render them properly so we need a heart icon a comment and a share let's go and grab them from vector icons so card uh and design has heart and we will need both of them uh in when we will implement liking and uh unliking because heart o is uh just the outline and it's from and design do we have it here no we don't i'll duplicate the line import and design rename it to end design and for the first one i'm gonna change it to and design the name will be hard or hard oh save we see the heart here all right next one uh next one should look like a comment probably will not find exactly that one comment something like this right yeah it's a bit different but actually it's not hard outline but it's full heart there so i'll just remove this one and yeah for the comments uh i'll take probably that one that one is closer to what we need it's round with free dots yeah and it's from font awesome awesome i'll do the same font awesome and for our second icon i'm gonna replace it with font awesome and the name will be commenting commenting right yeah this one and the last one should be the last one share share share oh my my back already hurts like so share share share something like that but a bit more minimalistic we need la this one probably is the closest to what we need war for material community ah they're kind of the same so yeah let's take it from fontisto [Music] it's definitely developed in italy uh and for the last icon we're gonna replace it with fontisto uh share a save yeah it looks good but i think they're too big especially the last one they're just enormous the next thing is i see also that we need some some margin on the right because it currently is touching the the borders to make the icons probably just a bit smaller especially the last one and i think we're done with this uh for the icons con right container we're gonna say margin right five pixels enough yeah it moved from there uh the size of the last one let's adjust it separately 35 yeah good enough and also um for the label i want to add just a bit spacing bit uh at the top to have space between the icon and the label so we'll have a margin top i think five will be too much no it's okay so let's have a look compare them and see if we are done with it uh okay the last thing that i see is in to the right here there is again like um like the log of the image of the office of a song so we need to display that right now we forgot to do that and we need to do that in our bottom container we will put everything that we have currently inside one view because we need we need that image to be displayed at the bottom so here we'll display uh a a simple image let's just display the same as we did for the profile picture image the style will be song song image song image something like that let's copy it go into styles song name let's put it here song image and yeah let's declare something like style similar to our profile picture but it's not going to be 50 pixels probably a smaller but we need to position them first of all so for the bottom container we need to say that its child's which is this view and the image should be in the same row so uh for the bottom container um justify content no no no [Music] how is it just no row row i forgot flex direction flex direction will be row like this save okay and also we need to justify content to say that you need not space between oh yeah space between like spread apart and you will go to the left you go to the right and we're gonna also say that you were gonna align items flex and in order to to bring these this image down save yeah it's there so yeah it probably looks uh how we need it the only difference is that i think it has smaller width like 35 something like that and a very big border width like i don't know 10 and the color of the border will be a grayish and it will look like oh god not not like that too much five okay 50 back to 50. let's show you how it looks because it's too far away but i think i can do like that no i can't all right i think that um it looks pretty similar to here so um yeah if i'm not mistaken everything is done uh for a post component so we are displaying a video we can play and pause the video uh why it doesn't work right now okay i'll have to get into that i think that our touchable opacity is i think the styles of the video should be should be here because uh touchable opacity should have this position video position absolute um so we give it a z-index one okay but that's not oh oh all right yeah let's think how to fix it because right now our container for the ui is on top of our touchable opacity and that's why uh our touches are not um detected so uh i think that i'm gonna declare video play button something like that and and we're gonna say that this is also a position absolute uh but it will have a z index of 100 like it's gonna be uh in front of all the ui elements that we currently have and if we say here like that we can press and it doesn't work video [Music] why why why let's refresh okay that's interesting to be honest um what can we do you know what uh probably we can [Music] put all our ui containers into this on play pose what if we put everything there and close this yeah before the last view let's try to save and the thing is that touchable feedback wants just one view and that can mess up everything to be honest view one more view here if it works i will clean it and right now press yeah yeah yep yep yep yep it works so let's um like that let's clean it a bit and we will be good to go come on what do you want ah i don't like that but okay so uh like that okay this view until where until here should be here and what else can i run prettier on the whole file more actions fix current file okay let's save and yeah we press the video pauses uh we press again it plays uh we're displaying all the information about this video in the bottom container and this is like the name of a creator uh his comment and also the song that is playing with the image of a song and to the right we're displaying uh the like buttons uh we have a picture of a pro content creator uh comments share and so on so um yeah that that's it with uh the ui of the post component the next step is to make this component actually reusable because right now if we check our code we see that everything here is hard coded so we cannot actually reuse it that much because we cannot send some properties to this component in order to display different videos or different descriptions and so on so um yeah right now um yeah the next step is to implement the prop props of the tik tok post component and this way we're going to be able to send all the information about this post from outside and the component will just render it and this way we're going to make sure that our component is reusable and with the same component we can display multiple videos uh just by sending different data so let's go ahead and do that because um yeah and props is uh yeah one very important part of react and react native so i'm gonna try to to explain them by doing that so first of all let's say that we have here we receive a props in the declaration function as parameters of the function functional component right now let me think how to better explain it um let's open the component where we call this post and that's our home screen and right now we're not sending anything and suppose that we will have uh an array list of data that will be coming from server or that will be uh dummy data that we set sorry and we need to send to the post from here this information so let's say that we have uh let me see if i have something prepared not to write a lot yeah here so let's say that we have a post here and it looks like this the post is an object with id it has a user uh who posted this uh tick tock uh the user has an id and a username the post also has a description a song a song image likes comments shares and so on so uh having this data we can say that hey we want to display a post and here is the data that i want to display this is our variable that we called it here it can be for example post one and here we will send post one and here is the name of a property of that component so by uh by this name we'll be able to access uh the data uh inside the post component so the name is post with um like this we open our post.index and as i said [Music] from these props uh we can console console.log them and see what we receive console come on come on come on console.log props uh yeah let's save let's open here the debugger let's clean and yeah here we see a props object props object and the props object has a post field and the post has all the data that we need so we know that our post is inside the props so let's say that we want to take it to destructure it basically we want to take it out of a props and we we take it by the name props post sorry and preacher wants me to write like that but i don't don't like when there is no spaces around but all right so we have our post and we see um where we see here that the post has let's say uh first of all we want to display the name of a creator which is here at the bottom for example david dobrik from props let's say so we'll say that the post.user.username should go here so let's go there find where we hardcode daviddubrick here and say that we want to take it from post dot user dot user name save and we see here david dobrik from props however we don't have add science so we'll add it here like this uh we see that it works so we can delete from props here um and we can declare yeah we can populate all the fields that we have uh the same way post dot description um here will be post post dot song name white autocompletes like that for the uri we're gonna have also we're gonna take this uri of the image pause that song image [Music] and i don't know why we started from the bottom but let's move upwards so the video as well will come from the post and it's going to be post dot video uri and i remember that i forgot to add it there in the data so we'll go back and add it uh and uh profile picture this is the profile picture of the creator so we take it from post dot user dot um yeah again i forgot to add here image uri and we're gonna add it user image dot uri [Music] yeah stats label and this one is number of likes post dot likes this is comments uh post dot comment and this one is post dot shares right let's save and first of all we see that the video is missing because [Music] we don't have it in our data so let me just grab back the video uri from here let's go to our data and say that the post first of all has a video uri if i called it correctly uh word and save should not be empty string video uri video uri did they call it correctly video you are right no no no no video you're right correct yeah i think good will there be airplane yeah there will be the replay so after a couple of hours the video will be processed and published to the um there um yeah the next one uh we see that we don't have a uh profile picture of a creator so here we have we need the image uri and i already lost them they are right david dobrik copy image address paste it here uh good a lot of information come on google oh no no no no i don't like that i will open copy image address yeah right there um we see the image of the creator um i don't see the song name song yeah it's not song name is just song let's let's rename it in our data set song name uh and song image so for the song image i'm gonna add the same images of the creator just not to spend a lot of time on this one save we see it here um yeah i think that everything is displayed correctly and right now our um right now our post became reusable because we could have a different set of data uh let's say post two and this is uh posted by i don't know by the saving and uh the description will be hello there so if we save uh and if we change here we say like hey post render we post the second post we save we see that the name is vadim saving and the description is hello there because that's the only things that i changed in our data set so with this with this setup we are ready for the next step and we are ready to render a lot of videos um that will uh yeah come from our dummy data cool so let's uh first of all um add everything to git git commit uh post component done i think i wanted also to do something with a state let me just check uh yeah i wanted to do something with a state and specifically i wanted uh whenever we press the heart icon i want to increase the number of likes and i want to display the heart with a different color so that's not going to take a lot of time and let's go ahead and do that real quick and after that we can chat a bit with you to see if everyone is still alive so um [Applause] yeah the props uh is everything that is coming from outside world so the props is something that we receive from uh from the parent component something that we want to yeah it's not something that we can control however state is also data but this is internal data everything that uh that we are responsible for so it's not our parent component that is responsible for it but it's our internal data that we are responsible to update we're responsible to display properly so this way i'm gonna declare a state for our post and whenever we receive uh the post from our props we're gonna save it to our state so we will be able to manipulate this this data internally and what i mean by that whenever we will press on the like button we need to manipulate data and increase the post count for example so we'll be able to do that if our post will be stored inside internally in our state so it will initially come from outside from props we'll write it to state and then we'll display the thing that is in our state so let's do that so let's declare const um i'm gonna comment this one here because i'm going to use the same name post and set post use state [Music] initially it's going to be null i'm not sure if i can set initially the value of the props but let's try let's try this dot not this props dot post so are we allowed to do that i'm not sure yeah apparently we are so yeah we save the post in our state and we take the value from our profs that we receive from the parent component we put it into the state and after that we will be able to change this value because it's stored locally in the state so before doing that we need to uh wrap our like container into a touchable uh in order to be able to get the whenever the user clicks so here is the heart um do i want to change from view to touchable let's see if it will work touchable without feedback um i'll go with a different one touchable opacity and i'll import it no it doesn't want to import from react native i don't know why touchable help me write touchable touchable opacity so all the touchables are exactly the same uh technical wise like what they do the only thing is the difference is the feedback that they give so the touchable without feedback it doesn't do anything touchable opacity whenever we press it um it change the opacity as you can see here touchable highlight will highlight the thing that we press so that's good touchable opacity style and we also want that on press and it will call a function called on like press on like press and let's go ahead and implement this function const on like press uh and what we're gonna do we're gonna call first of all as usual make sure that everything is connected and working like let's save and let's press on the like and we see a console worn which means that our presses are properly handled okay right now we need to um yeah we need to increase the post likes and we're gonna do that by um set post and we're gonna set a new post uh and we're gonna set the post as a new object and all the values will come from our existing post and that's how we uh destructure all the values from our post to put it in our new object because we want to change only the likes uh to post dot likes plus one right plus one and right now it's one two three if we press it's one to four and it actually works and if we press again it increases it always one three four eight and so on so let's have another um i'm thinking where this variable will come from uh in the next episode i'm thinking if it will come from um the back end we need we need a variable to that will tell if we already like the post or not so let's probably store it in our state const is liked sat is liked and initially it will be false uh so we need to change the likes based on this um this value so const likes to add will be if if is already liked then we want to add -1 likes otherwise we want to add one like so let's add it with likes to add and make sure that at the end we set is liked to the opposite of already liked value so we just swap it from true to false and from false to true let's save and right now we when we press one time we should see one two four yeah and when we press one more we should see one two three again we're back one two five no it doesn't work uh is liked that is liked like no not like squad but is liked yeah let's save we should see how much one two five we press one two six one two five one two six one two five and what how much we press it will be one two five and or one two six depending on if we liked or not and now let's um based on this uh value if it's liked or not let's display the the heart with a different color so you have a heart here instead of just color white we'll say if is liked then the color will be red otherwise it will be white save press the color is red the color is white and that's my friend how we manage internally state and how we implemented liking and unliking the post yeah using uh internal state of a component so right now we can say that everything is done for the post component at this moment let's go ahead and get likes or let's say implement likes of the post okay uh we are very close to the end let's see what your guys saying in the chat how are you doing guys are you still alive are you still following uh good will there be a replay yeah there will be a replay and it usually takes a couple of hours and hours until youtube processes the video and it becomes available i need to get drink some water we are using tiktok api no we're not using tiktok api uh right now we are develop developing only the ui and we are using dummy data but in the next uh video we'll develop our own uh so it's going to be like a full stack application working that you can change the design and go ahead and continue and publish it to the market standalone alexandra hello why the support feature isn't available in my country you're the only youtuber i would donate your content deserves more attention hi from moldova hi hi alexandra uh yeah i know that it's not available in all the countries and but yeah thank you very much for the support hello from nigeria hello you can add mysql database to the project uh no we're gonna add a bit more interesting stuff which is serverless and um yeah more modern technologies from aws so join the next week and we're gonna do that um yeah so oh let's go for another uh sprint hopefully we have less than um one hour let's let's let's try to do it in one hour so let's go okay once we have our post component done uh we want to display multiple posts in a in a in a vertically scrollable list so uh we could scroll through different posts from different creators uh the same way as tick tock does and to do that let's go to the next slide we're gonna implement the tick tock feed the tik tok field will display a list of posts and one very specific thing about tick tock which i really enjoy is that when you scroll the feed the post is snapping to the view it's not like a usual scrollable like instagram or twitter where you scroll and the scroll is like infinitely going but it's like snap and uh just centers of the component into our view so that's a that's something that uh i really enjoyed and that's probably the first time that uh i implemented uh such things so let's go ahead and implement our feed uh first of all let's um let's close our post because it's done and should we create another component for the feed or implement everything in our home here yeah let's go ahead and uh implement the feed directly in our home screen because we will not have anything else there right now so in the future we can refactor it so the first thing is we will need some data let's create a directory uh data data and here let's create a file posts dot gs export default and we're gonna export an array and the array will be is gonna be an array of uh posts so we have do you hear some music hopefully not uh so we can take the first post from here we can add it as an object here and we can just duplicate this one a couple of times until we have some post to work with now let's just i don't know um change the name so we know that it's actually working so test and the last one will be user free uh yeah right now we have data about free posts uh that's probably enough for us to to get started and to understand if it works or not so let's save uh we're gonna delete the post one from here and import our dummy data as like this um where where are we one more data yep data and posts so whenever we need to uh render a list of um of items uh we are using a flat list so let's import our flat list and instead of a post here let's declare our flat list so the flat list has a couple of very important properties and the first one is data like what data we want to display the data that we want to display is the post post that are coming from the dummy data the next thing that we need to tell the flat list is okay you give me a list of data how um i hope that the connection is good so uh the flat list is saying like okay give me a list of data uh how should i render each one uh item of this data so each post how should i render it i have a data but you need to tell me how to render it as well so for that we will say like render item uh and here we'll receive the item like this or no like this yeah we're gonna receive a item and for each item we want to display a post component that we recently created so the post will be post dot item let's not call it item but let's call it post so we're gonna render we're gonna render a post for each item in our data set so i think like that uh and that's a minimum that you need for a flat list to work the data and how you should render each item separately so let's save uh cannot read property image uri of undefined is it like this let me just uh double check save yeah uh we need to destructure the item from the object from from the first parameter that we receive in that function so um yeah we see we see our posts in a vertically scrollable list we can scroll through them everything is good however we see a warning here encounter encounter two children with the same key p1 so um that means that yeah the idea of two of two or more posts are the same so let's change it to 2p2 here and this is post free let's save and right now it works um yeah i'm it's good that it knows that uh it should take the id as the key because previously it didn't know when it was you had to tell it specifically like by d is the key of each element but right now yeah we don't need the key extractor that's what i'm saying because previously we needed to define a key extractor but right now we understand that yd is the key so that's good okay what are the next the next steps that we need to do let's see so um one thing that uh i don't like is that we have a scroll bar here at the right you can barely see it probably but it's there so to hide it we're gonna send the show shows vertical scroll indicator false save it's gone yeah it's not there so it works good however uh this is a style of a flat list uh similar to instagram or twitter where like you scroll and you you stop anywhere and you see but that's not the case for tweet uh for a tick tock so for tick tock we need to snap every post to the center of the screen so let's uh to do that first of all we need to send a snap to interval property and this will this uh will tell here we should send the dimension the height of each separate post so it will know um like for example for the third post where to put it on the screen so our dimensions our height of the post can be seen here so it's dimension height minus 48 so this is it's our well we need just to import dimensions from uh react native uh okay the next property is snap to alignment and here we can say three properties start uh center or or end start center or end and this will tell like uh what part of the post should it align so let's go with a start uh the next one is deceleration rate and deceleration rate has two value you can send two values there either fast or slow where is it deceleration rate either fast or normal and we want a fast deceleration and um yeah like that yeah because this will define how fast the post will move up and align because if it's slow it goes very slowly i can show you a bit later and that's the three the three properties that we need to to send in order for the snap to work so let's say we see our first post here and if we scroll that's the first one if we scroll down we see that the post align perfectly uh in the middle of the screen and that's just the same as tick tock does so for example if this one was normal deceleration rate the post will move very slowly you see like very very slow so we that's why we need here fast so yeah guys that's uh that's everything uh it took us to render a flat list of posts and yeah as you saw like once the um yeah once the um post component was done we could reuse it and display it into a flat list uh just by sending like just by writing a couple of lines here so that was very very easy the only thing that i see is that the flat list has some margin at the bottom and this is uh the safe area view so basically means that the flat list tries not to render anything uh in this view that can hide like that button of um over iphone so in that case we would need to adjust our height so it won't be 48 but i don't know um 68 how much is there 68 i think it's too no no no no i think it's good yeah let's go with a 68 and change it here to 68 as well so right now it displays the whole post no no i don't like it it's not 68 it should be even 78 save um 80 yep probably 80 80 is better now here save come on re-render a reload uh so yeah right now it displays pretty well the bottom is within the screen the top is within the screen everything is perfectly and when we scroll it snaps to the middle of the screen the same way as twitter does so yeah that that's it with this step you guys here have power did you drink water are you hydrated because i didn't drink water and i don't have a proper a proper cup all right guys uh so what are the next steps the next steps is the interesting steps is the bottom navigation and the whole navigation system of application because currently as you see we have only one screen that is displaying our home screen like our feed however in tik tok in yeah in tiktok we have a bottom tab navigator and we have multiple screens uh right here i'm not gonna implement all of the screens but i'm gonna implement the bottom tab navigator and you'll be able to switch from screen to screen if you're interested you can um yeah follow along and implement other screens but that's not something new and uh everything that i presented during this live stream you can take this as an example and follow along with implementing bobber screens however navigation is something new and something uh quite complicated i would say but we're gonna take it step by step and implement uh everything that we need so the first thing um yeah we were gonna use the react navigation uh five for this so before um at the beginning we need to install the dependencies and we're going to install react navigate navigation native and also react navigation bottom tabs to be able to display the bottom tab navigator like this so let's do that and discuss it later before that let me just commit feed that list okay so let's install the rock navigation and bottom tabs uh yep and after that we're gonna need to install all the dependencies that uh rack navigation depend depends on like example for example rack native or animated gesture handler and so on more information you can find on uh react navigation uh getting started guide it's pretty self-explanatory and we have a lot of examples so yeah the next step we're gonna add all the dependencies that um it needs then we need to install the pods and that's only for mac and ios if you are on windows you don't need to do this step and to do that we're gonna write npx pod install ios yeah uh the pods has been installed next step next step is to import uh react native gesture handle in our main file like main app.js because if we don't do this step uh the application might work in development but can crash in production so make sure to go into uh app.js and at the top here we need to import react a native gesture handler and that's it that's all we need uh and the next step is to start implementing the navigation container and all the routes that we will have into in the application so let's usually um a best practice is to keep all the navigation into a separate folder and i i will do that here as well uh navigation and let's declare the index.js right yes and let's import as usual react [Music] const root navigator navigate navigation right is a new component return and we're gonna return the navigation container and we need that uh we need to encapsulate all our application in this navigation container uh and that's what we're gonna do here so we're gonna put it here navigation container and everything else will be here so let's try to import it um not like that but import from react navigation native and here we import navigation container right so yeah this is our navigation container and we're gonna export it export root navigation um and in our root navigation we need to create we need to create them our root navigation that we will use there and that's gonna be um a stack navigator so for more details um there is good documentation about the stack navigators and different kind of navigators on uh react navigation create stack navigator um yeah we need to install and we need to install this stack navigator let's do it here and yeah very bad definition so we need to import the create stack navigator method and this will create a new stack navigator for us we call it like this we initialize create stack navigator and then we declare overall routes in our root navigator so one will be our home route uh or actually it's to be bottom top navigator and at the moment that's the only route route that we have in future we're going to implement in the road route other pages like profile or something like that everything that doesn't need that bottom top navigator but for now we're gonna have only one so i will copy because i'm too lazy to type i'll paste it here i will remove everything from here and yeah right now let's just import our home from the screens let's save and make sure that it still works does it or it doesn't component something weird oh yeah because we never imported our root navigator we need to export default so in our gs instead of rendering the home here we need to render the root navigator um import navigation from uh source source dot navigation and yeah it will take the index file and we will render it here save refreshing it might crash because i'm not sure if we ran the application but it seems that it worked requiring module no it didn't yeah we just need to rerun the application because we installed new dependencies let's go someone is asking could i add or use firebase with your project yeah definitely like we finish with a ui today and you can continue and integrate with firebase backend but we are uh if you're yeah we're gonna implement aws backhand during the next week so it's pretty similar the flow of aws back and with amplify is very similar with firebase but in my subjective opinion is much better because it's much scalable and yeah if you learn aws you'll have much more opportunities in future so that would be a good idea for just to give it a try and see if you if you like aws all right we see our home here what else we see we see our home but our component stack screen home do why it doesn't display its home but why it doesn't display the component um first of all i would like to set some options to hide the title show title pulse not exactly sure if that's how you do that save screen options i guess screen options save oh stack navigator hide type header oh it's header it's not title i guess it's hide header save is it just options hide header in this one uh screen options header shown vadim if you can remember a couple of words that would be very helpful yeah that's good but i don't see them [Music] the actual home component do you know why what do you think let's have a look here let's call console warn home yeah it actually gets cold but but why let's comment the flat list is it problem with a flat list and here say text home text nope nope nope why are you not running navigation navigation so our application has a status has a safe area view actually see that the status bar very very interesting safe area view is outside navigation container that's that's okay something with this safe area wheel yeah let me just uh try to uh okay i see home there [Music] it's something about the safe area view and i think i know and that can be fixed with some styles so say flex one to display it uh full screen and yeah right now we see the home uh we can go back to our home and ctrl z back to what we had because the problem was with safe area view we don't need this come on save yeah our home is displayed properly the next step that i want to to do is as you see the bottom at the top is white right now but if we look at them at here i don't think you can see it somewhere but it it is actually black so to do that in our app.js for our safe area view we're gonna uh define a background color which will be black so it made the bottom and the top black however right now we cannot see them the clock and the battery indicator because our status bar is set to dark so we need to make it light light content save right now the clock and the battery indicator are in white on the back background and it looks really really good so uh that's it with a stack navigator and the stack navigator i mean the stack navigator for for our root navigation will contain um yeah all the all the root screens so for example i don't know a post page or a page that we will go for example will press on this creator and it will open a different page so that's why we need a separate uh root navigator and right now let's go ahead and implement our bottom tab navigator yeah here we we need this bottom tab navigator to be displayed at the bottom so let's create a new file for that uh home bottom tab navigator a long name but it's very clear so let's import react from react as usual now let's import let's open the index um from our uh react native navigation application bottom slash bottom tabs we need to import create bottom tab navigator yeah as you see there these processes are pretty similar to different styles of navigator for a stack it does the same like constant equal to create stack navigator and the same goes here const tab equal to create tab navigator that's how we will create this tab navigator so uh now we need to declare our component which will be home bottom tab v gator i already regret setting such a long name but render and here not render return video that's some memories from uh class based components oh a i don't miss class based components at all so let's export this component default home oh this is some uh good advice install react native snippet then type air and see it will create all components with screen oh okay that's something that i might look into because i spend a lot of time typing the boilerplate so here let's say we will declare a tab navigator and in the tab navigator we'll have a couple of screens and the first one tab screen and the first one will be our home screen or our feed actually feed or home field or feed or home how do you want home okay component and here we'll declare the home component the home screen i mean import from screens like this okay so let's have a look at what other pages we have we have home search upload inbox and profile if i didn't forget everything no no no no come on we have five of them the second one is search the next one is upload uh then messages inbox inbox and the last one in our tab is a profile we're going to leave the component home for everything because we don't have any other screens created we just want to display this navigation so in our index for our okay for our um yeah for our home stack navigator here instead of rendering the component home we will render the uh home but um tab navigator let's send it like this and let's save and let's hope that it still works yep it still works we see different tabs home search upload inbox and profile they're displayed properly but we need to adjust their styles so yeah let's go ahead into our home bottom tab navigator and adjust some of the styles so the first thing i want to do is to say that i want to give some tab bar options and the first one is the tab style because our tab style should have a background color of zero zero zero fully black like that then i also want to say that the active tint color active tint color currently it is um displayed as blue but i want to say that the active tint color should be fully white because if we look here the active tab is displayed as white and vowels is displayed as gray so this is fff why don't like it come on come on come on uh prettier fix current file uh let's save and yeah right now we see that the colors changed and their display properly the only thing is that we need to display some icons here so to do that i'm gonna split up a bit this into separate lines because we need to send options prop here and with for the top bar icon uh icon uh bar icon is a function that is gonna be called in order to render the icon for vista bar so here you you can declare directly here a component or you can import it from from a file if you want if it's something more complicated and for for this you can render anything like a an icon you can render a image you can render a text yeah anything at all also it receives color as a property as a prop [Music] so we will need to uh render some icon here so the first one is home let's go ahead and search a home icon oh yeah this one is okay in typo we need to import it import and from vector icons and typo and we render it here the name of icon will be home home sweet home size um let's say 24. uh and color will be the color that we receive from these props and not colors but color blur and that's it probably let's save uh and typo is not defined in typo okay now we see our home icon here so let me just check if the size yeah i guess besides i guess the size is pretty okay maybe maybe 25 just a bit bigger that's what she said uh so let's copy and paste these options to all of our screens come on what do you want what do you want oh like that yeah so uh okay okay okay okay okay okay let's copy the options and we we're gonna just change the name of the icon or them so for the plot it's a bit different because where we will need to display a custom icon because it's we i couldn't find it in uh yeah in the uh vector icons because it's yeah it's very accustomed to to tick-tock so let's display it for hours and that vendor will display the custom icon okay save everything now is home we need a search search doesn't typo have search no okay and design search one and design and design for the search we change it to indesign search one save good then we need a inbox or a message something like that how does it look how does it look very custom i don't think we'll find but we'll try to be as close as possible because it's something very minimalistic something like that but is it um no it's like that yeah i will take this one i like it and it's from material community icons okay material community icons come on or the inbox it's material community icons name message minus outline yeah that's uh what i wanted and for the profile it's again very minimalistic person uppers person just the outline just outline where where i don't like anything so far these are quite close let's say profile profile no no no no no person yeah i will take this ios person from ionicons or just person outline yeah and all the icons are from different sets and we have so many imports so the profile e onicons save perfect so right now we can move throughout our different screens and there are actually different screens uh we're just rendering the same component if i would go to and create a separate component like a dummy component you'll see that it's a completely different page the next step is uh for the upload we need to two to two to two to two to render this icon so i went ahead and i have it somewhere prepared like the designs yeah it's here i'm gonna import it into our source assets and images and i'm gonna put it here will it work come on assets images and somewhere here yeah all right we have it here so uh let's import from react native image because we're gonna display it as a simple image uh image from react native and where is it upload upload upload here so options yeah it's the same thing like tab bar icon even though we are displaying a completely different uh not an icon like an image uh image source uri no no not your right we're gonna have to import the plus sign from our assets import plus icon from assets images and plus icon and we can send it to our image here and some some styles for um let's say the height will be 30 pixels and we want our image to resize and display it fully like um we we wanted our video to be displayed with a resize mode of cover in order to cover all the space but for the icon we wanted to display contain to display the whole icon so not to crop anything from it so let's put it like that we will not need the color let's save and hope that it works which i don't see hey will you work come on plus icon oh it shouldn't be an object yeah right now it is displayed properly there uh the only difference is that here we don't have a label for it so to prevent displaying the label we're gonna call something like tubber label and it's again a function that will return the label to display so we don't want anything to display for the label save and the label disappeared the icon was put in the middle we can even increase the size a bit yeah i think that's uh that's good good enough um yeah guys that's uh everything that we needed to do for our navigation so we see that our home navigation displays them yeah our feed and if for example for search i create here a very fast dummy component um text will be uh search do i have search text here and in order to show you that it actually works if we go to the search we see that it's a completely different page and it's called like we see here search if we go back to home we see the home page so yeah the only thing that we need to change because we didn't make it dynamic is the style of a post and here [Music] because we added base bottom top navigator it pushed it made the screen size uh the display size a bit smaller and we need to subtract here i don't know like 130 save yeah now it fits so 130 and you see that it doesn't display properly it doesn't snap properly if we don't change it also in the flat list and the flat list is our home screen and here -130 save right now it snaps perfectly we can like different posts and we can see that this is liked but this is not liked yet we can like this one we can go back and unlike it and yeah everything is ready for uh the next episode to go and integrate everything with a back end so we are done with our navigation yeah maybe it's a bit more complicated but i think if you take it step by step and try to understand or to research more if you have some issues then it's possible and not that complicated after all so yeah how are you doing guys are you still here i see that a lot of people are still here how are you all still alive after three hours let's uh have a look at what people are saying can you also oh sorry can you also show us faded header effects for the stack navigator and also animations and transform when sliding back to a previous screen yeah but some interesting uh features i'll think about that i might do a separate video on that but i cannot promise anything right now so why we get white color above top bar i think i answered that uh yeah by setting the background color of the safe area view to black or to any other color that you you want and damn it dude you are making me feel so small with your hard work you're putting up in here yeah i don't feel intimidated i i struggle a lot myself during the day so yeah it is what it is but if you dedicate your time and actually love your what you're doing like it's not that far away all the office reference um the thing is that i never watched office so what what was the reference for the office that i met made non-intentionally uh hi are you planning to do stream on web up cloning using react uh probably not not anytime soon i would like to still focus my time and everything that i'm doing on this channel uh to react native in aws um until like i i get a good base of followers and after that i can expand and do multiple things because during the day i work with a lot of technologies react including and not just and like yeah like express mongodb and all that stuff but i don't want to mix everything like let's stay focused a little bit more does react have any library for applying effects in videos that's something that i didn't research yet so that would be interesting uh project to check it here when we will implement uploading a video so yeah i will come with details um hello from brazil you're amazing congratulations thank you very much hi uh hola i work with my co-founders are speaking spanish yeah i don't know why i told that i really i enjoy i'm enjoying your stream uh let me give some tips use react native floating action uh button it will help you to take photo video functionality um i don't think i understood what you meant but for the floating button i don't i don't know like where we need it here so um yeah i think that we can call it a day uh and yeah if you have any questions uh yeah go ahead and ask them now i will ask for it right away or better join our discord channel link in the description and ask their questions and i will help you there or even our community is very helpful everyone is helping each other so make sure to be part of um of our gang there also you can ask down below in the comments if you are watching this not during the live stream hi alexandra you're still here are you planning to use any state management libraries like redux redux x state um no probably for this project i'm not gonna use redux um we're gonna yeah implement only the backend queries uh from the graphql api and yeah well we'll stop there because if i get into all the details it will take me like i don't know like five ten live streams of two to three hours and i don't want to do that i want to keep them shorter so everyone will be able to to join and follow along [Music] yeah because our attention span is very very small and also that's uh that's how i like doing because i always like look ahead for the next project and i start it and i already think about what i'm gonna do next so i always need to switch in order to be productive when i should use redux so redux you are using uh to manage your global state uh because without redux you have like component-based state but let's say i don't know to give you an example for example we have here the number of comments and this state is managed currently in the post component and whenever we press on this comment we can open up a new comment page and there you can imagine it's a completely different component in a different part of application and you write a comment there so in order to update this digit to increase it by one because you wrote a comment you would have to communicate like with with a lot of components and to send data back back and forth like like very um very deep and that will make it very hard to manage the state and that's why we need a global state management and it's a place where all the state is stored for all the global information for example everything about the post will be there we display the number of comments here and in completely another part of application we increase that number and it will be updated here automatically because we are communicating communicating with the same global state that we declare so that's shortly about global state management and redux uh will you make an airbnb clone that's a very good idea i'm not sure if i have it in my to-do list but yeah i'm i will add it definitely thank you very much uh so should we call it today i think this is the first stream when i didn't went to the toilet not even once in three hours so you can imagine that i really need to go there i'm gonna drink some more water so guys uh yeah that's it for today uh join join me next week on friday the same time and we're gonna continue this build and we're gonna implement the back end and our application will work with the api we'll store the data in a database we'll implement authentication uh registering signing up if we'll have sorry if we'll have time we'll implement even uploading a video so it's gonna be really interesting and i'm really looking forward to to the next week's episode and i'm gonna wait to everyone here so thank you very much for watching till the end and special thanks to lucas george and daniel for donating i really appreciate you guys and uh yeah you made my day i'm gonna go and uh probably grab a beer and celebrate my first donations so um yeah guys as usually stay hydrated take care and write clean code bye bye guys my name is jeff

Channel: notJust․dev

Views: 45,716

Rating: 4.9739585 out of 5

Keywords: vadim savin, not just development, notjust.dev, react-native tutorial, react native ui design, react expo, react native live coding, live coding, react native aws amplify auth, react native auth, javascript, typescript, react tutorial, build a tiktok clone, tiktok clone react native, tiktok clone tutorial, aws amplify, react native, react native tutorial, javascript tutorial, programming, tiktok clone, react native clone, react native app, react native for beginners

Id: TGg9WNLUZPc

Length: 180min 5sec (10805 seconds)

Published: Fri Nov 06 2020