Hi everyone, and welcome back.
In this part of our video series, we'll focus on setting up
Android development environment for React Native CLI on macOS.
Before we begin, make sure you have around 10 to 15 gigabytes
of free space to accommodate the additional tools and dependencies
we're going to be installing.
Since we have already set up some tools during the iOS development, Android setup
should require fewer steps.
Now, we can go to the React Native official website, which is reactnative.dev.
Then let's go to Guides, Environment Setup, and Set up your Environment.
Here, make sure that you have Android selected as your target OS.
Now, for the dependencies, we're going to need Node, Watchman,
React Native CLI, which we have already installed and we're going to also
need JDK and Android Studio.
We're going to skip over this step since we did it in the last video,
and we're just going to go to the Java development kit.
As you see, we have to run some commands here.
What we want All we do is open up a terminal, copy this, and start
with the installation of JDK.
Let's click on Enter.
Meanwhile, I'm going to tell you a bit about JDK.
The JDK is an essential component for React Native Android applications.
It provides the necessary tools and libraries to compile, debug,
and run Java code, which is the foundation for Android development.
While the JDK installation is in progress, let me explain why we need it.
React Native bridges JavaScript code with native code, allowing us to interact
with device features and APIs.
To do this on Android, we need some Java code,
and it already comes with Java code.
The JDK enables us to compile and run this Java code, ensuring seamless
communication between our React Native app and the Android platform.
Now, we need to enter the password in the terminal, so I'm going
to do this and click on Enter, and the installation should complete.
Great.
Now that we're done with this, let me run this comment as well.
Great. We have the location of this in here.
It was installed successfully.
Now we need to add or update our Java home environment variable
in this file on our computer.
For that, we can do
sudo nano
and then paste this.
We're going to have to make sure that we add Java home variable here.
Why don't we grab this and paste it here?
Then what we're going to have to do is click on Control X on your keyboard
and then Y and then Enter.
Now this should already be placed in that file.
sudo is actually something that grants you administrator access, and nano
is the editor that appeared inside our terminal, and zshrc is the file.
If we want to check that it's there, you can click on up arrow
on your keyboard, click on Enter, and you're going to see it there.
Now, let's click on Control X one more time.
This says that we might also need it in bash_profile,
so let's just do that as well.
Let's go to bash_profile,
and let's just paste this there as well.
Then CTRL+X, Y, Enter.
Actually, I do I suggest to place it in bashrc file as well, just in case.
Let's just paste this there as well.
Then let's do CTRL+X, Y, and Enter.
Great.
Now we have our Java Home available.
I just cleared my terminal.
What we want to do now is install the Android development environment.
We're going to have to go to this link over to install Android Studio.
Let us go here, click here, and let's agree to terms and Conditions.
I have a Mac with Intel chip.
If you have the Apple chip, please select this one.
I'm going to select this one.
The download process is going to start.
Depending on your internet speed, it might take a while, so come back
to the video once you're ready. Great.
My download has been completed.
I'm just going to open this up and I'm going to I'm going to move the
Android Studio in my applications, and the installation process should start.
Awesome.
Now that this is completed, I'm going to go to applications.
I'm actually going to drag this over here just in case I need it later.
I'm going to close my Finder, and I'm going to open up the Android
Studio, and I'm going to also go back to the documentation.
I'm going to trust this.
Great. Android Studio is starting up.
I'm not I'm going to send the user statistics to Google.
Now we're inside the Wizard.
Let us just click on Next.
I'm going to go with the standard installation process.
I'm going to click on Next again.
I'm going to accept all of this license agreements, and then
I'm going to click on Finish.
We're going to start downloading components.
Again, depending on your speed of the internet and your computer,
this might take a while.
So please come back to the video once you're ready.
Great.
We have downloaded all of the components, so we can just click
on Finish right here, and we're going to see the Android Studio Welcome page.
We're going to have to do some more things right now.
We're going to install the Android SDK as we see Here.
For that, we're just going to go to More Actions, and then we're going to click on
SDK Manager, which is this one.
Then we're going to look for Android 14 upside down cake, which is right here.
I'm going to click on this.
We have some more instructions, but for that, we're going
to have to show package details.
Let's just click on this button here.
Let's go to Android 14.
We do need Android SDK platform 34, which is selected here.
Then we're going to need one of these.
Let's look for that.
Now, if you have M1 chip, then you're going to have to I'm going to select the
arm one right here, google api arm 64.
Since I have the Intel chip, I'm going to select this one.
One more thing we need All we're going to do is go to SDK Tools tab, which is here.
We're also going to need to show package details here and make sure that
34.0.0 is selected so
let's select that.
Now we can just click on Apply, and this is going install some more stuff.
I'll just click on OK.
You're going to have to wait for a bit more depending on your internet speed.
Once this is done, just come back to the video.
Great.
So SDK Component Installer is done with its tasks, so we can just
click We can just click on finish.
We can click on apply after and then click on okay.
Now we need to just configure the Android home variable for this.
We're going to just have to copy this. Just click here and then open up
your terminal and this says that we are going
to need to update the zprofile, zshrc, bash_profile or bashrc.
Honestly, I'm going to update all of them because I have seen students have issues
if they didn't update all of them.
Let's just update all of these files.
For that, you would need
sudo nano ~/.zprofile
let's just enter the password to grant the administrator rights.
Nice. Awesome.
We can just paste what we have here and then click on Control X
on your keyboard, then Y, and then Enter.
If you want to check whether it was successful, you can just click on up
arrow on your keyboard, click on Enter, and you're going to see it's here.
To exit, you can just click on CTRL+X once more.
Now we're going to update
the bash profile file as well.
We can just go here, Command+V,
and then Control+X, Y, Enter.
Now we're going to do the same
for the zshrc file.
Let's just paste this here, control X, Y, Enter, and we're going
to do the same for the bashrc file.
Command + V, control, X, Y, enter. Great.
We updated all of these files.
Now, if we want to check that everything went fine, we can just copy this.
We can exit out of here.
Restart this one more time, and we're going to see the value right here.
Great.
Now, we just need to prepare the Android device
so that we can run our application.
For that, let's open up the Android Studio, and we're going to go to More
Actions, and then we're going to set up new virtual device.
Right now, we do have one by default here, but it's dependent on API 35,
and we want to be dependent on 34 according to the documentation here.
Let's just click on the plus button.
I'm going to choose Pixel 4a.
That's my previous phone that I actually had, so I have
sentimental attachments to it.
Now, we see the upside down cake available here with the API 34, which is great.
We're going to click on Next, and then we're going to click
on Finish, and let's launch this.
You can launch this anytime you would like to run your application
on Android device.
Again, the steps for that would be to open Android Studio, go to Virtual Device
Manager, and click on play button right here, and your emulator would launch.
Great. Let me move this here.
And now what we want to do is make sure that we installed everything correctly.
So for that, we're going to launch our terminal.
In our last video, if you remember, what we did is we set up the awesome project.
So you would need to navigate to that wherever your awesome project is.
Mine is directly inside this folder.
If you have it on desktop, you would have to go to desktop
and then awesome project.
But I'm just going to change the rektorial with cd, and I'm going to say that I
want to go into awesome project, and then I'm going to click on Enter and I'm here.
And then what I'm going to do is try to run this on Android.
So to run this project on Android, what I'm going to have to do is
npx react-native run-android
it is recommended that the emulator is fully launched
before you run this command.
So let me just wait for that to happen and then I'm going to click on Enter.
Great.
Now that the emulator is launched, I'm going to click on Enter.
The Metro Bundler has started up.
I'm going to ignore this.
We're installing Gradle 8. 6.
Some people might have issues with this with the current React Native
version, but by the time you're watching this video, this issue
might have already been fixed.
If we're going to run into no issues, that's great, and we're going
to continue, and the application should show up in the emulator.
But if that's not going to happen, we're just going to downgrade Gradle
by one version, 0.1 version, and it's going to work for you.
Let's just wait for this to complete and see how it goes.
If we face any issues, we're going to correct them together.
But by the time you might be watching this, react native might have already
released a newer version that fixes this issue for everyone.
Just come back to the video once this is done executing.
Great. We did face no issues.
Build was successful and it's getting built and we're going to
see the react native application template appear here.
If you did have an issue, it's most likely because of the gradal version
and you would need to downgrade from 8.6 to 8.5.
In order to do that, you're going to have to go to your project and find
the gradle-wrapper.properties file, and you're going to find distribution URL variable there.
Instead of Gradle 8.6, you would set 8.5.
But I don't think you're going to run into that issue just
because I have it fixed here already, so it was probably already fixed
for iOS Android development environment. Great.
Our installation has gone successfully both for iOS and Android.
But I do want to say that if you encounter any issues other than what I mentioned
or have any questions along the way, don't hesitate to ask in the Q&A section.
I'm here to assist you and other students are here for you as well.
So don't hesitate to share your problems.
Thank you so much for watching.
We're going to continue our React Native journey now and start
creating amazing applications together.
See you in the next video.