Detailed Notes
React-Native Fundamental Concepts Part 1 focuses on: View SafeAreaView ScrollView StyleSheets
For a full list of components and APIs goto https://reactnative.dev/docs/accessibilityinfo
Views
Views are containers that support layouts with flexbox, style, some touch handling, and accessibility controls.
View
A view Is the basic building block of UI. That is to say it is a small rectangular element on the screen which displays text, images, or respond to user input. I that case, even the smallest visual elements of an app, like a line of text or a button, are kinds of views. In addition, some kinds of views can contain other views. Such as, a container component like a web element div. Finally, it is also a good option for grouping or laying out children components.
SafeAreaView (iOS only)
In this case, the purpose of SafeAreaView is to render content within the safe area boundaries of a device. It is currently only applicable to iOS devices with iOS version 11 or later. Also, SafeAreaView renders nested content and automatically applies padding to reflect the portion of the view that is not covered by navigation bars, tab bars, toolbars, and other ancestor views. Moreover, and most importantly, Safe Area's paddings reflect the physical limitation of the screen, such as rounded corners or camera notches (i.e. the sensor housing area on iPhone X).
ScrollView
A generic scrolling container that can contain multiple components and views.
StyleSheet
With React Native, you style your application using JavaScript. Thus, all of the core components accept a prop named style. The style names and values usually match how CSS works on the web, except names are written using camel casing, e.g. backgroundColor rather than background-color.
What is React-Native
React Native is an open-source mobile application framework created by Facebook, Inc. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows and UWP by enabling developers to use React's framework along with native platform capabilities.
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 the more i work with this uh more i work with react native the more i find that i can have so many different topics to talk about to introduce you to react native so today so in our first lesson actually we talked about getting started how to set up an environment how to install the libraries the apis and then configure your desktop in order for you to actually run your react native application on ios android or the web so today we're going to be talking about some of the fundamental concepts uh before i talk about fundamental concepts let me reiterate what react native is so react native is an open source mobile application framework created by facebook now this is used or was created to help developers develop applications for android android tv ios mac os tv os web windows and so on and it allows users to use the react native framework along with its native platform capabilities so today we're going to be getting into those fundamental concepts we're going to actually talk about the different types of components that you can add to a mobile application or in a sense a react native application and this table here is taken straight from the react native website and it i like this table because it really highlights the differences between react native android ios and the web and really it's just essentially a new set of tags that does the same thing on different devices so in react native we have the main container so to speak which is our view in android is a view group ios is a ui view and if we think about web pages this is essentially a non-scrolling div so as they describe it here it's a container that supports layouts with flexbox style some touch handling and accessibility controls now in order to actually display some additional information like text images and so on we have to use some additional tags so in react native we have the text tag and it's commonly more familiar with if you think back to web it's the p tag the paragraph tag and in android and ios it's text view or ui text view so if you notice here really the only differences between android and ios except for view group is the tags are prefixed with ui for ios they're pretty much the same and then edit text is text field ua text field for ios view and our text field again allows us to display text styles nested strings of text and even handle touch events images same as img for web allows us to display different types of images scroll view is a scrolling container so we can actually scroll and view elements that are off the page again same as div the only difference is in mobile it's something that you can actually scroll up and down whereas with divs because of a web page the browser uh controls the scrolling then we have text input which is the equivalent of a form input in web of input type tech and this allows the user to enter text so these are the basic core components that we're going to look at today along with a few additionals but we're mainly just going to focus on the different components and how we can use it i muted them for you thank you all right now so the first thing we want to do is we're going to go out to our desktop and we're going to create a react uh native project for us to start with so we're going to use expo again so we'll do expo init and we're just going to call this one sample project or sample app again we have our choices we can do blank blank type script tab type script minimal or minimal typescript i'm just going to keep it using blank for now we will get into these others in future lessons so we'll start with blank and it only takes a few seconds to install everything and load and what it's doing is installing all the javascript dependencies it's building the project if you think about java this is kind of similar to like a maven install uh where you use maven to generate your projects so it's going to pull in all your dependencies build your project structure build the folders and then install any additional dependencies that you need there we go now i like walking through this again because last time we quickly went over how to create projects with expo so once it finished installing and building your project it's going to walk you through some different steps here to actually start your project or work with it so you first need to actually go into the folder because you're still in your workspace so we'll go into cd sample app now you can do you can use the npm you can use the node commands to start this or you can use expo now before i do that i'm going to type code dot so that we can actually work with our project code in visual studios well that opens up i'm going to also follow up with this command with expo start and what this is going to do is this is going to start our native uh our native application okay it started the development tools but here again we have our qr code we can take a picture of that with their phone and load our app on our phone we could also uh share this url to our expo apps on our devices now if everything is working hunky-dory on our systems uh with android we can kick off android we can kick off ios and we can kick off web now because big sur has a major update android is still not running friendly on my mac right now i need to get the linux or the arm emulator set for the android application the simulators to essentially kick off so i won't be able to do android today instead i'm going to show you uh two different versions of ios so we'll start the first one just hit i and this one's going to open a iphone 8 it's gonna install expo and then it's going to start the project all right now it's running now if i hit question or if i do question mark it gives me the list of all the commands again now we want to test this on two different simulators so we have the iphone 8 without the notch and i want to select an ios emulator that actually contains the notch at the top so i can do shift i and i can go down here to iphone 12 and it will start up a second simulator running iphone 12. and as you can see here now we have that annoying little notch that apple introduced with the iphone 12. and i'm showing this because once we uh start playing around with the components you're going to see that there's some things we need to watch out for when we use certain views on different devices and lastly if you want to actually debug the application or actually look at the developer tools you can do shift d to toggle opening the developer tools on startup which is currently disabled and then you can open the developer tools by pressing d and this opens up our emulator here that essentially gives you a browser version of what we see in the console all right so we have our applications running so let's go into visual studio code oh one other thing if you go to this link this gives you a list of all the components that you can get or that you can use for react native now we're not going to cover all of these today but we are going to highlight pretty much the ones you're going to use the most all right go back in xcode here so here if we go under our app.js now this is the main component of our expo app where the main screen the first screen is loaded now in order for us to use any of the react native components we need to make sure that we import them so here by default it's going to start you with a simple page called stylesheet text and view so it's going to contain three components and we're importing them from react native we're also going to have to import react from the react libraries and it also is including the status bar for the expo status bar now for your applications you may not need this one if you're not running an expo but if you are running an expo this here will give you the little status bar down here if the application is running connected or has any problems now the other thing is uh it created a sample style sheet for us now we'll come back to this in a minute but just know that this is where some of the styling information is contained for our application all right so the first thing i want to talk about is this view component so views are a container that supports different layouts with flexbox style some touch handling and access controls our view is a basic building block of our ui it's essentially a small rectangular element on the screen which can be used to display text images or respond to users input even the smallest visual element of an app like a line of text or a button are kinds of views also some kinds of views can contain other views now if we think of views if we like if we go back to the right here u is essentially a div in html and divs are just a placement container or holder container where we can put a whole bunch of different elements inside of it and build out our application so it's a good little component for grouping or layering out of children so if we look at this we can do a sim simple view and as i make the changes we see it real time so we have view now if we go inside of view and hit control space we get a list of all the different attributes that we can attach to a view now i'm not going to go into all these today but these are just some of the ones that you can actually get in and actually play around with now if we want to add some style we can use the style attribute followed by equal and it requires these curly brackets and let's just say we want to change the background color of our view so we'll do an inline style right now this is similar to what you can do inside of html so we'll do style we'll use background color and colon and let's make it blue save all right let's also add some dimensions to our view so let's also add a height and let's say 100 pixels and then let's also add a width and let's give it 20 pixels and there's our bar so here's our view let's make that a little bit wider let's make it a hundred off oh thousand yeah that's way too big there we go all right so as you can see we now have a view but if you notice our view is also being displayed behind the status bar so it's being displayed at the topmost section of the application well we really don't want that because we want all of our information or all of our view to be displayed so the alternative to a view for ios is to use something called safe view or safe area view simply type safe area view now here's the cool part in visual code if you're if you use the little helper tool here when you select a component that is not in your import list it will automatically import it for you that way you don't have to constantly remember that you have to import wrap this around our view save and just by doing that just by wrapping our view in a safe area view all of a sudden our view on ios at least is now below the status bar so we didn't have to do any additional styling to make our view visible so the safe area view component is used to render or to render the content within the safe area boundaries of your device now it's currently only uh applies to ios devices with ios versions 11 or later now the safe view safe area view renders nested content and automatically applies the padding to reflect the portion of the view that is not covered by the navigation bars tab bars toolbars and other ancestor views so moreover the most importantly the safe area padding reflects the physical limitations of the screen such as the rounded corners or camera notches essentially the sensor housing area of the iphone x now another view we can add is a scroll view a curve safe area view we can add a scroll view and i want to wrap that around our main view now what this does is it allows us to actually scroll our view up and down now you can't really see it much but it's kind of shrinking here so if i click inside of my view i can move it up and down now this is useful when you have a view that has multi multiple components that cannot all be displayed in one section and then that allows the users to press and slide the view up or down so the scroll view is the generic scrolling container that can contain multiple components and views so we could actually throw in a couple of views here right thank you two more views change that one to red one to yellow save so we now have three views now if you notice you can now see that i'm able to scroll the whole view up and down now if i added an additional scroll view let's just do this copy the whole section here so if i take a second one and let's change this one to be green black purple so if i click on the top view i can scroll it up and down does not impact the second scroll view and then i can click the second scroll view and scroll up and down you
Transcript Segments
[Music]
so the more i work with this uh more i
work with react native the more
i find that i can have so many different
topics to talk about to introduce you to
react native so today so in our first
lesson actually we talked about getting
started how to set up an environment how
to install the libraries the apis and
then configure your desktop in order for
you to actually run your react native
application
on ios android or the web
so today we're going to be talking about
some of the fundamental concepts
uh before i talk about fundamental
concepts let me reiterate what react
native is
so react native is an open source mobile
application framework created by
facebook now this is used or was created
to help developers develop applications
for android
android tv ios mac os tv os web windows
and so on and it allows users to use the
react native framework along with its
native platform capabilities
so today we're going to be getting into
those fundamental concepts we're going
to actually talk about the different
types of components that you can add to
a mobile application or in a sense a
react native application
and this
table here is taken straight from the
react native website and it i like this
table because it really highlights the
differences between react native android
ios and the web and really it's just
essentially a new set of tags that does
the same thing on different devices so
in react native we have the main
container so to speak which is our view
in android is a view group ios is a ui
view and if we think about web pages
this is essentially a non-scrolling div
so
as they describe it here it's a
container that supports layouts with
flexbox
style some touch handling and
accessibility controls
now in order to actually display some
additional information like text images
and so on we have to use some additional
tags so in react native we have the text
tag and it's commonly
more
familiar with if you think back to web
it's the p tag the paragraph tag and in
android and ios it's text view or ui
text view so if you notice here really
the only differences between android and
ios
except for view group is the tags are
prefixed with ui for ios
they're pretty much the same
and then edit text is text field ua text
field for ios view
and our text field again allows us to
display text styles nested strings of
text and even handle touch events
images
same as img for web
allows us to display different types of
images
scroll view is a scrolling container so
we can actually scroll and view elements
that are off the page
again same as div the only difference is
in mobile it's something that you can
actually scroll up and down
whereas with divs because of a web page
the browser uh controls the scrolling
then we have text input which is the
equivalent of a form input in web of
input type tech and this allows the user
to enter text
so these are the basic core components
that we're going to look at today along
with a few additionals but we're mainly
just going to focus on the different
components and how we can use it
i muted them for you thank you
all right now so the first thing we want
to do is we're going to go out to our
desktop
and we're going to create a react uh
native project for us to start with so
we're going to use expo again so we'll
do expo init and we're just going to
call this one sample project or sample
app
again we have our choices we can do
blank blank type script tab type script
minimal or minimal typescript i'm just
going to keep it using blank for now we
will get into these others
in future lessons
so we'll start with blank
and it only takes a few seconds
to install everything and load
and what it's doing is installing all
the javascript dependencies it's
building the project
if you think about java this is kind of
similar to like a maven install uh where
you use maven to generate your projects
so it's going to pull in all your
dependencies
build your
project structure build the folders and
then install any additional dependencies
that you need
there we go
now i like
walking through this again because
last time we quickly went over how to
create projects with expo so once it
finished installing and building your
project it's going to walk you through
some different steps here to actually
start your project or work with it so
you first need to actually go into the
folder because you're still in your
workspace
so we'll go into cd sample app
now you can do
you can use the
npm you can use the node commands to
start this or you can use expo now
before i do that i'm going to type code
dot so that we can actually work with
our project code in visual studios
well that opens up
i'm going to also follow up with this
command with expo start
and what this is going to do is this is
going to start
our
native uh
our native application
okay it started the development tools
but here again we have our qr code we
can take a picture of that with their
phone and load our app on our phone
we could also
uh share this url to our expo apps on
our devices
now if
everything is working hunky-dory on our
systems
uh with android we can kick off android
we can kick off ios and we can kick off
web now because big sur has a major
update android is still not running
friendly on
my mac right now i need to get the
linux or the arm
emulator set
for
the android
application the simulators to
essentially kick off
so i won't be able to do android today
instead i'm going to show you uh two
different versions of ios so we'll start
the first one just hit
i
and this one's going to open
a
iphone 8
it's gonna install expo and then it's
going to start the project
all right now it's running now if i hit
question or if i do question mark
it gives me the list of all the commands
again
now we want to test this on two
different simulators so we have the
iphone 8 without the notch
and i want to select an ios emulator
that actually contains the notch at the
top so i can do shift i
and i can go down here to iphone 12
and it will start up a second simulator
running iphone 12.
and as you can see here now we have that
annoying little notch that apple
introduced with the iphone 12.
and i'm showing this because once we uh
start playing around with the components
you're going to see that there's some
things we need to watch out for when we
use certain views on different devices
and lastly if you want to actually debug
the application or actually look at the
developer tools you can do shift d to
toggle opening the developer tools on
startup which is currently disabled and
then you can open the developer tools by
pressing d
and this opens up our
emulator here that essentially gives you
a browser version of what we see in the
console
all right so we have our applications
running so let's go into visual studio
code
oh one other thing
if you go to this
link
this gives you a list of all the
components
that you can get or that you can use for
react native now we're not going to
cover all of these today but we are
going to highlight
pretty much the ones you're going to use
the most
all right
go back in xcode here
so here if we go under our app.js now
this is the main component of our expo
app where
the main screen the first screen is
loaded
now in order for us to use any of the
react native components we need to make
sure that we import them
so here by default it's going to start
you with a simple page called stylesheet
text and view so it's going to contain
three components
and we're importing them from react
native
we're also going to have to import react
from the react libraries
and it also is including the status bar
for the expo status bar
now
for your applications you may not need
this one
if you're not running an expo but if you
are running an expo this here will give
you the little status bar down here if
the application is running connected or
has any problems
now the other thing is
uh it created a sample style sheet for
us now we'll come back to this in a
minute but just know that this is where
some of the styling
information is contained for our
application
all right so the first thing i want to
talk about is this view component so
views are a container that supports
different layouts with
flexbox style some touch handling and
access controls
our view
is a basic building block of our ui
it's essentially a small rectangular
element on the screen which can be used
to display text images or respond to
users input
even the smallest
visual element of an app like a line of
text or a button are kinds of views
also some kinds of views can contain
other views
now if we think of views if we like if
we go back to the
right here
u is essentially a div in html and divs
are just a placement container or holder
container where we can put a whole bunch
of different elements inside of it and
build out our application
so it's a good
little component for grouping
or layering out of children
so if we look at this we can do a sim
simple view
and as i make the changes we see it real
time
so we have view
now if we go inside of view
and hit control space we get a list of
all the different attributes that we can
attach to a view now i'm not going to go
into all these today but these are just
some of the ones that you can actually
get in and actually play around with
now if we want to add some style we can
use the style
attribute
followed by equal
and it requires
these curly brackets
and let's just say we want to change the
background color of
our view so we'll do an inline style
right now this is similar to what you
can do inside of
html
so we'll do style
we'll use background color
and
colon
and let's make it blue
save
all right let's also
add some
dimensions to our view
so let's also add
a height
and let's
say
100 pixels
and then let's also add a width
and let's give it 20 pixels
and there's our bar
so here's our view let's make that a
little bit wider let's make it a hundred
off oh thousand yeah that's way too big
there we go
all right so as you can see we now have
a view
but if you notice our view
is also
being displayed behind the status bar so
it's being displayed at the topmost
section of the application well we
really don't want that because we want
all of our information or all of our
view to be displayed
so the alternative to a view for ios
is to use something called safe view or
safe area view
simply type safe
area view
now here's the cool part in visual code
if you're
if you use the little helper tool here
when you select
a component that is not in your import
list it will automatically import it for
you
that way you don't have to constantly
remember that you have to import
wrap this around our view
save
and just by doing that just by wrapping
our view in a safe area view
all of a sudden our view on ios at least
is now below the status bar
so we didn't have to do any additional
styling to make our view visible
so the safe area view component
is used to render or to render the
content within the safe area boundaries
of your device
now it's currently only uh applies to
ios devices with ios versions 11 or
later
now the safe view safe area view renders
nested content and automatically applies
the padding to reflect the portion of
the view that is not covered by the
navigation bars tab bars toolbars and
other
ancestor views
so moreover the most importantly the
safe area padding reflects the physical
limitations of the screen
such as the rounded corners or camera
notches
essentially the sensor housing area of
the iphone x
now another view
we can add is a scroll view
a curve safe area view
we can add a scroll view
and i want to wrap that around our main
view
now what this does is
it allows us to actually scroll
our view up and down now you can't
really see it much but it's kind of
shrinking here
so if i click inside of my view i can
move it up and down
now this is useful when you have a view
that has multi
multiple components that cannot all be
displayed in one section
and then that allows the users to press
and
slide the view up or down
so the scroll view is the generic
scrolling container that can contain
multiple components and views
so we could actually throw in a couple
of views here
right thank you
two more views
change that one to red
one to yellow
save
so we now have three views now if you
notice
you can now see that
i'm able to scroll the whole view
up and down
now if i added an additional scroll view
let's just do this copy the whole
section here
so if i take a second one
and let's change this one to be green
black
purple
so if i
click on the top view
i can scroll it up and down does not
impact the second scroll view and then i
can click the second scroll view and
scroll up and down
you