Move From One Screen To Another In React Native | React Native Login System #3

[Music] hello there in this episode of cedar point code we will look at how to set up movements between the screens of our expo react native application using react navigation this is the third part of our expo react native login series so let's get started by visiting the official documentation and installing a few packages [Music] so first of all we installed the native version of react navigation so we copy the command ahead to the command line once the installation is complete we install some extra dependencies [Music] so react navigation enables movements between our screens by making use of stacks so let's say i have one screen currently being displayed and i request for another screen that is i click on a link to another page the other page i requested for is just put on top of the current page that i'm viewing so whenever i want to go back the page on top is just taking off that is how a stack works and reacts navigation does that so to be able to implement the work cleanly we will create a directory and call it navigators that's why we'll be keeping our stacks inside the navigators directory we will create our first stack and we'll call it through stack now to be able to implement the stack that we are talking about we need to install another package from react navigation so we copy the command and head to the command line to install it [Music] [Music] once the installation is complete you can go ahead to start our application again [Music] now to get started let's copy some code from the documentation [Music] so copy the two imports that we have here and paste it in the rootstack.js file [Music] also import react [Music] now use the quiz stack navigator to create a stack [Music] i will create a rooster component [Music] now inside the roof stack we retain the navigation container without a navigation container our movements between the screens will not work now inside the navigation container we use our stack here to create a navigator [Music] now this stack navigator will take the screens that we have asset children so let's go to the app.js file and copy the screen's import that we have [Music] now we use the stack variable once again to create a screen [Music] now the screen will have a name and a component so for the first screen we'll call its login and pass in the login component [Music] and we'll do the same for the rest [Music] now once you create a stack navigator and put your screens in them you automatically be given a header by the stack navigator but in this case we want our work to look as it is without the header but before we can make any changes let's display the output of our navigator so that we can see what to change so inside the app.js file let's import the rule stack [Music] now we place the sign up component here with the root stack [Music] and so we can get rid of the screen inputs [Music] now we have an arrow here because we didn't adjust the path to the screens in the root stack we are supposed to come back a directory first [Music] now it looks like we have to restart the metro server before we can see the output of our navigator so let's do that [Music] also note that in expo react native development you might face less challenges when you develop using the expo go up on an actual device now once we get application to run we see that the header we are talking about is displayed here but as i said we will change the style of the header because we don't want to display the login in the header but we want to get access to the back button whenever we move to another page in the header so let's style it differently but if this is the look that you are going for you can go ahead to keep it and make changes to it so inside the stack note navigator component we apply some properties so give it a property of screen options [Music] this will take an object first of all we want to make the header transparent [Music] also want to adjust the color of the content of the header so before we can do that we need the colors here so let's import the colors [Music] now let's apply the styles the things color will affect whatever we have in our header this should be header style instead [Music] by applying the header title we get rid of the title in the header lastly at the left side where the back button will be showing we want to apply some pattern [Music] the application has closed but once we finish we open it again now the stack navigator can also take another property which is initial route name and this will determine which screen is supposed to show first in this case we'll set it to login [Music] now let's open our application again now we see that the header is totally transparent and we see nothing at all we only see something when we visit another page and the back button displays now inside the styles.js file let's add some more padding to the top so inside the styled container instead of adding 10 to the padding top let's add 30. now for each of the screens that we have in our stack navigator it will end up receiving a navigation object as a property this navigation object can be used to navigate between the screens so let's visit the login screen and set up our first movement [Music] so we take it in as a property [Music] once we have done that we can set up navigation for the login button when someone clicks on login we want to move to the welcome page for now i'll move to the welcome page without any form of authentication we'll do all that later so inside our submit function of the formic component we will use navigation here to move to the welcome page [Music] it has a function on its code navigate and will pass the name of the screen to it in this case it's welcome [Music] i will do something similar for the sign up text that we have here so let's copy the navigation down navigate so you pass it as a property to the test link we'll use the on press here [Music] but this time around we'll be going to the sign up page [Music] now let's try it out when we click on sign up we see that we have moved to the sign up page and we have our back button here [Music] now when we click on login we see that we are moved to the welcome page now there is supposed to be a back button here but we set the color of the header content to be dark so let's adjust the color of the header content for only the welcome page we will do that in the rootstack.js file so for the welcome screen we'll pass some options [Music] let's also take an object and we'll pass header tense color to it but this time we'll set it to primary [Music] once you do that you move to the welcome page again you see that now the back button is showing and is white and this is exactly what we want now we want to set up the navigation on the sign up page as well so let's do that [Music] uh [Music] now for the value of the button on the sign up page i forgot to change the text to sign up so let's do it now now let's go back and visit the sign up page we see that that is working as well now when we click on the logout we want to go back to the login screen so let's set up the navigation on the welcome screen as well [Music] and now we see that that is working as well so we've been able to set up movement between the screens of our expo react native application using react navigation in the next episode we see how to connect our login frontend that we have here to a back-end api and that's all for this episode thanks for watching please leave a like and subscribe and i'll see you in the next episode [Music]

Channel: ToThePointCode

Views: 4,783

Keywords: how to move between screens in react native, moving between expo react native pages, moving between react native pages, how to use react navigation in react native, react native transparent header, react native tutorial, moving between screens in react native, stack navigation react native expo, how to navigate between screens in react native, moving between two screens in react native, react native login system, move from one screen to another react native

Id: OGRR79IIW7g

Length: 14min 58sec (898 seconds)

Published: Tue May 04 2021