Detailed Notes
React-Native Fundamental Concepts 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] all right guys welcome back so last time we covered fundamental concepts of react native and in this section we're going to actually continue our discussion on fundamental concepts and actually get into talking about the next component in our list here the last time we covered views scroll views and some other views uh for building out our mobile applications for android ios using react native this time we're going to focus on the text component here which displays our styles and nested strings of text on our screen on our mobile apps or on our web apps now just a quick recap the text component in react native is similar to the text view in android view ue text view in ios view and it's also equivalent to the p tag or paragraph tag of html so that's it for our slides we're going to jump out and actually go back to our code examples again i'm going to be using visual studio and after looking at the video from last time i noticed the text was a little bit smaller so uh does this look better to you guys today is it clear yes it looks really clear excellent all right so last time we looked at things like safe area view which allows us to uh not have to configure our mobile app our container for different devices uh for ios for instance it actually covers uh removes our view beneath the header information on mobile app for instance the little notch here uh our little carrier information the time and our battery so using safe area view it puts our main container beneath the mobile restricted areas however with android we had to actually customize this so for that we switched over to our snack.expo to look at android now in android we couldn't use safe area view safe area view is ios specific so what we did instead was we came down here and created a custom style using stylesheets for a graded a attribute called container and we use the padding top along with the platform which we imported the platform class and the status bar class which allows us to check to see if the ios is android windows mac mac os ios or web and in this case we wanted to check for android and then we use the status bar class to get the status bar's current height and if it's not if this comes back as null we'll set it as zero if this is if it does find a status bar then it's going to return the status bar height and use that so if we're android it's going to use the current height and it's going to drop it down beneath the title information or the status bar of our device we also looked at things like scroll view which allows us to actually scroll or set our view containers we also looked at views and each of these little components here is a view we have to put all of our context inside of our views which will be looking at that today so additional tags go inside of views and views essentially help us control the layout of our applications now i'm still not getting into the more complex layout designs of our mobile apps yet we're still going to focus primarily today on component and we also talked about inline versus javascript object styles but we could actually do an inline style using the squiggly bracket or double squiggly bracket to actually define an inline style using the style attribute we could actually call or use the style beat to create a javascript object called styles which we can then call using style and we can nest these together using the array attribute inside of our squirrely bracket so in an inline style we had to use two early brackets to define the array however for a styles object we have to use the array container or the array block to define our style containers so we have styles using the style object and the container now the inline style can also be added to this array so we have our outer curly brace we have our array and then we have a inline style again denoted by the curly brace for background color blue and then we're also combining it with a styles object so that's just a quick recap of last time does anyone have any questions on what we did here before we move on to today's component nope make this get a little bit bigger there we go all right so the next topic we're going to look at is a text so in react text or the text tag is so text is denoted by the text tag view here and it has to go inside of a container view of some kind and it's the text tag now if we hover over text um import as text back over here one of these actually gave me the a little nope i guess not one of the tools i was working with actually was nice and it gives you the definition of the tags as you work but i might have that on another machine so just to briefly tell you what text is so text is a react component for displaying text on your screen so the text supports nesting styling and touch handles it also has an attribute for the number of lines so if we want to create like a text area of text where we have multiple lines of text we can use the attribute number of lines so for instance if we want to define a static text reference we can do something like this so we can go up here and we can import so if we want to use something statically we have to import what is called use state from react and what this state does is it now allows us to define a constant and store it into basically into static memory now if we use a constant let's say we do a title text ray so there's our label our basically our key to reference our title we're going to call set or create a variable set title text this is going to equal use state and we'll say hello world okay since this is the title we will just do sample app now you don't need to save this uh like i just did but um it's just a fourth of habit when i write code i save and then we'll define another constant here and we will call this one body text and this one is just going to be a straight up variable and we're going to use state and some really long text here okay so we now have a constant defined in a kind of an array map so we have a key value pair and we can also define a constant straight up with the constant variable name and use the state now what's nice about this is we can come down here and inside of our text here i can actually put using the early braces body text and as you can see we've now added our constant text here our static text inside of our text or inside of our view here what's nice that allows us to define text directly we can also add text directly into the container so let me clean up this view here let's get rid of the other views for now and just pick with the one view and let's make this view a little bit taller so let's say 1000 a little bit to 500 there we go and we'll increase the width to say 300. right so far so good nice and clean let's make that a little more readable now let's do plate now we have some text inside of our view using some styles and using a constant now we can also nest our text tags right here do another text actually if you don't mind i'm going to take this and move this over to visual code a little easier to code over here need the constants um okay if i save this our apps get updated and our text is getting formatted all right so let's add another text block here okay we now have a nested text and let's use title text here let's see so i've got title text add some break points so if you want to add any special characters you need to make sure you put them inside squarely braces and by special characters i mean things like new line backlash n we want to add two spaces between or two line breaks between our text and do it like that we can also type text directly into uh our tag so we can do hello world save and as you can see we can add it directly in so this works to allow us to create static constant text that we can reuse throughout our applications uh and what's nice about the constants is these can be defined at each screen or each modal module inside of our application or they can be defined globally throughout the application so we can actually have static text to make buttons um common throughout the application or we can create custom components uh they get reused all right so we have inline text actually let's just uh put that one back add a break in there cleaner all right so now we have inline text we have our constant text and we have a really long text that wraps now for this guy here i want to also add the number of line ah here we go so when you hover over so this is used to truncate the text with ellipses after computing the text layout so what would happen here is if it goes down five lines so if i say equal to let me set equal to one since we know it wrap so if i save this oh because the containers right so if the number of lines exceeds the container then the text would be followed by ellipsis dot dot dot if it's not our container is so big the text just continues to get displayed something else to consider so we have our container here so we have our styles of our view but we can also add styles to our text so here we'll create a base text attribute and let's set our font so we can type in font and you'll see the different font attributes you can add so we're going to start with font family and this allows us to change the uh font to say time to roman arial courier we'll do a function for this example okay so you can see that our text changed now if i delete that real quickly oh i guess that's the default let's try a different one let's try earlier it slightly changes all right and then next let's change our title text and change its font size and make it 20 and also let's change its font weight to be both all right so now we need to apply these styles so we'll come up here and go to our topper topmost and actually let's wrap this whole thing into another text i want to actually show you how the text can act as a container so if we have an outermost text we can actually define our base tag at the parent level and then this style will apply to all children of this text text so if we start here and we do style and we say equal to styles dot page text save and as you can see it has now applied courier to all of our text now if i just apply this at this level and save oh that guy is inside of that one so this guy if we play at that level it only applies to that tag so as you can see it's nested so the all the children of the parent tag will inherit the styles of the parent now that being said if an underlining style gets applied to a child that overrides or changes say for example the font family then that attribute is going to be what is applied at that level and for any of its children so it's kind of a cool way where you can actually define a common look and feel at the beginning and then apply it to custom tags so anytime you use your custom tag or component it will your look and feel of your app will be the same all right so let's finish this up let's add the last uh style here so let's do styles dot inline uh title text okay i got bolded not quite what we wanted oh yeah i separated one this guy will put outside of that title text save now you can see that the title is bold and our text is final text the reason it was uh updating it before was because i accidentally had put our body text inside of our title tag or pedal pitch tag you
Transcript Segments
[Music]
all right guys welcome back so last time
we covered fundamental concepts of react
native and in this
section we're going to actually continue
our discussion on fundamental concepts
and actually get into
talking about the next component in our
list here the last time we covered views
scroll views and some other views uh for
building out our mobile applications for
android ios
using react native this time we're going
to focus on the text component here
which displays
our styles and nested strings of text
on our screen
on our mobile apps or on our web apps
now just a quick recap the text
component in react native is similar to
the text view
in android view
ue text view in ios view
and it's also equivalent to the p tag or
paragraph tag of html
so that's it for our slides we're going
to jump out and actually go back to our
code examples
again i'm going to be using visual
studio
and after looking at the
video from last time i noticed the text
was a little bit smaller so uh does this
look better to you guys today is it
clear
yes it looks really clear
excellent
all right so last time we looked at
things like safe area view which allows
us to uh not have to configure our
mobile app our container for different
devices uh for ios for instance it
actually covers uh removes our view
beneath the
header information on mobile app for
instance the little notch here
uh our little carrier information the
time and our battery
so using safe area view it puts our main
container beneath the mobile restricted
areas
however with android we had to actually
customize this so for that we switched
over to
our
snack.expo
to look at android
now in android
we couldn't use safe area view safe area
view is ios specific so what we did
instead was we came down here and
created a custom style using stylesheets
for a
graded a attribute called container
and we use the padding top
along with the platform
which we imported
the platform
class and the status bar class which
allows us to check to see if the ios is
android windows mac
mac os ios or web and in this case we
wanted to check for android and then we
use the status bar class to get the
status bar's current height and if it's
not
if this comes back as null we'll set it
as zero if this is if it does find a
status bar then it's going to return the
status bar height and use that
so if we're android it's going to use
the current height and it's going to
drop it down beneath the title
information or the status bar of our
device
we also looked at things like scroll
view which allows us to actually scroll
or set our view containers
we also looked at views
and each of these little components here
is a view
we have to put all of our context inside
of our views which will be looking at
that today so additional tags go inside
of views and views essentially help us
control the layout of our applications
now i'm still not getting into the more
complex layout designs of our mobile
apps yet we're still going to focus
primarily today on component
and we also talked about inline
versus
javascript object styles but we could
actually do an inline style using the
squiggly bracket
or double squiggly bracket to actually
define an inline style using the style
attribute
we could actually call or use the style
beat to create a javascript object
called styles
which we can then
call using style
and we can nest these together using the
array attribute inside of our squirrely
bracket
so in an inline style we had to use two
early brackets to define the array
however for
a styles object we have to use the array
container or the array block to define
our style containers so we have styles
using the style object and the container
now the inline style can also be added
to this array so we have our outer
curly brace we have our array
and then we have a inline style again
denoted by the curly brace for
background color blue and then we're
also combining it with a styles object
so that's just a quick recap of last
time does anyone have any questions on
what we did here before we move on to
today's
component
nope
make this get a little bit bigger
there we go
all right so the next topic we're going
to look at
is a text
so
in react
text or the text tag
is
so text is denoted by the text tag
view here
and it has to go inside of a container
view
of some kind
and it's the text
tag
now if we hover over text
um
import as text
back over here
one of these actually gave me the
a little
nope i guess not
one of the tools i was working with
actually was nice and it gives you the
definition of the tags as you work but i
might have that on another machine
so
just to briefly tell you what text is so
text
is a react component for displaying text
on your screen
so the text supports nesting styling and
touch handles
it also has an attribute for the number
of lines so if we want to create like a
text area
of text where we have multiple lines of
text we can use the attribute number of
lines
so for instance if we want to define a
static text reference we can
do something like this
so we can go up here and we can
import
so if we want to use something
statically we have to import what is
called use state
from react
and what this state does is it now
allows us to define a constant and store
it into
basically into static memory
now if we use a constant
let's say we do a title
text
ray so there's our label
our
basically our
key to reference our title
we're going to call set or create a
variable set title
text
this is going to equal use state
and we'll say hello world
okay since this is the
title
we will just do sample app
now you don't need to save this uh like
i just did but um it's just a fourth of
habit when i write code i save
and then we'll define another constant
here and we will call this one
body text
and this one is just going to be a
straight up
variable and we're going to use state
and some really long text here
okay so we now have a constant defined
in a
kind of an array map so we have a key
value pair
and we can also define a constant
straight up with the constant
variable name and use the state
now what's nice about this is we can
come down here
and inside of our text here
i can actually put
using the early braces
body
text
and as you can see we've now added our
constant text here our static text
inside of our text or inside of our view
here
what's nice that allows us to define
text directly we can also add text
directly into the container so let me
clean up this view here
let's get rid of the other views for now
and just pick with the one view
and let's make this view a little bit
taller so let's say
1000
a little bit to 500
there we go
and we'll increase the width to say 300.
right
so far so good
nice and clean
let's make that a little more readable
now let's do plate
now we have some text
inside of our view using some styles
and using a constant
now we can also nest our text tags
right here do another text
actually if you don't mind i'm going to
take this and move this over to
visual code a little easier to code over
here
need the
constants
um
okay if i save this
our apps get updated
and our text is getting formatted all
right so let's add another text block
here
okay we now have a nested text
and let's use title text here
let's see so i've got title text
add some break points so if you want to
add
any special characters you need to make
sure you put them inside squarely braces
and by special characters i mean things
like new line
backlash n
we want to add two spaces between or two
line breaks between our
text
and do it like that we can also
type text directly into
uh our tag so we can do hello world
save and as you can see we can add it
directly in
so this works to allow us to create
static constant text that we can reuse
throughout our applications
uh and what's nice about the constants
is these can be defined at each
screen or each modal
module inside of our application or they
can be defined globally throughout the
application so we can actually have
static text to make buttons um common
throughout the application or we can
create custom components uh they get
reused
all right so we have inline text
actually let's just uh put that one back
add a break in there
cleaner
all right so now we have inline text we
have our constant text and we have a
really long text that wraps
now for this guy here i want to also add
the number
of line
ah here we go so when you hover over so
this is used to truncate the text with
ellipses after computing the text layout
so what would happen here is if it goes
down five lines so if i say equal to
let me set equal to one since we know it
wrap so if i save this
oh because the containers
right so if the number of lines exceeds
the container
then the text would be followed by
ellipsis dot dot dot
if it's not
our container is so big
the text just continues to get displayed
something else to consider
so
we have our container here so we have
our styles of our view but we can also
add styles to our text
so here we'll create a base text
attribute
and let's set our font so we can type in
font and you'll see the different font
attributes you can add so we're going to
start with font family and this allows
us to change the uh
font to
say time to roman arial courier
we'll do a function for this example
okay
so you can see that our text changed now
if i
delete that real quickly
oh i guess that's the default let's try
a different one let's try
earlier
it slightly changes
all right and then next let's change our
title text
and change its font size
and make it 20
and also let's change its font weight
to be both
all right so now we need to apply these
styles so we'll come up here and go to
our topper topmost
and actually let's wrap this whole thing
into
another text
i want to actually show you how the text
can act as a container
so if we have an outermost text
we can actually define
our base tag
at the parent level and then
this style will apply to all children of
this text text
so if we start here and we do style
and
we say equal to
styles dot
page text
save
and as you can see it has now applied
courier to all of our text
now if i just apply this
at this level
and save
oh that guy is inside of that one so
this guy
if we play at that level
it only applies to that tag so as you
can see it's nested so the
all the children of the parent tag will
inherit the styles of the parent
now that being said
if
an underlining style gets applied to a
child that overrides
or changes say for example the font
family then that
attribute is going to be what is applied
at that level and for any of its
children
so it's kind of a cool way where you can
actually define a common look and feel
at the beginning and then apply it to
custom tags so anytime you use your
custom tag or component
it will your look and feel of your app
will be the same
all right so let's finish this up let's
add the last
uh style here so let's do styles
dot inline
uh
title text
okay i got bolded not quite what we
wanted
oh yeah i separated one
this guy
will put outside of that
title text save
now
you can see that the title
is bold
and our text is final text
the reason it was uh
updating it before was because i
accidentally had put our body text
inside of our
title tag or pedal pitch tag
you