Hello, in this tutorial, you'll learn how to setup React Native on Windows for Android development.
React Native (Windows + Android)
Learn how to setup your environment for React-Native for Android on Windows.
What is React Native?
React Native is an open source framework for building Android and iOS applications using React and the app platform’s native capabilities. You use JavaScript to access your platform’s APIs as well as to describe the appearance and behavior of your UI using React components.
In Android development, you write views in Kotlin or Java. With React Native, you can invoke these views with JavaScript using React components. At runtime, React Native creates the corresponding Android views for those components.
React Native components are backed by the same views as Android so they look, feel, and perform like any other apps.
Setup
Step 4:
Launch Android Studio and open the SDK Manager.
The layout may be different than yours but you should be able to locate it.
Step 5:
In the SDK Platforms tab, select the Android API you want to work with along with the 2 latest version.
Step 6:
Step 7:
Select these below and click Apply to download and install them:
Android SDK Build-Tools <Latest Version Number>
NDK
Android Emulator
Android SDK Platform-Tools
Google-Play Licensing Library
Step 8:
Add the Environment variables needed.
Open the Environment variables wizard by searching "environment" in the search bar and you should see "Edit the system environment."
Then click on the "Environment Variables..." button.
Step 9:
In the "User variables for <username>" section, click on "New" and add a variable call JAVA_HOME.
For the value, use the location of where you installed the Java.
The default location should be in:
C:\Program Files\Java\jdk-17
Then click on the "Path" variable and click "Edit"
Copy the Android SDK path located in the SDK Manager.
Then add these inside the Path variable
Step 10:
Apply the changes and restart the computer.
Step 11:
Open the Command Prompt and run:
Make sure Java is 11 or greater, node is 18 or later, and npm is 9 or greater.
java -version
node -v
npm -version
Create the Project and run on Emulator
Now that you have the environment setup, you can create your first React Native application and launch it on the emulator.
Step 1:
Run this command
npx react-native@latest init myfirstreactnativeproject
Wait for he process the complete.
Step 2:
In the command prompt change to the project directory.
cd myfirstreactnativeproject
Step 3:
Start the app.
npx react-native run-android
You may get this error:
If you do, run this command and start the app again
npm i
Make sure you are on the same directory of your project when you run the command.
That is all for the quick start guide on React Native. Now you can start using what you learn with React and build applications using the same syntax!
