WEBVTT 00:00:00.000 --> 00:00:01.610 Hi everyone, and welcome back. 00:00:01.640 --> 00:00:04.600 In this part of our video series, we'll focus on setting up 00:00:04.630 --> 00:00:09.250 Android development environment for React Native CLI on macOS. 00:00:09.280 --> 00:00:12.320 Before we begin, make sure you have around 10 to 15 gigabytes 00:00:12.350 --> 00:00:15.920 of free space to accommodate the additional tools and dependencies 00:00:15.950 --> 00:00:17.810 we're going to be installing. 00:00:17.840 --> 00:00:22.040 Since we have already set up some tools during the iOS development, Android setup 00:00:22.070 --> 00:00:24.930 should require fewer steps. 00:00:24.960 --> 00:00:29.600 Now, we can go to the React Native official website, which is reactnative.dev. 00:00:29.630 --> 00:00:34.890 Then let's go to Guides, Environment Setup, and Set up your Environment. 00:00:34.920 --> 00:00:38.970 Here, make sure that you have Android selected as your target OS. 00:00:39.000 --> 00:00:42.080 Now, for the dependencies, we're going to need Node, Watchman, 00:00:42.110 --> 00:00:47.080 React Native CLI, which we have already installed and we're going to also 00:00:47.110 --> 00:00:49.570 need JDK and Android Studio. 00:00:49.600 --> 00:00:52.720 We're going to skip over this step since we did it in the last video, 00:00:52.750 --> 00:00:56.090 and we're just going to go to the Java development kit. 00:00:56.120 --> 00:00:59.210 As you see, we have to run some commands here. 00:00:59.240 --> 00:01:04.330 What we want All we do is open up a terminal, copy this, and start 00:01:04.360 --> 00:01:07.290 with the installation of JDK. 00:01:07.320 --> 00:01:08.930 Let's click on Enter. 00:01:08.960 --> 00:01:13.320 Meanwhile, I'm going to tell you a bit about JDK. 00:01:13.400 --> 00:01:19.010 The JDK is an essential component for React Native Android applications. 00:01:19.040 --> 00:01:22.560 It provides the necessary tools and libraries to compile, debug, 00:01:22.590 --> 00:01:26.890 and run Java code, which is the foundation for Android development. 00:01:26.920 --> 00:01:31.530 While the JDK installation is in progress, let me explain why we need it. 00:01:31.560 --> 00:01:36.840 React Native bridges JavaScript code with native code, allowing us to interact 00:01:36.870 --> 00:01:39.330 with device features and APIs. 00:01:39.360 --> 00:01:42.280 To do this on Android, we need some Java code, 00:01:42.310 --> 00:01:44.650 and it already comes with Java code. 00:01:44.680 --> 00:01:49.920 The JDK enables us to compile and run this Java code, ensuring seamless 00:01:49.950 --> 00:01:54.330 communication between our React Native app and the Android platform. 00:01:54.360 --> 00:01:57.320 Now, we need to enter the password in the terminal, so I'm going 00:01:57.350 --> 00:02:02.650 to do this and click on Enter, and the installation should complete. 00:02:02.680 --> 00:02:02.960 Great. 00:02:02.990 --> 00:02:07.370 Now that we're done with this, let me run this comment as well. 00:02:07.400 --> 00:02:10.650 Great. We have the location of this in here. 00:02:10.680 --> 00:02:12.490 It was installed successfully. 00:02:12.520 --> 00:02:17.040 Now we need to add or update our Java home environment variable 00:02:17.070 --> 00:02:20.840 in this file on our computer. 00:02:20.870 --> 00:02:22.889 For that, we can do 00:02:23.089 --> 00:02:24.083 sudo nano 00:02:24.283 --> 00:02:26.290 and then paste this. 00:02:26.320 --> 00:02:31.330 We're going to have to make sure that we add Java home variable here. 00:02:31.360 --> 00:02:37.610 Why don't we grab this and paste it here? 00:02:37.640 --> 00:02:43.760 Then what we're going to have to do is click on Control X on your keyboard 00:02:43.790 --> 00:02:47.170 and then Y and then Enter. 00:02:47.200 --> 00:02:50.490 Now this should already be placed in that file. 00:02:50.520 --> 00:02:55.840 sudo is actually something that grants you administrator access, and nano 00:02:55.870 --> 00:03:00.610 is the editor that appeared inside our terminal, and zshrc is the file. 00:03:00.640 --> 00:03:03.720 If we want to check that it's there, you can click on up arrow 00:03:03.750 --> 00:03:07.330 on your keyboard, click on Enter, and you're going to see it there. 00:03:07.360 --> 00:03:11.130 Now, let's click on Control X one more time. 00:03:11.160 --> 00:03:14.280 This says that we might also need it in bash_profile, 00:03:14.310 --> 00:03:16.490 so let's just do that as well. 00:03:16.520 --> 00:03:22.410 Let's go to bash_profile, 00:03:22.440 --> 00:03:25.370 and let's just paste this there as well. 00:03:25.400 --> 00:03:28.690 Then CTRL+X, Y, Enter. 00:03:28.720 --> 00:03:36.280 Actually, I do I suggest to place it in bashrc file as well, just in case. 00:03:37.800 --> 00:03:40.970 Let's just paste this there as well. 00:03:41.000 --> 00:03:46.090 Then let's do CTRL+X, Y, and Enter. 00:03:46.120 --> 00:03:47.130 Great. 00:03:47.160 --> 00:03:50.960 Now we have our Java Home available. 00:03:50.960 --> 00:03:52.160 I just cleared my terminal. 00:03:52.190 --> 00:03:57.130 What we want to do now is install the Android development environment. 00:03:57.160 --> 00:04:02.650 We're going to have to go to this link over to install Android Studio. 00:04:02.680 --> 00:04:08.530 Let us go here, click here, and let's agree to terms and Conditions. 00:04:08.560 --> 00:04:10.920 I have a Mac with Intel chip. 00:04:10.950 --> 00:04:14.080 If you have the Apple chip, please select this one. 00:04:14.110 --> 00:04:16.130 I'm going to select this one. 00:04:16.160 --> 00:04:19.560 The download process is going to start. 00:04:19.560 --> 00:04:22.400 Depending on your internet speed, it might take a while, so come back 00:04:22.430 --> 00:04:25.560 to the video once you're ready. Great. 00:04:25.560 --> 00:04:26.720 My download has been completed. 00:04:26.750 --> 00:04:30.760 I'm just going to open this up and I'm going to I'm going to move the 00:04:30.790 --> 00:04:36.360 Android Studio in my applications, and the installation process should start. 00:04:36.840 --> 00:04:37.880 Awesome. 00:04:37.910 --> 00:04:41.050 Now that this is completed, I'm going to go to applications. 00:04:41.080 --> 00:04:45.210 I'm actually going to drag this over here just in case I need it later. 00:04:45.240 --> 00:04:49.290 I'm going to close my Finder, and I'm going to open up the Android 00:04:49.320 --> 00:04:53.730 Studio, and I'm going to also go back to the documentation. 00:04:53.760 --> 00:04:55.840 I'm going to trust this. 00:04:57.720 --> 00:04:59.600 Great. Android Studio is starting up. 00:04:59.630 --> 00:05:04.000 I'm not I'm going to send the user statistics to Google. 00:05:04.280 --> 00:05:06.770 Now we're inside the Wizard. 00:05:06.800 --> 00:05:08.090 Let us just click on Next. 00:05:08.120 --> 00:05:11.760 I'm going to go with the standard installation process. 00:05:11.760 --> 00:05:13.330 I'm going to click on Next again. 00:05:13.360 --> 00:05:16.440 I'm going to accept all of this license agreements, and then 00:05:16.470 --> 00:05:18.250 I'm going to click on Finish. 00:05:18.280 --> 00:05:20.970 We're going to start downloading components. 00:05:21.000 --> 00:05:24.800 Again, depending on your speed of the internet and your computer, 00:05:24.830 --> 00:05:26.290 this might take a while. 00:05:26.320 --> 00:05:29.010 So please come back to the video once you're ready. 00:05:29.040 --> 00:05:29.520 Great. 00:05:29.520 --> 00:05:32.040 We have downloaded all of the components, so we can just click 00:05:32.070 --> 00:05:39.330 on Finish right here, and we're going to see the Android Studio Welcome page. 00:05:39.360 --> 00:05:41.920 We're going to have to do some more things right now. 00:05:41.950 --> 00:05:46.010 We're going to install the Android SDK as we see Here. 00:05:46.040 --> 00:05:49.680 For that, we're just going to go to More Actions, and then we're going to click on 00:05:49.710 --> 00:05:52.730 SDK Manager, which is this one. 00:05:52.760 --> 00:05:58.290 Then we're going to look for Android 14 upside down cake, which is right here. 00:05:58.320 --> 00:06:00.250 I'm going to click on this. 00:06:00.280 --> 00:06:03.120 We have some more instructions, but for that, we're going 00:06:03.150 --> 00:06:06.450 to have to show package details. 00:06:06.480 --> 00:06:09.530 Let's just click on this button here. 00:06:09.560 --> 00:06:12.370 Let's go to Android 14. 00:06:12.400 --> 00:06:19.210 We do need Android SDK platform 34, which is selected here. 00:06:19.240 --> 00:06:21.530 Then we're going to need one of these. 00:06:21.560 --> 00:06:24.200 Let's look for that. 00:06:25.200 --> 00:06:31.520 Now, if you have M1 chip, then you're going to have to I'm going to select the 00:06:31.550 --> 00:06:37.490 arm one right here, google api arm 64. 00:06:37.520 --> 00:06:43.040 Since I have the Intel chip, I'm going to select this one. 00:06:43.640 --> 00:06:49.520 One more thing we need All we're going to do is go to SDK Tools tab, which is here. 00:06:49.550 --> 00:06:54.628 We're also going to need to show package details here and make sure that 00:06:54.828 --> 00:06:56.080 34.0.0 is selected so 00:06:56.110 --> 00:06:57.690 let's select that. 00:06:57.720 --> 00:07:01.410 Now we can just click on Apply, and this is going install some more stuff. 00:07:01.440 --> 00:07:02.930 I'll just click on OK. 00:07:02.960 --> 00:07:07.170 You're going to have to wait for a bit more depending on your internet speed. 00:07:07.200 --> 00:07:10.250 Once this is done, just come back to the video. 00:07:10.280 --> 00:07:10.800 Great. 00:07:10.830 --> 00:07:14.640 So SDK Component Installer is done with its tasks, so we can just 00:07:14.640 --> 00:07:15.280 click We can just click on finish. 00:07:15.310 --> 00:07:20.290 We can click on apply after and then click on okay. 00:07:20.320 --> 00:07:24.880 Now we need to just configure the Android home variable for this. 00:07:24.880 --> 00:07:28.400 We're going to just have to copy this. Just click here and then open up 00:07:28.430 --> 00:07:33.360 your terminal and this says that we are going 00:07:33.390 --> 00:07:39.250 to need to update the zprofile, zshrc, bash_profile or bashrc. 00:07:39.280 --> 00:07:44.730 Honestly, I'm going to update all of them because I have seen students have issues 00:07:44.760 --> 00:07:46.720 if they didn't update all of them. 00:07:46.750 --> 00:07:49.530 Let's just update all of these files. 00:07:49.560 --> 00:07:52.187 For that, you would need 00:07:52.387 --> 00:07:55.690 sudo nano ~/.zprofile 00:07:55.720 --> 00:07:59.680 let's just enter the password to grant the administrator rights. 00:07:59.680 --> 00:08:01.680 Nice. Awesome. 00:08:01.710 --> 00:08:06.010 We can just paste what we have here and then click on Control X 00:08:06.040 --> 00:08:09.130 on your keyboard, then Y, and then Enter. 00:08:09.160 --> 00:08:13.440 If you want to check whether it was successful, you can just click on up 00:08:13.470 --> 00:08:17.290 arrow on your keyboard, click on Enter, and you're going to see it's here. 00:08:17.320 --> 00:08:21.090 To exit, you can just click on CTRL+X once more. 00:08:21.120 --> 00:08:22.890 Now we're going to update 00:08:22.920 --> 00:08:28.360 the bash profile file as well. 00:08:28.390 --> 00:08:30.610 We can just go here, Command+V, 00:08:30.640 --> 00:08:36.010 and then Control+X, Y, Enter. 00:08:36.040 --> 00:08:38.530 Now we're going to do the same 00:08:38.560 --> 00:08:44.770 for the zshrc file. 00:08:44.800 --> 00:08:49.880 Let's just paste this here, control X, Y, Enter, and we're going 00:08:49.910 --> 00:08:54.330 to do the same for the bashrc file. 00:08:54.360 --> 00:09:00.680 Command + V, control, X, Y, enter. Great. 00:09:00.710 --> 00:09:02.240 We updated all of these files. 00:09:02.270 --> 00:09:07.370 Now, if we want to check that everything went fine, we can just copy this. 00:09:07.400 --> 00:09:10.010 We can exit out of here. 00:09:10.040 --> 00:09:15.610 Restart this one more time, and we're going to see the value right here. 00:09:15.640 --> 00:09:16.050 Great. 00:09:16.080 --> 00:09:19.250 Now, we just need to prepare the Android device 00:09:19.280 --> 00:09:21.690 so that we can run our application. 00:09:21.720 --> 00:09:27.560 For that, let's open up the Android Studio, and we're going to go to More 00:09:27.590 --> 00:09:31.170 Actions, and then we're going to set up new virtual device. 00:09:31.200 --> 00:09:37.970 Right now, we do have one by default here, but it's dependent on API 35, 00:09:38.000 --> 00:09:42.930 and we want to be dependent on 34 according to the documentation here. 00:09:42.960 --> 00:09:47.090 Let's just click on the plus button. 00:09:47.120 --> 00:09:49.570 I'm going to choose Pixel 4a. 00:09:49.600 --> 00:09:53.400 That's my previous phone that I actually had, so I have 00:09:53.430 --> 00:09:55.730 sentimental attachments to it. 00:09:55.760 --> 00:10:01.330 Now, we see the upside down cake available here with the API 34, which is great. 00:10:01.360 --> 00:10:04.000 We're going to click on Next, and then we're going to click 00:10:04.030 --> 00:10:07.570 on Finish, and let's launch this. 00:10:07.600 --> 00:10:13.400 You can launch this anytime you would like to run your application 00:10:13.430 --> 00:10:14.810 on Android device. 00:10:14.840 --> 00:10:20.160 Again, the steps for that would be to open Android Studio, go to Virtual Device 00:10:20.190 --> 00:10:27.160 Manager, and click on play button right here, and your emulator would launch. 00:10:28.480 --> 00:10:29.840 Great. Let me move this here. 00:10:29.870 --> 00:10:35.850 And now what we want to do is make sure that we installed everything correctly. 00:10:35.880 --> 00:10:38.010 So for that, we're going to launch our terminal. 00:10:38.040 --> 00:10:43.730 In our last video, if you remember, what we did is we set up the awesome project. 00:10:43.760 --> 00:10:48.280 So you would need to navigate to that wherever your awesome project is. 00:10:48.310 --> 00:10:50.530 Mine is directly inside this folder. 00:10:50.560 --> 00:10:52.960 If you have it on desktop, you would have to go to desktop 00:10:52.990 --> 00:10:54.930 and then awesome project. 00:10:54.960 --> 00:11:00.200 But I'm just going to change the rektorial with cd, and I'm going to say that I 00:11:00.230 --> 00:11:06.640 want to go into awesome project, and then I'm going to click on Enter and I'm here. 00:11:06.670 --> 00:11:10.130 And then what I'm going to do is try to run this on Android. 00:11:10.160 --> 00:11:15.370 So to run this project on Android, what I'm going to have to do is 00:11:15.373 --> 00:11:15.397 npx react-native run-android 00:11:19.280 --> 00:11:23.730 it is recommended that the emulator is fully launched 00:11:23.760 --> 00:11:25.650 before you run this command. 00:11:25.680 --> 00:11:31.560 So let me just wait for that to happen and then I'm going to click on Enter. 00:11:35.080 --> 00:11:36.080 Great. 00:11:36.110 --> 00:11:40.480 Now that the emulator is launched, I'm going to click on Enter. 00:11:41.760 --> 00:11:44.770 The Metro Bundler has started up. 00:11:44.800 --> 00:11:46.930 I'm going to ignore this. 00:11:46.960 --> 00:11:50.130 We're installing Gradle 8. 6. 00:11:50.160 --> 00:11:53.920 Some people might have issues with this with the current React Native 00:11:53.950 --> 00:11:57.800 version, but by the time you're watching this video, this issue 00:11:57.830 --> 00:12:00.090 might have already been fixed. 00:12:00.120 --> 00:12:04.120 If we're going to run into no issues, that's great, and we're going 00:12:04.150 --> 00:12:07.490 to continue, and the application should show up in the emulator. 00:12:07.520 --> 00:12:11.040 But if that's not going to happen, we're just going to downgrade Gradle 00:12:11.070 --> 00:12:17.000 by one version, 0.1 version, and it's going to work for you. 00:12:17.010 --> 00:12:19.810 Let's just wait for this to complete and see how it goes. 00:12:19.840 --> 00:12:22.850 If we face any issues, we're going to correct them together. 00:12:22.880 --> 00:12:27.040 But by the time you might be watching this, react native might have already 00:12:27.070 --> 00:12:31.610 released a newer version that fixes this issue for everyone. 00:12:31.640 --> 00:12:35.210 Just come back to the video once this is done executing. 00:12:35.240 --> 00:12:37.170 Great. We did face no issues. 00:12:37.200 --> 00:12:40.440 Build was successful and it's getting built and we're going to 00:12:40.470 --> 00:12:44.250 see the react native application template appear here. 00:12:44.280 --> 00:12:48.570 If you did have an issue, it's most likely because of the gradal version 00:12:48.600 --> 00:12:53.930 and you would need to downgrade from 8.6 to 8.5. 00:12:53.960 --> 00:12:59.810 In order to do that, you're going to have to go to your project and find 00:12:59.840 --> 00:13:06.480 the gradle-wrapper.properties file, and you're going to find distribution URL variable there. 00:13:06.510 --> 00:13:11.210 Instead of Gradle 8.6, you would set 8.5. 00:13:11.240 --> 00:13:13.010 But I don't think you're going to run into that issue just 00:13:13.040 --> 00:13:18.930 because I have it fixed here already, so it was probably already fixed 00:13:18.960 --> 00:13:24.000 for iOS Android development environment. Great. 00:13:24.030 --> 00:13:27.690 Our installation has gone successfully both for iOS and Android. 00:13:27.720 --> 00:13:31.920 But I do want to say that if you encounter any issues other than what I mentioned 00:13:31.950 --> 00:13:36.250 or have any questions along the way, don't hesitate to ask in the Q&A section. 00:13:36.280 --> 00:13:39.970 I'm here to assist you and other students are here for you as well. 00:13:40.000 --> 00:13:42.330 So don't hesitate to share your problems. 00:13:42.360 --> 00:13:43.640 Thank you so much for watching. 00:13:43.640 --> 00:13:46.320 We're going to continue our React Native journey now and start 00:13:46.350 --> 00:13:49.330 creating amazing applications together. 00:13:49.360 --> 00:13:50.520 See you in the next video.