React Native environment configuration and construction

The React Native official website environment construction tutorial is not detailed enough, and there are some pitfalls, which make the construction environment very slow. This article is to solve these problems, and it is a standard document for novices.
First look at the description of the official website:

Important: The dependencies that must be installed are: Node, JDK and Android Studio .
After installing these three basics, it is enough, and then I will talk about the installation of these three in detail.

1. Install node

You can go directly to the node official website to download the corresponding node version, but I recommend using NVM, because NVM can easily switch versions, avoiding the troublesome problem of node downgrade after taking over the old project.
The installation of NVM is to use another article written by me to manage the node version of NVM

2. Install yarn

Yarn is a tool provided by Facebook to replace npm, which can speed up the download of node modules.
The first step has installed node, now you can open cmd to execute the following command;

npm install -g yarn

After installing yarn, you can use yarn instead of npm, for example, use yarn instead of npm install command, use yarn add a third-party library name instead of npm install a third-party library name.

Note: If the terminal of the vscode compiler enters the yarn command and reports an error "the yarn item cannot be recognized as...", the reason is that the integrated terminal in vscode uses powershell, so we need to set the execution authority of powershell.

Set the execution permission of powershell:
1. Search for powershell in the start search box, right click and run as administrator

2. Execute the set-ExecutionPolicy RemoteSigned command and enter the y option

3. Install the Java Development Kit

React Native requires Java Development Kit [JDK] 11. You can enter javac -version (please note that it is javac, not java) on the command line to view your currently installed JDK version. If the version does not meet the requirements, you can go to Temurin or Oracle JDK to download (the latter download requires registration and login).

1. Download the Java Development Kit.
What I want to introduce is the way of Oracle JDK.
Open the official website, as shown in the figure below, click to download the jdk-11.0.19_windows-x64_bin.exe file, because after installing the exe file, it will automatically configure the environment variables for you , without manual configuration.

2. Continue to download after agreeing to the agreement.
After clicking the first step, the following pop-up window will open:

3.
After logging in to Oracle and clicking the previous step, if you have not logged in, you need to log in. If you have not registered, you need to register first and then log in

After logging in, download the jdk-11.0.19_windows-x64_bin.exe file

4. Install jdk-11.0.19_windows-x64_bin.exe
It is very simple to install this, just go all the way to the next step, the default path is recommended for the installation path.

5. Check whether the installation is successful.
Open cmd and enter javac -version. If you can see the version number, it means the installation is successful.

4. Build an Android development environment

Building an Android development environment is very troublesome, and the official website does not explain it in detail. The building process is a bit tricky. This article will teach you how to build an Android development environment, and take you away from some detours.
1. Download Android Studio
Domestic users may not be able to open the official link, so they need to connect to the VPN first, and then enter the official link to download. Use a search engine to search for available download links on your own without a VPN.
Click to enter Android Studio

Download android-studio-2022.2.1.19-windows.exe, double-click to open the installation

2. Install Android Studio
As a senior installation engineer, I will tell you the installation skills, all the way to Next, and finally Install.

3. Configure Android Studio
The previous picture has been checked to open Android Studio
(1) Selection method
After opening, a pop-up window will pop up as follows, and the second option is selected by default.

(2) Do you want to configure a proxy?
If the following pop-up window appears in the next step, you want to configure a proxy. When we are not familiar with Android Studio or do not use it often, this configuration is ignored. Click Cancel to close the pop-up window

(3) Enter the initial configuration page, click Next, as follows:

(4) Select custom installation, as follows:

(5) The default path is fine, continue to Next

(6) Select the theme background color,
it doesn't matter which one you choose, it depends on your personal preference

(7) Check the content to be downloaded

Note: It is not necessary to download this emulator, you can use a third-party emulator (for example: Ye Shen emulator), I will not introduce the usage of using a third-party emulator, this article only introduces the Android Virtual Device emulator officially provided by Android , I think it is very useful.

Directly skip to step (16) of the Android Virtual Device emulator provided by Android

Here comes the important point. The total package that needs to be downloaded is 1.97G. This Android Virtual Device package occupies 1.44G. The next step will download very slowly. Sometimes the download progress does not move at all, but it does not matter. I will talk about the solution later. Go ahead first.
Check all of them like the picture below, including Android Virtual Device, and the Android SDK Location path is also the default (to prevent subsequent failures), click Next to go to the next step:

