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] so let's take the settings stack let's add that navigation let's go back to app the first part here paste we can steal from home stack okay so we got button we got create navigator and what else do we need we need this setting screen we actually need screen okay so settings for stack screen passing our navigation looks good reloaded so now if i come back over here we can now delete our stack because we don't need it anymore so we import settings name that wrong no setting stack there it is all right so now we don't need our button we don't need to create or the settings stack all that looks good settings sometimes when you're making changes like this you'll have to actually flush the application to get a better idea of what the problem is invalid component property for screen settings so go to screen settings navigation [Music] navigate to home home stack home [Music] settings stack setting screen oh i forgot to convert it constant equal so we convert it to a constant from a function need to export it all right now we've got the settings home stack screen let's go back to app and let me reload it so as you make changes like this sometimes when you get the error over here you have to actually go back to the console and hit the r button which reloads the application so when you're messing around with the navigator or the drawers or the stacks you will have to reload from time to time right and lastly we have this navigation container so we could actually create this one as another navigator and this could be not navigation container but this could actually be our main stack and we go back to app so we copy this section right here we go back to main stack we need to make it a constant equals there's no parameters for this one we need to return code save there we go then export default and stack it's not going to work because we need our imports so we can come up here copy all of our imports main stack okay we don't need create door navigator we have navigation we have home stack we have settings stack okay we save that we don't need status bar right now if we go to app we can actually now get rid of all of that so let me leave the last one so i can quickly reference it so we have settings stack we'll change this to main stack main stack and now all i have to do is return chain stack and i have to fix one thing in the stack so because we moved our navigator down we need to fix our imports okay imports are fixed and we now have our working application and it's now organized so when we look at app it says oh okay our code is not here so we move it out of here we can actually drop the reactor [Music] reload import forgot to import the drawer which we needed so now everything works again our app is clean and now all of our individual components for navigation and screens are now separated now if we wanted to go even further we could go further we could create like a component so if you wanted to you could create this screen component so you could do like a stacked screen and pass in some values you could also do a button so like if we go to the screen here we could pull out button and create button to be a different component we could actually export a custom button we could do custom text you could also create styles so i could take this style right here and we can create a special style for views so we could do new file view style js our view let's copy the style import let me just copy this quicker all right so we need to import style sheet from react native create a constant for our screen style or in this case view style and we export the constant and we're going to set the margins top margin menu item justify content so we have view style so now if i go back to the home screen i can now import my style from styles dot view style and then to use it get rid of all this garbage in here and we can now do view style dot view and our text moved up to the top because i changed the layout but yet our other notifications are not impact but what's nice about this is oh i now have a common view style so i can now apply this style throughout my other screens copy the notifications and do the same thing here now if i go to notifications it's at the top but because i haven't applied to settings yet settings is still here so if we do it again settings and there we go so now if we want to change the look and feel for any of our screens we just change the view style here we can change view i will bring up our other example which is going to pretty much pull it all together i've already pre-coded this so we'll go through all the different changes i made to the application so let me stop the current application and start this one so as you can see here in this project i've already broken things out for the screens i've added some additional styles i have our navigation we have our assets so now i'm going to load it and you'll see a splash screen with development and then we go to our home which has an image so in order to get that splash screen to show up we make a small change to the app.json file and all i had to do was find the splash tag or the splash property and change the image location to our assets so i've also added a image to home i did not have time to find our other developer icon but i'll replace that here but all i had to do there was again find my icon and then on my home screen i just needed to import the image tag need those so we imported the image tag i imported the image style and i told it where to find the image so we do source and since it's not a web image i pointed it directly to the image location and the image style just has some style sheets for the specific image so if we go to image we're setting it 466 and 58 i have small image large image stretchy image so if we wanted to change the image size all we have to do is go change style and it shrunk a little bit his code picks up all your different styles so again it's selectable so i can do stretchy image and it doesn't look good so we'll go back to the original image we had i also added some additional styles for the screens so if we go look at our screens i set it at the top got margin to 10 line item center i also added some text styling so this is a title text so it's font 20 and it's bold so we go back to home and look at text text is using title text and then we have our on button still click so now if we go to notifications i made some changes here so notifications we used our image background tag that we talked about i think in class 2 or 3 about fundamentals so the image background allows us to put an image behind our view and then all you have to do is stack elements on top of the background image so you can layer them over the image so we have our developer nerd as background we also have a scrollable text here for first part and last uh second part i have my notifications and my notifications button here and one thing i wanted to show you here is yes i am importing styles but you can also still use internal customized styles so we can actually define additional styles for this page here don't really recommend it really once you start breaking components out you really want to make sure you reuse the particular style sheets you want because if you hard code a style this way if you need to change the theme or overall look and feel of your application you'll have to track down where this code is within a given component and change it there whereas if you did everything under styles or you had a themes folder if you changed it there it would apply to everything also this particular screen starting to get a little big so one of the things we could have done was we could have pulled out this safe area view here and pulled out the scroll view here in two separate components and then we could have imported those components directly keeping this guy nice and small and pulling the individual components into their own separate files so for instance we could do i don't think i have a components folder i do not so if we do components let's just do [Music] a new file and this is just sample scroll view javascript paste so we need a constant we need to give it a name so we'll call it what we call the files the sample scroll view we don't need to pass in any values so it can be an empty parameters then we start our function and then we need to return our element return our view return then we need to export our sample and then lastly we need to import our components let's just make life easy we'll go up here and copy the top section paste so it's telling us what we don't need so we don't need image background we don't need style sheet or view we just need scroll view and text you
Transcript Segments
[Music]
so let's take the settings stack
let's add that navigation
let's go back to app
the first part here
paste
we can steal from home stack
okay so we got button we got create
navigator
and what else do we need we need
this
setting screen we actually need
screen
okay so settings
for stack
screen passing our navigation
looks good reloaded
so now if i come back over here
we can now delete
our stack because we don't need it
anymore
so we import
settings
name that wrong
no setting stack
there it is
all right so now we don't need our
button
we don't need to create
or the settings stack all that looks
good settings
sometimes
when you're making changes like this
you'll have to actually flush the
application to get a better idea of what
the problem is invalid component
property for screen settings so go to
screen
settings
navigation
[Music]
navigate to home
home stack
home
[Music]
settings stack setting
screen oh i forgot to convert it
constant
equal
so we convert it to a constant from a
function
need to export it
all right
now we've got the settings
home
stack screen
let's go back to app and let me reload
it
so as you make changes like this
sometimes when you get the error over
here you have to actually go back to the
console and hit the r button
which reloads the application so when
you're messing around with the navigator
or the drawers or the stacks
you will have to reload from time to
time
right and lastly we have this navigation
container
so we could actually
create this one
as another navigator
and this could be not navigation
container but this could actually be
our main stack
and we go back to app
so we copy this section right here
we go back to main stack
we need to make it
a constant
equals there's no parameters for this
one
we need to return
code
save there we go
then export
default
and stack
it's not going to work because we need
our imports
so we can come up here copy all of our
imports
main stack
okay we don't need create door navigator
we have navigation we have home stack we
have settings stack okay we save that
we don't need status bar
right now if we go to app
we can actually now get rid of all of
that
so let me leave the last one so i can
quickly reference it
so we have settings stack we'll change
this to main
stack
main stack
and now
all i have to do
is return
chain
stack
and i have to fix one thing in the stack
so because we moved our navigator down
we need to fix our imports
okay imports are fixed
and we now have our working application
and it's now organized so when we look
at app it says oh okay
our code is not here so we move it out
of here we can actually drop the reactor
[Music]
reload
import
forgot to import the drawer which we
needed
so now everything works again
our app is clean
and now all of our individual components
for navigation and screens
are now separated
now if we wanted to go even further we
could go further we could create like a
component so if you wanted to you could
create this screen component so you
could do like a stacked screen
and pass in some values
you could also do a
button so like if we go to the screen
here we could pull out button and create
button to be a different component we
could actually export a custom button
we could do custom text
you could also create styles so i could
take this style right
here and we can create a special style
for views so we could do
new file
view
style
js
our view let's copy the style
import
let me just copy this
quicker
all right so we need to import style
sheet
from react native
create a constant for our screen style
or in this case view style
and we export the constant
and we're going to set the margins top
margin menu item justify content
so we have view style
so now if i go back to the home screen
i can now import my style
from styles dot view style
and then to use it get rid of all this
garbage in here
and we can now do view style dot view
and our text moved up to the top because
i changed the layout
but yet our other notifications are not
impact
but what's nice about this is oh i now
have a common view
style so i can now apply this style
throughout my other screens
copy
the notifications
and do the same thing here
now if i go to notifications it's at the
top
but because i haven't applied to
settings yet settings is still here
so if we do it again
settings
and there we go so now if we want to
change the look and feel for any of our
screens we just change the view style
here
we can change view
i will bring up our other example
which is going to pretty much pull it
all together i've already pre-coded this
so we'll go through all the different
changes i made to the application so let
me stop the current application
and start this one
so as you can see here in this project
i've already broken things out for the
screens i've added some additional
styles
i have our navigation
we have our assets
so now i'm going to load it and you'll
see a splash screen
with development
and then we go to our home
which has an image
so in order to get that splash screen to
show up
we make a small change to the app.json
file
and all i had to do was find the splash
tag or the splash property and change
the image location to our assets
so i've also added a image to home i did
not have time to find our other
developer icon but i'll replace that
here
but all i had to do there was again find
my icon
and then on my home screen
i just needed to import
the image tag
need those
so we imported the image tag
i imported the image style
and i told it where to find the image so
we do source and since it's not a web
image i pointed it directly to the image
location
and the image style
just has some style sheets for the
specific image so if we go to image
we're setting it 466 and 58 i have small
image large image stretchy image
so if we wanted to change the image size
all we have to do is go change
style
and it shrunk a little bit
his code picks up all your different
styles so again it's selectable so i can
do stretchy image
and it doesn't look good so we'll go
back to the original image we had
i also added some additional styles for
the screens so if we go look at our
screens
i set it at the top got margin to 10
line item center
i also added some text styling
so this is a
title text so it's font 20 and it's bold
so we go back to home and look at text
text is using title text
and then we have our on button
still click
so now if we go to notifications
i made some changes here
so notifications
we used our image background tag that we
talked about
i think in class 2 or 3 about
fundamentals so the image background
allows us to put an image behind our
view
and then all you have to do is stack
elements on top of the background image
so you can layer them over the image so
we have our developer nerd as background
we also have a scrollable text here for
first part and last uh second part
i have my notifications and my
notifications button here
and one thing i wanted to show you here
is yes i am importing styles
but you can also still use internal
customized styles so we can actually
define additional styles for this page
here
don't really recommend it
really once you start breaking
components out you really want to make
sure you
reuse the
particular style sheets you want
because if you hard code a style this
way
if you need to change the theme or
overall look and feel of your
application you'll have to track down
where this code is within a given
component and change it there whereas if
you did everything under styles or you
had a themes folder if you changed it
there it would apply to everything
also this particular screen starting to
get a little big so one of the things we
could have done was we could have pulled
out this safe area view here
and pulled out the scroll view here in
two separate components and then we
could have imported those components
directly keeping this guy nice and small
and pulling the individual components
into their own separate files
so for instance we could do i don't
think i have a components folder i do
not
so if we do components
let's just do
[Music]
a new file
and this is just sample
scroll view
javascript paste
so we need a constant
we need to give it a name so we'll call
it what we call the files the sample
scroll view
we don't need to pass in any values so
it can be an empty
parameters
then we start our function
and then we need to return our element
return our view return
then we need to export our sample
and then lastly we need to import
our components
let's just make life easy we'll go up
here and copy
the top section
paste so it's telling us what we don't
need so we don't need image background
we don't need style sheet or view we
just need scroll view and text
you