It's important to understand how navigation works in native apps, and especially if you have a Web
development background, it's important to understand how it differs from navigating between screens
in the Web because in the Web, you actually enter a Yucel.
And if you're building a react app, you use a tool like to react router to download the user's component.
And if you click a link that goes to my site, dotcom products again, the React router, which is Akst
Extra Library you installed, kicks in, sees that you change the path and your neutral and loads a
different react component.
That's how navigation works in the web.
So you are l is your source of truth and changing that URL might be picked up by libraries like react
router, which then render different components onto the screen.
That's how I react for web works.
Now, there's one important difference to that.
When we think about native apps, we have no you RL users don't go around in your app by entering some,
you are out.
Instead, you're pressing buttons, you're pressing tabs and you're going forth and back.
You have back buttons, you have sidetracks.
That's how you navigate on mobile apps, to be precise.
As I mentioned, having taps is one common pattern you see there.
Direr common pattern is that you navigate in a stack of pages.
And that simply means that you go to some page, you click on some item, you're taken to a new screen,
and then automatically you get a back botnet top or on Android, you have one built into the device,
of course.
And when you press that, you're navigated back to the page you were on before and you get a smooth
transition for that.
So there you could navigate around, for example, the users component by pressing the tab or by pressing
a special item and being navigated there.
Navigation simply looks and feels a bit different to the users.
Now, of course, we want to bring that look and feel to our react native app, too.
And thankfully, that's very easy.
With the help of a third party library will use.
The third party library, which will use and for this, I stopped my expo server here is React Navigation.
We can install it with NPM, install, dash, dash safe, react navigation like this.
And whilst it's called react navigation, it's actually a navigation library that's built for React
Native.
Now, you can also kind of use it in Web apps, but its main focus is native apps built with react native.
So even though it's called react navigation, it's for react native, not just for react for the web
so we can simply install this package here into our application to get started using it.
And of course, I'll teach you the ins and outs of this package and how to use it for a different navigation
patterns in this module.
But in case you want to dive deeper or you always want to have a written guide, definitely also check
out React Navigation Agric, which is the official page of this package where you can dive into the
docs to learn all about this package.
There you can read all about it in great detail.
You learn how to use it, how to configure it and so on.
There's a lot can do with it.
And whilst I will cover the majority of this here, this is a great resource for you to dive deeper.
Now, one thing we see here, which we absolutely should do, is we should run this command here, which
installs a bunch of extra dependencies, reac navigation needs.
So simply copy this command from the getting started page here and execute it in your project, in the
command line, in the integrated terminal you have there, not npm install but XPO install, though
the only difference is that XPO installed behind the scenes will run npm install, but it will pick
the specific versions of these packages that work with your specific exploration.
So it's a safer version of NPM install you could say, and therefore it's recommended that you use that
here.
Now one additional note about this command and this page in general.
At the top left of this page, you see the version of reac navigation these docs are relating to.
Now, in this course we're using where, John, three or four, they're pretty much the same.
We're not using version five right now because version five uses a slightly different syntax, which
for the moment won't cover.
So make sure that if you're falling back to the docs, you actually select version for free of the documentation
here to follow along smoothly.
Of course, you can always have a look at version five and manually try to adjust the code if you want
to, but for a smooth experience where the focus of course, lies on react native and not react navigation,
make sure you pick a version for free.
That's just a little side note in case you're wondering about the difference between the docs here and
what you see in this course.
Now, one important note, though, whilst we stick to react navigation, we're in for here later and
of course, I will have a whole module on React Navigation five and later, where I will show you how
to convert your project to use that latest version.
So did you have the best of both worlds?
And you'll learn both kinds of setting up navigation and doing navigation and react native apps because
both were for as well as the future versions five and later will be super important to know.
So let's simply copy this command and also make sure that besides installing REACT navigation, which
is the core package, of course, we also installed these packages into the project by running EXPL
install here.
Now, with installation finished here, I can restart my server with NPM start and we can now start
using react navigation.
Now for this all, create a new folder in my project and I'll name it navigation.
This is not something you have to do, but it can help you keep your code clean because in there all
create a new file.
All create my meals.
Navigator Dodgiest File.
Now this file name is totally up to you.
I just want to indicate that in there I will set up the configuration for my navigation for my meals
app here, which which Embling.
So that's why a name ID like this and it's the Meals Navigator Jaspal where I want to set up my well
navigation configuration.
I want to tell Riak Navigation that library we installed, which different screens we have, how they
are connected and how we want to be able to move between them.
Now it's easier to simply see that than to just talk about them.
So therefore, in the Meals Navigator, let's get started setting up some navigation.