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] okay so we have our app running here so we will drop that guy there we minimize visual code here optimized let's put it side by side so we can see what's going on all right now since we created a blank template all of our code currently exists for our app lives in the apps app.js well that's open i will go ahead and hide our navigator because we won't need it for the rest of this class there we go all right so for this first example we need to include at least a view and we need to include at least uh what else do i need i need view and text all right so view text for right now we will leave stylesheet off and i will just take out the stylesheet for now we will put it back later but for now i just want to simplify things yeah so there we go can everyone see the code is this big enough oh definitely okay cool i noticed in the recordings that sometimes it was too small so just want to make sure it's big enough all right so we have our view we have our text and we're pulling all that from react native we have our function app here which is the default so this is actually what is being loaded on the screen so we're loading this view with this text and the status bar so for our first example we want to import our uh we need to add a navigation container so look for navigation container and if you're using visual code with all the react native plugins installed from the previous presentations uh it does code complete for us so that makes it very nice so here we did import navigation container from react native navigate and this is if you try to import this and you have not installed this library your code will fail when you try to run this and it basically will say hey you're missing the navigate library and next we want to import our drawer so we want to create a drawer applicator and it also imports it from the react navigation drawer library all right so the first thing i want to do is i want to create three screens we need a home screen a navigation screen and a settings screen so to create screens we'll just create some functions and for now we'll just call it stream and inside of our screen we're going to return return and we're going to return an object which will be a view and that view will contain some text and i'm going to just copy in some style for right now so i'm going to copy in flex 1 which is going to say hey just center it or put it in the center of the app of the container align center and justify center so all of our text will show up in the middle all of our components let's see closing bracket there we go that is what's called an inline style we've talked about these previously and then we'll have our text for our screen looks like we need three screens i'm going to simplify this for now and we will just duplicate this and then it's going to yell at us because we can't have the same function names so we'll create a home screen navigations screen notifications screen and a settings screen so to make tell us what screen we're on we will add some text for each screen home notifications settings now if we just save this nothing changed that's because we have not wired our screens up yet to the application just you know my styles oh i bet i dropped the style sheet there we go now it's happy okay so i got rid of our styles so our app the default text is now at the top of the screen all right so we have our screens now we need to add our drawer like in our presentation here we need to create a navigation container with our drawer navigation and then we need to add our screens to it so we'll come down here right above our app and we'll create a new constant for our drawer so we don't have to constantly call that create drawer navigator every time if you think in terms of java we just basically created a new variable uh and we are pointing to the constructor so now all we have to do is reference drawer instead of having to type create drawer navigator all over our code so this is really cool how you can do this in react native all right so we take drawer and we come down here to our return and let's get rid of this view so just like in the presentation we need a navigation container and inside our navigation container we want to add our drawer navigator we have our drawer get dot and our options our navigator or screen so we'll start by adding the navigator controller and we also want to give it a property so we want to give it an initial route to tell it what page to load first and in this case we will say home now right now home is not defined but we will define it in just a second so this right here will tie to the specific screen alias that we are going to create we need drawer again and this time instead of navigator we want a screen and this can be a self-closing tag and we need three of these but we need a name so we need to give it an alias so that we can reference this screen throughout our application we'll call it home called this one notifications and this one settings and then lastly we need to actually tie this screen to our actual screen component so to do that we use the property component and we set it equal to oops not quotes use early brackets and then you can just start typing and it will find your function new component again use our object block and start typing so there's notification or not uh [Music] yeah that's what i want notification screen oh yeah not navigation notification screen there we go i gotta be careful when you use the auto suggestions because sometimes you might not be on the one you want now what will help you identify the one you want is the purple represents functions that you have defined so that tells me that this is the settings screen that i want all right now if i save this we should see our home page and nothing else now if i swipe to the right there is my drawer so now i have home notification and settings so i can navigate between the three screens using my drawer and that is an example of how to set up using a drawer okay does it anyone have any questions on the first example okay if you did you are a mute if not i'll move on to the second example so our second example we're going to mix things up a little bit so we're going to actually mix some navigations with our drawer so we're going to add those buttons to our page that allows us to click from home to notifications from notifications to home and from settings to home all right so now we need to add button to our imports all right so now we need to do two things one we need to uh so because we're using the navigation container by default it's going to pass the navigation object to each of these components however because right now each of these components do not have any imports into their functions we cannot use that navigation property or that navigation object so to get the navigator or navigation we just add the object navigation and this will now allow us to use that navigation property and to use that navigation property we're going to add a button and our button is going to have an on press event and we will create an object we will create a call to an inline all or an inline javascript all essentially and here we're going to call navigation dot navigate and now because we are passing the navigation from our container here we have in the navigation the ability to navigate to these aliases so we have home notifications and settings so here we will navigate to notifications and then we also want to add another property for title and we want to give it some text to our button so go to notifications and then we need to close our button added an on press it has the navigate our navigate object using the navigate function to navigate to notifications so if we just save this we see we now have a button here go to notifications and if i click this it will take me to the notifications page however we have not added the button to go back yet so we're kind of stuck here so let's copy this button go to our notifications go to our settings those settings let's go to home navigate back to home and notifications we also want to go back to home okay notifications home home settings if i save this we now see we have the button on notifications and if we click the button we now go back to the home page now if we navigate using our drawer and go to settings we can also quickly jump back to the home but we can't get to settings so we that's where this menu or drawer comes in handy we can still jump your individual pages through the menu through the drawer or we can use the individual buttons for navigation that we've added to our application any questions on how we mix the button navigations with the door navigations using the navigation object you
Transcript Segments
[Music]
okay so we have our app running here so
we will drop that guy there
we minimize visual code here
optimized
let's put it side by side so we can see
what's going on
all right now
since we created a blank template all of
our code currently exists for our app
lives in the apps
app.js
well that's open i will go ahead and
hide
our navigator because we won't need it
for the rest of this class
there we go
all right so for this first example
we need
to include
at least
a view
and we need to include at least uh what
else do i need i need
view and text
all right so view text for right now we
will
leave stylesheet off
and i will just take out the stylesheet
for now
we will put it back later but for now i
just want to simplify things
yeah so there we go
can everyone see the code is this big
enough
oh definitely
okay cool
i noticed in the recordings that
sometimes it was too small so just want
to make sure it's big enough
all right so we have our view we have
our text and we're pulling all that from
react native we have our function app
here which is the default so this is
actually what is being loaded on the
screen so we're loading this view with
this text and the status bar
so for our first example we want to
import
our
uh we need to
add a navigation container so
look for navigation
container
and if you're using visual code with all
the react native plugins installed from
the previous presentations uh it does
code complete for us so that makes it
very nice so here we did import
navigation container
from react native navigate
and this is if you try to import this
and you have not installed this library
your code will fail when you try to run
this
and it basically will say hey you're
missing the navigate library
and next we want to import
our drawer
so we want to create
a drawer applicator
and it also imports it from the react
navigation drawer library
all right
so the first thing i want to do is i
want to create three screens we need a
home screen a navigation screen and a
settings screen
so to create screens we'll just create
some functions
and for now we'll just call it stream
and inside of our screen we're going to
return
return
and we're going to return an object
which will be a view
and that view will contain some text
and i'm going to just
copy in some style for right now
so i'm going to copy in flex 1
which is going to say hey
just center it or put it in the center
of the app
of the container
align center and justify center so all
of our text will show up in the middle
all of our components
let's see
closing bracket there we go
that is what's called an inline style
we've talked about these previously
and then we'll have our text for our
screen
looks like we need three screens i'm
going to simplify this for now and we
will just duplicate this
and then it's going to yell at us
because we can't have the same function
names so we'll create a home screen
navigations
screen
notifications
screen
and a settings screen
so to make
tell us what screen we're on we will add
some text for each screen home
notifications
settings
now if we just save this
nothing changed that's because we have
not wired our screens up yet to the
application
just you know my styles
oh
i bet i dropped the style sheet there we
go
now it's happy okay
so i got rid of our styles
so our app
the default text is now at the top of
the screen
all right
so we have our screens
now we need to add our drawer
like in our presentation here
we need to create a navigation container
with our drawer navigation and then we
need to add our screens to it
so we'll come down here
right above our app
and we'll create a new constant for our
drawer so we don't have to constantly
call that create drawer navigator every
time
if you think in terms of java we just
basically created a new
variable uh and we are pointing to the
constructor
so now all we have to do is reference
drawer instead of having to type create
drawer navigator all over our code so
this is really cool how you can do this
in react native
all right so we take drawer
and we come down here to our return and
let's get rid of this view
so just like in
the presentation we need a navigation
container
and inside our navigation container we
want to add our drawer navigator
we have our drawer
get dot and our options our navigator or
screen
so we'll start by adding the navigator
controller
and we also want to give it a property
so we want to give it an initial route
to tell it what page to load first
and in this case we will say
home
now right now home is not defined
but we will define it in just a second
so this right here will tie to the
specific screen alias that we are going
to create
we need drawer again
and this time instead of navigator we
want a screen
and this can be a self-closing tag
and we need three of these
but we need a name
so we need to give it an alias so that
we can reference this screen throughout
our application
we'll call it home
called this one notifications
and this one settings
and then lastly we need to actually
tie this screen
to our actual screen component
so to do that we use the property
component
and we set it equal to
oops not quotes
use early brackets
and then you can just start typing and
it will find your function
new component again
use our object block
and
start typing so there's notification or
not uh
[Music]
yeah that's what i want notification
screen
oh yeah not navigation
notification screen there we
go i gotta be careful when you use the
auto suggestions because sometimes you
might not be on the one you want
now what will help you identify the one
you want is the purple represents
functions that you have defined
so that tells me that this is the
settings screen that i want
all right now if i save this we should
see
our home page
and nothing else
now if i swipe to the right there is my
drawer so now i have home
notification
and settings so i can navigate between
the three screens using my drawer
and that is an example of how to set up
using
a drawer
okay does it anyone have any questions
on the first example
okay
if you did you are a mute if not i'll
move on to the second example
so our second example we're going to mix
things up a little bit so we're going to
actually mix some navigations with our
drawer so we're going to add those
buttons to our page that allows us to
click from home
to notifications from notifications to
home and from settings to home
all right so now we need to add
button to our imports
all right so now
we need to do two things
one
we need to
uh so because we're using the navigation
container
by default
it's going to pass the navigation
object
to each of these components
however
because right now each of these
components do not have any imports into
their functions we cannot use that
navigation property or that navigation
object
so to get the navigator or navigation we
just add the object
navigation
and this will now allow us to use that
navigation
property
and to use that navigation property
we're going to add a button
and our button is going to have an on
press event
and we will create an object
we will create a call
to an inline
all or an inline javascript
all essentially
and here we're going to call navigation
dot
navigate
and now
because we are passing the navigation
from our
container here
we have in the navigation the ability to
navigate to these aliases so we have
home notifications and settings
so here we will navigate to
notifications
and then we also want to add
another property for title
and we want to give it some text to our
button so go to
notifications
and then we need to close our button
added an on press
it has the navigate
our navigate object using the navigate
function to navigate to notifications
so if we just save this we see we now
have a button here go to notifications
and if i click this it will take me to
the notifications page however we have
not added the button to go back yet so
we're kind of stuck here
so let's copy this button
go to our notifications
go to our settings
those settings let's go to home
navigate back to home
and notifications we also want to go
back to home
okay notifications home home
settings
if i save this
we now see we have the button on
notifications and if we click the button
we now go back to the home page
now if we navigate using our drawer and
go to settings we can also quickly jump
back to the home but we can't get to
settings so we that's where this menu or
drawer comes in handy
we can still jump
your individual pages through the menu
through the drawer
or we can use the individual buttons for
navigation that we've added
to our application
any questions on how we mix the button
navigations
with
the door navigations using the
navigation object
you