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 we take sample scroll view back over to notifications and now we can import it components now instead of scroll view oh text i did not import text style so so when you get those error message just kind of follow through and see what you're missing i'm still missing something there but you kind of get the idea here so you can break them out you can then stack your components looks pretty good so you can pull it out clean it up menus pull out styles we got scroll views safe area view so remember safe area view works for ios only and what that does is it handles that notch so it puts our code below the notch however we do need to add some additional styles if we're on android and here is the specific code we can use for android so remember we have to import platform and this is where we use status bar and so here we're getting the os if it's android we get the status bar's current height otherwise it's zero let's see what else did we cover we covered the only thing i have not touched on is the tab views which is just another navigation so instead of using the navigation container we could actually go to home so we could change our home stack here actually instead of using stack navigation we could use tab navigation that one so would look something like this we wanted a tab navigator we could create a new navigation tab navigator so we need to make sure we name it dot js otherwise it won't recognize our code and we'll change this guy to constant have you have engaged [Music] [Music] export default tab navigator and we need to make sure we include all of our inserts our imports don't need that one don't need those so we need navigator container we have an ion icons those are the icons that we can set for the tabs themselves let's see what else do i have in here screen route so let's do screen tabs create our navigator for tab then we can add our stacks to the tab so our stack tab one could be home stacked import home stack and then let's see we got home stack there should be one more we have one not have to go we need our navigation stack or notifications nope setting stack yeah that's right that was the stack there we go so now if we changed our door navigator in our app doing this on the fly this may not work but we can try to do our tab navigator oops i gotta change to tab navigator refresh create bottom tab navigator oh i forgot to import that navigator oh telling me it is currently not installed so i would need to install that guy so i need so one of the things you need to remember to do for your projects is you need to make sure that you install the the node libraries the react libraries for those individual components into your project so if i stop it npm install start reload stack two screen forgot to change that one into settings okay change the navigator reload element type invalid navigator tab you kind of get the idea though so you can pull them out and then you just have to kind of piece through and find the individual pieces here so we have our constant so i'm probably missing a component that i've imported from another project then if we want to just go back to the app change this guy back to menu reload there we go so that's just a quick and dirty way of organizing your project into individual components node screen styles and assets and essentially once you're done each of the components that you're using should be much smaller and easier to work with so all you have to do is kind of plug and play and build your app so any questions so uh can we react is it strictly for just mobile apps only or can it be used like as a regular programming language and the reason why i'm asking is like i have a friend of mine who is uh who got recently had for uh i mean as a java programmer then he told me learning react so the react itself can be for application development react native is more for web applications like websites or mobile apps okay oh so you can be a programmer whereby you strictly uh just a react native program and you don't know any other language isn't it yes so it's kind of we briefly touched on this early on in this course but this goes back to that analogy of react is like c and then react native is like c plus plugs so react is the core for building applications but then react native is basically built on top of that core with all the web components so it's like you have c which is like the core programming language for c and all its functions and libraries but then you have c plus plus which basically is a collection uh it expands on the c library so you can do a lot more okay all right thank you mike you're welcome okay there are no more questions like to thank you guys uh we appreciate your time and if you'd love to discuss any of these topics further you can send us questions comments and suggestions to us at info at developmenter.com or you can go to our website development.com contact us you can find our videos on vimeo slash developer or you can find us on youtube if you go to youtube and just do a search for developer our goal is making every developer better thanks guys have a great day [Music] you
Transcript Segments
[Music]
so we take sample scroll view
back over to notifications
and now we can import it
components
now instead of scroll view
oh
text
i did not import text style
so
so when you get those error message just
kind of follow through and see what
you're missing
i'm still missing something there
but you kind of get the idea here so you
can break them out you can then stack
your components
looks pretty good
so you can pull it out clean it up
menus pull out styles
we got scroll views
safe area view so remember safe area
view works for ios only
and what that does is it handles that
notch so it puts our code below the
notch
however we do need to add some
additional styles if we're on android
and here is the specific code we can use
for android
so remember we have to import platform
and this is where we use status bar
and so here we're getting the os if it's
android we
get the status bar's current height
otherwise it's zero
let's see what else did we cover we
covered
the only thing i have not touched on is
the tab views
which is just another navigation
so instead of using the navigation
container
we could actually go to
home
so we could change our home stack here
actually instead of using stack
navigation we could use tab navigation
that one
so would look something like this
we wanted a tab navigator
we could create a new navigation
tab
navigator
so we need to make sure we
name it dot js
otherwise it won't recognize our code
and we'll change this guy to
constant
have
you have engaged
[Music]
[Music]
export default
tab navigator
and we need to make sure we include all
of our
inserts
our imports
don't need that one don't need those so
we need navigator container
we have an ion icons
those are the icons that we can set for
the tabs
themselves let's see what else do i have
in here screen route
so let's do screen
tabs
create our
navigator for tab
then we can add our stacks to the tab so
our stack
tab one could be home stacked
import
home stack
and then let's see we got home stack
there should be one more
we have one not have to go we need
our
navigation stack
or
notifications
nope setting stack yeah that's right
that was the stack
there we go
so now if we changed our door navigator
in our app
doing this on the fly this may not work
but we can try
to do our tab navigator oops i gotta
change to tab navigator
refresh
create bottom tab navigator oh i forgot
to import that
navigator
oh telling me it is currently not
installed so i would need to install
that guy
so i need
so one of the things you need to
remember to do
for your projects
is you need to make sure that you
install the the node libraries the
react libraries for those individual
components into your project so if i
stop it
npm install
start
reload
stack two screen forgot to change that
one into settings
okay change the navigator reload
element type invalid
navigator tab
you kind of get the idea though so you
can pull them out and then you just have
to kind of piece through and find the
individual pieces here
so we have our constant so i'm probably
missing a component that i've imported
from another project
then if we want to just go back
to the app
change this guy back to menu
reload
there we go
so that's just a quick and dirty way of
organizing your project into individual
components node screen styles
and assets
and essentially once you're done
each of the components that you're using
should be much smaller and easier to
work with so all you have to do is kind
of plug and play and build your app so
any questions
so uh can we react is it strictly for
just mobile apps only or can it be used
like as a regular programming language
and the reason why i'm asking is like i
have a friend of mine who is uh
who got recently had for uh i mean as a
java programmer then he told me learning
react
so
the react itself can be for application
development
react native
is more for web applications like
websites or mobile apps
okay oh so you can be a programmer
whereby you strictly uh just a react
native program and you don't know any
other language isn't it
yes so it's kind of we briefly touched
on this early on in this course but this
goes back to that analogy of react is
like c
and then react native is like c plus
plugs
so
react is the core for building
applications but then react native
is basically built on top of that core
with all the web components so it's like
you have c which is like the core
programming language for c and all its
functions and libraries but then you
have c plus plus which basically is a
collection
uh it expands on the c library so you
can do a lot more
okay all right
thank you mike
you're welcome
okay there are no more questions
like to thank you guys uh we appreciate
your time and if you'd love to discuss
any of these topics further you can send
us questions comments and suggestions to
us at info at developmenter.com
or you can go to our website
development.com contact us
you can find our videos on vimeo
slash developer or you can find us on
youtube if you go to youtube and just do
a search for developer
our goal is making every developer
better
thanks guys have a great day
[Music]
you