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] so today so welcome today's presentation we're going to continue talking about react native and this presentation is going to be a continuation on our discussion about navigation with react native we're basically how to add navigation to our mobile applications web applications or however we're wanting to interact or move between pages within an app so last time we talked about using react navigation and how we could use the stack and the stack navigator to actually add some screens to a nice stack flow so that we could interact and jump back and forth between an application so for that we had to install some dependencies for node and expo those were the react navigation native dependency and the stack dependency we also included some optional dependencies like the reanimated the gesture handlers the screens the safe area content and the mask view now for today's presentation we're talking about tabs we're going to need the native and the stack but we don't need the optional dependencies we'll also need one additional dependency and i'll talk about that later as we go through the presentation today the bottom section here is essentially the libraries that we had to import within our project and the new stack container and stack navigator and stack screen tags that we used for customizing our application to include screens and button navigations to go back and forth between the screen so today we're getting into tabs and as the definition on react native it's possibly the most commonly style of navigation in mobile apps is tab navigation now tabs can be on the bottom of the screen or they can be on the top of the screen however this is kind of dependent upon the type of device you're using so if you're using ios apple products all the navigation or tab navigation is typically defined at the bottom of the screen now when you're dealing with android most of your navigation is at the top of the screen because they typically have button navigations at the bottom of the physical device that you can use to go back and forward between your applications so the requirements that we need to include today is we need to make sure that we use the native uh component that we installed the react navigation native for our project and we also include the react navigation bottom tabs now i know i mentioned before that depending upon your application or depending on your device your tabs could be at the top or the bottom well with react native the library itself is just bottom tabs and the bottom tabs are going to be it's just a library for tabbing when you run react native on your device the tabs are going to conform to the nature of the device so if you're on ios it'll be at the bottom if you're on android it'll be at the top so you don't have to actually customize the location of your tabs and then when we create our applications we need to make sure that we import the navigation container like we did before for the react navigation so that we have the native uh components and we also want to import the create bottom tab navigator from the bottom tabs libraries all right so let's get started all right so the first thing we want to do is we want to install a new application or we want to create a new application so we're still using expo so we'll use expo install or sorry expo inet and here we're going to create a new application called sample app six since this is our sixth presentation on react native and it will take it a second to get the libraries and prompt you to as to what template you want to use so to start with even though there is an example here with tab for now we're going to start with just a blank application take this a second to install my there we go all right so now this has created a new project so to access our project it tells us how to start so we're going to go cd sample f6 and if we look in here we have all of our react native uh code or retina project that we need now because we're using expo and we need to use or we're going to add tabs and navigation we need to also install those libraries so i'm going to go to my little cheat sheet here it is and i need to install all of this so we react native and i need now the reason we have to install these every time we create a project is it installs the libraries for these components into our project that way when we run our application in expo uh it will actually load these dependencies to the mobile application as well okay now the next thing we want to do is we want to start expo so we will do expo start another tab here and i'm actually going to open up the code and visual code all right expo started let's select our ios device let's do iphone 8 and there's our iphone 8 emulator so i'm going to minimize the console we don't need that put now guy over here all right so the first thing we need to do is we need to open up our app.json oops sorry app.js here we go upload for a second one moment here all right so as you can see when the application loaded we have our input status bar which is what we would expect for using expo we always have to import or react because react native is built on top of react and then we also want to import some basic modules like style sheet text and view now the other thing we need to use for react navigation and for our tabs is we're going to have to import a few more libraries here so we'll import application container from react navigate all right and then we also need to import create one tab navigation navigate tor from react location bottom tap now if i save that it's going to fail because i have i just remembered i did not install the react navigation bottom tab what's cool here is it tells you that your error message is pretty distinct it tells you oops we cannot find this library within our project so to fix that you go out to your console you stop the server and copy this guy right here and do an expo install that one we want tabs yeah and don't mind these package errors i'm finding that having the new uh macbook pro with the m1 chip it's giving me some fits with some libraries but uh overall everything does work all right so we're gonna restart expo and then once that starts we're going to reload our app grab this reloaded and it's bundling up all those javascript libraries including the new one we just installed so now our app actually loads all right so we've created a new project we have imported our navigation container and we've imported our create bottom tab navigation or navigator right so now we need some screen we have our base screen here that is defined inside of our app but we don't want to hard code our screen in our app we want to actually pull those components out into separate functions i'll create a new function and call this one screen one and we'll create another one screen two all right so screen one we're going to return and inside our return we're going to create a new view actually i'm just going to cheat i'm going to copy this view here to start with all right so we have our view we're going to use our styles instead of container i'm going to create a screen style here and down in my styles we'll add screen and he'll be flex one and we'll keep the alignments the same but we will drop the default color and justify yep okay so we have our screen one and our text let's just label or print out okay we're in screen one all right we don't need the status bar so we'll get rid of that guy and let's just copy this code for screen two and change it to screen two all right so we've created two functions or two screens uh or two views i'm sorry so view one is going to give us a view with some text called screen one and function two or function screen two is gonna return us another view with screen two so right now we just have two components here with two views that aren't really attached to the application yet so before we can actually attach them we need to add a constant and let's call it tab this way we can now reference the create bottom tab navigator by using the tab constant so instead of having to type this every single time we can now just call tab so now let's go into our app here remove this view start fresh so now let's look at our code so before we had to create a navigation container so we still need to do that we'll come back over here so the first thing we need to do is add our navigation container and inside our navigation container we now need to add our tab navigator so to do that we're going to use our tab constant and then we're going to do dot tab tab dot and we're going to go find screen now the tab stream is a self-closing tab with a couple parameters for attributes it has the name attribute and it has the component attribute now name is going to be our unique identifier which is how we're going to reference this screen or this tab throughout the application so this one we'll call it screen1 and we'll add the component being our function here of screen one and we'll do this again for screen 2. now if i save this so i forgot one thing all right so we have our navigation container we need to add our it's not navigation container we need the tab dot navigation container and oh yeah and i need the application hey there oh oh oops there it is sorry about that sometimes the error messages are not super clear on what it is that's wrong i forgot the open close parenthesis to load the constructor for this component there we go you
Transcript Segments
[Music]
so today
so welcome today's presentation we're
going to continue talking about react
native
and this
presentation is going to be a
continuation on our discussion about
navigation with react native we're
basically
how to add navigation to our mobile
applications web applications or however
we're wanting to interact or move
between pages within an app
so last time we talked about using
react navigation and how we could use
the stack and the stack navigator to
actually add some screens to a nice
stack flow so that we could interact and
jump back and forth between an
application
so for that we had to install some
dependencies for
node and
expo those were the react navigation
native
dependency and the stack dependency
we also included some optional
dependencies like the reanimated the
gesture handlers
the screens the safe area content and
the mask view now for today's
presentation we're talking about tabs
we're going to need the native and the
stack but we don't need the optional
dependencies
we'll also need one additional
dependency and i'll talk about that
later as we go through the presentation
today
the bottom section here is essentially
the
libraries that we had to import within
our project and the new stack container
and stack navigator and stack screen
tags that we used for customizing our
application to include screens
and button navigations to go back and
forth between
the screen
so today we're getting into tabs
and as the definition on react native
it's possibly the most commonly style of
navigation in mobile apps is tab
navigation
now tabs can be on the bottom of the
screen or they can be on the top of the
screen
however this is
kind of dependent upon the type of
device you're using so if you're using
ios
apple products all the navigation or tab
navigation is typically defined at the
bottom of the screen now when you're
dealing with android most of your
navigation is at the top of the screen
because they typically have button
navigations at the bottom of the
physical device that you can use to go
back and forward between your
applications
so the requirements that we need to
include today is we need to make sure
that we use the native
uh component that we installed the react
navigation native for our project
and we also include the react navigation
bottom tabs
now i know i mentioned before
that
depending upon your application or
depending on your device your tabs could
be at the top or the bottom well with
react native the library itself is just
bottom tabs and the bottom tabs are
going to be
it's just a library for tabbing when you
run react native on your device the tabs
are going to conform to the nature of
the device so if you're on ios it'll be
at the bottom if you're on android it'll
be at the top so you don't have to
actually customize the location of your
tabs
and then when we create our applications
we need to make sure that we import the
navigation container like we did before
for the react navigation so that we have
the native
uh components
and we also want to import the create
bottom tab navigator from the bottom
tabs libraries
all right so let's get started
all right so the first thing we want to
do is we want to install
a new application or we want to create a
new application so we're still using
expo so we'll use expo install
or sorry expo inet
and here we're going to create a new
application called sample
app six since this is our sixth
presentation on react native
and it will take it a second to get the
libraries and
prompt you to
as to what template you want to use
so to start with even though there is an
example here with tab
for now we're going to start with just a
blank application
take this a second to install
my
there we go
all right so now this has created a new
project so to access our project it
tells us how to start so we're going to
go cd
sample f6
and if we look in here we have all of
our react native
uh code or retina project that we need
now because we're using expo and we need
to
use or we're going to add tabs and
navigation we need to also install
those libraries
so i'm going to go to my little cheat
sheet here
it is
and i need to install all of this
so we react native
and i need
now the reason we have to install these
every time we create a project is it
installs the libraries for these
components into our project
that way when we run our application in
expo
uh it will actually load these
dependencies to the mobile application
as well
okay now the next thing we want to do is
we want to start expo so we will do expo
start
another tab here and i'm actually going
to open up the code and visual code
all right expo started
let's
select our ios
device let's do
iphone 8
and there's our iphone 8 emulator so i'm
going to minimize
the console we don't need that
put now guy over here
all right so the first thing we need to
do is we need to open up our app.json
oops sorry
app.js here we go
upload for a second one moment here
all right so as you can see when the
application loaded we have our input
status bar which is what we would expect
for
using expo
we always have to import or react
because react native
is built on top of react
and then we also want to import some
basic modules like style sheet text and
view
now the other thing we need to use for
react navigation
and for our tabs is we're going to have
to import a few more libraries here so
we'll import application
container
from
react navigate
all right and then we also need to
import
create
one tab
navigation navigate tor
from
react
location
bottom
tap
now if i save that it's going to fail
because i have i just remembered i did
not install the react navigation bottom
tab what's cool here is it tells you
that
your error message is pretty distinct it
tells you oops
we cannot find this library within our
project so to fix that
you go out to your console
you stop the server
and
copy this guy right here
and do an expo install
that one we want
tabs yeah
and don't mind these package errors
i'm finding that having the new
uh macbook pro with the m1 chip it's
giving
me some fits with some libraries but uh
overall everything does work
all right so we're gonna restart expo
and then once that starts we're going to
reload
our app
grab this reloaded and it's bundling up
all those javascript libraries including
the new one we just installed so now our
app actually loads
all right so we've created a new project
we have imported our navigation
container and we've imported our create
bottom tab navigation or navigator
right so now we need some screen we have
our base screen here that is defined
inside of our app but we don't want to
hard code our screen in our app we want
to actually
pull those components out into separate
functions
i'll create a new function
and call this one screen one
and we'll create another one
screen two
all right so screen one we're going to
return
and inside our return we're going to
create a new view
actually i'm just going to cheat i'm
going to copy this view here to start
with
all right so we have our view
we're going to use our styles instead of
container i'm going to create a screen
style here
and down in my styles we'll add screen
and he'll be flex one
and we'll keep the alignments the same
but we will drop the default
color
and justify
yep okay
so we have our screen one
and our text let's just
label
or print out
okay we're in screen one
all right we don't need the status bar
so we'll get rid of that guy
and let's just copy this code for screen
two and change it to screen two
all right so we've created two functions
or two screens
uh or two views i'm sorry so view one is
going to give us a
view with some text called screen one
and function two or function screen two
is gonna return us another view with
screen two
so right now we just have two components
here with two views that aren't really
attached to the application yet
so before we can actually attach them we
need to add a constant
and let's call it tab
this way we can now reference the create
bottom tab navigator
by using the tab constant so instead of
having to type this every single time we
can now just call tab
so now let's go into our app here
remove this view
start fresh
so now let's look at our
code so before we had to create a
navigation container so we still need to
do that
we'll come back over here so the first
thing we need to do is add our
navigation container
and inside our navigation container we
now need to add our tab navigator so to
do that we're going to use our tab
constant
and then we're going to do dot tab
tab dot
and we're going to go find
screen
now the tab stream
is a self-closing tab
with a couple parameters
for attributes it has the name attribute
and it has the component
attribute
now name is going to be our unique
identifier which is how we're going to
reference this screen or this tab
throughout the application so this one
we'll call it screen1
and we'll add the component
being our function here of screen one
and we'll do this again for screen 2.
now if i save this
so i forgot one thing
all right so we have our
navigation container we need to add our
it's not navigation container we need
the tab
dot
navigation container
and oh yeah and i need the application
hey there
oh
oh
oops
there it is
sorry about that sometimes the error
messages are not super clear on what it
is that's wrong i forgot the
open close parenthesis to load the
constructor for this
component there we go
you