welcome to my ultimate react native
course Amash I don't wanna be your
instructor in this course you're gonna
learn how to build fast and beautiful
mobile apps using react native I'm
assuming in this course you know nothing
about react native and want to learn
everything from scratch I will explain
every line of code awright so you learn
and understand all the underlying
principles now you're not gonna work on
a dummy to-do app or a calculator you're
gonna work on a real full-fledged app
called done with it this app is a
marketplace for selling this stuff you
don't need any more anything you are
done with here's the front screen of our
app we can login or register let's log
in with my account here you can see all
the items that people are selling for
example you have this guy over here he's
selling his red jacket for $100 of
course this is all dummy data that I
have generated now we can tap an item to
see more details about it you can see
who the seller is we can see where the
item is located on the map we can also
send a message to the seller and this
will send a push notification to the
target mobile device now we can pull
this down to close it we can also pull
down the list to refresh it just like
the apps you use on a daily basis we can
filter the list and look at the cameras
that are for sale we can add a new
listing first we select an image we can
add a second image up to three images
now let's give it a title my first item
we give it a price $99
now let's assign it to a category so
let's put it in the category of
furniture now when it posts us to the
server you're going to see a progress
bar and a beautiful animation at the end
take a look there you go
and done here are the listings I have
posted you also have my account page
where we can access my listings and the
messages I have received now we can
swipe an item to the left to delete it
just like the apps you use on a daily
basis so if you follow along by the end
of this course you're gonna master react
native and you'll be able to build
mobile apps with confidence so are you
excited to build this app with me then
jumping and get started
to take this course you don't need any
familiarity with react native or mobile
development in general but you need to
know JavaScript not react because react
native is built on top of react but
instead of targeting the browser it
targets mobile platforms you don't need
to be a react expert but you need to
know all the essential concepts such as
components JSX
props state and so on if you wanna learn
react I have a two hour tutorial on my
youtube channel as well as a complete 13
hour course that teaches you everything
from the basics to more advanced
concepts I'll put the links down below
if you're interested so what is react
native and is it the right tool for you
or not well react native is a framework
for building native apps for iOS on
Android using JavaScript so if you know
JavaScript you can use your JavaScript
skills to build real native apps for iOS
and Android these apps are truly native
so they are not web apps that look like
a mobile app so with react native you
don't need to know iOS or Android
programming unless you want to build a
really complex app and you need to talk
directly with the native API of this
platform for the most part you don't
need to do that so we can write pretty
much all of your application code in
JavaScript and share it across iOS and
Android that's why a lot of companies
these days prefer to build their apps
using react native because they don't
need to hire two separate teams of
developers maintaining two different
code bases one for iOS written in Swift
or objective-c and the other for Android
and Java or Cartland now one of the
common misconceptions about react native
is that you cannot use it to build any
serious apps for example we have this
guy over here his name is John Smith is
a developer with a lot of strong
opinions he believes that the only way
to build anything serious is by using
the native languages on tools well
that's not true
here are five apps are built with react
native Facebook Instagram Pinterest
Skype uber AIDS and many many more so if
you have an idea that you want to turn
into a real app using your JavaScript
skills react native is the best tool to
have your toolbox
there are two ways to build react native
apps we can use plain react native or
Expo Expo is a set of tools and a
framework that sits on top of react
native and hides a lot of complexity
from us it makes it incredibly fast and
easy to build react native apps if you
have never done mobile development
before Expo is the way to go you can
build and run your first app within a
few minutes the other option is to use
react native CLI or command-line
interface when we create a project with
react native CLI our project will look
like this
so we have these folders Android and iOS
these are native Android and iOS
projects we also have our JavaScript
code on a site that can be shared across
these two platforms so this approach is
suitable for people who have some
experience with iOS or Android
programming in this course I'm assuming
you don't have any prior experience in
mobile development so we're gonna use
Expo let me create a project with Expo
we're not gonna have these Android and
iOS sub projects we only have JavaScript
code so that means we cannot work
directly with the native API of these
platforms we are limited to what expo
gives us in terms of the native features
now honestly this is not a problem for a
lot of apps because Expo gives us a lot
of native features so we can build a
real complete app using just expo and
that's what i'm gonna show you in this
course but if you do have some
experience with mobile development and
you want to have some extra flexibility
if you want to customize or tweak some
native components you can always eject
from expo and get access to the
underlying ios and android projects i
will show you how to do that later in
this course so next i'm gonna show you
how to set up your development
environment alright the first thing i
want you to do is to make sure that
you're running node version 12 or higher
so here in the terminal window
let's run node dash V I'm running node
version 12 point fourteen point one make
sure you are running node version 2 or
higher now let's install expose CLI
globally so NPM if you're on a Mac and
you haven't configured permissions
properly you have to prefix this with
sudo so npm install - g expo - CLI
is going to take a while so I'm going to
pause the recording
all right Expo CLI is installed you
might get some warnings don't worry
about them they don't really matter
so with Expo CLI we can easily create
and run a react native project now you
should also install expert client on
your phone this is an app that you
should download from the App Store it's
available for both iOS and Android with
this we can easily run our app on a
physical device now
as my code editor I'm gonna use Visual
Studio code or PS code you can use any
code editor that you prefer but it's
easier if you download vs code and code
along with me because throughout the
course I'm gonna show you a lot of tips
and tricks a lot of shortcuts to write
code fast you're gonna love these tips
so you can download vs code from code
that Visual Studio comm like hearing vs
code we're gonna use a bunch of
extensions these extensions are optional
but they make our job easier let me show
you so over here let's search for react
native the first extension we're going
to use is react native tools this is
built by Microsoft and with this we can
debug our react native applications
inside vs code it's very popular the
second extension we're going to use is
react native slash react slash Redux
snippets this gives us a bunch of code
snippets so we can type a few shortcuts
and generate code really fast
I love this extension I also use
prettier for formatting my code so let's
search for prettier there you go
prettier code formatter made by spen
peterson it's a very popular extension
you probably have it yourself I also use
material icon theme
let's take a look with this extension
installed we get pretty icons in our
project so the files in our project are
gonna get icons like these depending on
their type now let's apply a setting so
the moment we save our changes our code
gets reformatted so on the top we go to
preferences and then settings search for
format on save so make sure to enable
this option so anytime you press ctrl +
S or command + S vs code will use
prettier to format your code now that we
have set up our development environment
let's create our first Expo project so
here in the terminal window let's type
expo and it done with it that's the name
of the app we're going to build you can
call it anything you want so let's go
with this now we have to choose a
workflow for building this app we can
use one of the managed workflows or one
of the bare workflows if you use a
manage workflow export is going to take
care of all the complexity behind the
scene so with a managed workflow we're
not gonna see those iOS on Android
projects we only have a pure JavaScript
project if you use a bare workflow we're
gonna have a bare bone react native
project so we'll have those iOS on
Android projects in this course I'm
gonna go with this blank template we
also have a template with typescript but
I'm not gonna use that in this course
because I want to bring extra complexity
so let's use the blank manage workflow
template now this gonna take a while so
I'm gonna pause the recording
all right our project is ready so let's
go into this folder and then open it in
vs code
run this app let me give you a quick
overview of what we have in this project
so we have this assets folder this is
where we put all the images audio files
videos and so on any kind of asset that
you want to bundle with our app now we
also have after J s
this is a basic react native component
so on the top we are importing react
we're also importing a couple of
components from react native so this
view that we have here is like a div in
the web world and text is used to
display text on the screen
so in react native we don't have HTML
elements like div paragraph anchor and
so on we have to use the building blocks
or the components that are provided by a
react native here is an example this app
is a function component so by default
react native uses function components
because there are simpler they're more
lightweight you can use class components
but it's better to use function
components so here we're returning a JSX
expression we have a view which is like
a div this view has some style we'll
look at that later and inside this view
we have this text component for
displaying this text on the screen now
what is this style here
well we're referencing this object
Styles the container we're creating the
Stars object over here using the
stylesheet object so we call the create
method and passes an object this object
has a property called container that
contains all the styles for our
container now if you look at the name of
your Stars they look familiar for
example we have background color this is
like a CSS attribute but this is not CSS
this is just a plain JavaScript property
when we compile our app react native
it's gonna translate these properties
and the components were using to their
native widgets for example this view
over here if we build this app for iOS
this view is gonna be mapped to UI view
if we build it for Android is gonna be
mapped to Android view so with these
components we can represent our UI in an
abstract or platform-independent way
when we compare our app react native is
gonna map these components into their
native widgets so that's why the apps
that we build with react native are real
native apps now we should open a
terminal window to start
Expo server to serve our app so on the
top we go to the view menu look at the
shortcut for the terminal window on Mac
is control and backtick so let's open up
the terminal window here we type NPM
start
now this opens our browser pointing to
this address the port number might be
different on your machine depending on
what you are running so this is what we
call Metro bundler it's the JavaScript
bundler for react native so it's
responsible for compiling all of our
JavaScript files into a single file now
here on the Left we have a few commands
we can run our app on an Android device
or emulator
we can run it on an iOS simulator we can
run it in a web browser we can send a
link to our app with email so other
people can try it we can also publish
our app to expo so anyone in the world
can view our app using expo client this
is much faster and easier than going
through app stores if you have done any
kind of mobile development before you
know that going through app stores is
very tedious there are so many steps you
have to follow with expo we don't have
to worry about this we can simply
publish our app to Expo and anyone in
the world can easily view our app of
course this is purely for development
and testing not for production but talk
about that later in this section so this
is Metro bundler now if you go back to
the terminal window in vs code you can
see these commands and their shortcut
these are the same commands that you saw
in Metro bundler for example we can
press a to run our app on an android
emulator or I to run it on an iOS
simulator and this is where the logs for
our app will appear so if anything goes
wrong this is the first place we want to
look at all the errors and log messages
will appear here so we want to have this
terminal window open at all times all
right now that metro bundler is running
next I'm going to show you how to run
our app on an iOS simulator
in this lesson I'm gonna show you how to
run our app on an iOS simulator to do
this you'll need a Mac if you don't have
a Mac don't worry you can still run the
app on your phone whether it's an iPhone
or an Android phone you can also run the
app on an Android virtual device which
I'm going to show you in the next lesson
now I want you to install Xcode you can
get it from the App Store so open our
App Store and search for Xcode here you
can get the latest version Xcode is a
large app so installing it is gonna take
a while
perhaps 20 to 30 minutes depending on
your internet connection once you
install Xcode run it and then go to
Xcode preferences
on this window go to the locations panel
and make sure you have installed the
latest command-line tools now we can
start analyst simulator so let's close
this window we go to Xcode open
developer tool simulator
so here's our iPhone simulator we can
move it around we can resize it we can
change the type of this device by going
to file open device under iOS you can
see various iOS devices for example we
can start an iPhone 8 it's gonna start a
second simulator now unfortunately at
the time of recording this video expert
gets confused when you have multiple iOS
simulators running so I'm gonna close
this iPhone 8 I'm going to use this
iPhone 11
now we go to Metro bundler and via app
and the iOS simulator
we can also write it in vs code by
pressing I in the terminal window so
this is gonna start our project in iOS
simulator the first time you're gonna
see this message popping up open and
expo so let's open it
so this is the expert client that you
install on your phone let's close the
welcome message and here's the output of
our app we have this text in the center
of the screen now let me show you
something really cool I want to put this
on the side and open our project on the
left side now let's change the text here
to hello world now the moment I save the
changes
our app is gonna refresh take a look
save and here's the hello world message
this is one of the powerful features of
react native called fast refresh so we
can see our changes as soon as we save
we don't have to wait for native bills
to finish now in this IRS simulator we
can bring up the developer menu by
pressing command + D now unfortunately
this does not work on my mission anymore
I think this happened after I upgraded
my Xcode so I figured out to make this
work I have to press control D first and
then command D so this is the developer
menu I was talking about this is part of
expert client so here we can reload our
app so in case something goes wrong and
fast refresh doesn't work we can
manually trigger a reload we can also
copy the link to clipboard we can go to
home so here we can see other expo
projects we are working on at the moment
we have a single project and it's here
so let's get back to it so you can bring
up the developer menu by pressing ctrl +
D and then command on D like this so
this is all about the iOS simulator next
I'm going to show you how to run this
app on an Android virtual device
in this lesson I'm gonna show you how to
set up an Android virtual device to run
your apps now while you can always run
your react native apps on your phone
during development it's a lot easier to
run it on a simulator or a virtual
device because you don't have to
constantly touch your phone so to set up
an Android virtual device first we need
to install Android studio you can get it
from developer.android.com slash studio
so go ahead and download the latest
version of Android studio the first time
you run Android studio you're going to
see a setup wizard like this so click on
next go with the standard installation
because this is going to install all the
necessary components you need to create
an Android virtual device so click on
next here you can select a light or a
dark theme we don't really care about
this because we're not gonna develop in
Android studio so let's click on next
now look at the components that are
gonna get downloaded we have Android
emulator Android SDK build tools Android
SDK platform Android SDK platform tools
Intel x86 emulator accelerator as well
as a bunch of other components these are
the components you need to create an
Android virtual device if these
components are not listed here don't
worry I'm gonna show you how to install
them later but if you go with this
standard installation you shouldn't have
any problems so let's click on finish
this is going to take a while so I'm
going to pause the recording
right Android studio is ready now let's
go to the configure menu and select SDK
manager if you follow the standard
installation here you should have all
those necessary components so on the sdk
platforms tab you should have the latest
stable version of android at the time of
recording this video that is under ten
or queue under sdk tools you should have
android sdk build tools as well as
android emulator Android SDK platform
tools and Intel emulator accelerator if
these components are not selected select
them click OK and then Android studio is
going to install them for you now if
you're in a Mac or Linux there is an
extra step unit to follow if you're a
Windows user you don't have to follow
this step but please watch the rest of
this video because there are more steps
you need to follow so head over to Doc's
that Expo at i/o now on the left under
manage workflow
you can find all the official
instructions to install an Android
virtual device so we have almost
finished the first step so we installed
Android studio now down the bottom of
the first step
you can find the extra step for Mac and
Linux users so you need to add 100 SDK
to your path so you should edit your
bash profile or bash RC and add this
export statement so let's copy this
export statement
now open a terminal window and use your
favorite editor to edit your bash
profile so I use Visual Studio code now
we go to our home directory and open -
under line profile
so here's my bash profile at the end of
bash profile I'm gonna paste what I
copied from the official documentation
of Expo
so we're exporting Android SDK and
here's the path to Android SDK but you
need to replace this path with the path
of Android SDK on your machine how do we
get it very easy back to Android studio
let's go to configure SDK manager here
we can find the path to Android SDK so
copy there's the back to your favorite
editor let's replace the path with white
be copied now here in Expo documentation
if you're on Mac there is one extra step
you need to follow you need to add
platform tools to a path as well so copy
the second export statement and paste it
at the end of your bash profile now once
again we need to replace the path to
Android SDK so let's delete this and use
what we have over here so here's the
complete path library Android SDK
platform tools okay save the changes now
on my machine I'm using zs8 or z shell
this is the fancy terminal window I have
here for this I need to edit a second
file that is in the home directory that
is z SH RC now back to bash profile I'm
gonna copy these two expert statements
and paste them into Z shrc so copy
and pace over here save the changes now
back in the terminal window at this
point we should be able to run a DB if
you get an error saying command not
found that means you didn't follow one
of these steps properly all right we're
done with instructions for Mac and Linux
users so everyone should follow the rest
of this video to set up an Android
virtual device so here on Android studio
let's go to configure a video manager if
it is short for Android virtual device
on the screen let's click create virtual
device here we should select the
hardware we want to emulate we have so
many options we have various pixel
devices we have Nexus and so on if you
don't know where to start
usually the latest pixel device is a
good place to start I prefer to use the
one with Play Store installed so I'm
gonna go with pixel three a you can see
the size resolution and density of this
device so let's click on next now here
we should select the image or the
operating system we want to install on
this device you can select any of the
images here in the recommended tab I
prefer to use the latest stable version
that is often the second item here so
let's go with this now Android studio is
down within this image to install on our
emulated hardware it's gonna take a
while so I'm going to pause the
recording
all right we're done with the step so
let's click on next
like here we can give this device a name
I'm gonna use the default that specifies
the type of hardware and the image we
have installed on it now let's click on
finish
all right our virtual devices ready we
can run it by clicking on this play
button here so here's our virtual device
or emulator we can simply drag the sides
and resize it
so when I make it smaller and put it on
the side now to run our app in our new
Android virtual device we go back to
metro bundler and on the Left select run
on Android device or emulator
we can also go to our terminal window
and press a to run this app in our
Android emulator but make sure that the
emulator is up and running before you
press a now over here you can see that
expert client was installed on the
device
so now metro bundler is building our
JavaScript bundler so here is expert
client and as you see it's downloading
our JavaScript bundle
and here's our react native app now here
we have hello world because in the
previous lesson I changed this message
if you skip the previous lesson let me
show you something really cool
so I put vehicle on the left side and
now let's change this message to hello
react native now the moment I save this
change our app is gonna get refreshed
immediately take a look so save and
here's hello react native this is the
beauty of react native so we see our
changes the moment we save them we don't
have to wait for native bills to finish
so this makes development incredibly
fast and easy now on this virtual device
we can bring up the developer menu by
pressing command + M on Mac or ctrl + M
on Windows so here's the developer menu
we can manually reload the app in case
the automatic reload didn't work we can
copy the link to clipboard we can go to
home
here you can see the list of projects we
are working on currently we have only a
single project that is done with it
which is hosted and this address Expo
here's the IP address of my machine and
here's the port number now we can select
it and go back to our app once again can
bring up the developer menu by pressing
command on M on Mac or ctrl LM on
Windows
here we have a few other items these are
you sport debugging we'll talk about
them later in this section next I'm
going to show you how to run this app on
a real physical device as I told you
before during Duvall map it's a lot
easier to test your app and a virtual
device or a simulator because you don't
have to constantly touch your phone
however simulators are well simulators
they don't always function like a real
device also certain features are not
available in these simulators so you
want to test your app on a real physical
device whether it's an iPhone or an
Android phone so the first step is to
install expert on your phone you can get
this from the App Store
once you install this to run your app on
your phone all you have to do is to go
to Metro bundler and look at this QR
code so point your phone at this QR code
and open the camera app your phone is
gonna pick this up and run your app in
Expo as simple as that just make sure
your phone is connected to the same
wireless network as your computer
otherwise this is not gonna work now
when you're running your app on a real
physical device you can bring up the
developer menu by simply shaking your
device so when you shake your device
you're gonna see something like this
this is what we call the developer menu
over the next few videos I'm going to
show you a few tools and techniques to
debug your react native applications we
have a few different tools here you can
choose the tool or the tools that you
prefer and it really depends on what you
want to do so the simplest way to debug
our react native applications is using
the good old console deadlock statements
so here in app component
we can do a constant blog and say app
executors now save the changes bring up
the embedded terminal we have two
entries for app executed because I have
two virtual devices connected to Metro
bundler I have an iOS simulator and an
Android virtual device and here in Metro
bundler on the top left you can see the
connected devices so I've connected an
iPhone 11 Promax
and an Android virtual device now we can
click on any of these devices and see
the log for that device so console that
log is the simplest way to debug or
react native apps however this concept
the log statements can have a negative
impact on the performance of our apps in
production so use these only during
development or testing once you're done
with your debugging sessions make sure
to remove them before building your
application for production next I'm
going to show you how to debug your apps
in Chrome let's see how we can debug
this app in Chrome so I'm going to
create a bug in this app component let's
declare a variable called X and without
initializing it let's call X to 2 string
let's save the changes
we get this red box where we can find
information about the error that just
occur so here's the error message
undefined is not an object evaluating X
to 2 string and here you can see we're
in our component tree this error
accurate in this case it occurred in app
component now to debug this app first we
need to dismiss the screen so we press
the escape button it's gone now we need
to bring up the developer menu I explain
how to do this in the previous lessons
if you're using a real device you have
to shake it if you're using an Android
virtual device you have to press command
+ M on Mac or ctrl + M on Windows and if
you're using an iOS simulator you have
to press command + D on my machine that
doesn't work so I have to press ctrl + D
and then command + D now we need to
enable remote debugging
when we do this the JavaScript code for
this app will end up executing in Chrome
let me show you
so we tap on debug remote yes
opens up a new tab in chrome pointing to
his address localhost / debugger - UI so
now the JavaScript for this app will
execute remotely in Chrome and that's
gonna slow down our app so when you're
done with your debugging session make
sure to stop remote debugging now let's
open up chrome developer tools
here on the console tab you can see the
message that we logged as well as the
error that occurred cannot read property
two string of undefined
now to debug this app we go to the
sources tab
over here click on this icon pause on
exceptions and then select pause
uncaught exceptions let me enable this
option if an exception is caught in our
app chrome is gonna stop the execution
and highlight the line where the
exception occurred let me show you so
back to our app let's bring up the
developer menu and reload our app
now we can see the line where the
exception occurred X the two string so
Chrome paused on this exception now let
me show you a few tools that we have
here for debugging we can click on any
line to insert a breakpoint and when you
reload our app Chrome is gonna stop
execution right on that line so from
that point we can execute our code line
by line we can watch the value of
various variables to see if our
computations are correct or not
so let's reload our app one more time so
bring up the developer menu we also have
a shortcut for it on Mac we can press
command + R on an iOS simulator so
reload
now line five is highlighted and it's
about to get executed over here we have
various tools for executing our code so
we can step over this line or we can
step into it this is useful if in this
line we are calling a function that we
have written so we can step into that
function and execute the code in that
function line by line we also have step
out so if you step into a function and
we're done debugging that function we
can step out of that function now in
this case console the blog is not a
function we have written so it doesn't
matter if we step over it or step into
it so I'm gonna step over it and by the
way look at this shortcut here in the
tooltip on Windows it's f10 on Mac its
command and a single quote so when
debugging always use this shortcut
because it's much faster than constantly
clicking on these icons so step over
this now we are on this line and you can
see that X is undefined that is the
reason why we got this exception
now here we also have this watch window
where we can watch the value of various
variables so click on this plus sign and
type X and then enter so as you can see
X is undefined so this watch window is
really useful to see what's going on now
we're done with our debugging we know
why we got this exception so we should
remove this breakpoint otherwise next
time we reload our app chrome is going
to pause execution on this line so let's
go back to our code
delete these two lines save the changes
then reload our app okay there is gone
so we should stop remote debugging
otherwise our app is gonna be really
slow so once again bring up the
developer menu and stop remote debugging
so this is how we can debug your apps in
Chrome now here we also have the network
tab this is useful when we have API
calls to our back-end you haven't gotten
there yet but we're gonna get back to it
in the future now what about the LMS tab
well the elements that you see here are
not the elements were the components of
your app these are the elements of the
debugger window so unlike a web app we
cannot select an element and look at its
properties so this is all about
debugging in chrome we can also debug
our react native apps in vs code let me
show you first we bring up the developer
menu and enable remote debugging so this
opens this window in chrome we have to
close it otherwise we'll get an error
but in this case in this demo I'm not
going to close this window because I
want to show you that error now back to
vs code let's go to the extensions panel
search for react native and make sure
you have installed this extension react
native tools with this extension we can
debug react native apps in vs code now
let's go to the debug panel the first
thing we have to create this file launch
JSON this is where we store our debug
configurations currently we don't have
this file in our project so vs code is
suggesting to create it so click on this
link now from this drop-down list select
react native now sometimes we ask o
doesn't show you this drop down list I'm
not sure why but it immediately creates
the launch duck JSON file if this
happens to you don't worry just continue
watching you'll figure out what to do in
a second so we select react native now
here we see various configurations for
debugging react native apps these
configurations are installed by that
extension react native tools so if you
don't install that extension you're not
going to see these configurations now by
default debug Android is selected I'm
gonna deselect this and select attach to
packager honestly this is the only
configuration I'm familiar with so we
select attach to packager and click ok
and here's launch dot JSON
so sometimes we ask Oh doesn't show you
that drop-down list instead it
immediately creates this file
now here we have various debug
configurations currently in our
configurations array we have a single
object a single configuration and the
name of this configuration is attached
to packager if you don't have this
object here you can always add a
configuration you can either click on
this button add configuration or you can
go to the run menu and select add
configuration now in this context menu
we search for react native and this
brings up various configurations for
debug and react native apps so here we
have attached to a packager we also have
debug Android and so on so for example
let's select a second configuration like
debug Android so now we have a second
object a second configuration called
debug Android a same the changes we're
done with this file I think is you're
curious this file is located inside this
folder dot vs code now let's go to app
that yes
I'm going to declare a variable X and
set it to one we're going to use this
during our debugging session now we can
insert a breakpoint on this line and
start an app in debug mode and execute
it line by line exactly the way we debug
our app in chrome now let's go to the
debug panel
in this drop-down list we can see
various debug configurations currently
we have two configurations debug Android
and attach the package er I'm gonna
select attach the package ER and click
on this play button our debugger is
started and then it immediately feels
stuck to see why this happened you go to
the View menu and then look at debug
console
so here's the arrow
- packager are you sure there's a
packager and it is running in this port
8081
so by default PS code tries to connect
to this packager react native packager
to get the JavaScript code on this port
8081 we have to change the sport to this
port over here nineteen thousand and one
so back to vs code on the top we go to
the code menu then preferences settings
now under user tab here research for
react - native that packager dot port so
look here is support 80 81 we have to
change this to nineteen thousand and one
now we're done with this let's bring up
the debug panel one more time and start
our app in debug mode
debugger failed one more time so let's
go to view debug console
here's the second error
could not debug another debugger is
already connected to packager this
happened because we have this window
open in the background so sometimes you
have a million tabs or windows open you
don't know that you have this window
open somewhere that's why nothing works
on your machine so make sure to find
this window and close it because you can
either debug in Chrome or vyas code at a
single point in time not both these
processes so now we're going to debug in
vs code which means our JavaScript code
is going to get executed inside vs code
so let's bring up the debug panel one
more time and start our app
all right we establish a connection
beautiful so
here's our simulator
bring up the developer menu and reload
app
so the debugger loaded now let me close
the debug console take a look we are in
apt at Jas and the first line where I
inserted a breakpoint is highlighted so
now we can execute our code line by line
we have the same tools that we had in
Chrome we can step over the current line
we can step into it if you're calling a
function that we have written if you're
inside a function we can step out of it
we can restart our debugger and we can
disconnect from our debugging session so
let's step over this line and by the way
this shortcut is f10 now here on the
left side we can see the value of
various variables so vs code
automatically detected the variables in
scope so here we have X the value of X
is 1 we also have our watch window so we
can selectively watch various variables
in case they are not detected over here
so we can type X and we can see the
value of X so now we can execute our
code line by line and see what's going
on when we are done we should always
stop the debugging session because our
JavaScript code is executed remotely
inside vs code so we disconnect here
then we go to our app bring up the
developer menu and stop remote debugging
now we get this error run time is not
ready for debugging don't worry about
this we just need to reload our app and
here you can find this shortcut for
reloading on Mac its command + R so
now our app is running just like before
and the debugging session is terminated
so far we have been serving our app from
this address local host port nineteen
thousand and two and that means if we
turn off our computer or if you stop
expose CLI we won't be able to open our
app with expert client this is where
publishing comes to the rescue
so we can publish our app to Expo and
then our app is gonna have a public and
a permanent address that anyone can use
to open it with expert client just like
how we can publish NPM packages to NPM
directory we can publish our hab to Expo
and it will be visible to anyone in the
world this is much easier than going
through app stores if you have done any
kind of app development before you
probably know that going through app
stores is very tedious there are certain
steps that you have to follow with
export we don't have to worry about it
we simply publish our app to Expo and
anyone in the world can open our app and
test it with expert client of course
this is purely for development and
testing not production when you want to
put our app to production we have to go
through app stores that's the topic for
the future so this video I'm going to
show you how to publish your app to Expo
now we can publish using Metro bundler
here so we can click on publish or
republish project
alternatively we can open a new terminal
window and type Expo publish either way
you have to get back to this terminal we
know because Expo is gonna ask you a few
questions let me show you so in this
demo I'm not gonna run Expo publish here
instead I'm gonna use the publish come
out here so click the Expo is asking the
name of our app this is loaded from
after JSON so if you look at after JSON
you can see various settings about our
app here's the name of our app here's a
URL slug for it this will be part of our
apps URL on Expo you will see it in a
second so back to Metro bundler we can
optionally specify the github source URL
as well as a description we can optimize
our assets so they will be compressed
and minified by default this is enabled
now the URL of our app is gonna look
like this expert at IO at sign after
this we're gonna have our username which
we're gonna create in this video and
then we have done with it so this is our
URLs luck now let's click on publish
project so we get back to our terminal
window in vs code this is where you're
running X + CLI so export is asking how
would you like to authenticate we can
make a new Expo account or login with an
existing account so let's create a new
export count
we have to enter our email so I'm gonna
go with programming with Maj at
gmail.com for my username I'm gonna type
programming with Marsh let's give me the
password and confirm it
all right now Expo is building our iOS
and JavaScript bundles
all right back to Metro Bunner our app
is successfully published at its address
let's click on it so here's our app
currently our app doesn't have an icon
that is why we have this empty box we'll
come back and fix this in the future now
here we have this QR code so anyone can
scan this code with their phone and open
our app with export client as simple as
that we don't have to go through app
stores now our app currently doesn't
have any descriptions so let's go back
to Metro bundler click on and publish
one more time and this time give our app
a description I'm gonna say a
marketplace for selling this stuff you
don't need any more now let's publish it
one more time
now back in vs coke let's open up the
JSON down the bottom you can see our new
description so our app is republished
let's open it one more time and here's
the updated description beautiful
hey guys ma chère I just want to let you
know that this tutorial is the first two
hours of my ultimate react native course
the complete course is divided into two
parts basics and advanced topics but
each part being about five to six hours
long so the complete course is over ten
hours long it includes all the source
code we write in this course every
section has it before and after source
code so you can easily code along with
me plus you will get plenty of exercises
and step-by-step solutions and a
certificate of completion that you can
add to your resume if you're interested
I put the link down below I'm offering a
discount to the first hundred students
so if you're interested enroll now
before it's too late
now let's continue to the next lesson in
this section we're going to look at some
of the core components and api's in
react native we'll be talking about view
text image button touchable alert and so
on there are more components in react
native than we can cover in this section
or in this course let's route the course
you're going to learn the ones that you
will use most of the time now if you're
curious you can find the complete list
of these core components and api's on
react native website so head over to
react native dot dev then go to API here
on the Left we can see all the core
components that we can use for building
user interfaces these components are
cross-platform so when we compile our
app they will be mapped to their
negative equivalent so if we use a
button here on Android this will look
like a standard Android button and on
iOS it will look like a standard iOS
button we can also customize the look
and feel of these buttons using Styles
you learn in the next section so here
are all the cross-platform components
you'll also have a bunch of components
specific to Android and iOS and we also
have a bunch of api's
these api's give us access to native
functions there are not UI widgets for
example we can use keyboard to control
the soft keyboard or we can use
stylesheet to create a bunch of styles
again these API is our cross platform we
also have a bunch of AP is specific to
Android and iOS again will study most of
the essential components at API but we
don't have time to look at every single
component so once you learn the
foundations you can learn the other
components on your own so next we're
going to talk about views so earlier I
told you that in react native we don't
have HTML elements like div span
paragraph and so on so we have to build
our UI using the built-in components in
react native view is the most basic and
fundamental component for building UIs
it's like a div so it's a container
component that we can use for grouping
or laying out children so this way we
have over here has a bunch of styles now
we'll talk about styles in detail in the
next section but for now let me briefly
explain what these styles are so we have
flex set to 1 this means that this view
is flexible and it will grow both
horizontally and vertically to fill the
free space in this case it grows and
takes the entire screen now the
background color of this view is white
let's change this to Dodger blue so here
we can use named colors we can also use
RGB colors exactly the same way with
specific colors in web applications now
save the changes look
this view is filling the entire space
now one thing I want you to pay
attention to is this notch or the edge
on the new iPhones sometimes you want to
make sure that this notch doesn't cover
your content for example back to our
Styles let's remove these two properties
align items and justify content with
these we can put a component in the
center of this view that is the reason
why our text
appears in the middle of the screen now
we'll talk about layouts and aligning
components in the next section for now
let's just remove these two properties
save the changes now look our text is
over here it's too small let me make the
simulator bigger look so part of the
text is covered by the knotch this is
where we can use a special type of view
called safe area of view so on the top
we import safe area view from react
native now we can replace this view with
safe area of view
so with this view selected press command
+ D on Mac or ctrl + D on Windows now
both views are selected we have two
carats this is called multi cursor
editing so we can replace both of these
at the same time so type safe area view
now press escape to cancel Multi cursor
editing okay save the changes take a
look
our text is no longer behind this notch
so safe area view adds a bit of padding
on the top to make sure that our content
is within the safe area alright so this
is all about views for now next we're
going to talk about the text component
the second most fundamental component in
react native is text and we use it for
displaying text so here we cannot place
text just anywhere within JSX as we do
in web applications we should always
wrap our text with the text component
now this text component has a few
interesting props let's look at the
documentation for this component so here
on react native web site under the API
section let's look at the documentation
for the text component so here we have a
bunch of props I'm going to talk about
the most important ones
the first one is number of lines when we
set this if our text is longer it will
get truncated let me show you so back in
vs code let's change this to a really
really long text now I want to make this
even longer and see what happens so
now our text is wrapped we have two
lines but if you set the number of lines
to one our text will get truncated take
a look so we set the number of lines to
one now say take a look so we have dot
dot dot at the end of the first line
very useful we can also make this text
act like a link using the unpress prop
or event so here we set on press we set
this to a function we can write a
function inline here like this we can
pass an error function the constant of
log saying text click
but this is useful for very small
functions one-liners if you have a fair
amount of logic we don't throw all that
logic here in the middle of our JSX
so we should implement it in a separate
function so before our return statement
we can define a function by convention
we prefix the function name with handle
so we want to handle the unprecedent we
call this function handle press now we
set it to an error function and this is
where we do our console deadlock text
pressed okay now we said on press to
handle press save the changes take a
look so I tap on this now if you look at
the terminal window
you see our lock message so we talked
about the two essential props for the
text component now as you're building
apps get yourself used to reading this
documentation for every component you
come across it helps you better
understand the capabilities and
limitations of that component next we're
going to talk about images now let's
talk about rendering images first let's
restore our app to its original state so
let's change the background color to
white now to put our content in the
center of the screen we have to set two
properties justify content we set this
to Center and align items we should set
this to Center as well
okay so now anything that we put inside
this container that is our safe area of
you will be in the center of this screen
like this okay now to render an image
first we import the image component from
react native
with this component we can display both
local images that we bundled with our
app as well as network images that we
download over the Internet so currently
in our assets folder we have two images
icon and splash which is used in our app
is loading so let's display the icon
right below the text so here we type
image now because we're not going to put
anything in between the image tags we
can use the self-closing syntax that
makes our code cleaner now here we
should set the source prop to load our
icon we use the require function and
specify the path to our image so our app
component is right here we should go to
the assets folder and load icon the PNG
so here we type period which represents
the current folder then we go to assets
and load icon that PNG so when we use
the require function react native
packager will include this file in our
bundle so it's gonna increase the size
of our app so we should use static
images if they really have to be shipped
with our app like the icon or splash
screen otherwise we should download
images from the internet so now save the
changes here's our image beautiful now
what do you think this required function
returns it doesn't return an image or a
string it returns a number that is a
reference to our image let me show you
so before our return statement
let's do a console log and print require
assets slash icon that PNG now look in
the terminal so to is the reference to
our image okay
alright now let's delete this line
so this is how we can render local or
starting images but what about Network
images well let's head over to pick some
dead photos this is a random image
generator here's an example
look at this URL every time we hit this
URL we'll get a random image with these
dimensions 200 by 300 so let's copy this
now back to vs code for Network images
instead of the required function we have
to pass an object here now this object
will have a property called URI which we
set to a string and this is where we
paste the URL that we copied so save the
changes back to our simulator our image
is not visible because react native
doesn't know its dimensions so we have
to manually specify the dimensions for
network images for local images we
didn't have to do this because the
require function reads the metadata
about our images okay so back to our
code
and the object that we passed to the
source prop we set two extra properties
with the 200 and height to 300 save the
changes so here's our image component
and here's the result
beautiful now here on the official
documentation you can see various props
for the image component let's talk about
a few useful props here we have blur
radius
this applies a blur effect to our image
so
here we can set the radius to let's say
10 now look our image looks blurry
we also have loading indicator source
this is similar to the source prop so we
can give it a local image using the
required function or we can pass the URI
of a network image the image we pass
here will be displayed while the actual
image is being downloaded we have
another prop called fake duration as you
can see in this table it's only
supported in Android so Android loads
this image with a fade effect and by
default this fade effect takes 300
milliseconds let me show you here's my
Android virtual device we can reload the
app by pressing R twice now look at the
Fed effect did you see that we can
change this duration to make it more
pronounced so here we can set fade
duration to let's say 1 second now
let's reload the app and here's our fade
effect beautiful so this only works on
Android it has no effect on iOS another
useful prop is resize mode which is used
if the dimensions of our image is
different from the dimensions we specify
so here we have various resize mode we
have cover contain stretch repeat and so
on these are the same resize modes we
have in web applications we also have a
bunch of events like unload on load and
unload start and so on with these we can
tap into certain moments when an image
is being loaded
in the previous lesson we added this
image to our app now let's take this app
to the next level and allow the user to
tap on this image with our text
component we achieve this by handling
the unprecedent right but the image
component doesn't have this prop or
event this is where we can use touch
upon components so we can make anything
touchable here are the touchable
components in react native we have
touchable highlight touchable opacity
touchable without feedback the touchable
component we use will depend on the kind
of feedback we want to give to our users
let me show you so back to our code
let's import touchable without feedback
and note that I'm not typing the
complete name of this component I'm
using shortcuts so I'm typing a little
bit of it like tou
WF and then press Enter this is much
faster than typing the complete name of
a component okay now to make this image
touchable we have to wrap it inside a
touchable without feedback component so
once again I'm gonna use a shortcut to
touchable without feedback press Enter
now let's move this image inside
touchable without feedback so I'm
holding alt and then pressing the up
arrow with this we can move code like
this okay
now this touchable without feedback has
an event called unpress it also has an
event called on long press this is
useful
let me want to allow the user to tap and
hold on a component so here let's handle
the unprecedent here we can pass a
function let's do a consult log and say
image tapped now save the changes
when I tap on this image nothing happens
because we're using touchable without
feedback it doesn't give us any visual
feedback but if you look at our terminal
we can see our message now let's replace
this with a different kind of touchable
so on the top let's import touchable
opacity now let's replace this with
touchable opacity so touchable opacity
which will also replace this tag take a
look so let me tap on this image its
opacity gets reduced so we can see the
background this is why this touchable is
called touchable opacity for a fraction
of a second it reduces the opacity of
what we are making touchable okay now
let's look at touchable highlight so we
imported on the top touchable highlight
and then use it over here
now using command + D as I told you
before we can select both instances and
replace them in one go
touchable highlight save the changes
take a look
so when we tap on this image its
background is darkened for a fraction of
a second this is the effect of touchable
highlight so these are the three
cross-platform touchable components we
have in react native we also have a
touchable that is specific to Android
it's called touchable native feedback
it's not supported on iOS so when we use
it we get a warning let me show you so
let's import touchable native feedback
now
let's use it here touchable native
feedback save the changes on iOS we get
this red box touchable native feedback
is not supported on this platform so
later in this section I will show you
how you can detect the platform in which
this app is running so if he's running
on iOS perhaps we can use touchable
opacity if it's running on Android we
can use touchable native feedback now
let's try this touchable on an Android
virtual device so I'm gonna bring up my
Android virtual device when I tap on
this image nothing happens because this
touchable doesn't really work with
images it works with views that have a
background color let me show you so back
to our code on the top let's import the
view component
now we're going to replace this image
with a view
let's give this view a few styles so we
set this time prop to an object with a
few properties with let's say 200 height
I'm gonna use 70 and background color
let's set this to Dodger blue let's save
the changes
take a look
this is the native feedback effect that
we have on Android so this is all about
touchable next we're going to talk about
buttons
now let's talk about the button
component so I've cleaned up the code
here we only have a safe area view no
text no image no touchable component
here we want to add a button to our view
so we can import it on the top and then
add it over here but let me show you a
shortcut here we can type button now
hearing the intellisense look we have
auto import so we can have vs code
automatically import this for us so here
we press enter and our button is
imported here beautiful
now with buttons we can use the
self-closing syntax because we don't put
anything in between them so here we set
the title - lets say click me and we
handled the unprecedent pretty
straightforward let's log button tapped
now save the changes
so here's our button on an iPhone and
here's our button on an Android phone
so each platform has a different way of
presenting this button component because
as I told you before this button
component that we're using here gets
mapped to its native equivalent son
Android buttons look like this by
default now we can change the color of
this button for example we can set the
color to our inch save the changes
now our button has an orange background
and on iPhone it has an orange text we
can also create a custom button that has
a unique look and feel I'll show you how
to do that in the next section when we
talk about styling next we're going to
talk about alerts
let's make this app more interesting
instead of printing something on the
console let's display a standard alert
box so I'm going to delete console blog
and use the alert function so the alert
function that we have in browsers also
works here
so here we can display a message like
button tapped save now take a look
on iOS we get this standard iOS alert
box and on Android we get a different
kind of alert again this is because the
alert we display gets mapped to its
native equivalent now let me use the
alert function we get a box the title of
this box is alert and here we have a
single button called okay if this
doesn't work for you you can always
customize it you can change the title
you can change the buttons here let me
show you so on the top we import alert
this is not a component that has a
visual representation this is on an API
so it's an object with a couple of
methods let me show you so I'm gonna put
this on a new line now instead of alert
you're gonna type alert dot look here we
have two methods alert for displaying a
message and prompt for asking a question
and getting an answer so let's use the
alert method this method has a few
parameters the first one is the title of
our alert box let's set it to my title
the second parameter is our message I'm
going to set this to my message the
third parameter is the array of buttons
so I'm going to pass an array here in
this array we add an object now press
ctrl + space you can see the properties
of this object so every button can have
a text it can have a style and it also
raises the unprecedent so let's set the
text of the first button to yes now we
add a second button and set its text to
no save the changes so this is what we
have now take a look now we have a
custom alert the title has changed and
we have two buttons here now how do we
know which button was clicked that's
very easy we just have to handle the
unpress event of these two buttons so
here we can say on press we can set this
to a function
to a console that log of yes and over
here we can set on press to a different
function and here we can log a different
message on the console
take a look
yes now back in the terminal here's our
message beautiful now let's look at the
prop method so I'm gonna delete this via
lines
here we call learnt that prompt this
method also takes a title so here's the
title of our box we also give it a
message
now the third parameter is a callback or
buttons so we can pass a callback
function that takes a parameter of type
string this is the text that the user
enters into the box so we can get that
imprinted on the console pretty
straightforward so save the changes
now let's train on iOS
so here we have this input box where we
can type something so let's say hello
world now if we press ok our callback
function will get called so we get our
message in the console
now one thing you need to know is that
this API only works in iOS at the time
of recording this video so on Android
when I tap on this button nothing
happens hopefully this will change in
the future another useful API you need
to know about is this dive sheet API you
have seen this before with this we can
define stats but let me clarify a few
things about stars in a react native app
first of all as I said before these does
we have here they are not CSS their
names are inspired by CSS but they are
not CSS these are just regular
JavaScript properties so when we build
our app react native will map is
platform agnostic components to their
native equivalent and then it will apply
these properties on them okay so that
means this object that we're passing
here is essentially a plain JavaScript
object so instead of referencing this
object Styles that container we can pass
an inline object here and set the
background color to let's say orange now
look we have this orange bar on the top
because we are playing a single style we
are only setting the background color
okay we can also define this object
somewhere else for example I can cut
this from here
let's define a constant called container
style and say to this object now we can
reference this object over here
container style our app still works now
previously we were using styles that
container styles is the object that
we're defining over here so when we call
strategy that create we pass an object
this object that we pass here is the
same object that we get as a result
so our Astana's object has a property
called
container which is an object itself this
is the reason why we can reference
styles that container over here so
whatever we pass to the create method we
get it as a result now you might ask but
what is the purpose of this method why
can't we just use a plain JavaScript
object why do we have to call stylesheet
that create well there are two reasons
the first reason is that this method
validates the properties that we use
here so it ensures that we don't
accidentally misspelled a property so if
he misspelled this property let's say we
add an e at the end look what happens we
get this red box background color with
an E is not a valid style property this
validation doesn't happen if we use a
plain JavaScript object directly so let
me revert this back now let's pass an
inline object and set its background
let's misspell it to something else
look we don't get any errors but our app
doesn't have the right look either so
this is one benefit of using stylesheet
that create let me remove this so star
as that container so this method
validates the properties that we pass
here the second benefit is that the
react native team have been working on
implementing some kind of optimizations
behind the scene as far as I know these
optimizations are not available at the
time of recording this but they're
coming in the future so it's the
recommended practice to use the statute
API to define stats so this is all about
this stylesheet api now here you can
also combine multiple styler objects so
instead of passing a single object we
can pass an array of objects so in this
array first we have styles that
container and then we can add a second
object like this object that we defined
over here now take a look
the result is the combination of these
two style objects kind of similar to how
we can apply multiple CSS classes to an
HTML element but here the results are
more predictable so the object on the
right over eights the properties of the
object on the left in this case
container style is defining a single
property that's background color so this
is over writing the background color
that we defined earlier so the results
are more predictable now another
question you might have is do we have to
put these styles in the same file not
really you can extract this from here
put it in a separate file and then
import it in this file that's totally
fine but it's very conventional to
define their size below it component
because quite often you need to work
with both the structure of your
component as well as it stars in the
same session if you put the size in a
separate file you have to constantly go
back and forth between two files
I personally even though I'm all about
writing clean code and separation of
concerns I prefer to have those styles
below my components it has worked better
for me but if you don't like it that's
totally fine you can separate your
status in the next section I'm going to
talk about stars in detail
for now that's all you need to know
about stars
there are times way to detect the
platform in which our app is running and
customize some styles or behaviors
here's an example look at our status
object let's remove these two properties
so our button is no longer at the center
of the screen take a look
so it's here on the top but look at our
Android virtual device our button is
below the status bar so this safe are
your view component that we used earlier
it only works for iOS so it makes sure
that our content is not covered by this
notch on iPhone it has no effect on
Android at the time of recording this
video so in this case we need to
manually add some padding on the top to
push this button down so it's no longer
behind the status bar this is where we
use the platform module so on the top we
import the platform module from react
native now over here we can add a third
style padding top we want to set this
dynamically if the current platform is
Android we're gonna set this to let's
say 20 otherwise we want to set it to
zero so here we type platform now this
object has a few properties os returns
the operating system which can be
Android iOS and so on we can also get
the version of our platform we can check
to see if this is an iPad if this is a
TV and so on so
let's read this property we can compare
this with now here we press ctrl + space
we can see various values that are
accepted so we have Android iOS Mac iOS
web and windows so if this is Android
you want to set padding top to 20
otherwise we're going to say 2-0 say
take a look now our button is below the
status bar but wait 20 well this was
just for a demo the proper way to do
this is to calculate the height of the
status bar and use that as the value for
this style so on the top we gonna import
the statusbar api now we're gonna
replace 20 with status bar dot current
height this is the proper way to add
padding on the top because the height of
the status bar might be different from
one Android phone to another so save the
changes now our button is just below the
status bar
hey guys Marsh here I just wanted to let
you know that this tutorial is the first
two hours of my ultimate react native
course the complete course is divided
into two parts basics and advanced
topics but each part being about five to
six hours long so the complete course is
over ten hours long it includes all the
source code rewriting this course every
section has it before and after source
code so you can easily code along with
me plus you will get plenty of exercises
and step-by-step solutions and a
certificate of completion that you can
act your resume if you're interested I
put the link down below I'm offering a
discount to the first hundred students
so if you're interested in role now
before it's too late
now let's continue to the next lesson in
this section you're gonna learn how to
create layouts in react native and this
is where the fun begins
because we're gonna build the first two
screens of our app so we're gonna talk
about dimensions device orientation
flexbox as well as absolute and relative
positioning so pay close attention to
the lessons and take note because you're
going to use these materials as part of
the exercises at the end of this section
so I'm super excited about this section
I hope you're too now let's jump in and
get started
let's talk about the dimensions of
components on the screen so let's import
the view component from react native now
in our safer your view let's add a view
we give it a style let's set the
background color to Dodger blue I'm
gonna give this a width of 150 and a
height of 70 now these numbers we have
here are if density-independent pixels
or dips the actual size equals
density-independent pixels times scale
factor of the device for example iPhone
4 can display 320 by 480 points these
points are abstract units they're not
pixels now the skill factor of iPhone 4
is 2 or 2x
that means every point contains 2 pixels
so the screen resolution of iPhone 4
equals 640 by 960 pixels
now if the with our view is 150
density-independent pixels or dips its
actual width on an iPhone 4 will equal
150 times 2 which is 300 pixels that is
roughly around half of the screen width
right now in contrast iPhone 11 pro max
can display 414 by 896 points with a
scale factor of 3 here's the screen
resolution of iPhone 11 pro max now what
is the width our view on this iPhone it
is 150 times 3 equals 450 pixels so
again it's roughly around half of the
screen with roughly not exactly in fact
our view looks a little bit smaller on
an iPhone 11 pro max but don't worry
about memorizing any of these numbers
they don't matter what matters is that
by expressing the size of our components
in density-independent pixels we can
feel relaxed that they look almost the
same size across different devices now
if you want to make sure that this width
is exactly half of the screen width
which
with a percentage value here so we
replace 150 by 50%
make sure to put this in quotes because
this is a string value now save so
here's our view it's taken exactly half
of the screen now in some situations you
want to fine tune the size of a
component according to the size of the
screen
in those cases we can use the dimensions
API so on the top we import
dimensions from react native now
let's lock
dimensions that get here we should pass
a string that can be either window or
screen screen returns the size of the
entire screen whereas window returns the
size of the visible application window
on iOS these dimensions are equal
they're only different on Android so the
window size is a bit smaller than the
screen size so I'm gonna pass screen
here now save
at the terminal so here you can see the
width and the height of this iPhone as
well as is scale factor so every point
on this iPhone has 3 pixels so this is
how we can get the dimensions of the
device using the dimensions API now the
problem in this API is that it doesn't
respond to orientation changes so if the
user rotates the device these numbers
don't get updated we'll talk about how
to handle that in the next AESA
there are times want to detect our
screen orientation and resize our
components accordingly
for example let's set the width of this
view to 100% and its height to 30% so
imagine this is a media player in
portrait mode you want to have this
video player on top and in landscape
mode we want to have this take the
entire screen right now the height of
this imaginary video player is always
30% of the height of the screen this is
where we need to detect the orientation
of our screen and resize this component
accordingly and by the way to rotate
this iOS simulator we hold down the
command key and use the left or right
arrows like this okay and for Android we
have this toolbar now look at the
shortcut on Mac its command + left on
Windows it's probably ctrl + left I'm
not entirely sure
so to support different orientations
first we go to app to JSON
by default the orientation of our app is
set to portrait so it only supports the
portrait mode we can set this to
landscape to only support the landscape
mode but this is not very common we can
also set this to default to support both
modes so let's save the changes now to
detect screen orientation we're going to
use this library called hooks develop by
react Native community so on this page
you can see we have various hooks hooks
are functions that bring extra
capabilities to function components for
example we can add state to a function
component you see one of the built-in
hooks in react if you're not familiar
with hooks I highly encourage you to
watch the last section of my react
course I covered hooks in detail in that
section so here we have various hooks or
various functions all these hooks by
convention start with use for example we
have used back Handler to work with the
back button on Android we have used
camera roll we have used dimensions use
device orientation and so on so first
let's install this library here in the
terminal window at react - native -
community / hooks
all right this is installed now let's go
back to after Jas
first special import use dimensions from
at react native community and slash
hooks with this hook we can get the
correct dimensions of the screen whether
we are in portrait mode or in the
landscape mode this hook always returns
to updated dimensions this is one of the
limitations of the dimensions API in
react native so this is the preferred
way to get the dimensions of the screen
if you support multiple orientations so
let's do a console that log statement
and call use dimensions say now here you
can see the width of our screen is 414
now if I rotate this device in the
landscape mode we get this new with 896
so every time we rotate our device our
component gets recalled and here we
recalculate the updated dimensions now
we also have another hook for detecting
the screen orientation use device
orientation so let's call it here
so let's reload the app in portrait mode
okay so we get an object this object has
two properties landscape is false and
portrait is true now if I rotate this
simulator
we get an eel object now landscape is
true and portrayed as false so to make
this imaginary video player take the
entire screen in landscape mode we can
write code like this
first we call this function then we
store the result in this object or
we can use object destructuring here and
pick the landscape property from that
object now we can calculate the height
dynamically so if you're in the
landscape mode we're gonna set the
height to 100% otherwise we're gonna say
it to 30% take a look
so let's reload the app
all right in landscape mode our video
player is taking the entire screen we
have this white edges this is because we
put this inside of a safe area of view
perhaps for a video player this is not
something we want to do we want to make
sure that the video player takes the
entire screen but let's not worry about
it in this lesson now if we rotate this
too right
the height of our video player will be
30% of our screen height so using the
hooks in this library we can get the
dimensions and the orientation of our
device now for the app that we're going
to build on this course we're not going
to support the landscape mode so I'm
going to go back to after JSON and set
the orientation back to portrait
now let's talk about flags for a flexbox
with flex we can easily build complex
layouts that work consistently across
different screen sizes we are the same
concept in CSS but flexbox in react
native is a little bit different so make
sure to watch the next few lessons even
if you are familiar with flexbox in CSS
so I've removed all the code we have
written so far we're only importing the
view component from react native now in
our app component
let's return a view and give this view a
couple of stats so I'm gonna set the
background color to dodge or blue and
flex to one
when we set Flex to one this view grows
to take the available free space so save
our view is taking the entire screen
what if you set flex to 0.5 now our view
takes half of the screen okay so with
Flex we typically set up a view as a
container and then align children inside
that container so let's imagine this
view is our container so let's change
its background color to white and set
flex to 1 so it takes the entire screen
now inside this view we're gonna add
another view here we can use the
self-closing syntax because we're not
gonna put anything inside this view now
let's give this view a couple of styles
so I'm gonna set the background color to
Dodger blue and flex to one let's see
what we get
once again we get a blue screen because
our parent or container view is taking
the entire screen and inside this
container we have this other view the
blue view which is growing to take the
available free space so it feels it's
container that is why the entire screen
looks blue now with this view select
that let's hold down shift and alt and
then press the down arrow for this we
can duplicate coding vs code so let's
duplicate this one more time now we have
three views the first view is Dodger
blue the second view let's make it gold
and the third view let's make it tomato
that's a kind of red so this is what we
get so now our screen is divided into
three segments each view is taking 1/3
of its container or 1/3 of the screen
now what if we set the Flex property of
this blue view to 2
now the blue view is twice as big as the
other views with this setup we're
essentially dividing the space into four
segments why four well we have two plus
one plus one so we have four segments
two out of four segments is allocated to
the first view to the blue view so this
view is taking half of the screen or
half of its container and these other
views each is taking one-fourth of the
screen so this is the basics of flex
over the next few lessons we're gonna
study other properties of flex
now let's give this viewers a fixed-size
so in this blue view I'm gonna remove
the Flex property let's set the width to
100 and height to 100 as well now you're
going to repeat
so let's change the second view and the
third view
here's what we get our views are laid up
vertically in a column because that
makes more sense in mobile apps
typically we hold our phones in portrait
mode so that's why by default react
native vertically aligns the items in a
container if you have worked with
flexbox in CSS you probably know that by
default items are laid out horizontally
so this is one of the differences we
have in react native now to lay this out
horizontally we go to our container
so here's our container we set the Flex
Direction property to row
here's what we get we also have real
reverse
so items are laid out from right to left
and we also have column reverse
so here's what we get now any time if
you wonder what values are acceptable
here simply delete this press ctrl +
space so here are the list of values
column which is the default value column
reverse row and row reverse now let's
set this back to row with this setup we
say our main or primary axis is the
horizontal axis and the cross axis is
the vertical axis this is an important
property of flex we're going to get back
to it over and over next we're going to
talk about aligning items
in this lesson we're going to talk about
aligning items in a container so
currently our items or our views are
appearing at the top left corner of the
screen what if you want to push this to
the right or put them in the center of
the screen we go to our container and
set the justified content property to
one of these values so let's set it to
center here's what we get so with this
property we can align items along the
main or the primary axis what is our
main axis here it's the horizontal axis
because earlier we set Flex direction to
row so now our main axis is the
horizontal axis now what if we change
this to column
now our items are appearing at the
center of the vertical axis because the
vertical axis is now our primary or main
axis this changes back to Rome
and look at the other values so we have
flex and now our items are appearing at
the end of the horizontal axis we also
have flex start which is the default
value and we have three properties for
distributing space we have space around
so with this property the space between
each two items is equal so look at the
space here it's equal but the space
around the first and last item and the
edges of the screen is different so here
we have less space if it changed this to
space evenly
now the space is evenly distributed
between items and we also have space
between
with this setup the first and the last
items are pushed to the edges of the
screen and the remaining space is
distributed between the other items so
let's change this back to Center
now we have another property called
aligned items and with this we can align
items across the secondary axis so what
is our secondary axis here is the
vertical axis right so if we set this to
Center now our items appear at the
center of this screen let's look at the
other values you have baseline
the impact of this unless we change the
height of one of these views so let's
change the height of the first view to
300 and the second view to 200
now these viewers have the same baseline
okay
let's look at another value flex and
this is pretty self-explanatory
so our items appear at the end of the
secondary axis okay what else do we have
here
flex start
now the items appear at the start of the
vertical axis and finally we have
stretch which is the default value now
we don't see the impact of this property
unless we remove the height of one of
these views so I'm gonna comment this
out see what happened the blue view
stretched to fill the entire vertical
axis so this is the default value if we
comment out aligned items we get the
exact same result so let's bring it back
and change it to Center and bring back
the height property as well so we
justify content we align items across
the main axis and with align items we
align them across the secondary axis now
the first time I learned about these
properties I was a bit confused I was
wondering why the names are not
consistent every time I wanted to align
something I wasn't sure which property I
had to use honestly it's a bit weird I
know but you will get used to it as we
go through the course you're gonna use
this properties over and over so that
would be second nature to you now what
if you want to change the alignment of
one of these items let's say we want to
put the blue view over here so we go to
this view and set aligned self to flex
start so look at these two properties we
have aligned items which we apply to the
container and we have aligned self which
we apply to an individual item now
here's what we get so this is all about
aligning legs we're gonna talk about
wrapping items
let's talk about wrapping items so I'm
going to go to the last view
this view over here let's duplicate this
change the background color of the new
view to gray so here's our new view and
we have a bit of extra space here so
what do you think will happen if we add
an extra view here let's find out
so let's duplicate this one more time
and change the background color of the
new view to green yellow do you see what
happened the blue view got shrunk so the
green view can fit on the screen so this
is the default behavior if our items
overflow across the main access one or
more items get shrunk so other items can
fit on the screen we can change this
behavior by enabling wrapping so we go
to our container
here's a container we apply a new style
called flex wrap the default value is
nowrap we said this to wrap but when I
save the changes the alignment of this
items is gonna get screwed take a look
see what happened so we have wrapping
because the green view is appearing on
the second line and the blue view is no
longer shrunk but what happened to our
vertical alignment we wanted all these
items to be vertically in the center of
the screen this is where a lot of people
get confused so let me clarify for you
when we enable wrapping the align autos
property behaves a bit differently so if
you have multiple lines the align autos
property determines the alignment of
items within each line let me show you
with a good example so I'm gonna change
the height of the first view the blue
view to 300
see what's happening within each line
our items are vertically centered now
currently we have a single item on the
second line but if you had multiple
items with different heights all these
items would also be vertically centered
so a line items property determines the
alignment of items along the secondary
axis with an H line now if you want to
put all these items together in the
center of the screen or in the center of
the vertical axis we use a different
property
it's called aligned content so we want
to align the entire content as a whole
we said this to Center now all these
items are appearing in the center of the
vertical or the secondary axis so this
is the difference between a line items
and aligned content the line items
determines the alignment of items within
each line and aligned content determines
the alignment of the entire content that
line content only works if we have
wrapping if you don't have wrapping it
has no effect so this is all about
wrapping so we have covered all the
essential properties of flex but there
are three other properties that you need
to understand you may not use them as
much but it's good to know them in case
you see them in someone else's code so
here's our blue view here we can apply a
property called flex basis
and with this we can set the size of an
item along the primary axis so our
primary axis here is the horizontal axis
so if we set this property to 100 this
is equivalent to setting the width to
100 so if I comment out this property
and save the changes look we get the
same result knife our primary axis was
the vertical axis setting Flex basis
would be equivalent to setting the
height property so Flex basis can map to
width or height
now we have another property flex grow
if we said this to one the moment I save
the changes you will see the blue view
grow to fill the available space take a
look here it is in fact selling flex
grow is exactly the same as setting the
Flex property now if I say the changes
we are not going to see the same result
because I don't know if there is a
problem with a simulator or the tooling
so let's verify this save look we don't
get the same result
but if you manually refresh using the
developer menu
we see the same result as applying the
Flex grow property okay now we have
another property called Flex shrink
honestly it's not something used that
often but let me explain how it works
it's essentially the opposite of Flex
grow so to simplify things let's get rid
of these two properties and set the
width to 400 now our blue view is taken
so much space so the orange view is not
fitting on the screen we have
overflowing in this case we can set Flex
shrink to 1 and with this we are saying
that hey if you have overflowing this
item can get shrunk so other items can
fit on the screen take a look
save there you go I told you that flex
is a shorthand for flex grow and flex
rank so if it said flex to a negative
number this is exactly the same as
setting Flex rank I save the changes we
don't get the same result because there
is a problem going on here so you have
to manually refresh
now we get the same result as setting
the Flex shrink property so this is all
about Flex bases Flex grow and flex rank
in this lesson we're going to talk about
absolute and relative positioning in
react native so we have our container
with three items in it just like before
now what if you want to move this gold
view without changing the layout around
it it's very easy so here's our gold
view we can set top to 20 now when I
save the changes
this gold view will move 20 independent
pixels from the top look here it is we
can also set a negative value
so our gold view move- 20 pixels from
the top this is exactly the same as
setting the bottom property so if I said
bottom to 20 that means you want to move
this gold view 20 pixels from the bottom
we also have left on right so let's move
this 20 pixels from the left or 20
pixels from the right
so with these properties we can position
a component relative to its current
position without affecting the layout
around it so in all these examples the
blue and the red views have been exactly
where they're supposed to be they didn't
move around right
this happens because in react native all
components by default have their
positions set to relative so this is how
relative positioning works in CSS as
well in contrast to relative positioning
we have absolute positioning now if I
save the changes
this gold view would be positioned
relative to its parent which is this
container that takes the entire screen
and these other views will move around
as a result of this positioning let me
show you before I save the changes let's
set top to 20 and left to 20 as well so
we can see clarity so save look our gold
view is positioned 20 pixels from the
left and top of its parent that's the
container that takes the entire screen
and as a result of this positioning
these other views moved around so
they're not in their original position
let me show you one more time so I'm
going to change position back to
relative
look with relative positioning these two
views did not move they stayed in their
original position if we use absolute
positioning for this gold view it will
be positioned relative to its parent and
these other views will be repositioned
look they moved around okay so to recap
in react native all components by
default have their position set to
relative which means we can move them
relative to their current position
without changing the layout around them
if we change the position to absolute we
can move a component relative to its
parent and the layout around it will get
affected this is all about absolute and
relative positioning in react native
all right now it's time for an exercise
so I want you to implement two screens
of our app the welcome screen and the
view image screen for the welcome screen
we have this logo and this background
image you can download these below this
video now in this section our focus is
purely on laying out components on the
screen so we're not concerned about
styling for example our text here it's
very small and it's close to the logo we
don't want to worry about these details
we're gonna talk about styling in the
next section so then we're gonna come
back and fix those problems now this red
and green boxes they are placeholders
for the login and register buttons that
we're gonna create in the next section
now for the view image screen again we
have two placeholders for the closed and
delete icons that we're gonna add in the
next section so go ahead and implement
these two screens this is gonna take
about 15 minutes of your time
once you're done come back see my
solution all right the first thing I
want to do is to create a new folder
here in the root call app I'm gonna put
all of our application source code
inside this folder this is a good
practice to follow because with this we
can separate our application code from
the code that is automatically generated
by our tooling let's say tomorrow
something crazy happens with this
project we can create a brand new react
native project and simply copy your
application code into that project okay
so here's our app folder let's move the
assets folder inside this folder
now we need to go to after JSON and
update the path to these two images so
app slash assets and one more time save
let's make sure that everything is
working properly good so in our app
folder
let's add a new folder called screens I
like to add all our screen components
inside this folder this is a convention
that a lot of react native developers
follow you don't have to follow if you
don't like it
so in the screens folder let's add a new
file called welcome screen look at the
naming convention I'm using to name this
file so for this components I like to
use the word screen in the file and the
components name
now here we want to implement a function
component earlier in the course I told
you to install this extension react
native react Redux snippets with this
extension we can quickly type code so
throughout the course I'm going to use
the shortcuts that come with this
extension you can always learn about
this shortcut down below or on the
github page of this project ok so here
is an example we type our SF that is
short for react stateless function now
we have the basic template for a
function component with multi cursor
editing enabled so here we can rename
this component if you want to once we're
done we press the escape button to
disable multi cursor editing now first
we want to add an image background
component here so let's delete the div
element we type image background here we
have auto import so let's import this
now we need to set the source of this
image so source equals here we call the
require function then currently we are
in the screens folder so let's go one
level up now we go to assets and load
background dot jpg okay save the changes
that we should give this component a
style
so after this component I'm gonna type r
n SS that is short for react native
stylesheet so this quickly generates
this code style sheet that create we
store the result in this object Styles
and unfortunately this is not imported
on the top so we have to manually import
it style sheet okay so in this object
we're gonna have a bunch of key value
pairs so let's add a new key value pair
it's called background this is where
we're gonna add all the styles for our
image background component so I'm gonna
set flex to 1 so this image background
takes the entire screen ok now
here we sell our style to styles that
background save let's go to our app
component and render our welcome screen
so I'm going to delete all the code here
we don't need it anymore so we type
welcome screen and have vyas code
automatically imported on the top
beautiful let's see what we get so
here's our background image now let's
add our buttons so over here inside this
component we're gonna add a view
let's give it a style
so we're gonna set this to styles that
login button now let's create that over
here so as you see I'm not writing in
nine stands anymore I like to separate
these so login button let's say it's
with to 100% and its height to 70 pixels
the background color should be now let
me look at my cheat sheet so that's
going to be F c5 c6 5 save the changes
we can find variable view because we
didn't import it on the top so let's add
it to this list say so our button is
currently on the top we want to put it
down below over here how do we do that
well earlier we talked about flex
direction so by default flex Direction
is set to call him so our primary access
is this vertical line I told you that
using justified content we can align
items along the primary access so we go
to the styles for our container which is
this background image here we set
justify content to flex and the default
value is flex start that is the reason
why our button appears here on the top
so we said this to flex and save the
changes
now our button is here beautiful let's
duplicate this to add the second button
I'm gonna rename this to register button
now let's duplicate these styles and
rename is to register button I'm gonna
use the same width and height but change
the background color to 4e c-d-c for now
you might be thinking I'm typing too
fast but at this point you should have
already done your exercise
you shouldn't code along with me so I
don't want to waste a lot of people's
time by typing really slowly okay
so save the changes here's our second
button beautiful now we need to add the
logo on the top but here's a problem if
you had the logo because we said justify
content to flex and our logo is gonna
end up here so how do we put it on the
top this is where we can use absolute
positioning so we can position the logo
relative to its parent which is this
background image so
let's hat
here image now let me show you something
in this case auto import didn't work
this item with this blue icon so if you
look on the right side we don't have
auto import sometimes this happens in
the context menu that appears here so
look we have two image instances the
second one where the orange icon has
auto import so make sure to select that
one so now you can see image is imported
on the top so here I'm using the
self-closing syntax because we're not
gonna put anything inside this image now
let's set its source once again we used
a required function we go to the assets
folder and load logo - red dot PNG let's
test the result up to this point our
logo is way too big so let's give it a
couple of stars we set style to styles
that logo now over here
and by the way note that I'm sorting
these keys so if you have background
login button logo and so on this makes
it easier to maintain your applications
so let's set the size of this logo to
100 by 100 so width is 100 and height is
100 as well save
okay this is good our logo is down below
now we should use absolute positioning
so I'm gonna set position to absolute
and let's put this 50 pixels from the
top of the screen so here's what we get
we can push it down a little bit let's
say 70 that is better but how do we put
in center well Ernie we talked about the
primary and the secondary access in flex
so our primary axis is the vertical line
and the secondary axis is the horizontal
line using what property can be aligned
items along the secondary axis using
align items so you go to our container
over here
we said align items to Center and with
this we can align items along the
secondary axis take a look now the image
is right in the middle of the screen
beautiful
so finally we need to add our tagline
below this logo
so let's add a text component so we have
this orange icon here so we can
automatically import this what was our
tagline cell what you don't need say
our text appears here so what we need to
do is to put the text and the logo
inside a container and I apply absolute
positioning on that container okay so
let's add a new view here then we're
gonna move the image and text components
inside this view so with these lines
selected I'm gonna hold down the Alt key
and then press the up arrow with this we
can move code okay so now let's apply a
style here we can say styles that logo
container whatever you want to call it
now let's create this so here's logo now
we create local container
this is very simple I just want to move
these two properties inside this object
let's see what happens
so our text is in the right position but
our logo is not exactly in the middle of
the screen this happened because once we
added this new container the alignment
of this container is reset to flex start
by default so in this container once
again we need to set align items to
center so we can align the items along
the secondary or the horizontal axis
take a look and here's the final result
in the next section we're going to apply
a bunch of styles to make this screen
pretty now if you want my source code
you can get it from the zip file that I
gave you at the beginning of the course
in the first section that zip file
contains all the source code that we're
gonna write throughout this course so
every section has a start and a finish
folder where you can find a relevant
source code
all right now in the screens folder
let's add a new file called view image
screen that Jay has here we're gonna
create a function component I'm happy
with the name now in this component
first we want to add an image so image
let's set its source to require we go to
the assets folder and load chair jpg
now let's test our application up to
this point so we go to after j/s and
render view image screen ok let's see
what we get so we get this kind of
whitish screen because this image that I
have supplied is very big and it doesn't
fit on the screen so we need to apply a
bunch of stars here we set style to
first we should create a style to object
so we type our NSS good now let's import
style sheet on the top
so in this object we're going to find a
bunch of stands for our image I'm gonna
set the width to 100% and the height to
100% as well
and finally let's add style to styles
that image let's see what we get
so here's our image but if you pay close
attention the sides of the image are cut
off let me show you so here in the
project
let's take a look I just shared that jpg
do you see the sides of this basket is
cut off here this is because of the
resize mode so to solve this problem
to our image and set the resize mode to
contain now our image perfectly fits on
the screen but we have this white
background so we have to change it so
let's wrap this inside the view that's
going to be our container so view let's
import it
now we give it a bunch of styles so
style equals styles the container
now let's define the stance it's a
container once again I'm trying to sort
these alphabetically this makes it
easier to maintain our application
also if you see eslint instant
automatically does this for you but in
this course I'm not using es lane
because it keeps complaining and it
creates a bad experience for you so I
have to manually sort these so this
container we're gonna set its background
color to black and I also like to set
Flex to one to make sure that this view
takes the entire screen so here's what
we get beautiful now let's add the
placeholders for the clothes and delete
buttons so back to our container let's
add another view give it a style let's
say styles that close icon now
we define the styles close icon comes
before container so let's set its width
to 15 the height 15 as well I'm gonna
set the background color to FC 5 C 6 5
now if we save the changes our button
appears here to solve this problem we're
gonna use absolute positioning we want
to put this exactly right here so we set
position to absolute so now we can
position this component relative to its
parent which is the container so let's
say we want to position this 40 pixels
from the top and 30 pixels from the left
so it appears here I'm happy with this
so let's move on now let's add our
second placeholder so I'm gonna select
this hold down shift alt and down to
duplicate this code now let's rename
this to delete icon
and then when you find a stylist delete
icon
now to save time I'm going to copy
these fuel styles I know copying code is
bad but they're gonna fix this in the
future so for now don't worry about it
so let's change the background color to
4e CD C for now we want this to be 30
pixels from the right of the screen
take a look here's what we get so I'm
happy for now as we go through the
course we're gonna improve our code
we're gonna refactor it we're gonna make
it more professional
alright one problem I see in our current
implementation is the duplication of
these color codes we have repeated this
in a few places so what we can do now is
to extract these color codes put them in
a separate file like colors of Jas and
with this we have all the colors that
our application users in a single place
so if tomorrow we decided to rebrand
this app and use different colors there
is a single file we have to modify so in
our project inside the app folder let's
add a new folder called config here we
add a new file called color CAS now in
this file I'm gonna export a default
object with these properties we can
define our primary color so we're gonna
set this to F c5 c6 5 and our secondary
color to 4e CD C for now save the
changes we go back to our view image
screen on the top we import colors from
config slash colors and note that I'm
separating the import statement from my
code from the import statement from our
third-party libraries again this is a
convention that a lot of people follow
to make their code clean and
maintainable so we imported colors this
is an object that we exported over here
ok so
we can replace these hard-coded values
with colors that primary and colors
that's secondary save the changes so
take a look we get the same result as
before but our application code is more
maintainable now we have a single place
where we can define our color palette
now some people argue that even black or
white should not be hard-coded they
should be part of the palette so in our
color palette we can define a new
property black and set it to zero zero
zero because tomorrow if we decide to
rebrand this app we might use a
different dark color rather than pure
black so it's a good practice to include
it here so save now we can replace this
hard-coded value with colors that's
black that's good now we have another
problem here the duplication of these
properties so both our icons these icons
over here have the width and height of
50 so you might be wondering if we can
define this properties in a single place
and reuse them in two places we
certainly can but we're gonna get rid of
this view in the future we're gonna use
a real icon so for now I'm not too
worried about this this is just a
temporary solution
hey guys ma chère so as I told you
before this tutorial is the first two
hours of my ultimate react native course
the complete course is divided into two
parts basics and advanced topics but
each part being about five to six hours
long so the complete course is over ten
hours long it includes all the source
code rewriting this course every section
has a before and after source code so
you can easily code along with me plus
you will get plenty of exercises and
step-by-step solutions and a certificate
of completion that you can add to your
resume if you're interested I put the
link down below I'm offering a discount
to the first 100 students so if you're
interested enroll now before it's too
late
thank you and I hope to see you in the
course
