Detailed Notes
React-Native Fundamental Concepts focuses on: Images, Background Image, layout and events
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] and for this example let's look at a layout strategy where we can define the width and the locations of our buttons again we'll do a separator and here we'll do view and first we want our text again we want our styles um and this one is going to be example 4 layout but there it is now this time instead of just adding our buttons let's add an additional view so that we can control where our buttons go we'll do another view and this one we're going to use a new style that we'll create in a second so we'll do style bits to text and you add future fix to text and here we're going to do flex direction this time we're going to keep it on the row and we will justify our context and we'll do the space between what this will do is it will let us it will pad between the components that we add to this go inside of review we're going to add two buttons two but one is going to have text title it's going to be left button in on press now again do an alert and this time we will display the message left button clicked and inside of our second button we will name it right button and use healer right button click so here's our layout the justify context padding space between fills uh the gap between each button so the left button is pushed to the left and the other button is added to the right now if we added a third it would simply be in the middle and now when we click these there's your left button middle button and right button all right so that is an example of how to use buttons any questions on how you use the button component okay hearing none we'll move on to the last component for the day and that is going to be the touchable opacity add that one here obesity and the touchable opacity component is a wrapper for making views respond properly to touches these touches can be on press down and when you push down the opacity of the wrap view is decreased dimming opacity is controlled by wrapping the children in an animated view which is added to the view hierarchy however be aware that this can affect the layout so for this example let's add do you use static or use state component oops okay oh had to be on a separate line all right so we're going to use the use state feature to allow us to actually store a value dynamically so that we can reference the state of a constant value from anywhere within our application so we've added our import here the other components we need are going to be our style sheet text view and touchable opacity right clean up previous example all right so in this case we want to define our constant within our application but here we will define it within the function so we'll do constant create a variable called count and we will use the method set count and we will use state of zero now we're also going to do constant on press we're going to call set count use previous count so previous count is going to be our value that we pass into our set count to use it we're going to use previous count this one okay now inside of our return we need to add a view but to add our style container all right inside of our view let's add another view and we will create a new style for this one and inside of this view we're going to display the text count and we're going to reference our static variable we need some attributes down here so let's add a count container let's add align items let's center it and let's add some padding and add 10 pixels for padding let's also add an attribute over here for a button add some styling for a button and our button will be centered so we will also align items center color let's make it gray and also add some padding and add 10 pixels so we got styles container and there's our account we have our text now we need our button so now instead of button we're going to use our touchable opacity now this guy has a wrapper or instead of title to display text you add text it will add our text press here now for our touchable opacity let's add our style i have a button style and let's also do our on press and set it equal to our on press constant okay so we have our button now if we press this guy as you can see the button kind of fades out between click and our account goes up and that's how you use touchable opacity any questions on how to use this guy nope all right so before i wrap up are there any questions at all any of the components we have covered today i don't think we one one question uh is this mainly uh i mean in order to be good in this you have to be very very good at css and html uh not so much html remember these are components so it's xml tag driven uh and the styling is css like so you just have to look at the libraries that are out there if you go to react native if we go out to react native if you go to the docs uh like components for instance a click button here are all the attributes and things that you can apply to buttons okay gotcha and then there are other properties that you can look up like image style properties layout properties i mean there are tons of these so really if you're using something like code or you're using the expo the moment you get in here and you start typing or you can do control space and then here all the different attributes that you can apply okay got it okay cool so they really simplify because if you do control space inside of visual code if you have the plug-in install there's all your styling like uh attributes that you can add okay just gotta look for little blue boxes anything below the blue boxes now you're getting into actual um like this here is so these are components styling these are text stylings these are functional stylings it's kind of cool how visual code works expo isn't quite as clean like this but again you can do like the control space in expo and it will give you a list of components gotcha okay and michael you're self-taught on this here isn't it yes this is react native is very similar to an older tool i used to use called titanium alloy and it was very tag driven like this and it really looks like react native borrowed a lot from their framework uh because i was able to take one of our older applications that me and rob worked on and almost directly drop it in with a few tweaks to make it work in react native okay all right to quickly review today we talked about the final uh component or components of react native we looked at using the image component to add local image resources as well as network uh images into our application when importing images or using the image component you need to remember that unless your image is local you have to set the styling components for setting the size of your image image background is a good tag to use when doing with splash pages when you want to just put your image to be the full size of the screen and finally we looked at using the button tag and the touchable opacity tags to handle wrapping of our buttons to where we can actually interact and click to do some type of action on our pages i'd like to thank you for your time if you would like to discuss any of these topics further you can send us questions comments and suggestions through any of these methods you can reach us at email at info developer.com you can go to our developer.com site and go to the contact us page you can see these videos on youtube and vimeo uh we're on vimeo at vimeo.com developmenter and youtube we're at www forward slash channel forward slash u c z o u f n underscore l h c v v d y p two k ks iph underscore d our goal is making every developer better have a great day you
Transcript Segments
[Music]
and for this example let's
look at a layout strategy where we can
define the width and
the locations of our buttons
again we'll do a separator
and here we'll do view
and first we want our text
again we want our styles
um
and this one is going to be
example 4
layout
but
there it is
now this time instead of just adding our
buttons let's add an additional view so
that we can control where our buttons go
we'll do another view
and this one we're going to use a
new
style that we'll create in a second so
we'll do
style
bits to text
and you add future fix to text
and here we're going to do flex
direction
this time we're going to keep it on the
row
and we will justify our context
and we'll do the space
between
what this will do is it will let us
it will pad
between the
components that we add to this
go inside of review
we're going to add two buttons
two
but one is going to have text
title
it's going to be left button
in on press
now again do an alert
and this time we will display the
message left button clicked
and inside of our second button
we will
name it right button
and use healer right button click
so here's our layout
the
justify context padding space between
fills
uh
the
gap between each button so the left
button is pushed to the left and the
other button is added to the right
now if we added a third it would
simply be in the middle
and now when we click these there's your
left button
middle button
and right button
all right so that is an example of how
to use buttons
any questions on
how you use the button component
okay hearing none we'll move on to the
last component for the day
and that is going to be the touchable
opacity
add that one here
obesity
and the touchable opacity component is a
wrapper for making views respond
properly to touches
these touches can be on press down
and when you push down the opacity of
the wrap view is decreased dimming
opacity is controlled by wrapping the
children in an animated view
which is added to the view hierarchy
however be aware that this can affect
the layout
so for this example let's add
do you use static
or use state
component
oops
okay
oh
had to be on a separate line
all right so we're going to use the use
state
feature to allow us to actually store
a value
dynamically so that we can reference the
state of a constant value
from anywhere within our application
so we've added our import here
the other components we need are going
to be
our style sheet
text
view
and touchable
opacity
right
clean up
previous example
all
right so in this case we want to define
our constant within our application
but here we will define it within
the function
so we'll do constant
create a variable called count
and we will use the method set
count
and we will use state
of zero
now
we're also going to do constant
on press
we're going to call set count
use previous count
so previous count is going to be our
value that we pass into
our set count
to use it we're going to use previous
count
this one
okay now inside of our return we need to
add a view
but to add our style
container
all right inside of our view
let's add another view
and we will create a new style for this
one
and inside of this view we're going to
display the text
count
and we're going to reference our static
variable
we need some attributes down here so
let's
add a
count
container
let's add align items
let's center it
and let's add some padding
and add 10 pixels for padding
let's also add an attribute over here
for a button
add some styling for a button
and our button
will be centered so we will also align
items
center
color
let's make it gray
and also add some padding
and add 10 pixels
so we got styles
container
and there's our account
we have our text now we need our button
so now instead of button we're going to
use our touchable opacity
now this guy has a wrapper
or
instead of title to display text you add
text
it will add our text press here
now for our touchable opacity let's add
our style
i have a button style
and let's also do our on press
and set it equal to our on press
constant
okay so we have our button now
if we press this guy
as you can see the button kind of fades
out between click and our account goes
up
and that's how you use touchable opacity
any questions on how to use this guy
nope
all right
so before i wrap up are there any
questions at all any of the components
we have covered today
i don't think we
one one question uh is this mainly
uh i mean in order to be good in this
you have to be very
very good at css
and html
uh not so much html remember these are
components so it's xml tag driven
uh and
the styling is css like so you just have
to
look at the libraries that are out there
if you go to react native
if we go out to react native if you go
to the docs
uh like components for instance
a click button here are all the
attributes and things that you can apply
to buttons
okay gotcha
and then there are other properties that
you can look up like image style
properties layout properties
i mean there are tons of these so
really
if you're using something like code or
you're using the expo the moment you get
in here and you start typing
or you can do control space and then
here all the different attributes that
you can apply
okay got it okay cool so they really
simplify because if you do control space
inside of visual code if you have the
plug-in install there's all your
styling like uh attributes that you can
add
okay
just gotta look for little blue boxes
anything below the blue boxes now you're
getting into actual
um
like this here is so these are
components
styling these are text stylings
these are functional stylings
it's kind of cool how
visual code works
expo isn't quite as clean like this but
again you can do like the control space
in expo and it will give you a list of
components
gotcha okay
and michael you're self-taught on this
here isn't it
yes
this is react native is very similar to
an older
tool i used to use called
titanium
alloy and it was very tag driven like
this and it really looks like react
native borrowed a lot from
their
framework
uh because i was able to take one of our
older applications that me and rob
worked on and almost
directly drop it in with a few tweaks to
make it work in react native
okay
all right to quickly review today we
talked about the
final uh component or components
of react native we looked at using the
image component to add local
image resources as well as network
uh
images into our application
when importing images or using the image
component you need to remember that
unless your image is local you have to
set the styling components for setting
the size of your image
image background is a good tag to use
when doing with splash pages when you
want to just put your image to be the
full size of the screen
and finally we looked at using the
button tag
and the touchable opacity tags
to handle wrapping of our buttons to
where we can actually interact and click
to do some type of action on our pages
i'd like to thank you for your time if
you would like to discuss any of these
topics further you can send us questions
comments and suggestions through any of
these methods you can reach us at email
at info developer.com
you can go to our developer.com site and
go to the contact us page
you can see these videos on youtube and
vimeo uh we're on vimeo at vimeo.com
developmenter and youtube we're at www
forward slash channel forward slash u c
z
o
u f n underscore l h c v v d y
p two k ks
iph underscore d
our goal is making every developer
better have a great day
you