(8) This step is to detect that you can set the system acceleration, and 2GB has been recommended for you, continue to click Next to go to the next step:

(9) Confirm the installation, click Next

(10) Details to be downloaded
Display the package to be installed, continue to Next

(11) Agree to the Agreement
Click on the three items on the left, check Accept on the right to agree to the agreement, and then click Finish:

(12) The next step is to install each package
Click Show Details to view the specific content to be downloaded

(13) Get the link of the simulator package
. The key point is to copy the link to download the simulator package:
https://dl.google.com/android/repository/sys-img/google_apis/x86_64-33_r10.zip
later The download path may change, it is best to copy it by yourself, it is correct to see the zip package with x86_64

(14) Download the emulator package: x86_64-33_r10.zip,
put the copy link in the address bar of the browser, press Enter to download, it will be downloaded at full speed directly, and it
will be downloaded in ten minutes without hanging the proxy, you can let it download first, Take the next steps first.

(15) Close the download, close the Android Studio
emulator is too big, so the download is too slow, I don't know when it will be downloaded successfully, this step is actually to get the download link of the emulator package, the previous step is already in Download the emulator package now.
First click Cancel to close the download, then click Finish, then click X in the upper right corner to close Android Studio:

(16) Re-open Android Studio
Re-open Android Studio, it will return to the initial step, and continue to follow the previous steps.
Key point: When you get to the next step, uncheck the Android Virtual Device, you can see that the Total download size is only 224M (so the download package will be very fast later), then continue to Next, and the subsequent steps are the same as above.

(17) The download will be completed soon:

Note: When the download is complete, the program may automatically configure system environment variables for you. If you have installed security software such as 360, you will be prompted to detect that a program is trying to modify the system settings. At this time, you must allow it, otherwise the follow-up may You have to configure the environment variables yourself, how to configure it is up to Baidu.

Click Finish to complete:

(18) Open the project
Open the react native project, if there is no project, go to a new project first:

(19) Open SDK Manager
After opening the project, it will be displayed as shown in the figure below,
click the icon (SDK Manager) pointed by the arrow in the figure below:

Copy the Sdk path below

Paste it into the folder directory and press Enter to open the Sdk directory:

(20) Unzip the emulator
Find the x86_64 folder under the Sdk directory, unzip the emulator compressed package downloaded in step (14) (this package is just the x86_64 folder after decompression) to this directory and replace this folder, as follows:

(21) Configure the SDK
Close Android Studio, open the SDK Manager again,
select the "SDK Platforms" tab in the SDK Manager, and then check "Show Package Details" in the lower right corner. Expand the Android 13 (Tiramisu) option, make sure to check Android SDK Platform 33 and Google APIs Intel x86 Atom System Image (this is the emulator package decompressed in the previous step, the horizontal bar in front indicates that it has been configured, no need to check to download) ,as follows:

Then click the "SDK Tools" tab, and also check "Show Package Details" in the lower right corner. Expand the "Android SDK Build-Tools" option and make sure that the 33.0.0 version required by React Native is selected. You can have multiple other versions installed at the same time.

Then click "Apply" to download and install these components, pop-up confirmation, click ok

Finally click Finish, then close the SDK Manager

(22) Create a simulator
Click the Create device button

Create an emulator model of your favorite resolution

If you see the image below, it means the creation is successful.

(23) Configure the ANDROID_HOME environment variable

React Native needs to know the path where your Android SDK is installed through environment variables, so as to compile normally.

Open Control Panel -> System and Security -> System -> Advanced System Settings -> Advanced -> Environment Variables -> New, create an environment variable named ANDROID_HOME (either system or user variables), pointing to where your Android SDK is located directory, the specific path may be inconsistent with the figure below, please confirm by yourself, refer to step (19) to open the SDK Manager, and copy the SDK path :

(24) Add some tool directories to the environment variable Path
Open Control Panel -> System and Security -> System -> Advanced System Settings -> Advanced -> Environment Variables, select the Path variable, and click Edit. Click New and add these tool directory paths: platform-tools, emulator, tools, tools/bin

%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin

As shown in the picture:

You will need to close and reopen the existing Command Prompt window for the new environment variables to take effect.

Finish.

(35) Start the react natvie project and test
vscode to open the project, such as my project: enter yarn android in the terminal, and the emulator created above will automatically open by default.