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] all right so today we are going to wrap up our discussion on react native uh talking about the fundamental concepts in react native now before we get into today's lesson again i'd like to recap what react native is it is an open source mobile application framework created by facebook and is used to develop applications for android android tv ios mac os and others as well it can also be used for web development windows and uwp by enabling developers to use react frameworks along with the native platform capabilities so the concepts we're going to talk about today are going to be the image and the button component now let's give you a quick comparison between react android ios and web in react native we're going to use the image tag on android you would use the image view on ios you would use the ui image view web we use the image tag img and that these tags are essentially used to display different types of images on the screen on our app on our web pages if we want to use button for react native it's pretty much a button on all of the different frameworks except for ios ios requires you to use the ui button which again the button is used to display a clickable button let's get started with our hands-on demo so like before this is going to be a fairly interactive um presentation we're going to spend a lot of our time just typing through examples and looking and seeing how these components interact and work right now my android emulator is currently broken still on ios because i have the new arm m1 macbooks and there's still a slight bug in my development environment for android so for now we're just going to use an ipad and an iphone 12 emulator to see how deploying our applications or as we code our applications we can see real-time updates on different devices so the first element we're going to talk about today is the image and in react it is a essentially the image tag img capital image is a react component for displaying different types of images including network images static references temporary local images and images from the local disk such as the camera rule now in this example i'm going to show you how to fetch and display an image from your local storage as well as from one from your network so let's start with our view everything that was here was pre-generated by expo so we start with our view and then we need to add some images to our view so we will start with the image option image requires a source we need to tell it where to find the image and inside of our source if we're looking for an image locally we use require and to look for an image that is on your device or on your machine while you're testing you come over here and you find your path so we have our assets folder here and inside of assets we have some static images so to access that we start with the root path dot assets and let's do have icon now it failed because it did not import our image so we need to make sure that we import our image tag and there's our image now let's add some styles uh actually before we add styles let's go get an image off the network so let's go out to the web browser to use microsoft edge and let's go to developer.com and let's take our banner image up here so we will copy our link to our image right there so as you can see in html the image tag uses the srt or source attribute to look up the image on the web and we're just essentially doing something similar in react native so here we will do image source equals again on this time we don't need to use uh require this time we're actually going to use the ui uri attribute and the uri attribute just takes a texturing of your image okay save that nothing is displayed so here is a slight tip if you're pulling images locally you don't need to set any attributes for displaying the image it's going to take the actual properties of the image if you import the image from the web uh from a web resource you have to actually define the source to find this so we're going to do this a couple different ways so let's copy this again just create a second one and let's create some styles and apply to each of these three images so again i want to note that for network and data images you need to manually specify the dimensions of your image and to do that we just come down to our style sheets section here and we're going to add some additional style attributes but first let's create one for alt image and this we're just going to set the default of our image to be width of 50 pixels and a height of 50. okay set this guy up to be 50 we applied the style so if i take the image and i come up here to our first one and we do style equals image oops style document there we go now let's add a second attribute for our first developer image that we're going to import and this we're going to call small image oops image we're going to do 66 and 58 and then small image is actually going to be 50 50. all right now let's create a another one for large image and this one we're going to set the width to be full screen so 100 and we'll set the height to be 200 and we'll also create one additional style property called pretty image this one is going to use the resize mode of scratch all right so we applied image to our first image we used small image a little bit smaller we did large image that bigger okay so let's go back to just image like that the what's one yeah adding here so that it's not at the top now the reason i'm adding top padding here is because i am not using the uh container safe uh view i'm using just view this view is compatible with all devices whereas if we use the ios view it comes down from the header of our ios app so we miss out on the notch the time but that may break or it gets ignored when we deal with the android devices next let's add some imaging to our developer our first one so we'll copy our style here and let's also add style to our third one here so this first one we're going to do large image and for the moment we'll leave this guy blank so if we see save you see we now have our image looks pretty good on the ipad looks pretty crappy on the ios device and if you notice we still don't have our third image because we did not specify the style for it yet and so the last one we want is going to be stretchy image and a little bit better it looks a little distorted on the ios but at least now we can see everything in our image so you can use the require to pull the image from the local device or you can use the attribute uri to pull from a url right the second one we're going to look at today actually before i move on does anyone have any questions on using images yeah i'm good okay all right so the next example we're going to look at is going to use the image background now this is a common feature request from developers familiar with web in using images on the web now to handle this use case you can use the image background button tag component which has the same properties as image and whatever child you add to it will appear on top of it as a top layer now you might not want to use the image background in some cases since the implementation is basic so typically you're going to use image for most of your image displaying through your mobile applications your web image background is a good uh little uh tag to use when you're dealing with like splash screens or loading screens where you want to have an image behind but have some text or something displayed in front of it so for this one let's take our url here let's take our source and actually turn this into a constant so we'll come up here and we'll create a constant called the belt image okay this way i don't have to copy and paste the url all over the place let's clean up our view so we'll get rid of our previous example save that review so good also going to reset our style sheet here all right so inside of our view let's let's go ahead and add our image background so if we do image now we need to make sure that it's added in our imports it is we have image background and just like image it has source and because we defined our uri here as a constant we can just reference development image and now we need to add some style and close our tab yeah happy because we don't have an image attribute yet let's go add one so image and so here we're going to use flex 1 we're going to use resize mode of cover and we're going to set our justify context to be center oh yep sorry image background is not a single close tag it is a wrapper tag so we have to actually close our tag and let's add something inside of here so we can actually see that let's actually add a text and just add some simple text now let's add some style to our text and let's add a text attribute to our style set our text color let's go ahead and set it to white let's paint our font size v42 off weight make it bold let's align it to the center and let's set its background color is semi-transparent there we go all right so here's our image using background image and here's our text inside of our hand you
Transcript Segments
[Music]
all right so today we are going to wrap
up our discussion on react native uh
talking about the fundamental concepts
in react native
now before we get into today's lesson
again i'd like to recap what react
native is
it is an open source mobile application
framework created by facebook and is
used to develop applications for android
android tv ios mac os and others as well
it can also be used for web development
windows and uwp by enabling developers
to use react frameworks along with the
native platform capabilities
so the concepts we're going to talk
about today
are going to be the image and the button
component
now let's give you a quick comparison
between react android ios and web
in react native we're going to use the
image tag
on android you would use the image view
on ios you would use the ui image view
web we use the image tag img
and that these tags are essentially used
to display different types of images on
the screen on our app
on our web pages
if we want to use button
for react native
it's pretty much a button on all of the
different frameworks except for ios ios
requires you to use the ui button
which again the button is used to
display a clickable button
let's get started with our hands-on demo
so like before this is going to be a
fairly interactive um
presentation we're going to spend a lot
of our time
just
typing through examples and looking and
seeing how these components interact and
work
right now my android
emulator is currently broken still on
ios because i have the new arm
m1
macbooks and there's still a slight bug
in my development environment for
android
so for now we're just going to use an
ipad and an iphone 12
emulator to see how
deploying our applications or as we
code our applications we can see
real-time updates on different devices
so the first element we're going to talk
about today is the image
and in react
it is a
essentially the image tag
img
capital image
is a react component for displaying
different types of images including
network images static references
temporary local images and images from
the local disk such as the camera rule
now in this example i'm going to show
you how to fetch and display an image
from your local storage as well as from
one from your network
so
let's start with
our view
everything that was here was
pre-generated by
expo
so we start with our view and then we
need to add some images
to our view so we will start with the
image
option
image requires a source
we need to tell it where to find the
image
and inside of our source
if we're looking for an image locally
we use require
and to look for an image that is on your
device or on your machine while you're
testing
you come over here and you find your
path so we have our assets folder here
and inside of assets we have some static
images
so to access that we start with the root
path dot
assets
and let's do have
icon
now it failed because it did not import
our image so we need to make sure that
we import our image tag
and there's our image
now let's
add some styles
uh actually before we add styles let's
go get an image off the network
so let's go out to the web
browser
to use
microsoft edge
and let's go to developer.com
and let's take our banner image up here
so we will copy our link to our image
right there
so as you can see in html the image tag
uses the srt or source attribute to look
up the image on the web and we're just
essentially doing something similar in
react native so here we will do image
source
equals
again
on this time we don't need to use uh
require this time we're actually going
to use
the ui
uri attribute
and the uri attribute just takes a
texturing of your
image
okay
save that
nothing is displayed
so here is a slight tip if you're
pulling images locally
you don't need to set any attributes for
displaying the image it's going to take
the actual properties of the image
if you import the image from the web uh
from a web resource you have to actually
define the source to find this
so we're going to do this a couple
different ways so let's
copy this again
just create a second one
and let's create some styles and apply
to each of these three images
so again i want to note that for network
and data images you need to manually
specify the dimensions of your image
and to do that we just come down to our
style sheets section here
and we're going to add some additional
style attributes
but first let's create one for alt image
and this we're just going to set the
default
of our image
to be width of 50 pixels
and a height
of 50.
okay
set this guy up to be 50
we applied the style so if i take the
image and i come up here to our first
one
and we do style
equals
image
oops style document
there we go
now let's add a
second attribute for our
first developer
image that we're going to import
and this we're going to call small image
oops
image we're going to do 66 and 58
and then small image is actually going
to be
50 50.
all right
now let's create a another one for large
image
and this one we're going to set the
width to be full screen so 100
and we'll set the height to be 200
and we'll also create one additional
style property called pretty image
this one is going to use the resize
mode
of scratch
all right so we applied image to our
first image
we used small image
a little bit smaller we did large image
that bigger
okay so let's go back to just image
like that
the what's one
yeah adding here so that it's not at the
top
now the reason i'm adding top padding
here is because i am not using the
uh
container safe
uh view
i'm using just view
this view is compatible with all devices
whereas if we use the
ios view it
comes down from the header of our ios
app so we miss out on the notch the time
but that may break or it gets ignored
when we deal with the android devices
next let's add some
imaging to our developer our first one
so we'll copy our style here
and let's also add style to our third
one here
so this first one
we're going to do large
image
and for the moment we'll leave this guy
blank
so if we see save you see we now have
our image
looks pretty good on the ipad looks
pretty crappy on the ios device
and if you notice we still don't have
our third image because we did not
specify the style for it yet
and so the last one we want is going to
be stretchy image
and a little bit better it looks a
little distorted on the ios but at least
now we can see everything
in our image
so you can use the require
to pull the image from the local device
or you can use the attribute uri
to pull from a url
right the second one we're going to look
at today
actually before i move on does anyone
have any questions on
using images
yeah i'm good
okay
all right so the next example we're
going to look at is going to use the
image background
now this is a common feature request
from developers familiar with web in
using
images on the web now to handle this use
case you can use the image background
button
tag
component which has the same properties
as image
and whatever child you add to it will
appear on top of it as a top layer
now you might not want to use the image
background
in some cases since the implementation
is basic
so
typically you're going to use image for
most of your image displaying through
your mobile applications your web
image background is a good
uh
little uh tag to use when you're dealing
with like splash screens or loading
screens where you want to have an image
behind but have some text or something
displayed in front of it
so for this one let's take our url here
let's take our source
and actually turn this into a constant
so we'll come up here
and we'll create a constant
called the belt
image
okay
this way i don't have to copy and paste
the url all over the place
let's clean up our view so we'll get rid
of
our previous example
save that
review
so good
also going to
reset
our style sheet here
all right so inside of our view
let's
let's go ahead and add our image
background so if we do image
now we need to make sure that it's added
in our imports it is we have image
background
and just like image it has source
and because we defined
our uri here as a constant we can just
reference development image
and now we need to add some style
and close our tab
yeah happy because we don't have an
image attribute yet
let's go add one so image
and so here we're going to use flex
1
we're going to use resize mode
of cover
and we're going to
set
our justify context
to be center
oh yep
sorry image background is not a single
close tag
it is a wrapper tag so we have to
actually close
our tag
and let's add
something inside of here so we can
actually see that
let's actually add a text
and just add some simple text
now let's add some style to our text
and let's add a text
attribute to our
style
set our text color
let's go ahead and set it to white
let's paint our font size
v42
off weight
make it bold
let's align it to the center
and let's set its background color
is semi-transparent
there we go
all right so
here's our image
using background image and here's our
text inside of our hand
you