Detailed Notes
In this video, we take a tour of some of the required libraries for our react native applications.
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 welcome so today we are moving on to the next section of our react native discussion and that is talking about navigation through react through our mobile applications how do we change screens how do we uh you know click a button to go to a different screen work through that like tab navigations menu navigations things of that nature so today is the first discussion we're going to have on react navigation we're going to talk about things like what are the required dependencies that we need to install before we can actually start navigating through our application through our screen and then we're going to look at specifically the react navigation modules or libraries that we can get for react now before we get started let's talk about screens now more specifically what are they if we were viewing our application in a web browser then the screen would be our web page however in react native a screen is made up of views scroll views safe area views now when we're talking about mobile applications they are rarely made up of single screens so therefore we need to learn how to use three act navigator to handle the presentation of and transition between multiple screens so with react navigation the community solution to navigation is a standalone library that allows developers to set up the screens of an app with a few lines of code now before we begin we need to install some of the additional dependencies for npm and expo and these dependencies consist of the react native gesture handler the react native reanimated react native screens react native safe area context react native immunity forward slash mask view react navigation slash stack now to install these we need to just go out to our console and we can install them with the npm expo and any of the other installations that we need now we're going to jump out now and actually get started with the hand on presentation i'll open up my console here so to install our dependencies if we are using node we're going to use npm move this zoom out of my way we got npm and then you do install and to install all those react native navigate uh sorry the react native dependencies we do at react dash native or react navigation slash native hit enter and this will install all the dependencies and there we go the warnings are okay and there are some vulnerabilities and whatnot depending upon your version of node or expo you may have to install some additional updates for fixes and if we do expo install react native so unfortunately though for react we have to actually install each of these modules separately whereas by doing the npm install react native navigate navigate we actually get all of these uh modules or libraries installed for us now we still need to install this guy for node so let's go ahead and do him first so if we do npm install right now slack or stack clear and if we do expo stall may not work if one line yep so you install to expo i've already done this and this will take a minute to install yeah because i've already done that okay all right so we already have the expo components now if you have a bare react native project you'll need to install the dependencies with npm like i just showed you before however um there are also some additional settings for ios with bayer react native project we will not be covering that today however if you are planning on building a bear react native project go check out the documentation on reactnative.dev for more information on how to set the additional settings you need to set up all right so let's talk about react navigation so before mobile apps we had web pages and browsers so in order for us to navigate to different pages on a web page we had to use the anchor tag so let's go look at a browser real quick and see what an anchor tag looks like a browser here we have chrome and let's go to stuff.com i always pick on my site it may or may not come up yeah there it is all right so each of these links here this is how we would navigate through our site and if we actually inspect this guy click on it yep so if we inspect it we see we have an anchor tag and a with an href now this is how we navigate in a web browser so when the user clicks on a link the url is pushed to the browser history stack so if the user presses the back button the browser properties takes the item from the top of the history stack and loads it up so it becomes the active page and now the page that we are currently on becomes the previously viewed page so we will need to use react navigation because react native doesn't have a built-in idea of a global history stack like a web browser does react navigation stack navigator provides a way for your app to transition between screens and manage navigation history so if your app uses only one stack navigator then it is conceptually similar to how a web page browser handles navigation state your app pushes and pops items from the navigation stack and uses the users can interact with it and this results in their in the user seeing the different screen another key difference between how this works in a web browser and in react navigation is that react navigation stack navigator provides the gestures and animations that you would expect on android and ios when navigating between routes in the stack and before we can use the stack navigation library we need to install another library and for that we installed the react navigation stack now since we've now installed all of our libraries we are now ready to build and run our applications on our device and simulators so let's create a new application come into my workspace here and we'll do an expo init sample app five we're gonna do another blank or bare canvas application all right my network's a little slow today not sure why there we go all right now it's created our project so it tells us first we need to go in to our sample app five so we're going to sample that five now since we're using expo we're not going to use the node commands here instead we're going to do expo start now open up another tab here which will be in my sample app five directory and we will type code dot to open up visual code all right visual code is opening expo is started so let's actually open up and run some apps let's open an ios simulator all right that's opening up the ipad and i also want to open up okay the ipad opened up to our default app loaded expo all the new updates and iphone 8 is still loading open and there we go so we now have our app running so expo is running and we've deployed to two applications let's minimize our console we're done with that for now and let's go over to our app and open up the apps the app.js file and this is our basic application here so the first thing we know is we have our input status bar that gives us that expo status bar when we shake the device you use the react files we need to import react from react and we need some basic screen functionality so we have view text and style sheet now we need to add an additional feature here so let's actually move our react here up to the top and let's actually import all so now we're pulling in everything from react sorry about that hide these meetings okay everything's still working all right we have our input status bar we have our view so next we need to actually import our navigation container and the stack navigator here we're going to do import and then we want the navigation container from react dot navigation native and import create staff navigation or navigator um native yeah navigation this gets to be a bit of a tongue tie so i apologize stack navigation with stack view style okay here make sure i didn't spell anything ah okay react navigation not in my folder so we'll go back out here stop expo for a moment since i reinstalled node i need to make sure i reinstall it for expo and i need to make sure i do it inside of the application let's restart expo that's a good little error because it actually showed us that what happens when you do not install react native in the correct folder the load enable to resolve that there we go may not be represented oh yeah right there there we go man oops there [Music] expo all right now let's do xbox start there we go now the apps are loading without an error so if you do not load the react native components inside of your project then they will not be accessible you
Transcript Segments
[Music]
all right welcome so today we are moving
on to the next section of our react
native discussion and that is talking
about navigation through
react through our mobile applications
how do we change screens how do we uh
you know click a button to go to a
different screen work through that
like tab navigations menu navigations
things of that nature so today is the
first discussion we're going to have on
react navigation
we're going to talk about things like
what are the required dependencies that
we need to install before we can
actually start navigating through our
application through our screen
and then we're going to look at
specifically the react navigation
modules or libraries that we can get for
react
now before we get started let's talk
about screens
now more specifically what are they if
we were viewing our application in a web
browser then the screen would be our web
page
however in react native a screen is made
up of views scroll views safe area views
now when we're talking about mobile
applications they are rarely made up of
single screens so therefore we need to
learn how to use three act navigator to
handle the presentation of and
transition between multiple screens
so with react navigation
the community solution to navigation is
a standalone library that allows
developers to set up the screens of an
app with a few lines of code
now before we begin we need to install
some of the additional dependencies for
npm
and expo and these dependencies consist
of the react native gesture handler the
react native reanimated
react native screens
react native safe area context
react native immunity
forward slash mask view
react navigation slash stack
now to install these we need to just go
out to our console and we can install
them with the npm
expo
and any of the other installations that
we need
now we're going to jump out now and
actually get started with the hand on
presentation
i'll open up my console here
so
to install our dependencies if we are
using node we're going to use npm
move this
zoom out of my way we got npm
and then you do install
and to install all those
react native navigate uh sorry the react
native
dependencies we do at
react
dash native
or react
navigation slash native
hit enter
and this will install all the
dependencies
and there we go the warnings are okay
and there are some vulnerabilities and
whatnot depending upon your version of
node or expo you may have to install
some additional updates for fixes
and if we do expo
install
react
native
so unfortunately though for react we
have to actually install each of these
modules separately whereas by doing the
npm install react native navigate
navigate
we actually get
all of these
uh
modules or libraries installed for us
now we still need to install this guy
for node so let's go ahead and do him
first
so if we do
npm install
right now slack or stack
clear and if we do expo
stall
may not work
if
one line
yep
so you install
to expo i've already done this and this
will take a minute to install
yeah because i've already done that okay
all right so we already have the expo
components now if you have a bare react
native project you'll need to install
the dependencies with npm
like i just showed you before
however um there are also some
additional settings for ios with bayer
react native project
we will not be covering that today
however if you are planning on building
a bear react native project go check out
the documentation on reactnative.dev
for more information on how to set the
additional settings you need to set up
all right so
let's talk about react navigation so
before mobile apps we had web pages and
browsers so in order for us to navigate
to different pages on a web page we had
to use the anchor tag
so let's go look at a browser real quick
and see what an anchor tag looks like
a browser
here we have chrome and let's go to
stuff.com
i always pick on my site
it may or may not come up yeah there it
is
all right so each of these links here
this is how we would navigate through
our site and if we actually inspect this
guy
click on it
yep so if we inspect it
we see we have an anchor tag and a with
an href
now this is how we navigate in a web
browser so when the user clicks on a
link the url is pushed to the browser
history stack so if the user presses the
back button the browser properties
takes the item from the top of the
history stack
and loads it up so it becomes the active
page and now the page that we are
currently on becomes the previously
viewed page
so we will need to use react navigation
because react native doesn't have a
built-in idea of a global history stack
like a web browser does
react navigation stack navigator
provides a way for your app to
transition between screens and manage
navigation history
so if your app uses only one stack
navigator then it is conceptually
similar to how a web page browser
handles navigation state
your app pushes and pops items from the
navigation stack and
uses the users can interact with it and
this results in their in the user seeing
the different screen
another key difference between how this
works in a web browser and in react
navigation is that react navigation
stack navigator provides the gestures
and animations that you would expect on
android and ios when navigating between
routes in the stack
and before we can use the stack
navigation library we need to install
another library and for that we
installed
the react navigation stack
now
since we've now installed all of our
libraries we are now ready to build and
run our applications on our device and
simulators
so let's create a new application
come into my workspace here and we'll do
an expo
init
sample app five
we're gonna do another blank
or bare canvas application
all right my network's a little slow
today not sure why
there we go
all right now it's created our project
so it tells us first we need to go in
to our sample app five so we're going to
sample that five
now since we're using expo we're not
going to use the node commands here
instead we're going to do expo
start
now open up another tab here which will
be in my sample app five directory
and we will type code dot to open up
visual code
all right visual code is opening
expo is started
so let's actually
open up and run some apps
let's open an ios simulator
all right that's opening up the ipad
and i also want to open up
okay the ipad opened up to our default
app
loaded expo all the new updates
and iphone 8 is still loading
open
and there we go
so we now have our app
running so expo is running and we've
deployed to two applications
let's minimize our console we're done
with that for now
and let's go over to our app and open up
the apps
the app.js file and this is our basic
application here
so the first thing we know is we have
our input status bar that gives us that
expo status bar when we shake the device
you use the react files we need to
import react from react
and we need some basic
screen functionality so we have view
text and style sheet
now we need to add an additional feature
here so let's actually move our react
here
up to the top
and let's actually import all
so now we're pulling in everything from
react
sorry about that
hide these meetings
okay everything's still working
all right we have our input status bar
we have our view
so next we need to actually import our
navigation container and the stack
navigator
here we're going to do import
and then we want the
navigation
container
from
react
dot
navigation
native
and import
create
staff
navigation or navigator
um
native yeah
navigation
this gets to be a bit of a tongue tie so
i apologize
stack
navigation
with stack
view style okay
here make sure i didn't spell anything
ah
okay react navigation not in my folder
so we'll go back out here
stop
expo for a moment
since i reinstalled
node i need to make sure i reinstall it
for expo
and i need to make sure i do it inside
of the application
let's restart
expo
that's a good little error because it
actually showed us that what happens
when you do not install react native in
the correct folder
the load
enable to resolve that
there we go
may not be represented
oh yeah
right there
there we go
man
oops
there
[Music]
expo
all right now let's do xbox start
there we go
now the apps are loading without an
error
so if you do not load
the
react native
components inside of your project
then they will not be accessible
you