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] all right so we now have our react native so we have our components here so now let's create a home screen for our application let's create a custom component so function on screen and we are going to return a view we have view component added so here we're going to add a view then we're going to add some attributes to our view we're going to add some style and we will add a screen view component to our styles in just a second and inside of our view we're going to add some text so let's add a text tag and in here we will just say home screen just so we can see that we have a screen loaded all right and down to our styles here we'll add screen view view and we're going to add flex of one we're going to add a line item and we're going to align them to center and we're going to justify our content to also be centered save that all right next let's add our stack so create a constant we'll call it stack and this is going to be our navigation stack for windows or for our screens and we're going to create stack navigator so we'll call the method create stack navigator and that creates our stack object now in order to use the stack object and actually put our window inside of our stack we come down here to our app section let's get rid of this default view and now we need to use a new container our navigation container and inside our navigation container is we're going to apply our stack we're going to call the navigator module of stack so we now have our instead of a view we have a navigation navigation container which contains a stacked navigator and inside the stack navigator we're going to add our screen we'll do stacked dot screen we're going to give it a properties name of home we'll use for referencing this screen later and the component we're going to tie it to is our home screen and this is a self-closing tag so when we save this we now get our home screen so we can now see that the code displays an empty navigation bar so no navigation bar and gray content area containing the home screen text all right so that's fairly simple so now let's set up the navigator to handle another screen so when dealing with the navigator we have to configure all the routing using properties now in this example we did not set up any properties because the stack by default will take the first screen in the container and use that to render the first screen so let's create a second screen here let's do function other screen i'm going to return another view we're going to use our style and we're going to use styles and we're going to reuse our screen view and we're going to close our view oops access view view now we want to add some text and we'll just call this another screen okay pretty straightforward and now to add it to the stack so we come down here and we copy our stack screen here we create a new name to reference our new screen other and now we need to point to the new component we'll do other screen and if i run this we see we still only get home screen however our application now has two routes we have a home route and another route a route can be specified by using the screen component the screen component accepts a name property which corresponds to the name of the route we will use to navigate and a component property which corresponds to the component it will render in this case the home route corresponds to the home screen component and the other wrap corresponds to the other screen component now by default the initial route for the stack is the home route because it is the first screen in the stack however if we change it to other and reload the app so let's change the order so if we swap this around and save this you'll notice that reacts natives fast refresh won't update the changes from the initial route name as you might expect instead we have to open up our console here and hit r to reload our screen now we see that we have the other screen displayed that's because when the application loads the first time it loads this stack and this does not get reloaded until the application is closed and reopened or forcefully reloaded let's switch this back save you noticed it in refresh so we come back out here forcefully refresh and now we have our home screen now there's some additional options and parameters you can pass through your screen so let's talk about how we can specifically set the screen options and passing additional properties first we can use the stack screen option attribute which we can then use to set things like the page title as you can see at the top we changed the title of our screen to home or we might want to pass some additional properties to a screen and we can do this with two approaches first we can use the react context and wrap the navigator with a context provider to pass data to the screens now this is recommended but outside of the scope of what we're going to cover here today the second approach we can use a rendered callback for the screen instead of specifying a component property and to do that what you do here is we create we don't they'll close the tag but instead we can wrap the properties inside of a props here and then you can define some properties for your particular screen now again this is outside the scope of today but i did want to mention this so in case you do want to pass properties or some values between screens this is one way to do it and we'll cover that in a future lesson scroll this back right so next let's look at moving between the screens so let's look at how we can actually navigate between our home screen and our other so before we look at how to navigate between the screens let's review how this would have worked in a web page so one way we can do this from a web page browser and let's get back to document stuff so one way is to actually go to the tag and call the page directly we can do the anchor tag href and hard code the value to our page another way is to actually wrap an element with a onclick function that we could then use the window.location.href and then pass in the page name that we would want to call so we can essentially use javascript to call an onclick command to change the window location to a specified page now in react native we'll do something similar to the latter but rather than using a window.location global we will use the navigation prop that is passed down to our screen component let's update our dependencies and already added button we now have button which is going to act like our anchor tag and next we need to add a navigation property to our screen both add navigation we've added a property to our home screen and then in here let's add a button give it a title go to other screen and instead of on click we're going to do on press and we're going to do a self-calling function and we're going to call the navigation property that we're going to pass in dot navigate and then we're going to give it the reference that we have defined down here so we're going to use the name other so that we will call the other screen there we go now it's happy so now when we look at our screen we now have home screen and go to other screen so if we click go to other screen we now navigate over to other screen and we have the default navigation bar or breadcrumb up here that we can use to go back and forth between the screens so let's recap so first we use the navigation prop which is passed into every screen component in the stack navigator then we added the navigate other here using the navigation so we called the navigate function in navigation property and we passed in the page that we wanted to go to so this calls the navigate function of the navigation prop with the name of the route that we would like to move the application to i would like to note though that if we call navigation.navigate with a route name that hasn't been defined yet it will print an error in the development build and nothing will happen in the production build when you try to run this it'll fail it'll throw a message right so now what happens if we keep navigating to a route multiple times so let's make a change to our other screen let's also add navigation and in here let's also add a button and this time we're going to go to the other screen again at least we're going to attempt to all right so over here in our application we have our home screen we'll click our button to go to the other screen now we have another button on the other screen that if we click here looks like it's clicking but nothing is happening so if you'll notice that when we click the go over again it doesn't do anything now that's because we have already uh or we're already on the other page we're already on the other route the navigate function roughly means go to this screen however if you're already on the screen then it does nothing now if we really want the application to add another other screen to the stack to the route this is pretty common if we want to pass in some unique data to each route so let's not touch on passing data for now instead let's look at how we can make the application add another on screen to the stack now to do this we can change the navigate here to push this allows us to express the intent to add another route regardless of the existing navigation history so now each time we call push we add a new route to the navigation stack when you call navigate it first tries to find an existing route with the name and only pushes a new route if there isn't yet one on the stack however with push it will continue to push whatever component you're trying to add to the stack regardless if it's already loaded or not and now if we click other we can go back up the navigation till we get back to the home page so the header provided by the stack navigation will automatically include a back button when it is possible to go back from the active screen so if i click go to other screen we have this back button here of home which will take us back to the previous screen that was called from when there's only one screen in the navigation stack there is nothing you can go back to and so there is no back button or back navigation if we really want to rely on the stack to handle this behavior we can just use navigation. go back to trigger this behavior programmatically all right so let's look at another example so let's add two more buttons to the other page these buttons will allow us to return back to the home screen at the top of the stack we can call the nav gate not to push to reset to the top of the stack so first let's come down here and add another button we'll add a title of go to home we'll use the on press attribute and we will do a self calling function and we will call navigate navigation dot navigate and we will go to the home page or home now if i go to the other screen i have two buttons i have go to other again or i have go to home which returns me back to the top of the stack and it removes the back button now if we only want to go back one screen in the stack without using our navigation button at the top of the screen we can use the navigate function go back so to add another button here and we will name it go back on press again help calling function called the navigation and this time we will call go back now if i go to the other screen i now have the other screen again go home go back so if i click go back we go back up the queue just like if we were hitting the navigation button up here now one thing to note though is on android the react navigation hooks into the hardware back button and fires the go back function for you when the user presses it so it behaves as if the user would expect it to so again if you're on android and you hit the go back button it basically triggers the same functionality it calls the same go back function all right does anyone have any questions yeah i mean i've seen you do linux does this require a lot of linux no this is all uh app-based development the only uh the only the only linux piece here you can actually do on windows 2. but you have to kick off either using node or expo you have to start the emulator essentially for you to run your native applications on your desktop okay so it's just a command line it's not necessarily linux okay good question any others nope all right so let's review so react native doesn't have a built-in api for navigation like a web browser does react navigation provides this for you along with the ios and android gestures and animations to transition between screens we also talked about the stack.navigator which is a component that takes the route configuration as its children with additional props for configuration and rendering of our content we can also add multiple screens using the stack.screen component which takes a name property which refers to the name of the route and the component property which specifies the component to render for the route now if we want to specify what the initial route is uh in the stack it's provided we can use a property for the initial route name or just set our default screen that we want to load first at the top of the effect if we want to navigate to a screen we use the navigation.navigate module and we pass in the property of the name so we pass in the component name this pushes a new route to the stack navigator and it is not only if it's not already in the stack otherwise it stays on the screen for instance when we click the from the new page to go to the other page when we use navigate on the other page and try to click the button again it didn't go anywhere because the page was already loaded we also notice that the header bar will automatically show a back button but we can programmably go back and forth using the go back function you can go back to an existing screen in the stack with the navigate navigate i'm sorry the navigation navigate command or you can go back to the first screen by using another property that i forgot to mention here you can actually also use go use to top which will also jump you back to the top so this will actually take you back to the uh home page that one change the navigate here to pop to top home right so now if i go into other page again i click home it took me all the way back and last the navigation prop is available to all screen components as defined as the screen in the route configuration so if we go look here as long as we pass in the navigation property it is provided to us by the navigation container i'd like to thank you for your time if you would like to discuss any of these topics further you can send us questions or comments to any of the following methods you can reach us at email info developmenter.com you can find us on our website developernerd.com contact us we're also on youtube at youtube.com slash channel slash u c z o u f n underscore l h c z v d y e two a s l t h underscore d and finally you can find us on vimeo at vimeo.com developer our goal is making every developer better have a great day you
Transcript Segments
[Music]
all right so we now have our react
native so we have our components here
so now let's create a home screen for
our application
let's create a custom component so
function
on screen
and we are going to return
a view
we have view component added
so here we're going to add a view
then we're going to add some attributes
to our view
we're going to add some style
and we will add
a screen view
component to our styles in just a second
and inside of our view we're going to
add some text so let's add a text
tag and in here we will just say home
screen just so we can see that we have a
screen loaded
all right and down to our styles here
we'll add
screen view
view
and we're going to add flex
of one
we're going to add a line
item
and we're going to align them to center
and we're going to justify our content
to also be centered
save that
all right next
let's add
our stack so create a constant
we'll call it stack and this is going to
be our navigation stack for windows or
for our screens
and we're going to create
stack navigator
so we'll call the method create stack
navigator
and that creates our stack object
now in order to use the stack object and
actually put our window inside of our
stack
we come down here to our app section
let's get rid of this default view
and now we need to use a new container
our navigation container
and inside our navigation container is
we're going to apply our stack
we're going to call the navigator
module of stack
so we now have our instead of a view
we have a navigation navigation
container which contains a stacked
navigator and inside the stack navigator
we're going to add
our screen
we'll do stacked
dot screen
we're going to give it a properties name
of home
we'll use for referencing this screen
later
and the component we're going to tie it
to
is our home screen
and this is a self-closing tag
so when we save this
we now get our home screen
so we can now see that the code displays
an empty navigation bar
so no navigation bar
and gray content area containing the
home screen text
all right so that's fairly simple so now
let's set up the navigator to handle
another screen
so when dealing with the navigator we
have to configure all the routing using
properties
now in this example we did not set up
any properties because the stack by
default will take the first screen in
the container and use that to render the
first screen
so let's create a second screen here
let's do function
other screen
i'm going to return
another view
we're going to use our style
and we're going to use styles
and we're going to reuse our screen view
and we're going to close our view
oops access view
view
now we want to add some text
and we'll just call this another screen
okay pretty straightforward
and now to add it to the stack so we
come down here
and we copy our stack screen here
we create a new name
to reference our new screen other
and now we need to point to the new
component
we'll do other screen
and if i run this
we see we still only get home screen
however our application now has two
routes
we have a home route and another route
a route can be specified by using the
screen component
the screen component accepts a name
property which corresponds to the name
of the route we will use to navigate and
a component property which corresponds
to the component it will render
in this case the home route corresponds
to the
home screen component and the other wrap
corresponds to the other screen
component
now by default the initial route for the
stack is the home route because it is
the first screen in the stack
however if we change it to other and
reload the app
so let's change the order
so if we swap this around and save this
you'll notice that reacts natives fast
refresh won't update the changes from
the initial route name as you might
expect
instead we have to open up our console
here
and hit r to reload our screen
now we see that we have the other screen
displayed
that's because when the application
loads the first time it loads
this stack
and this does not get reloaded until the
application is closed and reopened or
forcefully reloaded
let's switch this back
save you noticed it in refresh
so we come back out here forcefully
refresh
and now we have our home screen
now there's some additional
options
and parameters you can pass
through your screen
so let's talk about how we can
specifically set the screen options and
passing additional properties
first we can use the stack screen option
attribute
which we can then use to set things like
the page title
as you can see at the top we changed
the title of our screen to home
or we might want to pass some additional
properties to a screen and we can do
this with two approaches
first we can use the react context and
wrap the navigator with a context
provider to pass data to the screens now
this is recommended but outside of the
scope of what we're going to cover here
today
the second approach we can use a
rendered callback for the screen instead
of specifying a component property
and to do that what you do here
is we create
we don't
they'll close the tag but instead we can
wrap the properties
inside of a props here
and then you can define some properties
for your particular screen now again
this is outside the scope of today but i
did want to mention this
so in case you do want to pass
properties or some values between
screens this is one way to do it and
we'll cover that in a future lesson
scroll this back
right so next let's look at moving
between the screens so let's look at how
we can actually navigate between our
home screen and our other
so before we look at how to navigate
between the screens let's review how
this would have worked in a web page
so
one way we can do this from a web page
browser
and let's get back to document stuff
so one way is to actually go to the tag
and call the page directly we can do the
anchor tag href and hard code the value
to our page
another way is to actually wrap an
element
with a onclick function that we could
then use the window.location.href
and then pass in the page name that we
would want to call so we can essentially
use javascript
to call an onclick command to change the
window location to a specified page
now in react native we'll do something
similar to the latter but rather than
using a window.location
global we will use the navigation prop
that is passed down to our screen
component
let's update our dependencies
and already added button we now have
button
which is going to act like our anchor
tag
and next we need to add a navigation
property to our screen
both add navigation
we've added a property to our home
screen
and then in here let's add a button
give it a title
go to other screen
and instead of on click we're going to
do on press
and we're going to do a self-calling
function
and we're going to call the navigation
property that we're going to pass in
dot
navigate
and then we're going to give it the
reference
that we have defined down here so we're
going to use the name other
so that we will call the other
screen
there we go
now it's happy
so now when we look at our screen we now
have home screen and go to other screen
so if we click go to other screen we now
navigate over to other screen and we
have the default navigation bar or
breadcrumb up here that we can use to go
back and forth between the screens
so let's recap so first we use the
navigation prop
which is passed into every screen
component in the stack navigator
then we added the navigate
other here using the navigation so we
called the navigate function in
navigation property and we passed in
the page that we wanted to go to
so this calls the navigate function of
the navigation prop with the name of the
route that we would like to move the
application to
i would like to note though that if we
call navigation.navigate
with a route name that hasn't been
defined yet
it will print an error in the
development build and nothing will
happen in the production build when you
try to run this it'll fail it'll throw a
message
right so now what happens if we keep
navigating to a route multiple times
so let's make a change
to our other screen
let's also add
navigation
and in here let's also add a button
and this time we're going to go to the
other screen again
at least we're going to attempt to
all right so over here in our
application we have our home screen
we'll click our button to go to the
other screen
now we have another button on the other
screen that if we click here
looks like it's clicking but nothing is
happening
so
if you'll notice that when we click the
go over again it doesn't do anything now
that's because we have already uh or
we're already on the other page we're
already on the other route the navigate
function roughly means go to this screen
however if you're already on the screen
then it does nothing
now if we really want the application to
add another other screen to the stack to
the route this is pretty common if we
want to pass in some unique data to each
route
so let's not touch on passing data for
now
instead let's look at how we can make
the application add another on screen to
the stack
now to do this we can change the
navigate here
to push
this allows us to express the intent to
add another route regardless of the
existing navigation history
so now each time we call push we add a
new route to the navigation stack
when you call navigate it first tries to
find an existing route with the name
and only pushes a new route if there
isn't yet one on the stack
however with push it will continue to
push
whatever
component you're trying to add to the
stack regardless if it's already loaded
or not
and now if we click other we can go back
up the navigation till we get back to
the home page
so the header provided by the stack
navigation will automatically include a
back button when it is possible to go
back from the active screen so if i
click go to other screen we have this
back button here of home which will take
us back to the previous screen that was
called from
when there's only one screen in the
navigation stack there is nothing you
can go back to
and so there is no back button or back
navigation
if we really want to rely on the stack
to handle this behavior we can just use
navigation. go back
to trigger this behavior
programmatically
all right so let's look at another
example
so let's add two more buttons to the
other page
these buttons will allow us to return
back to the home screen at the top of
the stack
we can call the nav gate not to push to
reset to the top of the stack
so first let's come down here and add
another button
we'll add a title
of go to home
we'll use the on press
attribute
and we will do a self calling function
and we will call navigate navigation
dot navigate
and we will go to the home page or home
now if i go to the other screen
i have two buttons i have go to other
again
or i have go to home which returns me
back to the top of the stack and it
removes the back button
now if we only want to go back one
screen in the stack without using our
navigation
button at the top of the screen we can
use the navigate function go back
so to add another button here
and we will name it go back
on press again
help calling function called the
navigation
and this time we will call
go
back
now if i go to the other screen i now
have the other screen again go home go
back so if i click go back we go back up
the queue just like if we were hitting
the
navigation button up here
now one thing to note though is on
android the react navigation hooks into
the hardware back button and fires the
go back function for you when the user
presses it
so it behaves as if the user would
expect it to
so again if you're on android and you
hit the go back button it basically
triggers the same functionality it calls
the same go back
function
all right does anyone have any questions
yeah
i mean i've seen you do linux does this
require a lot of linux
no this is all uh
app-based
development
the only
uh the only the only linux piece here
you can actually do on windows 2. but
you have to
kick off
either using node or expo you have to
start
the
emulator essentially for you to run your
native applications on your desktop okay
so it's just a command line it's not
necessarily linux
okay
good question any others
nope
all right so let's review
so react native doesn't have a built-in
api for navigation like a web browser
does
react navigation provides this for you
along with the ios and android gestures
and animations to transition between
screens
we also talked about the stack.navigator
which is a component that takes the
route configuration as its children with
additional props for configuration and
rendering of our content
we can also add multiple screens using
the stack.screen component which takes a
name property which refers to the name
of the route and the component property
which specifies the component to render
for the route
now if we want to
specify what the initial route is
uh in the stack it's provided we can use
a property for the initial route name
or just set our default screen that we
want to load first at the top of the
effect
if we want to navigate to a screen we
use the navigation.navigate
module
and we pass in the property of the
name so we pass in the component name
this pushes a new route to the stack
navigator and it is not
only if it's not already in the stack
otherwise it stays on the screen for
instance when we click the
from the new page to go to the other
page when we use navigate on the other
page and try to click the button again
it didn't go anywhere because the page
was already loaded
we also notice that the header bar will
automatically show a back button but we
can programmably go back and forth using
the go back
function
you can go back to an existing screen in
the stack with the navigate navigate i'm
sorry the navigation navigate command
or you can go back to the first screen
by using another property that i forgot
to mention here you can actually
also
use go
use
to
top
which will also jump you back to the top
so this will actually take you back to
the uh home page
that one
change the navigate here to pop to top
home
right so now if i go
into other page again
i click home it took me all the way back
and last the navigation prop is
available to all screen components
as defined as the screen in the route
configuration so if we go look here
as long as we pass in the navigation
property it is provided to us by the
navigation container
i'd like to thank you for your time if
you would like to discuss any of these
topics further you can send us questions
or comments to any of the following
methods
you can reach us at email info
developmenter.com
you can find us on our website
developernerd.com
contact us
we're also on youtube
at youtube.com slash channel slash u c z
o u f n underscore
l h c z v
d y
e two
a s
l t h underscore d
and finally you can find us on vimeo at
vimeo.com
developer our goal is making every
developer better have a great day
you