Detailed Notes
In our third video on React Native: The Beginners Guide to React-Native Fundamental Concepts Part 3, continues our discussion of fundamental components. Previously, we covered mobile design, layout, and text components. Now we are going to cover some new components, such as buttons, images, and background images.
Just in case you missed the last video you can find it here or you need a refresher you can find the first video Started Using React Native For Your Mobile Applications here.
React-Native Fundamental Concepts Part 3 focuses on: Image Image Background Button
For a full list of components and APIs goto https://reactnative.dev/docs/accessibilityinfo
Image An Image React component is useful when you want to display different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll. However, if you are dealing with network and data images, you will need to manually specify the dimensions of your image. Otherwise, they may not render correctly in the application. ImageBackground Another common feature is ImageBackground. Of course if you are familiar with developing web applications then this one will remind you of a similar web element, background-image. Just like its web counter part, you can use the ImageBackground component to display an image to the background layer of your mobile app. It also has the same props as Image, and you can add whatever children to it you would like to layer on top of it. Unfortunately, you might not want to use ImageBackground in all cases, as the implementation is basic. For instance all you can really do is customize some width and height style attributes. If you need a more complex background image I would recommend using the Image component. Button Most of us are accustom to what a button is, ever heard the saying "Push the Button". In the case of mobile development the basic button component is what we use for displaying buttons and it should render nicely on any platform. It also, Supports a minimal level of customization. So, if this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableWithoutFeedback. TouchableOpacity TouchableOpacity is a wrapper for making views respond properly to touches. On press down, the opacity of the wrapping view is decreased, dimming it. Opacity is controlled by wrapping the children in an Animated.View, which is added to the view hierarchy. Be aware that this can affect layout. React-Native Fundamental Concepts Part 3
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. 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 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.
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.
Other Classes, You Might Consider: Integrating testing into your development flow Become a Better Developer Build A Product Catalog
Launching an Internet Business
Transcript Text
[Music] now we can modify our image of course so we can apply things like we did before we could do things like stretch so let's have a resizemode cover we could do stretch it doesn't change too much we could also change our container adding 50 and we can also change the flux direction change that we continue to be column based so now it covers the entire width of page if we did row that looks identical so that's an example of using our image background this is kind of a way you can do your splash screen so you want to make sure that the image you use can resize and fit the area that you want now we could use our local image sample image and we could use our fire that says icon okay you could set your source you could define a constant for local uh we just have to include the additional pieces all right let's pin for our image background all right next let's look at using buttons so a button is a basic component that should render nicely on any platform it supports a minimal level of customization and if the button doesn't look right for your application you can build your own button using the touchable opacity or the touchable without feedback we're going to look at using button and then we're also going to look at using touchable opacity the button syntax looks something like this button that button is wrapped in a single tag and it has a couple of attributes so we have on press we have title we have color and we have accessibility accessibility and then on press you can want to call some function your title is going to be your text and your color can be for instance the actual default white you can use the name of your color or you could use the hex value and then the accessibility label is going to be your uh the text that goes over it to learn more we could be learn more right so that's the kind of look and feel of our button let's start and actually create a new example with using the button and the alerts and we want to use the alert component so in our imports we should have style sheets we should have button we should have alert we should also have stylesheet text and view all right so in our view so instead of using view this time also add we are presenting ios today let's do this safe area view and the safe area view is that tag that allows us to create a view that does not overlap the header of our device so this little notch here it will start our view just below the knot it will also start on the ipad or devices without the notch just below the top information the date time the little battery icon okay so inside of here inside of our safe area view let's add a placeholder styles container place those right so we have our container our container is going to be flex 1 we don't need to pad it let's set our let's justify our context be centered and let's set our margins our horizontal margins to be 16 pixels okay everything's happy so far all right instead of our safe area view let's add another view so that we can actually add some containers within our container all right inside of our view let's add text let's add a text component let's set its style and the text we will display will be example one now for our button we need to define our title this will be the text that gets displayed and our title will be press me and the function call we will use is on press and we're going to use an inline function to call the alert component an alert is like deal like a javascript alert in web and here we'll do alert alert and this will be a simple pop-up box and the text will display will be simple right because we didn't add style yet so let's add some style for our title and let's set the texture line the center and let's set its vertical margins to be eight style here to be styles title there we go so we have our view we have our text example one and we have a button called press me and if we click the button we get an alert simple button pressed all right so let's expand on this so now let's create another button and this time let's adjust the color in a way that looks standard on each platform so on ios the color prop controls the color of the text on android the color adjusts the background color of the button so on ios if you adjust the color it will adjust the text color and on android it will be the actual button color itself now this time though i'm going to keep this button here but i'm going to show you how to create a divider between your views both create a separate constant and we're going to call this one separator so in this sense we're going to create a custom view that we're going to then embed into our screen here we have an inline function and then inside of our function here we will do view style equal styles and we need to create a separator style and then we need to close our view now we'll come down here and we will add a style now let's add a separator attribute style and in here we'll set the vertical margin to 8. we'll set our border color or border bottom color to kind of an off-white and we will use the border bottom width and here we're going to use these styles the spell t component and we're going to use one of its predefined attributes called hairline width right so we have our constant here which is just a view component so we created a custom view component and now to use this this is one of those cool things where now all we have to do is call or create our component separator and there's our horizontal line so now let's add our second example but let's do another view and inside of here we're going to do another text box another text component we use the style use our title style again and this time our text will be example two okay so far so good now let's add our button more buttons are inline so we want to add our attributes here so we'll add our title and we'll add our on press and we'll use alert and button color or button with adjusted color our title will be press me and let's modify the color of the button color equals and here again we can use the x code or we can just use one of the predefined values so here we have a red button and when we click it we get the alert button with adjusted color pressed now what if you want to create another button but it is disabled until some action triggers it to be enabled so to create a new button create a new separator create another view and text and we're going to use our style and this text will be example three again we're going to do another button this time we have our title we have our on press let's go ahead and add an alert now here's something that's interesting so i went ahead and saved this now we see example three but we do not see our button displayed at this point because we did not set a title essentially you have a button that is hidden now you can click it you can't see it but it's hidden so we can set the title of this one press me okay there it is and so far we can still press it it says cannot press this one that's because we have not added the last attribute which is disabled and if we save it gets grayed out this is one of those neat little features you can add where you can add some on-screen validation as you're entering in a form that until all the required fields are populated this button can essentially be disabled once everything is filled out passes validation then this button becomes enabled okay let's do one more example [Music] you
Transcript Segments
[Music]
now we can modify our image of course so
we can apply things like we did before
we could do things like stretch
so let's have a resizemode cover we
could do stretch
it doesn't change too much we could also
change our container
adding 50
and we can also change the flux
direction
change that
we continue to be column based
so now it covers the entire width of
page
if we did row
that looks identical
so that's an example of using
our image background
this is kind of a way you can do your
splash screen so you want to make sure
that the image you use can resize and
fit the area that you want
now we could use our local
image
sample image
and we could use our
fire
that says
icon
okay
you could set your source you could
define a constant for local
uh we just have to include the
additional pieces
all right let's pin for
our image background
all right next let's look at using
buttons
so
a button
is a basic component that should render
nicely on any platform
it supports a minimal level of
customization and if the button doesn't
look right for your application you can
build your own button using the
touchable
opacity or the touchable without
feedback
we're going to look at using button and
then we're also going to look at using
touchable opacity
the button syntax looks something like
this
button
that button is wrapped in a single tag
and it has a couple of
attributes so we have on press
we have title
we have color
and we have accessibility
accessibility
and then on press you can want to call
some function
your title is going to be your text
and your color can be
for instance the actual
default
white
you can use the name of your color or
you could use the hex value
and then the accessibility label is
going to be
your uh the text
that goes
over it to learn more
we could be learn more
right so that's the kind of look and
feel
of our button
let's start and actually create
a new example with using the button and
the alerts
and we want to use the alert
component
so in our imports we should have style
sheets we should have button we should
have alert
we should also have stylesheet text and
view
all right so in our view so instead of
using view this time
also add
we are
presenting
ios today
let's do this safe area view
and the safe area view is that tag that
allows us to
create a view
that does not overlap the header of our
device so this little notch here it will
start our view just below the knot
it will also start on the ipad or
devices without the notch just below the
top information the
date time the little battery
icon
okay so inside of here
inside of our safe area view
let's add a
placeholder styles
container
place those
right so we have our container
our container is going to be flex 1
we don't need to pad it
let's set our
let's justify our context
be centered
and let's set our margins
our horizontal margins
to be 16 pixels
okay everything's happy so far
all right instead of our safe area view
let's add another view so that we can
actually
add some containers within our container
all right inside of our view
let's add
text let's add a text
component
let's set its style
and the text we will display will be
example
one
now for our button
we need to define our title this will be
the text that gets displayed
and our title will be press me
and the function call we will use is on
press
and we're going to use an inline
function
to call the alert component
an alert is like deal like a javascript
alert in web
and here we'll do alert
alert
and this will be a simple pop-up box
and the text will display will be simple
right
because we didn't add style yet so let's
add some style for our title
and let's set the texture line
the center
and let's set its vertical margins
to be eight
style here to be styles
title
there we go so we have our view
we have our text example one
and we have a button called press me
and if we click the button
we get an alert simple button pressed
all right so let's expand on this
so now let's create another button and
this time let's adjust the color in a
way that looks standard on each platform
so on ios the color prop controls
the color of the text
on android the color adjusts the
background color of the button
so on ios if you adjust the color it
will adjust the text color and on
android it will be the actual button
color itself
now this time though
i'm going to keep this button here but
i'm going to show you how to create a
divider between your views
both create a separate
constant
and we're going to call this one
separator
so in this sense we're going to create a
custom view
that we're going to then embed into our
screen here
we have an inline function
and then inside of our function here
we will do view
style
equal
styles
and we need to create a separator style
and then we need to close our view
now we'll come down here and we will add
a style
now let's
add a separator
attribute
style
and in here we'll set the vertical
margin
to 8.
we'll set our border color or border
bottom color
to kind of an off-white
and we will use the border bottom width
and here
we're going to use these styles
the spell t component
and we're going to use one of its
predefined attributes called hairline
width
right so we have our constant here which
is just a
view component so we created a custom
view component
and now to use this
this is one of those cool things where
now
all we have to do is
call
or create our component
separator
and there's our horizontal line
so now let's add our second
example but
let's do another view
and inside of here we're going to do
another text box
another text component
we use the style
use our title style again
and this time our text will be example
two
okay so far so good
now let's add our button
more buttons
are inline so we want to add our
attributes here so we'll add our title
and we'll add our on press
and we'll use alert
and button color or button with
adjusted
color
our title will be press me
and let's
modify the color of the button
color
equals
and here again we can use the
x code
or we can just use
one of the predefined values so here we
have a red button
and when we click it
we get the alert button with adjusted
color pressed
now what if you want to create another
button
but it is disabled until some action
triggers it to be enabled
so to create a
new
button
create a new separator
create another view
and text
and we're going to use our style
and this text will be example three
again we're going to do another button
this time we have our title
we have our on press
let's go ahead and add an alert
now here's something that's interesting
so i went ahead and saved this
now we see example three but we do not
see our button displayed at this point
because we did not set a title
essentially you have a button that is
hidden
now
you can click it you can't see it but
it's
hidden so we can set the title of this
one
press me
okay there it is
and so far we can still press it it says
cannot press this one
that's because we have not added the
last attribute which is disabled
and if we
save
it gets grayed out
this is one of those neat little
features you can add where you can add
some on-screen validation as you're
entering in a form
that until all the required fields are
populated this button can essentially be
disabled once everything is filled out
passes validation then this button
becomes enabled
okay let's do one more example
[Music]
you