Detailed Notes
In this video, we expand on React Navigation with Tab Navigation in React-Native. Specifically how to use Tabs to navigate around our screens instead of using the navigator.
Just in case you missed the last video you can find it here or you need a refresher you can find the first video Started Using React Native For Your Mobile Applications here.
Tab Navigation in React-Native focuses on: Required Dependencies Tabs IonIcons For a full list of components and APIs goto https://reactnative.dev/docs/accessibilityinfo
Tab Navigation
Possibly the most common style of navigation in mobile apps is tab-base navigation. Where the application displays tabs on the bottom of the screen or on the top below the header (or even instead of a header) for navigating between screens. Before we begin we need to install some additional dependencies for npm and expo.
Installation and setup
First, you need to install them in your project:
npm install @react-navigation/native React Tab Navigation is made up of some core utilities we use to create the navigation structures in our apps. These utilities include with @react-navigation/native are:
@react-navigation/bottom-tabs @react-navigation/stack @expo/vector-icons/Ionicons react-native-vector-icons/Ionicons Using the Stack Navigator With Tabs
Usually tabs don't just display one screen; For example, on your Facebook feed, you can tap on a post and it brings you to a new screen within that tab with all of the comments. Another way to think about would be to think of this as being a separate navigation stacks within each tab, and that's exactly how we will model it in React Navigation.
Customizing Tabs
This is similar to how you would customize a stack navigator. While there are some properties that get set when you initialize the tab navigator and others you customize per-screen in the options. One such option is using Ionicons.
Ionicons
Premium designed icons for use in web, iOS, Android, and desktop apps. Support for SVG and web font. Completely open source, MIT licensed and built by the Ionic Framework team.
Additional Resources React - https://reactjs.org/ Node - https://nodejs.org/en/ Visual Studio Code - https://code.visualstudio.com/ Android Development - https://developer.android.com/studio Xcode - https://apps.apple.com/us/app/xcode/id497799835?mt=12
Transcript Text
[Music] today we're going to continue our discussion on react native and we're going to wrap up our navigation discussion by talking about the next piece in the react native navigation which is the menuing or the drawer navigation so previously we have talked about the different kind of dependencies you need for react native we've talked about uh react navigation we've talked about tab navigation we've talked about things like stack navigation so we basically continue on talking about the react native library here and of course every time we want to use navigation we have to use the base stack or the base library which is native the optional dependencies you typically need for any type of navigation will be things like reanimated gesture handlers we definitely need screens if we're going to be adding screens safe area content and mass views now some of these are ios or android specific but they are nice to have when you're trying to make your application feel more mobile friendly on the device that you're working on the basic navigation we talked about is the navigation container we talked about using buttons to use the navigation property to jump between screens we talked about using stacks where we could actually stack navigations where we could add different screens together in kind of like a container and then as we click through the container and go from screen to screen we kind of have that back button that appears at the top of our navigation and then last time we talked about tab navigation which is probably the most common form of navigation on mobile devices this is where we have those little tabs or little menu buttons at the top and bottom of the application to where we can just jump quickly between different uh navigation stats or stack sets and that's whoops and that looks almost identical to the react native the stack navigation and today it's almost going to be not much different when we deal with the drawer navigation so essentially just depending upon the type of navigation you want is just going to be the different library that you use so for stacking we use stack for tab we use tab and today you'll see that we use drawer for adding that menu so as i mentioned before we're going to be talking about the drawer navigation of react native and it's essentially the component that renders the navigation drawer which can be opened and closed via gestures or simply looks like this you have a little menu button or you can swipe from the left to the right and then you can see the menu options or the drawer so you have your home button your settings the different screens that you can jump to within your application that you want to select from your menu now door navigation can be thought of as like a wardrobe or a dresser of drawers what you do is you open up the door when you want to get something out you find your item you pull it out on this case you click your screen or you click your the screen you want to go to and then you close the door so when you open the drawer you have the option to select one of the items in the door in this case one of the screens once you select it the drawer automatically closes if you made a mistake by clicking the menu and you don't want anything in the drawer all you have to do is click in this little gray area here and the drawer closes the requirements we need for today to talk about react native drawer is we still need the react native native library and we also need the react navigation door library the additional imports we're going to need is we're still going to need that navigation container but we're also going to now need the create for navigator and that's going to come from the react navigation drawer library does anyone have any questions about react native and the react native drawer navigator that we're going to be looking at today not at this time yeah everyone's clear we will jump out into the demo like the previous ones this is going to be more hands-on we're going to get our hands dirty and kind of build on what we've been learning one other thing i would like to mention though about react so we talked about react native uh before with the stack navigation so the stack navigator how it works is it works by pushing and popping the screens into the main window here so when you actually push on the stack it moves the screen over to another screen now that's nice however with drawer when you select one of the screens here you're replacing the screen that is in the main window you're not actually adding or removing from the stack it's a replacement so it's just one distinction i wanted to point out here it's off all right so let's go to terminal what happens when you have multiple strings all right everyone clearly see this that big enough yep cool thank you all right so i'm going to navigate to my development folder and inside my development folder i have a reactive workspace all right and just to show you what we're going to be building today let me start an existing project i've already built and we still use expo so when expo starts we start it within our application directory and then we can open up an ios simulator or an android simulator and once we do expo start it will load the application into our emulator take just a second to load i didn't mean to close this before class but i accidentally did loading all the updates this is one thing you will run into every now and then when dealing with expo or react native they're constantly updating the libraries so you will have to constantly keep updating your emulators as well so today we are going to build this application here we're going to have a home screen we are going to have a notification screen and then we are also going to have a settings screen so we're going to start by building three screens then we're going to add some navigation to those screens where we can click a button and go to the different screen and then we're going to add a slide deck here the drawer for the main menu with some options to go to our different screen and then finally we're going to add the little menu button here so that we can very quickly just click the button to bring up our door otherwise we'd have to mainly swipe left and right minimize this all right we'll stop the existing one let's create a new project here all right so we're going to do expo init and we will call this one example no space app we're going to create a blank project this will just build our basic template for us to work with react native take just a second to install the dependencies well this installs let me go briefly over what we're going to do in this first example so in our first example here we're going to create a basic drawer based navigation so we're going to create that mobile app here with three screens we're going to have home navigation and settings and we're going to add all three of those screens to the dashboard our application finished so we're going to go into our application like it says here cd our example drawer app now the first thing we need to do in here though is we have to actually install 3x navigation libraries so that we can use them with our application so we need to first install minimize this chest minimize that you minimize the text all right we'll just leave it as is all right so the first thing we're going to do is we're going to install the react navigation navigate library and you have to do this for each of your projects you can't do this globally and you really don't want to do this globally because if we actually install these dependencies at a global level of your machine then that means when you go to build your application and push them out to the stores you might actually be installing a whole bunch of libraries and packages that you don't need essentially bloating your app so next we want to install the navigation stack because we'll need that for the third example today we will also need to install the drawer and i will go ahead and also install all the optional dependencies that we need like react native reanimated gestures screens context and the community mask view i find more often than not i end up needing something from one of these libraries so i just include it with my build all right so that gave us our react native our stack our drawer our optional dependencies so now we have everything installed so let's go look at the code i'm using visual studio so we'll just type code walmart console and this will open up visual studios code all right that's open and while i have visual studios open let me actually start the app so we can see our changes real time all right and i reload there we go sometimes when you have the emulator up when you start a new app you have to deploy it to the ios or to the device and then you have to force a reload in order to reload your application the emulator is nice but it can be a little buggy you
Transcript Segments
[Music]
today we're going to continue our
discussion on react native
and we're going to wrap up our
navigation discussion by talking about
the next piece in the react native
navigation which is the menuing or the
drawer navigation
so previously we have talked about the
different kind of dependencies you need
for react native we've talked about
uh react navigation we've talked about
tab navigation we've talked about things
like stack navigation
so
we basically continue on talking about
the react native library here
and of course every time we want to use
navigation we have to use the base stack
or the base library which is native
the optional dependencies you typically
need for any type of navigation will be
things like reanimated gesture handlers
we definitely need screens if we're
going to be adding screens safe area
content and mass views now some of these
are
ios or android specific but they are
nice to have when you're trying to make
your application feel more mobile
friendly on the device that you're
working on
the basic navigation we talked about is
the navigation container
we talked about using buttons to use the
navigation
property to jump between
screens we talked about using stacks
where we could actually stack
navigations where we could add different
screens together in kind of like a
container and then as we click through
the container and go from screen to
screen we kind of have that back button
that appears at the top of our
navigation
and then last time we talked about tab
navigation which is probably the most
common form of navigation on mobile
devices this is where we have those
little tabs or little menu buttons at
the top and bottom of the
application to where we can just jump
quickly between different uh navigation
stats or stack sets
and that's whoops and that looks almost
identical to the react native the stack
navigation
and today it's almost going to be not
much different when we deal with the
drawer navigation so
essentially just depending upon the type
of navigation you want is just going to
be the different library that you use so
for stacking we use stack for tab we use
tab and today you'll see that we use
drawer for
adding that menu
so as i mentioned before we're going to
be talking about the drawer navigation
of react native and it's essentially the
component that renders the navigation
drawer which can be opened and closed
via gestures
or simply looks like this you have a
little menu button or you can swipe from
the left to the right and then you can
see the menu options or the drawer
so you have your home button your
settings the different screens that you
can jump to within your application that
you want to select from your menu
now door navigation can be thought of as
like a wardrobe or a dresser of drawers
what you do is you open up the door when
you want to get something out you find
your item you pull it out on this case
you click your screen or you click your
the screen you want to go to and then
you close the door so when you open the
drawer you have the option to select one
of the items in the door in this case
one of the screens once you select it
the drawer automatically closes
if you
made a mistake by clicking the menu and
you don't want anything in the drawer
all you have to do is click in this
little gray area here and the drawer
closes
the requirements we need for today to
talk about react native drawer is we
still need the react native native
library and we also need the react
navigation door library
the additional imports we're going to
need is we're still going to need that
navigation container but we're also
going to now need the create for
navigator
and that's going to come from the react
navigation drawer library
does anyone have any questions about
react native and the react
native drawer navigator that we're going
to be looking at today
not at this time
yeah
everyone's clear we will jump out into
the demo like the previous ones this is
going to be more hands-on we're going to
get our hands dirty and kind of build on
what we've been learning
one other thing i would like to mention
though
about react
so we talked about react native uh
before with the stack navigation so the
stack navigator
how it works is it works by pushing and
popping the screens
into
the main window here so when you
actually push on the stack it moves the
screen over to another screen
now that's nice however with drawer when
you select one of the screens here
you're replacing the screen that is in
the main window you're not actually
adding or removing from the stack it's a
replacement
so it's just one distinction i wanted to
point out here
it's off
all right so let's go to terminal
what happens when you have multiple
strings
all right everyone clearly see this
that big enough
yep
cool thank you
all right so i'm going to navigate to my
development folder
and inside my development folder i have
a reactive workspace
all right and just to show you what
we're going to be building today
let me start an existing project i've
already built
and we still use expo
so when expo starts we start it within
our
application directory
and then we can open up an ios simulator
or an android simulator
and once we do expo start it will load
the
application into our emulator
take just a second to load
i didn't mean to close this before class
but i accidentally did
loading all the updates
this is one thing you will run into
every now and then when dealing with
expo or react native they're constantly
updating the libraries so you will have
to constantly keep updating your
emulators as well
so today we are going to build this
application here we're going to have a
home screen we are going to have a
notification screen
and then we are also going to have a
settings screen so we're going to start
by building three screens
then we're going to add some navigation
to those screens
where we can click a button and go to
the different screen
and then we're going to add a slide deck
here the drawer for the main menu with
some
options to go to our different screen
and then finally we're going to add the
little menu button here so that we can
very quickly just click the button to
bring up our door
otherwise we'd have to mainly swipe left
and right
minimize this
all right we'll stop the existing one
let's create a new
project here
all right so we're going to do expo
init
and we will call this one
example
no space
app
we're going to create a blank
project
this will just build our basic template
for us to
work with react native
take just a second to install the
dependencies
well this installs
let me go briefly over what we're going
to do in this first example
so in our first example here we're going
to create a basic drawer based
navigation so we're going to create that
mobile app
here
with three screens we're going to have
home
navigation and settings
and we're going to add all three of
those screens to the dashboard
our application finished
so we're going to go into our
application like it says here cd our
example drawer
app
now the first thing we need to do in
here though
is we have to actually install 3x
navigation libraries so that we can use
them
with our
application
so we need to first install
minimize this chest
minimize that
you minimize the text
all right we'll just leave it as is
all right so the first thing we're going
to do is we're going to install the
react navigation
navigate library
and you have to do this for each of your
projects you can't do this globally and
you really don't want to do this
globally because if we actually install
these dependencies at a global level of
your machine then that means when you go
to build your application and push them
out to the stores you might actually be
installing a whole bunch of libraries
and packages that you don't need
essentially bloating your app
so next we want to install
the navigation stack
because we'll need that for
the third example today
we will also need
to install the drawer
and i will go ahead and also install all
the
optional dependencies that we need like
react native reanimated gestures
screens context and the community mask
view
i find more often than not i end up
needing something from one of these
libraries so i just include it with my
build
all right so that
gave us
our react native
our
stack our drawer
our
optional dependencies
so now we have everything installed
so let's go look at the code
i'm using visual studio so we'll just
type code
walmart console and this will open up
visual studios code
all right that's open
and while
i have visual studios open let me
actually start the app so we can see our
changes real time
all right and i
reload
there we go
sometimes when you have the emulator up
when you start a new app you have to
deploy it to
the ios or to the device and then you
have to force a reload in order to
reload your application
the emulator is nice but it can be a
little buggy
you