Okay.
So far we have used only one component as a one screen.
But what will happen if we will have more than one?
Basically, what we need to do is we need to introduce navigation.
So how do we handle navigation in React?
Basically, that's handled by the separate package.
So we will need to install a few things in order to work with the React navigation.
So I will close this expo server Ctrl C.
I now have a terminal here, so what I can do, I will make a little bit more space here so we will
install things.
So basically if you don't have a yarn you will do NPM install like this and if you have a yarn then
you do yarn add and then the name of the packages.
So what are the name of the package that we need to install?
We'll need to do React navigation, then react Dash.
Navigation stack and also react native gesture handler like this.
So basically what we need to do is we need to install three things.
So either NPM install and then name of the packages here or yarn and yarn add and name of the packages.
So react navigation, react navigation, stack and react navigation react.
Native gesture handler.
So I will install them.
I will make a little bit more space.
Okay, this is done.
If you want to confirm it that has been installed, then you can open the package.json here.
And we are looking for React Native gesture handler.
React native here and react Native stack.
So three three things I have installed so we can start with our navigation.
So what we have so far here is we have in the app.js, we just load a simple app here.
So basically that's our component.
And inside the app we load home.
So we need to change the way we do it here for handling navigation and roads.
So what we will need to do is we will need to import few things import.
So we import a great app container from React navigation.
Also we need to import.
Stack Navigator from React
Navigation.
Stack.
So basically that's the two packages that we have installed.
So React navigation and React navigation stack and we importing two things create app container and
then create Stack Navigator and we'll use them here and we will replace whatever we have here.
So I will create a new constant here.
I will name it App Navigator and then it will be create.
Stack Navigator here.
And inside will create an object.
And that object, I will create my route.
So I'll create first route here, home, and then another object here and then screen it will be home
screen.
So basically what I had here is I render home like this.
This time what I do is I create a stack navigator and I have routes here.
So at the moment I have only one route and I only have a new constant app navigator.
So instead of displaying app like this, what I will do is I will use create app container to display
that.
So what we will do is we will have another constant app and that's going to be our create app container.
And inside that app container, what I will do is I will load my app navigator here.
So basically what I have here, so this one, it's not used anymore.
What we need to do is we need to export default and then app like we had it before, but we don't need
to do a component there.
So basically I will replace my app component with create app container and I load my routes here.
So App Navigator, I have it there, so I don't need to have this thing here.
So what I do, what I can do is I can save it.
Now let's do Expo Start.
And let's run it in the simulator.
And we have have it here.
So basically, this is a little bit changed because what we have here, we have displayed our component
here, the home component here.
And we have a little bit of header here.
This is navigation bar.
This is a typical whenever we have a navigation in our application, we have built in navigation here.
So what is happening here is normally we have this this is typical navigation here.
Wherever we navigate somewhere we will have like back button there and that's built in.
We can also control it.
So whatever the the colors here are displayed and the text, we we have a full control over this.
I'm not going to go full details because that's a huge topic here, the navigation.
But I will show you how we can actually navigate in between two different screens.
So what we can do here is we can open another one and we can create another file in the components.
And I will do, let's say the title.
JS I'm not going to do two versions for Android and iOS.
I will have just one.
So I will do a simple component here.
So import react from react.
And I will do export default class and then I will do detail and that will extends react.
Component like this.
So inside we need to have a render method and then we'll return.
Let's say we'd like to return view.
That's supposed to be parentheses, not curly brackets.
My mistake.
Sorry.
And then we can display text.
Details page here.
So what we also need to do is we need to import, we need to import view and also text from React Native,
react native.
Okay, So we have another component here and then the component is detailed.
So what I can do is I can go to the App.js.
Basically what I will need to do is I will need to import this detail from
detail detail.
So from here I import it and once it is imported, I can actually load another road here.
So this time it is going to be detail and the screen will be detail.
So I have to now roads if I will save it now.
You can see nothing will change because the home will be loaded by default in the first thing.
So what we can do now is we will open the iOS because at the moment I'm on iOS.
So what what I could do is I could have another button to have some kind of navigation.
So I will have a button with a title.
Go to
details.
And then I can have on press.
And then I can close that button.
So I will also need to add that needs to be capital button.
And then I also need to import.
So that need to be an arrow function.
We will do props.
Navigation.
Navigate.
And then that's going to be.
Details.
So if I will save it now and we have some errors here, probably it's not okay.
It's still.
Remember my, uh, old code that I, uh.
I have saved and I haven't.
I didn't have that finished.
So if I will save it now, okay?
I need to stop it.
And then I will do expo start again.
Sometimes it just lock itself.
So I'll reboot the application here
and then I'm starting that again.
Okay, so here I am on iOS and I can click on go to details and I click in here and not actually it's
happening.
So if I go back here.
And I think I made a mistake here.
That's supposed to be a detail, not a detail.
So this is this was the road here detail, not the detail.
So if I will come back here, I click on details and I can see I have been bringing to a details page
here and I have that back button so I can click it here and then I can click go to details and you can
see this is a kind of a navigation, a simple aggregation that I've done.
So you can from from that point you can create your own navigation with different screens that you have
here and you can wrap it with a create app container and the app Navigator here.
Another thing, what you could do is in the details in the component here, what you can have is you
can actually name that screen.
So you will do static navigation
options and that's going to be object.
And then we can have title and we will have title detail detail.
So if I will save it now and go here and if I will go to the details, you can see detail is displayed
here.
So you can control the name of this specific view from here with a navigation options.
Also, if you go to the App.js inside the Create Stack Navigator, you can control different styles
and you can apply some colors and other things like that.
So basically that's the basic of the navigation.
You can create navigation like that and you can have multiple screens that you can toggle in between.