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] does anyone have any questions on the views uh or scroll view areas just real quick just to reiterate now you you've used this to cross um numerous platforms and it it functions the same across like for example uh like android versus uh ios stuff yeah so so here's the thing since i can't get android to work locally let me copy this edge let me go back over here so if i paste this code in here tap play make sure this works oh bear with me going off script for a moment okay oh um again forget this is kind of cool it um this is also how you can debug your application so when you try to run it it will tell you when you're missing imports there we go all right so here's ios hey take a second here so you there we go all right so yeah good point so the safe area view only works for ios does not work on android if you notice it's covered by the status bar here it kind of jumped ahead on me a little bit but i'll go ahead and i'll address this here that's okay uh that was just it's it's one of those that it is it's it's interesting how powerful uh react native is when you look at you know the variants in the devices so all right cool i didn't mean that didn't mean to steal your thunder but since you opened it up for questions so i'll go quiet and let you return thanks oh no no that's fine um and because of time i think i'm going to go ahead and uh cover that because we're actually i'm not on 11 um 30 already so i may not cover all the components today all right so what we're going to do now is so in order to create a custom style or handle the status bar here for android what we're going to do is we're going to create a style down here so this is this type of style here is an inline style so that's where you're actually putting the style at the component uh useful for testing not useful for overall maintenance if you want to reuse this style for other buttons views and so on so what you can do is you can create a [Music] you can actually create a javascript object for styles now i'll get in to more about the overall styles in a moment but uh or possibly next time given time constraints here but what i'm going to do here though is i'm going to show you how you can actually uh add a custom style that will handle this for android so in our container here we will uh need to import a few things one i need to import a module called platform and i need let's see status bar so status bar will return you and all the information about the status bar that is on your device and platform allows you to get the platform information for the device that is running so then here under container we will add uh padding for the top of our application we will use the platform object or the platform module we will use the os property and three equals for comparison and we're going to check for android and here what's interesting uh how rant native does this what they do is uh they allow you to do in line uh conditions so you do essentially an inline if so if this condition is true the question mark here will return uh if it's true it will return the first value which is going to be our status bar dot current height otherwise we'll return zero all right so let me go over that again so here i've created a style for padding top checking the platform operating system is equal to android now if you notice if i hover over os here you this will also be visible in visual code as well but the different properties you can look for is ios android windows mac or web now status bar dot current height will give you the current height of the status bar on the device and if it's uh not found it will return or if we're not on android it will return zero now to apply this style we'll come up here to our safe view and we will add dial equals now because we're going to be calling a javascript object we do not need to do double curly braces instead we need to call our stylesheet or our styles object here dot container and as you can see our status or view is now handled cleanly uh on android now if i take this exact same code here and let me put this individual code you'll see it also does not impact ios ios is using the safe area view and android is using our custom style here to get the status bar header and to shift it down does that answer your question rob yes yes cool but since we're kind of tight on time let me just go over some additional style sheet information and next class i will pick up with the components and we'll go through the rest of them unfortunately we lost time because of the uh zoom yeah issue we had no biggie all right so i've introduced the inline style here i've talked about that and you can also define and pass a javascript object here for our styles but what are style sheets you know what is this actual style sheet well with react native you style your application using javascript so the core components accept a prop a property name style this little style here so all every component in react native has a style attribute and the style names and values usually match how css worked on the web however these names are not the same as css they are similar so rather than background dash color we use background color no dash no hyphen so the style prop can be a plain old java object now that's what we usually use for example code you can also pass an array of styles where the last style in the array has the pers basically the order present so the last style will inherit all the previous styles also as the components grow in complexity it is often cleaner to use style sheets here stylesheet.create to create several different styles in one place making it easier to maintain and configure your applications now again these are not css they are javascript properties we can do it in line like here using the style background color type or we can do it with styles create we could have a container and say body say this one to be our background color so here if we wanted to [Music] and you mentioned so what we can do is we can do styles.container we can add a comma and then do stuff dial dot body that works now you can also put them inside of an array that works as well the documentation recommends doing it this way using the array bracket the hard bracket but it also works without so i don't know if it's just uh if it pertains to maybe one device or another so the recommended approach used to add the uh square bracket around your array now you can also even include these inside of an actual style here what we'll do here is take this now this is going to be cool so here's a shortcut for visual code on it there we go so if you uh hold band and b oh there we go all right so if you select a tag here so say we want to change this view tag to say scroll view if you hold on windows and do control d or on mac you do command d after highlighting it it will allow you to update both the beginning and the ending tag so you could type once and it updates both tags unfortunately it doesn't quite work for styles the way i hoped it would but what we can do here is we can do styles body styles dot few dimensions all right so what i did here is i combined my styles so you can actually combine inline styles with style objects as well so given time that's pretty much all we're going to be able to get to today so we looked at the different scrolling view areas we looked at safe area view we looked at scroll view and we looked at view we also looked at some of the different style options you have where you can use inline styles to set your background color the dimensions the height the width we also looked at using the platform and the status bar modules to get the height of our status bar to actually set our starting point within our view so that our view is not overlapped by the status bar so does anyone have any additional questions not at this time i don't at least dave any questions okay hearing none so today we covered the core components of view safe view and scroll view and we also looked at some of the different styling effects or styling ways you can actually modify the styles of components i'd like to thank you for your time if you'd like to discuss any of these topics further you can reach us at email info developer.com you can reach us on the web at developernerd.com contact us we have our youtube channel the link for that is here and we're also on vimeo our goal is making every developer better have a great day you
Transcript Segments
[Music]
does anyone have any questions on the
views
uh or scroll view areas
just real quick just to
reiterate now you you've used this to
cross um numerous platforms and it it
functions the same across like for
example uh
like android versus uh ios stuff
yeah so
so here's the thing since i can't get
android to work locally let me copy this
edge
let me go back over here
so if i paste this code in here
tap play
make sure this works
oh
bear with me
going off script for a moment
okay
oh um again forget
this is kind of cool it um this is also
how you can debug your application so
when you try to run it it will tell you
when you're missing imports
there we go
all right so here's ios
hey take a second here
so
you
there we go
all right so yeah good point so the safe
area view
only works for ios does not work on
android if you notice it's
covered by the status bar here
it kind of jumped ahead on me a little
bit but i'll go ahead and i'll address
this here that's okay
uh
that was just it's it's one of those
that
it is it's it's interesting how powerful
uh react native is when you look at
you know the variants in the devices so
all right cool i didn't mean that didn't
mean to steal your thunder but since you
opened it up for questions so
i'll go quiet and let you return thanks
oh no no that's fine um and because of
time i think i'm going to go ahead and
uh
cover that because
we're actually
i'm not on 11 um 30 already
so i may not cover all the components
today
all right so
what we're going to do now is so in
order to
create a custom style or handle the
status bar here for android what we're
going to do is we're going to create a
style
down here so this is this type of style
here is an inline style so that's where
you're actually putting the style at the
component
uh useful for testing not useful for
overall maintenance if you want to reuse
this style for other buttons views
and so on so what you can do is you can
create a
[Music]
you can actually create a javascript
object for styles now i'll get in to
more about the overall styles in a
moment but uh or possibly next time
given time constraints here but what i'm
going to do here though is i'm going to
show you how you can actually uh
add a custom style that will handle this
for android so in our container here
we will uh need to import
a few things one i need to import
a module called platform
and i need let's see
status
bar
so status bar will return you and all
the information about the status bar
that is
on your device and platform allows you
to get the platform information for the
device that is running so then here
under container we will add
uh padding for the top of our
application
we will use the platform object
or the platform module
we will use the os property
and three equals for comparison
and we're going to check for android
and here what's interesting uh how rant
native does this
what they do is uh they allow you to do
in line uh conditions so you do
essentially an inline if so if this
condition
is true the question mark here will
return
uh if it's true it will return the first
value
which is going to be our status bar
dot
current height
otherwise we'll return zero
all right so let me go over that again
so here i've created a
style for padding top
checking the platform
operating system is equal to
android now if you notice if i hover
over os here you this will also be
visible in visual code as well but the
different properties you can look for is
ios android windows mac or web
now
status bar dot current height will give
you the
current height of the status bar on the
device
and if it's uh not found it will return
or if we're not on android it will
return zero
now to apply this style we'll come up
here to our safe view
and we will add
dial
equals
now because we're going to be calling a
javascript object we do not need to
do double curly braces instead we need
to call our stylesheet or our styles
object here
dot container
and as you can see our status or view
is now handled cleanly
uh on android
now if i take this exact same code here
and let me put this individual
code
you'll see it also does not impact
ios ios is using the safe area view
and android is using our custom style
here
to get the status bar header and to
shift it down
does that answer your question rob
yes yes
cool
but since we're
kind of tight on time let me just go
over some additional style sheet
information
and
next class i will pick up with the
components and we'll go through the rest
of them
unfortunately we lost time because of
the uh zoom
yeah issue we had
no biggie all right so
i've introduced the inline style here
i've talked about that
and
you can also define and pass a
javascript object
here
for our styles
but what are style sheets you know what
is this actual style sheet well with
react native you style your application
using javascript so the core components
accept a prop a property name style
this little style here so all
every component in react native has a
style attribute
and the style names and values usually
match
how css worked on the web
however
these names are not the same as css they
are similar
so rather than background dash color we
use
background color no dash no hyphen
so the style prop can be a plain old
java object now that's what we usually
use for example
code you can also pass an array of
styles
where the last style in the array has
the pers
basically the order present so the last
style will
inherit all the previous styles
also as the components grow in
complexity it is often cleaner to use
style sheets here stylesheet.create to
create
several different styles in one place
making it easier to
maintain and configure your applications
now again these are not css they are
javascript properties
we can do it in line
like here using the style background
color
type
or we can do it with styles create we
could have a container
and say
body
say this one to be our background color
so here if we wanted to
[Music]
and
you
mentioned
so what we can do is we can do
styles.container
we can add a comma and then do stuff
dial
dot
body
that works
now you can also
put them inside of an array
that works as well
the documentation recommends doing it
this way using the array bracket
the hard bracket
but it also works without so i don't
know if it's just uh
if it pertains to maybe one
device or another
so the recommended approach used to add
the uh square bracket
around your array
now you can also even include these
inside
of
an actual style here
what we'll do here is
take this
now
this is going to be cool so here's a
shortcut for visual code
on it there we go
so if you
uh
hold
band and b
oh
there we go all right so if you select
a tag here
so say we want to change
this view tag to
say scroll view
if you hold
on windows and do control d or on mac
you do command d after highlighting it
it will allow you to update
both the beginning and the ending tag
so you could type once and it updates
both tags
unfortunately it doesn't quite work for
styles the way i hoped it would but what
we can do here is we can do styles
body
styles dot
few dimensions
all right so what i did here is i
combined
my styles
so you can actually combine inline
styles with style objects as well
so
given time that's pretty much
all we're going to be able to get to
today so we looked at
the different scrolling view areas we
looked at safe area view we looked at
scroll view
and we looked at view
we also looked at some of the different
style options you have where you can use
inline styles to set your background
color the dimensions the height the
width we also looked at using the
platform
and the status bar modules to get the
height of our status bar
to actually set our starting point
within our view so that our view
is not overlapped by the status bar
so does anyone have any additional
questions
not at this time i don't at least
dave any questions
okay hearing none
so today we covered the core components
of view safe view and scroll view and we
also looked at some of the different
styling effects or styling ways you can
actually modify the styles of components
i'd like to thank you for your time
if you'd like to discuss any of these
topics further you can reach us at email
info developer.com
you can reach us on the web at
developernerd.com contact us
we have our youtube channel
the link for that is here and we're also
on vimeo our goal is making every
developer better have a great day
you