In the last section we generated our first re-act native project at the command line using the re-act
native CLID tools at the end of that installation process.
You should have seen some instructions like this.
In other words how to run our app on iOS and how to run it on Android.
Now let me be very clear here that the Riak need a team as being almost sadistic.
I would say to Yazzie almost sadistic my making it sound like this is as easy as it as it is to get
started with the android.
No there is certainly without a doubt a lot more installation has to go on outside of just running a
simple little command here.
So in this section we're going to get at some that additional set up that kind of gets glossed over.
All right so let's go ahead and get started.
The first thing I'm going to do is open up the Android studio.
So we just finished installing that in the next section or last section excuse me.
I'm going to go ahead and pop open and then once it's open I'm going to open an existing Android studio
project.
So believe it or not when we created our re-act native project and the last section that gave us a starting
Android project.
So I'm going to open up an existing project and I'm going to navigate to the folder where I placed that
project.
So for me I placed it on my drive inside of the folder called Riak native that generated a project called
albums and inside of there is a folder called Android.
And this is our Android project right here.
So I'm going go ahead and open it up
and this is going to take just a moment to pop open.
All right there we go.
So when we first opened this up I get a nice big error message here.
You might get a little bit of a different message you might see something that says like I don't know
pay compiling gradiently or something like that down at the bottom.
So if you see that message that is totally fine just let it do its thing.
After a couple of seconds like 20 or 30 you'll see a tab pop up on the bottom.
So says messages.
So click on messages and you should see the message I see right here.
Now I know that the text is a little bit smaller here but what it says is cause fail to find target
with mastering Android 23.
And then beneath that is a nice little link that says Install missing platforms and sync project this
little button right here at this link.
Oh you have no idea.
No idea how much pain this thing is saving us from.
It is saving us from a lot of hassle and a lot of trouble.
So we're going to click this link right here.
And thank goodness.
Thank goodness.
Android studio is going to automatically install download and install a little bit of software for us.
So we're going to click accept on the license agreement.
Next we'll download the SDK.
It will unzip it for us and go through the installation.
Now I certainly could puzzle video here but you know again it only takes a moment to finish up.
So all done there a click Finish.
And now again I get another error message pop up right away saying hey I've failed to find build tools
revision 23.
Again we will click on the very helpful link right here.
Install build tools 23 and sync project and boom are good to go again.
Give would you would.
Oh man you won't believe how much trouble that does save for us.
That just saved us a lot of trouble.
By the way if you get a great old plug in pop up we are going to hit.
Don't remind me again to this project and.
OK.
We're good to go.
OK.
So we still have a little bit of work to do here.
What we just installed were some tools to set up an android emulator something something that can run
our re-act native application on the desktop that we can debug against on the fly.
So we still have a little bit of setup to do though.
The next thing you want to do is create an android emulator that we can actually use for a debugging
process.
So at the very top I don't click on Tools Android and then HDD manager once they click on that we get
a nice big pop up something about your virtual devices.
So a virtual device is an android emulator.
It has a window that lets us run the Android operating system inside of Windows.
So we will create a virtual device by default.
I have Nexus 5 selected.
If you see another default selection that's totally fine.
Just make sure that you get a screen size right around 5 inches.
So the nexus 5 is 4.9 5.
That's good enough for me.
I'll click next.
And then here is the next little troublesome bit.
I guess you could say by default it tries to create a emulator with version 24 of Android.
Right now re-act native is making use of re-act native version 23.
So instead of going to select marshmallow download and go through the download process again
so just like the others it's going to take a moment to get started.
We'll go through the download the unzipping and installation.
You know I had considered.
I knew that there were some pauses here for downloading and unzipping and I'm kicking myself because
I really wanted to like put together some jokes.
You know I could tell you while the installation was going but I just completely forgot it.
Maybe next time we'll do we'll do some funny jokes anyways.
All right let's get finished.
Download is all finished and now we can select that API level 23 then click next.
This is some information about the device we're about to build.
We don't have to configure anything else here.
I'll just click next.
Or in this case finish excuse me.
And then finally I can find Nexus 5.
This is now my emulator.
This is my virtual device that I can launch on my desktop.
So on the far right hand side is a play button underneath actions or click it.
And this is going to start up our Android emulator.
So I get spinner and wow.
Yeah it really looks like an actual phone.
So this is going to take a little bit of time to boot up initially but we still have a little bit of
setup left to do.
And this last little bit is certainly let me tell you.
It is definitely the painful part.
This is the part where you definitely made the right decision by checking on my course because otherwise
there are not a lot of solutions online for troubleshooting this last little bit.
So I'm not going to tell you exactly what the problem is we are just going to jump to the solution and
what a solution it is at my start menu.
You can open it up and then I'm going to search for system settings and the result I should get here
is view advanced system settings.
Go ahead and click it and then I get my system properties window right here.
This my little bit familiar if ever you know mess around with Windows that much.
I've got tabs like computer name hardware and advanced Zonday advanced window.
I want to click on environment variables.
So we're going to add to environment variables to Windows.
The first one that we're going to add a click on new.
And then I'm going to enter a name of Java home.
So by default the react native package or the thing that kind of like builds or application expects
to have access to this environment variable called Java home but by default it doesn't actually exist
on a brand new operating system.
One thing I want to mention is that if you already have a variable of Java home you do not need to add
this one in.
So if you scan over this list you'll see one that says Java home you don't need to go to this process.
But if you do not see each other home go ahead and click on that new button and add the variable name
of Java home.
Then for a variable value we will click on browse directory and the window that pops up I'll click on
this PC I'll click on the C-Drive.
I click on program files all expand Java and finally I will select the JDK that we just installed.
So JDK 1.8 and I'll click OK and then ok again.
So now I have a environment variable of Java underscore home and the value of Seberg and philes Java
JDK blah blah blah.
All right.
One other thing that we need to do.
We also need to add in a nother directory to our path variable.
So on this list of different environment variables you should already have one listed here called Path.
So definitely scroll up and down.
I guarantee you you have it I'll click on it because I want to edit my path and then I will click on
new on the right hand side top right hand side and you can see right here we can enter in a path.
So if you recall when we were going through the Android studio setup I said hey check out your user
name right there right.
And for me it was computer for you was whatever your username is.
This is where that is relevant.
OK so this is where we're going to make use of that.
So I like to enter in my path.
So I'll put in see a user's computer.
So again for me it is computer for you is what it is whatever of your logon username is.
For me it's computer for you it will be something different.
And then we're going to point it to app data
local
Android SDK platform Dowst tools like so as a quick little check just to make sure that I have the right
link.
I'm going to copy this link so I select everything I'm going to copy it.
I'm going to then open up windows explorer paste the link and just verify.
Yes this directory exists here.
So again just go ahead.
Copy that link paste into Windows Explorer verify that it exists.
If you get an error message popping up that says like hey the directory doesn't exist chances are you
entered in the incorrect username.
So make sure that you've got the correct use made for your log in on your particular machine.
OK.
Now that this is all done click OK I'll click OK click OK and the last Im going to do is restart my
command prompt now.
So I'm going to close the command prompt.
I will open it back up by searching for Command.
Right click on it run as an illustrator.
And now we are finally ready to actually test our application inside of the emulator.
So I'm going to change back to my project directory which for me is on my drive.
So I'm now inside of my project directory.
It'll be whatever your working directory is and wherever you put your projects for me I'm calling it
Riak native.
And then the name of the project that we just generated which is albums.
So the very last step inside of your.
I will write out re-act dash native run dash Android.
This is all very telling us with you this is the absolute moment of truth right here.
As to whether or not this is going to work when I run that command you'll see another window pop up.
This is the re-act native packager.
This is what takes all of our javascript code compresses it all down into a single javascript file and
then makes it available to the device and then over here back to the original window.
Our application is building for the Android device and it's then going to automatically install and
open it on the device
and there we go.
So installing JPK on app debugger OK and then we can see everything pop up over your on the right hand
side.
Fetching javascript bundled that means that it is pulling that all the starter code and then eventually
Yup there we go.
Welcome to react native.
So by default.
To refresh any code.
I know that I'm going to give you a little bit of instructions right now that are very particular to
Android and I know they might not make a ton of sense until we start writing some code.
I just want to mention them very quickly.
First off by default.
To refresh our simulator or to get any changes to our Kobasew we've made we can follow the directions
right on here.
So just double tap r to refresh and as you can see it makes another request for a javascript Lundell.
The other thing I want to mention is shake or press menu button for dev menu.
So looking down here.
OK I don't really see any menu menu button like it makes reference to look in the right side.
I also don't see any.
So here's a little trick to open up this Desmond knew that it's talking about we can press control in
and that opens up the development menu.
So as I worked through the course I will be using the Iowas simulator bible many times say OK I'm going
to open up my development menu right here.
We are on Android do that by pressing control in and again just to be clear whenever I refer to refresh
on the application.
We will double tap our to refresh our simulator.
OK so that's it.
We got our Android emulator up and worked on the last thing I want to mention to you is hey we went
through all this process just to get to your.
What happens when I close everything.
How do I get everything started back up.
So once you close everything you know let's say you shut down your computer for the night or whatever
it might be.
You can get started again by opening up your Android studio again.
You can open up your re-act native project again.
You'll go back up to the tools menu.
Android HDD manager and then click the play button on the right that will start up the emulator and
then inside of our command line at the command prompt We will change into our project directory and
run the same command again re-act dashed native run dashin Android.
So those are the two steps for getting started back up.
If you ever decide to take a break or shut down your computer for the night or whatever it might be
Riak native running Android.
And don't forget to start up the emulators.
Well.
OK so I hope this didn't seem that bad because trust me I spent a tremendous amount of time poring over
Android's set up getting it down to like just the bare essentials of what you need to install to get
started.
So hopefully everything is working out.
Let's continue and start working on our first application in the next section.