A quick guide on react native installation.

Robin MahtoRobin Mahto
3 min read

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.

  1. 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.

  1. Android SDK

  2. Android SDK Plateform

  3. 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".

android studio 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 or Google 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.

  1. Open the Windows Control Panel.

  2. Click on User Accounts, then click User Accounts again

  3. Click on Change my environment variables

  4. 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

  1. Open the Windows Control Panel.

  2. Click on User Accounts, then click User Accounts again

  3. Click on Change my environment variables

  4. Select the Path variable.

  5. Click Edit.

  6. 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.

0
Subscribe to my newsletter

Read articles from Robin Mahto directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Robin Mahto
Robin Mahto