Detailed Notes
In this final segment on React Native: Putting it all together, we revisit all the concepts we have covered to this point. Then we go through how to set up and organize your projects so you can break down your code into smaller more manageable components.
Prior to watching this video please see the previous video on React Navigation here or if you need a refresher check out the first video in the series "Started Using React Native For Your Mobile Applications" here.
React Native: Putting It All Together focuses on: Required Dependencies Text SafeAreaView Image Background Image ScrollView TouchableOpacity Button View NavigationContainer Navigator createStackNavigator Tab navigation Const createBottomTabNavigator Drawer navigation Screen createDrawerNavigator Tab navigation Ionicons {useState} For a full list of components and APIs go to https://reactnative.dev/docs/accessibilityinfo
Additional Resources
React is an open-source, front-end, JavaScript library for building user interfaces or UI components. In addition, Facebook and a community of individual developers and companies help maintain it. Additionally, React can be useful as a base in the development of single-page or mobile applications. Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the Chrome V8 engine and executes JavaScript code outside a web browser. Visual Studio Code is a free source-code editor made by Microsoft for Windows, Linux, and macOS. In addition, it includes support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git. Android software development is the process by which applications are created for devices running the Android operating system. Xcode is Apple's integrated development environment for macOS and is used to develop software for macOS, iOS, iPadOS, watchOS, and tvOS. Finally, this series comes from our mentoring/mastermind classes.  These classes are virtual meetings that focus on how to improve our technical skills and build our businesses.  After all the goals of each member vary.  However, this diversity makes for great discussions and a ton of educational value every time we meet.  We hope you enjoy viewing this series as much as we enjoy creating it. As always, this may not be all new to you, but we hope it helps you be a better developer.
Transcript Text
[Music] today is the final lesson in our discussion on react native where we're going to kind of put it all together review all the components we've currently worked with installed and set up for building our react native apps and we're going to essentially deconstruct some of the applications we've built and actually organize them more effectively into a different type of organization structure so that we can reuse components throughout our application instead of having to constantly copy and paste components so last time we talked about container navigations we talked about using drawers to kind of stack our applications our different screens and where we could actually nest some different types of navigation like stack navigation with drawer navigation and just create components for our different screens here so we started down this path to where we could actually create green objects or functions and pass these around through the applications we can then pass them into our stack we can then take this stack and we can add it to the drawer and the result was this application over here where we load the application we get a home page we click home we go to notifications we can go back and forth that way we can go to menu so this is the drawer this is kind of that menu that was hiding behind the scenes we can click settings and from settings we can go to home we can go back to menu we can go to home and so on so we kind of combined all of the navigation components into one app so today i want to take this structure take our app here and i want to break it down into its components so i picked this one because we had already started this last time we had already started organizing our app based on screens and based upon navigation menus so to start with one of the things you can do is over here in your project you can create a couple different folders for different things so since we're doing expo we don't have a source folder so everything can go into the root so we can create a new folder and we'll call this one navigation we already have an assets folder and this assets folder contains all of our images or different icons that we want to display in our application so we now have navigation which will move all of our stacks our drawer navigation here [Music] and our navigators into navigation we also can create another folder for our screens folder that's all these screens or just screen and we'll do screens then we could also do one for components so like say if we want to create custom views or custom text or custom buttons we can create a components folder if we had different translations different languages different text we could also create what's called i 18n or language i'm not going to create this one because the latest update to react native we'll build that for you based upon your particular operating system it was something new that they added if we had javascript we could do it like an actions folder we want to do styles we could do a custom styles folder we want to do specific theme based so under styles we could have a separate theme or under styles have a theme folder and underneath that folder you could have like fonts colors matrix if we were doing any api connections where we were calling like third-party apis into our app we could create an api folder or even a hook folder and if you had a shopping cart you would have like a shop folder as well since we haven't covered any of those topics yet i'm going to stick to the ones that were primarily have seen so far so we've got our navigation we've got our styles and we've got our screens we already had assets and i added components we may or may not get to that today so let's start from the top so here we have our home screen now the whole purpose of organizing your project is so that one file does not have the entire application we don't have everything in one place we want to actually break things down so we're actually working on specific features within our application so if we only want to touch the home screen we really only want the home screen code we don't want any of this other code so we can take the home screen here take this section here go under screens and create a new file and we'll call this one on screen dot js so everything needs to be js we will paste our code in here and we need to change this from a function so since this is an actual now a javascript object we need to pass it as an object so we need to make a constant home screen equals any parameters we need to pass and go here and then we need to use the notation equal greater than and then we build our function or the constant in order to reuse this we need to export people on screen so by default they'll take this home screen and export it now this won't work because we haven't actually imported the components we need for it yet so let's come back over here so we don't need status bar that only needs to be in the main app uh react let's see it actually highlights what we need so we need button view text and react we don't have styles in here so we'll get rid of styles and we don't have any navigation so we can actually get rid of all these imports now just by looking at this we see that our home screen contains a view and inside of that view we have a text and a button so our text tag displays our text and we can add style to that button same thing we can add styles but to actually activate the button we have to add an on press function and we are going to pass the navigation tab around because we're going to be using that navigation stack all right and we set the title for our button so this is the text of our button and so if i save that we now have home screen now if i want to use home screen on the main app first we will get rid of the old function and now we need to import our new screen so we have home screen from root because app lives in the root and then we need to go to our screens folder and then we need to pull home screen so now i can reference home screen within the application so if i re save this it refreshes and home still works so we've created our home screen over here so now let's pull out the notification screen so we'll do notification real quick file notifications spring dot js this section here under notifications paste and we'll start with the imports from home screen change our function to a constant format function to a constant and we need to make sure that we export our new constant okay we have view text button view text button react all looks good so we'll save that back to our app click that paste notifications screen okay and because i'm naming them the exact same as their functions i do not need to update any of the code down here it just fits all right so we have one more screen we have settings screen so we'll copy the function name new file dot js so we have our settings again copy it over take our imports enter function to a constant um settings screen back to our app click that settings screen screen save the app still works still happy all right so now we've got our screens we're importing them well we really don't need them here because we want to create some navigation stacks so we have this home stack and we'll go under navigation and we'll create a new file here so do new home homestack.js here copy now this one because we need stack we need that first part so we'll copy the stack stack some of these all right so now we got home stack turn this guy into a constant obviously just modifying the function again export all stack because we want to return this guy when we're calling this javascript it needs some imports so what's cool about using visual code with all the plugins we've talked about it actually shows you what you need to include and what you don't need to include so in home stack we don't need the status bar we don't need stylesheet we don't need view or text because they're not being used don't need to create drawer navigation or the navigate container or settings so now when we load this screen we're only loading the components that we need okay so there's home stack so now i can import home stack so if i delete this section here so if i save it we're going to fail because currently it cannot find home stack so now if i go here and i do import stack it will automatically insert the location and we now see we don't need home screen or notification anymore because those are in home stack so we can drop those we can also drop style sheet and we can also drop view and text now we could technically also drop the status bar but we kind of need that guy for the expo for debugging all right let's pull that in oh we have another error here none of these files exist so in our navigation screen home screen it now cannot find the path to home screen so home stack we have to change our path here to actually go up a level not from root because we're down a folder when we were in app we could use dot which would say start at the root and go find the folder however here we're under a folder off of the root under navigation so we need to use dot dot to go back up a level in order to find the folder that we're looking for so all you have to do is just change it to dot dot so it's nice about this as we walk the stack as we start cleaning things up the expo debugger is pretty clean about telling us what we forgot to do or what else we need to do you
Transcript Segments
[Music]
today is the final lesson in our
discussion on react native where we're
going to kind of put it all together
review all the components we've
currently worked with installed and set
up for
building our react native apps
and we're going to essentially
deconstruct
some of the applications we've built and
actually
organize them more effectively into a
different type of organization structure
so that we can reuse components
throughout our application instead of
having to constantly copy and paste
components
so last time we
talked about container navigations we
talked about using drawers to kind of
stack our applications our different
screens
and where we could actually nest some
different types of navigation like stack
navigation with drawer navigation
and just create components for our
different screens here
so we started down this path to where we
could actually create green objects or
functions and pass these around through
the applications we can then pass them
into our stack we can then take this
stack
and we can add it to the drawer
and the result was this application over
here where we
load the application we get a home page
we click home we go to notifications we
can go back and forth that way
we can go to menu so this is the drawer
this is kind of that menu that was
hiding behind the scenes we can click
settings and from settings we can go to
home
we can go back to menu we can go to home
and so on so we kind of combined all of
the navigation components into one app
so today i want to take this structure
take our app here and i want to break it
down into its components
so i picked this one because we had
already started this last time we had
already started organizing our app based
on screens and
based upon navigation menus
so to start with one of the things you
can do is over here in your project you
can create a couple different folders
for different things so since we're
doing expo we don't have a source folder
so everything can go into the root so we
can create a new folder
and we'll call this one navigation
we already have an assets folder and
this
assets folder contains all of our images
or different icons that we want to
display in our application
so we now have navigation which will
move all of our stacks
our drawer navigation here
[Music]
and our navigators into navigation
we also can create another folder for
our screens
folder
that's all these screens
or just
screen and we'll do screens
then we could also do one for components
so like say if we want to create custom
views or custom text or custom buttons
we can create a components folder
if we had different translations
different languages different text we
could also create what's called i 18n or
language
i'm not going to create this one because
the latest update to react native we'll
build that for you based upon your
particular operating system
it was something new that they added
if we had javascript we could do it like
an actions folder we want to do styles
we could do a custom styles folder we
want to do specific theme based so under
styles we could have a separate theme or
under styles have a theme folder and
underneath that folder you could have
like fonts colors matrix
if we were doing any api connections
where we were calling like third-party
apis into our app we could create an api
folder or even a hook folder and if you
had a shopping cart you would have like
a shop folder as well since we haven't
covered any of those topics yet i'm
going to stick to the ones that were
primarily have seen so far so we've got
our navigation we've got our styles and
we've got our screens we already had
assets and i added components we may or
may not get to that today
so let's start from the top
so here we have our home screen
now the whole purpose of organizing your
project is so that one file does not
have
the entire application we don't have
everything in one place
we want to actually break things down so
we're actually working on specific
features within our application so if we
only want to touch the home screen we
really only want the home screen code we
don't want any of this other code
so we can take the home screen here take
this section here
go under screens
and create a new file and we'll call
this one
on screen
dot js so everything needs to be js
we will paste our code in here
and we need to change this from a
function so since this is an actual now
a javascript object we need to pass it
as an object so we need to make a
constant
home screen
equals
any
parameters we need to pass and go here
and then we need to use
the notation equal greater than
and then we build
our function or the constant
in order to reuse this we need to export
people
on screen
so by default they'll take this home
screen and export it
now this won't work
because we haven't actually imported the
components we need for it yet so let's
come back over here
so we don't need status bar that only
needs to be in the main app uh react
let's see it actually highlights what we
need so we need button view text and
react we don't have styles in here so
we'll get rid of styles
and we don't have any navigation so we
can actually get rid of all these
imports
now just by looking at this we see that
our home screen
contains a view
and inside of that view we have a text
and a button
so our text tag displays our text and we
can add style to that button same thing
we can add styles but to actually
activate the button we have to add an on
press function
and we are going to pass the navigation
tab around because we're going to be
using that navigation stack
all right and we set the title for our
button so this is the text of our button
and so if i save that we now have home
screen
now if i want to use home screen on the
main app
first we will get rid of the old
function
and now we need to import our new screen
so we have home screen from
root
because app lives in the root
and then we need to
go to our screens folder
and then we need to pull home screen
so now i can reference home screen
within the application
so if i re save this it refreshes
and home still works
so we've created our home screen
over here
so now let's pull out the notification
screen so we'll do notification real
quick
file
notifications
spring
dot js
this section here
under notifications paste
and we'll start with the imports from
home screen
change our function to a constant
format
function to a constant
and we need to make sure that we export
our new constant
okay we have view text button view text
button react all looks good
so we'll save that
back to our app
click that
paste
notifications
screen
okay
and because i'm naming them the exact
same as their functions
i do not need to update any of the code
down here it just fits
all right so we have one more screen we
have settings screen so we'll copy the
function name
new file
dot js
so we have our settings
again copy it over
take our imports
enter function to a constant
um
settings screen
back to our app
click that
settings
screen
screen
save the app still works
still happy
all right so now we've got our screens
we're importing them
well we really don't need them here
because we
want to create some navigation stacks
so we have this home stack
and we'll go under navigation
and we'll create a new file here so do
new
home homestack.js
here copy
now this one because we need stack we
need that first part so we'll copy the
stack
stack
some of these
all right so now we got home stack
turn this guy into a constant
obviously just modifying the function
again export
all
stack
because we want to return this guy when
we're calling this javascript
it needs some imports
so what's cool about using visual code
with all the plugins we've talked about
it actually shows you what you need to
include and what you don't need to
include
so in
home stack we don't need the status bar
we don't need stylesheet
we don't need view or text because
they're not being used
don't need to create drawer navigation
or the navigate container
or settings
so now when we load this screen we're
only loading the components that we need
okay so there's home stack
so now i can import home stack
so if i delete this section here
so if i save it
we're going to fail because currently it
cannot find home stack
so now if i go here and i do import
stack it will automatically
insert the location
and we now see we don't need home screen
or notification anymore because those
are in home stack
so we can drop those we can also drop
style sheet
and we can also drop view and text
now we could technically also drop the
status bar but we kind of need that guy
for the expo for debugging
all right let's
pull that in oh we have another error
here
none of these files exist so in our
navigation screen home screen it now
cannot find the path to home screen
so home stack
we have to change our path here to
actually go up a level not from root
because we're down a folder
when we were in app we could use dot
which would say start at the root
and go find the folder
however here we're
under a folder off of the root under
navigation so we need to use dot dot to
go back up a level in order to find the
folder that we're looking for so all you
have to do is just change it to dot dot
so it's nice about this as we walk the
stack as we start cleaning things up the
expo debugger is pretty clean about
telling us what we forgot to do or what
else we need to do
you