Let's take a brief look at the version of our app that we have been working on so
far, that you will see upon completion of the exercises in this lesson.
Now, in this application, you would have multiple views or multiple pages,
or multiple screens, and you need a way of navigating among them.
And in this application,
you would see two different ways of navigating between the views.
One, we have a typical side drawer,
which allows you to navigate among the various views here.
So in the side drawer, as you can see, at this moment we have only two
different views, so you have the home page, which you see here,
being displayed here, and then you can navigate to the menu page here.
So you see here the use of the side drawer to navigate between the different views.
So drawer-based navigation is something that is very commonly seen in mobile
applications.
Not only that, when you click on an item in a list, for
example, you will go into the details of that item here.
So you see, that when you've navigated from the list to this detail,
you see the details of this being rendered here with a back
arrow rendered in the top here,
which when we click, will take us back to the list view here.
So similarly, so this is a typical pattern that you would also see, what we
see as a stack-based navigation, where as you navigate through different views,
those views that you navigate from are put into the stack and
then those views that you navigate too, are put on top of those in a stack.
And as you navigate backwards, whether you use the Back button in the status bar or
the header bar there, or a typical hardware Back button in
an Android device, you would go back to the previous view that you have seen.
So that will involve popping the current view of the stack and
then restoring the previous view from the top of the stack onto the screen.
Well, this is the typical navigation patterns that you will see in a mobile
applications, and also you might have seen many applications that used tabbed
navigations, where you have multiple tabs being shown either at the bottom or
at the top, and be able to navigate among them by selecting the appropriate tab.
We will look at tab-based navigation in an exercise in one of the later lessons.
But React Navigation that we're going to examine in this lecture,
supports all these different kinds of navigational features,
the typical mobile navigational features.
So to summarize, in this lesson, we will examine React Navigation,
which is an extensible and easy-to-use navigation solution.
It has many built-in navigators, including a stack navigator,
a drawer navigator, which I have illustrated with the example earlier,
and we also have a tab navigator, a bottom tab navigator, and
also a couple of other navigators available, a switch navigator and
also custom navigation that you can design for your specific needs.
We're going to examine the stack and drawer navigator in this lesson,
we'll look at a tab-based navigation in a later lesson.
So what we realize is that, React Navigation supports typical
navigation patterns that are seen in a mobile application, and
to make use of React Navigation in your React Native Application,
you install by saying yarn add react-navigation or
npm-install --save react-navigation, and add it to your project.
Then after, you can import that into your component and
then construct the navigations.