A quick guide on react native installation.


This page will help you go through all the steps to install react native on your system.
There are two ways to install react native.
- React Native CLI (command line interface)
Development OS: Windows
Target OS: Android
Installing dependencies
Node.js, JDK, Android Studio
you can install node.js via chocolatey, which is a package manager for windows.
it is recommended to use an LTS version of node.js, if you want to switch different version of node.js, you might need to install a node via nvm-windows, which is a node version manager for windows.
you need to also require the java SE development kit(JDK), which can be installed via chocolatey as well.
open a command line prompt (right-click on the command prompt and select "run as administrator") then copy and run the following command below.
choco install -y nodejs-lts microsoft-openjdk11
1) Install Android Studio
Download and install Android Studio. while installing the android studio wizard, make sure the box below items is checked.
Android SDK
Android SDK Plateform
Android Virtual Deveice
Then "click" and install all the above components. once the setup has been finalized and you are presented with the welcome screen, proceed to the next step to install android SDK.
2. Install Android SDK
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 12 (S)
SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
To do that, open Android Studio, click on the "More Actions" button and select "SDK Manager".
Then select the "SDK Platform" tab from within the Android SDK, then check the box to the next "Show Package Details" in the bottom right corner. and make sure inside Android 12.0 (S)
below items are checked inside the "SDK Platform" tab.
Android SDK Platform 31
Intel x86 Atom_64 System Image
orGoogle APIs Intel x86 Atom System Image
Then "click" on the OK button to proceed next SDK Tools Tabs.
next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. then make sure that 31.0.0
is selected.
Finally, click "Apply" to download and install the Android SDK and related build tools.
3. Configure the ANDROID_HOME environment variable
The React Native tools require some environment variables to be set up to build apps with native code.
Open the Windows Control Panel.
Click on User Accounts, then click User Accounts again
Click on Change my environment variables
Click on New... to create a new
ANDROID_HOME
user variable that points to the path to your Android SDK:
Type "Run" in windows search, open and paste the cmd below and Go to SDK is installed, by default, at the following location:
%LOCALAPPDATA%\Android\Sdk
4. Add platform-tools to Path
Open the Windows Control Panel.
Click on User Accounts, then click User Accounts again
Click on Change my environment variables
Select the Path variable.
Click Edit.
Click New and add the path to platform-tools to the list.
The default location for this folder is:
%LOCALAPPDATA%\Android\Sdk\platform-tools
2) Expo Go
Run the following command to create a new React Native project called "AwesomeProject":
npx create-expo-app AwesomeProject cd AwesomeProject npx expo start
This will start a development server for you.
Running your React Native application
Install the Expo Go app on your iOS or Android phone and connect to the same wireless network as your computer. On Android, use the Expo Go app to scan the QR code from your terminal to open your project. On iOS, use the built-in QR code scanner of the default iOS Camera app.
That's it!
Congratulations! You've successfully run your first React Native app.
Subscribe to my newsletter
Read articles from Robin Mahto directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
