Hi and welcome back.
Today I would like to show you how to use
this Stack Navigator that we've set up to actually create different page than
the home screen and be able to navigate to that page.
Here we have our navigation container
and then we have main navigation, which defines the only screen that we have
available so far, and this is the home screen.
To create another screen, we're going to have to go to the screens
folder right here and create a new directory.
I call this profile, so you can create this one as well.
And inside here, let's create profile.js file,
and let's make sure to do some
initial setup such as importing React from React.
We're also going to be needing import of the save area view and let's import
text as well because we're just going to place simple text on this page.
Then what we want to do is create constant
for the profile and make it a functional component inside, which we're going to use
safe area view along with a text and it's going to say, welcome to profile page.
Let's save this and now let's make sure that we export
default profile so that this is usable on another screen.
Then what we want to do is go to the main navigation and copy this line and paste it
one more time and make sure that we have a new unique route called profile.
Here we're going to create profile and value is just going to be profile.
Then what we're going to do is make sure that we use the profile here and we are
going to import the profile component as well.
Great.
Now if we save this, we should have no more errors.
Then what we want to do is use this
profile screen to somehow be able to navigate to this page.
I am going to use this message icon to navigate to profile page.
I know that message icon shouldn't really take you to profile page,
but the main idea right now is that I show you how to use the navigation in general.
What we want to do is go to the home screen here.
To use the navigation on a screen level, what we can do is make sure that we grab
a prop that comes with every screen that's available inside the task screen.
So if your screen is available here,
it's going to come with the navigation property.
You can use props.navigation instead of directly defining it
here, but I find this way more clear,
so I'm just going to define it like this.
Now let's go to our message icon,
which is right here.
And as I told you,
touchable opacity is another button that technically does nothing right now.
What we want to do is on press,
we want to set up a handler and use this navigation to navigate to Routes.Profile.
Now, let's make sure that this is imported here so that we get no errors.
Let's save this.
Now, if we press here, we're actually
going to be redirected to a new page.
Let's press.
Now you're going to see, welcome to profile page.
Now, if you want to navigate back, currently we have no back button,
but you can just slide and you can navigate back like that.
Here you also might notice the color of our screen is different.
This is because of the same problem that we faced in the last video where
navigation automatically applied the style.
What we can do is go to profile page for this and make sure that we apply
a style and say that we are going to use global styles background white.
This is why it was a good idea to create this as a global style because now
we can reuse this style in many other screens.
Let's import this, save this,
and now you're going to see a little weird behavior.
This is because this whole component only
takes as much space as this text component placed inside here.
If we want to make this whole
screen white, what we're going to have to do is actually apply Flex to this.
Since Flex is also going to be something
that we're just going to be using on different pages,
let's set it up in global style and say that if we want to use Flex,
we can just call it flex, and we're going to say that this is equal to flex one.
Then let's apply this tile right here.
Let's say we want to use global style.flex.
If we save this,
notice that our background is going to be changing all to white.
This is how you are able to access a new screen.
Now, if you want to be able to go back,
you could also set up a touchable opacity here.
Then what you could do is use a text
insight here and you're going to call it go back, for example.
Let's save this and you're going to see it appear here.
Then what we want to do is say that on Press, we want to use the navigation.
Let's use this prop right here as well
and say that we want to use this navigation to Go Back.
This is how you do it.
Let's save it.
Now if we were to click on go back, you can go back like that as well.
If you want to apply some a style to this to make sure that color is blue and you
can understand that this is going to be a button, you can do so.
Now if we press here,
you're going to see it as a blue button and you can press and come back.
There are two ways of navigating back.
You can just slide back and this is
handled by the React native gesture handler that we installed.
Or you can also always click on this button and it will do so automatically.
This is it for this particular lesson.
We just learned how to set up a new screen in our navigation using a stack screen,
how to use a unique route to make sure that we can access a certain
screen component and then be able to use it from the homepage using the navigation
that comes with any screen that is defined inside this Stack Navigator.
Thank you so much for watching and I'll
meet you in the next video where we're going to be exploring a new topic,
a new navigation that you could use for your application.
So stay tuned.
Thank you and see you in the next video.