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] right so the third example we're going to look at is we're now going to mix the navigations using that stack object so we're going to use that's that we're going to add a stack and what we're going to do here is we're instead of adding home and notifications directly to the drawer we're going to add home and notifications to a stack and then add that stack to our drawer don't need button view but i need to add another library so we need to import create stack but it's not seeing that is not making me happy it means that we may have to [Music] reinstall that library okay there we go all right so we have our create stack navigator so just like we did here for the drawer we need to create a constant or stack and set it equal to our create stack navigator and essentially call the constructor so now we can use whoops so now we can use stack in our code it didn't fail so so far so good all right so stack is going to be almost identical to drawer except in this case because we are creating stack as a container essentially to stick onto our drawer navigator we don't need another navigation container we just need to create a stack navigator so here we're going to create a new function and we're going to call this one home stack and home stack is going to have a return and we need to create a stack or use our stack object dot navigator so just like drawer navigator so this is our wrapper for our stack right here and then we need to add the screens to the stack so just like drawer we do stack screen and just like the drawer we need the name we will give the alias which is what we're going to use within this navigator and we will give it the home screen and we close the screen and then we will duplicate this for notification all right so now we have our stack navigator currently we are not applying it here because if we click the button here we are still going back and forth right so now we have our stack navigator so we now need to take this stack and place it into our navigation container it we'll replace the home screen with home stack and we will get rid of notifications if we save this the first thing you will notice is that we lose notifications from our menu which is fine because what we're saying here is that notifications really applies to the home stats so you really want to navigate to notifications only from home and so to do that we now have home we click go to notifications we now get this back button up here which is symbolic with the stack so we're basically saying that uh within the home it's in a stack of navigation so we're now pushing and popping the stack into the window here so every time we click go to notifications we are pushing notifications to the top of the stack and when i click home to go back i am pulling notifications back on the stack whereas if i click the drawer i'm actually replacing the window or the screen here completely it is i'm using the drawer stack so there's no internal navigation now since home does have a stack when i click home it moves back and forth within the stack okay any questions on mixing of the navigations using stack nope all right so the last example i want to show you is adding a menu button so when we look at our application it's not really intuitive that we have a drawer hiding over here or some kind of menu off screen so let's add a menu button to the header of our screens so in order to add a header we actually need to wrap all of our screens in some type of stack so right now you can see here we have home up here because our home stack contains home and notifications by doing that by default it will put the name of the screen at the top so it gives us a title bar with some type of navigation for navigating our screens however if we look at screens for settings you notice we don't have that title bar so we don't have that button navigation at the top of our screen so the first thing we want to do is we want to create a stack wrapper for settings and all it's going to contain is settings and then we want to replace our settings screen here in our drawer with the setting stack but now you see we have our settings title and what you don't see currently is we don't have any navigation we have no back or forward buttons up here but they are there we just have to configure them so for that we need to import a few things so the first thing we need to import here is now we want the style sheet so now we want to add our style the component because now when we add the menu buttons it's going to get a little ugly if we just copy and pasted styles all over the place we still need our navigation we still need our drawer and we still need our stack so the first thing i want to do is come down to my stack so here we are we have our home stack all right so in our home stack here under our screen so let's add some we have our name property we have our component property so to modify or change the title here we now need to add some things to the options property of the screen and then we will create a wrapper object and inside of our object we're going to have a list of properties starting with header title so now we will specifically state what we want to call our screen go home comma and then we're going to use the header left property to define the left of navigation what do we put here for our left navigation and since we want to actually add a button we are going to create an object and then we are going to essentially call or inject a button oh yeah parentheses oh yeah not sorry wrong tag that okay sorry about that squigglies and braces get confusing after a while all right so we have our header left option we are defining an object and now let's add our code so inside of here we're going to add a button object i'm going to add an on press and on press we're going to create an inline call to our navigation dot open drawer so this is a new function we're calling so where we did navigate here to navigate to a screen navigation open drawer is going to open up our drawer here it's going to trigger the open command when we slide over so open drawer opens our drawer and then let's give it a title so that we can actually know what this button is and we'll call it menu okay not done yet oh yeah let's see what's going on property there we go and now if i go back to home oh look we now have a menu button if i click the menu button oops failed something happen now what's happened and i purposely did this is see this navigation object here well inside of this function we don't have a navigator we don't have our navigation container so in order for us to access this container we have to actually pass in the navigation object to that we just add it to our function call and it will now pull in the navigation so now when i click the menu button it opens up our screen so let's do this again for the other components notifications notifications we want it unsent now can anyone tell me why i would not want it on notification so why might i not want to put our menu button on our notifications screen you don't want to put a menu right so why would i only want to put the menu on home and on settings why would i not want to put it on notification oh sure that's something i would say maybe uh because you know uh you won't be able to view your notifications uh so that they're not under a menu pretty much so because of how we have defined our application we have wrap so we've created a stack for home so home is actually the top screen of our stack here so any screens that we add inside of this stack navigator should all really reference back to home or the home screen not the menu so essentially anything that you want to add a menu button to on the individual screens should be the same screen that shows up in the drawer if i click home i should have menu but if i go to notifications what i should have for my navigation is return to home not menu go to settings settings again [Music] change my screen name there we go i'm on settings so i can go to home this way i can go to notifications i can go back to home and go back to home i can click the menu there's home menu and settings so you can combine multiple navigation components within an application you just have to think through how you want to attach your screens to that form of navigation if you are going to have a menu if you're going to have what i did i accidentally that happens sometimes you'll accidentally hit a key save it looks like it's working but you accidentally broke something functions home screen button title and under settings we will add those here oh can anyone see what i did wrong here why did copying this code in here break this screen the answer is right here we can't find the variable navigation so while i copied and pasted the code i forgot to inject the navigation object from the navigation container now by adding it the navigation call here to open drawer works so now the menu call works all right any questions on this example so let's quickly review so we covered the different required dependencies for using react navigative navigation and that's a tongue twister in order for us to actually include things in our applications we need to make sure that we've installed the react navigation library for navigate we need to include the drawer library and if we want to combine different components we need to also include things like the stack button and any other components that we need for our applications as always we'd like to thank you for your time if you would like to discuss any of these topics further or if you would like to give us ideas for additional topics to talk about you can reach us at our email address at info developer.com you can find us on our website at developernerd.com contact us you can find us on youtube by googling developerner space youtube you can also find us on vimeo at vimeo.com developer nerd our goal is making every developer better thank you and have a great day you
Transcript Segments
[Music]
right so the third example we're going
to look at is we're now going to mix the
navigations using that stack object so
we're going to use
that's that
we're going to add a stack
and what we're going to do here is we're
instead of adding home and notifications
directly to the drawer we're going to
add home
and notifications to a stack
and then add that stack to our drawer
don't need button view
but i need to add another library
so we need to import
create
stack
but it's not seeing that is not making
me happy
it means that we may have to
[Music]
reinstall that library
okay there we go all right so we have
our create stack navigator
so just like we did here for the drawer
we need to create a constant
or stack
and set it equal to our create stack
navigator
and essentially call the constructor
so now we can use whoops
so now we can use stack
in our code
it didn't fail so so far so good
all right so stack is going to be almost
identical to drawer except in this case
because we are creating stack as a
container essentially to stick onto our
drawer navigator we don't need another
navigation container we just need to
create a stack navigator
so here we're going to create a new
function
and we're going to call this one home
stack
and home stack is going to have a return
and we need to create a stack
or use our stack object
dot
navigator
so just like drawer navigator
so this is our wrapper for our stack
right here
and then we need to add the screens to
the stack so just like drawer we do
stack
screen
and just like the drawer we need the
name
we will give the alias which is what
we're going to use within this navigator
and we will give it the home screen
and we close
the screen and then we will duplicate
this for notification
all right so now we have our stack
navigator
currently we are not applying it here
because if we click the button here we
are still going back and forth
right so now we have our stack navigator
so we now need to take this stack
and place it into our navigation
container
it we'll replace the home screen with
home stack
and we will get rid of notifications
if we save this
the first thing you will notice is that
we lose notifications from our menu
which is fine
because what we're saying here is that
notifications really applies to the home
stats so you really want to navigate to
notifications only from home
and so to do that we now have home we
click go to notifications we now get
this back button up here which is
symbolic with the stack so we're
basically saying that uh within the home
it's in a stack of navigation so we're
now pushing and popping
the stack
into the window here so every time we
click go to notifications we are pushing
notifications to the top of the stack
and when i click home to go back i am
pulling notifications back on the stack
whereas if i click the drawer
i'm actually replacing the window or the
screen here completely it is
i'm using the drawer stack
so there's no internal navigation
now
since home does have a stack when i
click home
it moves back and forth within the stack
okay any questions on mixing of the
navigations using stack
nope
all right so the last example i want to
show you is adding a menu button so when
we look at our application it's not
really intuitive that we have a drawer
hiding over here or some kind of menu
off screen
so let's add a menu button to the header
of our screens
so in order to add a header we actually
need to wrap
all of our screens in some type of stack
so right now
you can see here we have home up here
because our home stack
contains home and notifications by doing
that by default it will put the name of
the screen
at the top so it gives us a title
bar
with some type of navigation
for navigating our screens
however if we look at screens
for settings
you notice we don't have that title bar
so we don't have that button navigation
at the top of our screen
so the first thing we want to do is we
want to create a
stack wrapper
for settings
and all it's going to contain is
settings
and then we want to replace
our settings screen here in our drawer
with the
setting stack
but now you see we have our settings
title
and what you don't see currently is we
don't have any navigation we have no
back or forward buttons up here but they
are there we just have to configure them
so for that
we need to import a few things so the
first thing we need to import here is
now we want the style sheet so now we
want to add our style
the
component
because now when we add the menu buttons
it's going to get a little ugly if we
just copy and pasted styles all over the
place
we still need our navigation we still
need our drawer and we still need our
stack
so the first thing i want to do
is come down to my stack
so here we are we have our home stack
all right so in our home stack here
under our screen so let's add some
we have our name
property we have our component property
so to
modify or change the title here we now
need to add some things to the options
property
of the screen
and then we will create a wrapper
object
and inside
of our object
we're going to have a list of properties
starting with header
title
so now we will specifically state what
we want to call
our screen go home
comma
and then we're going to use the header
left
property
to define the left of navigation what do
we put here for our left navigation
and since we want to actually add a
button we are going to create an object
and then we are going to essentially
call or inject a button
oh yeah
parentheses
oh yeah not
sorry wrong
tag that
okay sorry about that
squigglies and braces get confusing
after a while all right so we have our
header left
option
we are
defining an object
and now let's add our code
so inside of here we're going to add a
button object
i'm going to add an on press
and on press we're going to create an
inline call
to our navigation
dot
open
drawer
so this is a new
function we're calling so where we did
navigate
here to navigate to a screen
navigation open drawer is going to open
up our drawer here it's going to trigger
the open command when we
slide over
so open drawer
opens our drawer
and then let's give it a title so that
we can actually
know what this button is
and we'll call it menu
okay
not done yet
oh yeah
let's see what's going on
property there we go
and now if i go back to home oh look we
now have a menu button if i click the
menu button oops failed something happen
now what's happened and i purposely did
this is
see this navigation object here
well inside of this function we don't
have a navigator we don't have our
navigation container so in order for us
to access this container we have to
actually pass in the navigation object
to that we just add it to our function
call
and it will now pull in the navigation
so now when i click the menu button it
opens up our screen
so let's do this again for the other
components
notifications
notifications
we want it unsent
now can anyone tell me why i would not
want it on notification
so why might i not want to put our menu
button on our notifications screen
you don't want to put a menu
right so why would i only want to put
the menu
on home
and on settings why would i not want to
put it on notification
oh sure that's something i would say
maybe uh because you know uh you won't
be able to view your notifications
uh so that they're not under a menu
pretty much
so because of how we have defined our
application we have wrap
so we've created a stack
for home
so home is actually the top screen of
our stack here so any screens that we
add inside of this stack navigator
should all really reference back to
home or the home screen
not the menu
so essentially anything that you want to
add a menu button to on the individual
screens should be the same screen that
shows up in the drawer
if i click home i should have menu but
if i go to notifications what i should
have for my navigation is return to home
not menu
go to settings
settings again
[Music]
change my screen name
there we go i'm on settings
so i can go to home this way i can go to
notifications i can go back to home
and go back to home i can click the menu
there's home
menu and settings
so
you can combine multiple
navigation components within an
application you just have to think
through how you want to attach your
screens to that form of navigation
if you are going to have a menu
if you're going to have what i did i
accidentally
that happens sometimes you'll
accidentally hit a key save it looks
like it's working
but you accidentally broke something
functions home screen button title
and under settings we will add those
here
oh
can anyone see what i did wrong here
why did copying this code in here break
this screen
the answer is right here we can't find
the variable navigation
so while i copied and pasted the code i
forgot to inject the navigation object
from
the navigation container
now by adding it the navigation call
here to open drawer works
so now the menu call works
all right any questions on this
example so let's quickly review so we
covered the different required
dependencies for
using react
navigative navigation and that's a
tongue twister
in order for us to actually include
things in our applications we need to
make sure that we've installed the react
navigation library for navigate we need
to include the drawer library and if we
want to combine different components we
need to also include things like the
stack button
and any other components that we need
for our applications
as always we'd like to thank you for
your time
if you would like to discuss any of
these topics further or if you would
like to give us ideas for additional
topics to talk about you can reach us at
our email address at info developer.com
you can find us on our website at
developernerd.com contact us you can
find us on youtube by googling
developerner
space youtube you can also find us on
vimeo at vimeo.com developer nerd our
goal is making every developer better
thank you and have a great day
you