Getting Started with React Navigation 6 | Stack Navigator Tutorial

hey guys welcome to my youtube channel today i am going to show you how to implement react navigation version 6 in your react native app and here we are going to make a layout similar to this it's working properly on both ios and android devices and i got the inspiration for this layout from this dribble post so shout out to this person notary on dribble sorry i couldn't pronounce the last name in this tutorial we are going to create just the first screen and when we click on the button we will go to another screen which is very basic if you want me to create other screens also then let me know in the comment section below i will try to incorporate these screens in other tutorials of this tutorial series here you will learn not only about react navigation but also adding custom fonts and svg to your app and how we can get rid of default header that comes with stack navigator and this beautiful ui so if you are a complete beginner in react native then also this tutorial is for you and as you have already guessed with this tutorial i am starting a new tutorial series on react navigation version 6 as i have done for version 5 earlier you will get the link of it in the description as always and also i will link it in the i icon of this video so if you are interested in this kind of tutorial then hit the like button subscribe to my channel for more tutorials like this and without wasting any more time let's get started with the tutorial so here is our project and this project is created with react native cli and here you can see the default screen present here i have just added this icon package here which is called react net vector icons if you want to know how to install this package then you can see my previous tutorial where i have shown you how to do that in this tutorial i am not going to show it but in this tutorial i am going to show you how to install custom fonts as here you can see we have the assets directory and within assets directory i have this fonts directory and within this fonts directory i have few custom fonts present which i have downloaded from google fonts so in this project i am going to install these fonts but before that let me create the ui which we are going to create so for that here i am going to clear out all these things so we don't need this thing and similarly other things also and here i am creating app component and in this component right now i'm just returning this view let's save it now we can see that our screen has been updated so here first get rid of these things which are not needed we will require the safe area view view then we will require text and we will require touchable opacity to create our button now here within this view let's provide a text so first i will provide this text now save it after saving it here we can see the text is at the top so we need to wrap this thing with a safe area view now you can see that it has been moved little down right and we can see it very clearly now for the safe area view let's provide some style and here first we will provide flex 1 then for justify content i will provide center and for align items i will provide center as well and let's provide a background color which will be white color now save it now after that we can see that this text has been moved at the center of this screen now we need to provide some styles for this text i will provide font size 30 font weight will be bold and for the color of it i will provide this color now save it now after this let's create the button this button so after this text let's create the button so it will be our touchable opacity and within this touchable opacity we need to provide the text and the text will be let's begin and after this text we have this icon so here i will provide the icon and as i have already imported this material icons so i am going to use it so here it will be material icons and the name of it will be arrow forward eyebase for the size of it i will use 22 pixel and the color of it will be white color now save it so here we can see the button but we cannot see the icon let's change the color so here it is right now let's provide the styling for this touchable opacity so here first the background color will be this color and let's provide some padding now let's provide some width and width will be 90 and for border radius i will provide 5 pixel and let's provide flex direction of row and justify content will be space between so that this text and this icon will be positioned at both of the extreme sides now save it so here we can see that it has been aligned properly now we need to style this text so for this text let's provide some style here i will provide font word bold for font size i will use 18 pixel and for the color of it i will use white color okay so it's looking good now let's install these custom fonts to install these fonts first we need to create a file called react native dot config dot js and here we need to provide this module dot exports and here for the project we will have this ios and android but here we will not provide anything if we need to do any customization for specific platforms then we can specify those things here for their respective platforms but for our project we don't need to do any customization for specific platforms so we are not going to provide anything in this platform specific sections for the custom fonts we need to specify assets and here the assets will be the assets directory and then we have the fonts within the fonts directory so this is the asset which we want to include in our project now save this file after that let's type this npx react native link command in your terminal and hit enter so it has been successfully linked to our project now we can use these fonts in our project so here i will use font family this roboto media metadata so i'm copying the name of it and using that here in font family now save it okay it's showing unrecognized font family after providing these assets we need to rebuild our project so i am closing this metro bundler ui process now let's run this project for ios again so if your ios project build has been found like this then you need to open your ios project this xc workspace project in xcode and then you need to click on your project name and go to build phases and here at the bottom if you have these things then you need to just remove those so click on delete now close this and now let's try it again for android you don't need to do anything it will be linked properly and it will work fine but i have seen that for ios it's having this kind of issue now let's again try to build our project for ios now we can see that our ios project has been built successfully and here we can see the font has been changed for this text right and similarly for this text i will provide fund family this inter board so let's copy the name and paste it here now after that we are left with the svg icon so here at the middle we need to provide this svg image and we have that available within our assets directory and to use this we need to install react native svg package and react native svg transformer so i am opening these two side by side so first we need to install this react native svg let's copy this command and use it here and then we need to use this react native svg transformer so let's copy it and here npm i then the package name hit enter so it has been installed now then we need to do some customization so here for the react native 0.57 or newer versions we need to use these codes in our metro.config.js file so here we have this metro.config.js file after these codes i will paste those codes now save it now after that we can use the svg by importing it so let's import from assets then our svg file name now we can use this gaming image as a component so after this view let's use this gaming image and let's provide with 300 and height 300 as well now save it okay now again we need to build our project let's run this command okay it's showing the error because after installing it we need to do the bot installation for ios for android you don't need to do anything so here go to ios directory and then run this pod install command now it has been installed now go back to our root directory and build our project and now it is getting failed because of this thing i need to open this project in xcode and go to this build phrases here we can see that it has been created which we have deleted previously so we need to delete it once again and now let's build it so here now we can see that our svg image has been present right now we need to change some layout of it we are going to rotate it little bit and we need to push this text at the top and this button in the bottom of the screen so first let's tilt the image for this let's provide this style and here for the style of it let's provide transform then rotate and here i am going to provide minus 15 degree now we can see it has been tilted a little bit now let's provide a wrapper view for this gaming image and let's provide some style for this view first let's provide flex 1 then justify content center align item center as well now after saving it we can see that this both items has been post at the top and the bottom now let's provide some margins so here for the text i will provide margin top 20 and for this button let's provide margin button 50 so now it's looking perfect as for our design so now we are completed with our ui now we need to focus in react navigation version 6 and for that we need to go to react navigation official website and we can click on this read docs button and here we have all the information related to it so first we need to copy this command so as i am using npm so i will use this npm command now hit enter now after that we need to copy this command as well hit enter now we need to do this pod installation for ibis and by doing this for installation i think we will have same issue as we have faced earlier let's see if we will have any build issue then we need to remove that from build phase let's see now for the android we need to copy these codes in our main activity class that will be located in here so here we have this main activity now within this class we need to provide these codes and we need to import this thing at the top now save it now let's see for ios okay it has been failed so we need to do that again so you can do it like this first you can install these things and later you can install the custom fonts uh because for the custom fonts we need to delete these things because only for custom fonts i have seen that this problem is occurring for ios only it is not for android so if you are not developing for android you don't need to bother about it i am just showing you all this process so that if you are facing any problem then you will have a reference from now on i will not show you this thing as i have already shown you this issue and the fix two times more so this is the last time i am showing you now let's build it again okay so it has been built successfully now we need to install the stack navigator and for that we need to copy this code and paste it here so it has been installed now we can use it in our project so for that first we need to create two screens so here we have already created one screen so i'm changing this component name from app to main and here i'm creating this app component and after this main component here i'm creating another component called home and for this home i am just simply providing a view and a text so here it is a text called home screen and for the view of it i will provide flex 1 justify content center and align item center as well now here let's return home component to see how it is showing so this is the home screen now we are going to provide the navigator we will go to home screen from this main screen and for that we need to import these things so i am copying it from here here i am importing navigation container from react navigation native package and from native stack for the stack navigator i am importing this create native stack navigator and we need to create the stack navigator by providing this code now within our app component first we need to provide this navigation container so our complete app will be wrapped within this navigation container and then we can create the stack navigator by providing this stack dot navigator and within this navigator we can provide stack dot screen so this stack means this constant and we need to specify the screens so here for the first screen component i will provide main component and i will provide a name as main and similarly let's copy it for home let's give a name of home now save it okay so here again we have another issue let's see what is happening here let's see if we can get rid of this issue by rebuilding our project okay so after rebuilding our project we can see that our app is running perfectly fine now we need to go to home screen after clicking on this button so here for this main component we will receive this navigation prop after using it as a screen in our stack navigator now we can use it here for this touchable opacity on press navigation dot navigate and we want to navigate to home screen now click here so we are going to the home screen and we can go back so this is how we can go to another screen and go back now let's get rid of this header so here for this stack screen we have options and here for the header we have this header shown property and for it i will provide false so now our header has been gone so now we can go to our home screen and go back to our main screen in which we don't have the default header so this is the tutorial guys this is the first tutorial of this series i hope you have learned something new from this tutorial if you do so then hit the like button subscribe to my channel for more tutorials like this and very soon i will come up with next part of this tutorial series so stay tuned for that and if you are seeing this video in future then i have already posted those videos and you can check those videos now from the description or the link provided here and share this tutorial with your friends and colleagues if you have any kind of suggestion for me then you can let me know in the comment section below and i will see you guys in my next tutorial in the meantime have a great day goodbye

Channel: Pradip Debnath

Views: 14,487

Keywords: react navigation 6 tutorial, react navigation v6, react navigation 6 stack navigator, react navigation stack navigator tutorial, react native stack navigator, react native stack navigation v6, react native stack navigator hide header, react navigation version 6, react navigation tutorial, react navigation tutorial for beginners, getting started with react navigation v6

Id: FWwKjxSgLl8

Length: 18min 49sec (1129 seconds)

Published: Mon Sep 20 2021