There are various ways to set up and install a React Native environment, depending on the operating system you want to use. You will need to follow different instructions depending on the development and operating system.

How to Install React Native on MacOS

Pre-Requirements

Before you can start setting up your react native environment, the following are some of the development tools that must be installed:

• Xcode
• Visual Studio Code
• GitSCM

iOS Platform

We will be configuring the environment for React Native application development for the iOS platform.

Installing Node

At this stage, it is advisable that you install Node and Watchman with the Homebrew. You can run the commands below in a Terminal after you have installed Homebrew:

brew install node

brew install watchman

Xcode & CocoaPods

Then we can now install XCode on the App Store, go to Preference>Location, and select Command Line Tools.

Cocoapods

CocoaPods is a Ruby-based dependency manager for Swift and Objective-C created for macOS. Ruby is installed by default on macOS. So we need to install CocoadPods by entering the following commands:

sudo gem install cocoapods

At this point, we have completed the development configuration of the React Native applications for the iOS platform.

Now you can run your first React Native application on the Mac operating system.

You can start by launching the VSCode and integrating a terminal in it. Then, we will run the commands below in the terminal to download and configure the react native project:

npx react-native init RNEdpresso

Now, this project can be opened using the VScode.

To be able to run the app in the iOS emulator, we need to input the commands below in the terminal:

react-native run-ios

This will prompt some setups and settings to run the application.

We will have to wait patiently for the first run as it may take some time to create the application.

After the build is complete, we can now execute the React Native starter model.

How to Install React Native on Windows 10

After understanding the required process to install React Native on macOS, then let's start the process of installing on Windows 10 with React Native CLI.

Install Chocolatey

Chocolatey is a well-known Windows package manager. So, we need to install it on our system first.

You can install Chocolatey by opening a command prompt using administrator privileges and then running the following commands.

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

Install Node, Python2, and JDK8

Next, we can install Nodejs, Python2, and JDK with the Chocolaty. You can do this by using the following commands.

Choco install -y nodejs.install python2 jdk8

Install Android Studio

To work with React Native development, you need to install an Android studio. We can download and install it from the following URL.

https://developer.android.com/studio

Set up Android SDK

By default, Android Studio installs the latest Android SDK. However, building a React Native app with native code specifically requires Android 11.0 (R) SDK. Additional Android SDKs can be installed using the SDK Manager in Android Studio.

You can access the SDK Manager from the Android Studio welcome screen.

Select Configure and click on SDK Manager.

SDK Manager -> SDK Platforms

You can now check the box nearer to "Show package details" in the lower right corner. Find and expand the Android 11.0 (R) entry and ensure all of the following are selected:

• Android SDK Platform 26
• Google APIs Intel x86 Atom_64 System Image

React Native Tools requires that you set up certain environment variables to create native code applications.

Open the System panel below System and Security in the Windows Control Panel and select Change Settings. Then open the Advanced tab and select Environment Variables. Select “New” to create a new ANDROID_HOME user variable that points to your Android SDK path:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk

Install React Native CLI

With the NPM, it is relatively easier to install the React Native CLI. Therefore, perform the installation using the following command on the Command Prompt/Powershell on the system.

npm install -g react-native-cli

Creating a New Application

You can now create a new React Native project with the react-native CLI.

react-native init UpstackProject

Here UpstackProject is the project name I have chosen.

Running the Application

Now the project created on our Android phone can be launched. To do this, it is required that we first configure our mobile device.

Another alternative to run your application is using the AVD (Android Virtual Device), and we can create that on the Android Studio; however, we will not be focusing on that in this article.

Set up Android Device

First, there is a need to enable USB debugging on our Android device to be able to launch the React Native application we created.

• On your Android device, navigate to Settings-> About
• You will see a menu for a Build Version
• Continue to click the Build Version option until the developer options are enabled.
• Now go back to Settings and click the Developer Options menu.
• In Developer Options, permit the USB debugging option.

Connect your mobile device to the Windows system with the USB cable. Enter the following command to verify the connection of your mobile device.

ADB devices

Now, run the following command to launch the react native app on your mobile device.

react-native run-android

Upstack is the best platform to match companies with top 1% tech talent worldwide.