In this video we're going to get React Native.
Up and running on our own physical device.
So this is going to be like your personal phone that's in your pocket or next to you right now.
So let's get to it.
Here's a series of steps we're going to go through.
We're gonna do all this stuff right now inside this video.
So hopefully by the end we'll have an application up and running now for the first project we're going
to work on.
We're going to use a starter pack a little starter project that I put together this starter project
has a tiny bit of code inside of it just to get a start started and save a little bit of time later
on side of course we're definitely going to be generating our own projects from scratch.
But for right now we're going to use this starter project so hopefully you've found that starter project
in the lecture before this one and hopefully you downloaded that zip file if you didn't please flip
back to the previous video and download that zip file once you've downloaded that zip file you can then
extract it you can place this project director right here into any workspace directory you have on your
local machine when I say workspace directory I really just mean a folder that you like to put source
code into you can put this folder anywhere on your local machine that you want it is totally up to you
all right.
So once we've got it extracted we're then going to open up our terminal and we're gonna change into
that folder that we just created.
It's going to open up my terminal right now and I'll change into that are in starter directory then
inside of here we're going to run the command npm install when you run that command if you see an error
message.
I want you to know right away that you should first try to update or install node for the first time
you can find a link to install or update.
No J.S. Right there inside that red box.
So back inside my terminal.
Still inside my project directory I'll run npm install
when you run this command node is going to automatically download a ton of different dependencies into
your new starter project.
You'll notice that my installation occurs very quickly.
That's just because I already pre installed all the dependencies that are required just to save a little
bit of time.
Chances are for you you're going to see that the installation process takes anywhere from like 30 seconds
up to two or three minutes totally fine if it takes a while as that installation is running you might
see a couple of different warning messages appear.
If you see any warnings that is also OK.
Warnings are fine.
And in fact I really expect that you're going to see some warnings like the ones you see right here
on my screen.
The only thing you need to worry about is if you see an error message.
So if you see a big error message.
Well that means that you need to pause this installation pauses video and we should do a little bit
of troubleshooting the first bit of troubleshooting you want to do is to just google the error message.
I'll be honest with you you're going to see a ton of errors as you get started with React Native and
so you definitely want to be in the habit of googling the error messages you see because very frequently
other people run into the same problems as you all right.
So now that our npm install is complete we're then going to run the command NPM start inside that project
directory when we run that command.
We're going to open up something called the React Native bundler.
This is essentially a program that's going to take all of our source code and get it ready to be ran
on some mobile device.
So now that my installation is complete I'll run NPM start once again inside of my aunt's starter project
directory once I run this command.
We're gonna see a browser window appear much like the one you see right here.
So this is what we refer to as the interface to the React Native bundler or the Metro bundler.
Again this is a program that's going to get your code running and ready to be executed on some mobile
device.
Now we've got this bundler up and running.
We're gonna flip over to our physical device like our actual phone and do just a little bit of setup.
So on our phone we're going to install an app called Expo.
The Google Play store or the App Store depending on whether you have an IOW device or an android.
We'll talk about what this expo thing is in just a moment but right now let's just finish up the setup
okay.
So I've got my actual physical phone right here.
This is a screen cast of my very real iPhone so it's in some on ISIS.
I'm going to open up the app store to install this app.
Again if you're running Android that's totally fine you're going to open up the Google Play store instead
so once you've got your respective app store open will then hit search and we'll do a search for Expo
X..
Oh like so then do a search and we'll see something like Expo client.
It should be either the first or second results.
You'll notice that there's something else on here called expo with the big yellow logo.
That's not what we want.
We've got them.
We want to get the one that has a logo like this right here.
Now I've already got Expo installed on my phone once again to just save a little bit of time.
So I got to open it right away but for you go ahead and install the app and you can of course pause
this video while it's installing once you've got that app installed we're then going to go back inside
of our browser of each that react native bundler.
So here's might react native bundler right here.
You'll notice that there's a QR code on the bottom left hand side.
So we're going to scan that QR code to scan the QR code.
You can open up the camera application on your phone you should not need a separate app just to scan
a QR code so on my phone here's my phone right here.
I'm going to flip on over to my camera application and going to scan the QR code.
There we go.
You can see that I get that pop up up here on the very top.
As soon as I see that pop up I'm going to tap it and that will kick me over to the expo application.
We just installed now right here.
Let me pause right here and tell you it is incredibly likely that you're not going to see what I see.
Notice how at the bottom it says building javascript bundle.
If you don't see this message down here totally fine.
Hi.
Once again almost expect that you're going to see something that says like cannot find connection or
cannot make connection or something like that or something like this is taking longer than it should.
If you see a message like that then there's some immediate troubleshooting we can do back inside of
the react native bundler.
You'll find a connection setting right here for me by default it is set to land if land does not work
for you then you can flip it over to tunnel instead.
When you change it to tunnel you'll notice that the QR code right here changes.
So flip it over to tunnel and then scan the QR code again when you reach scan that QR code hopefully
then the application should start up.
So either land or tunnel.
I've also heard some people say that local works so we could change over to local and scan that QR code
but in theory that should really not work on your mobile device or your physical device.
You can give it a try but it really should be either tunnel or land.
So try one or the other until you get it working.
If neither of them works well that's fine.
Once again you can flip over to the discussion on this video and we'll do a little bit of troubleshooting.
I will say that if you can't get either tunnel or land to work one immediate solution that you can do
if you want to continue with the course right now is to go to that appendix section and go through the
setup to set up a local emulator or simulator.
If you do that you should go to come back to this screen and get it working with a local device instead.
All right.
So if I now flip back over to my phone now flip back over.
Here we go the screen cast after a while you'll notice it's taking a little bit of time here but eventually
this downloading javascript bundle process will be completed and I should see these starter application
appear on the screen.
So I got to wait just a second or two for this to complete on your device you might see that this percentage
is filling up much faster than mine.
That's totally fine if you're seeing that it's running very very slow like ridiculously slow.
You can also close down the expo application and re scan the QR code again.
I found that that sometimes solves some lagging issues as well OK.
So now eventually once that entire downloading process is complete we'll see these starter application
appear.
So this right here is the starter application.
This is what we're trying to see.
So hopefully you see the words Home Screen on what the word like app or something similar at the very
top.
And that's pretty much it.
So we've now got our application up and running or at least hopefully we do.
Once again if you ran into any issues during the set up process I really expect that is totally not
to the realm of possibility.
Very likely that you ran into some issues and we can always do some troubleshooting just hop over to
the cube section.
All right.
And the last thing I want to mention very quickly is if you ever need to stop that react native bundler
you can open up that terminal window that's running the bundler again in press control see and then
if you ever need to start it back up again for any reason you'll once again run NPM start inside of
your project directory from the terminal and then scan the QR code again on your mobile device.
And that's pretty much it.
OK.
So now that we've got our app up and running hopefully let's take a pause right here and continue in
the next video.