How to Setup React-Native development environment

Building apps for different platforms now become easier with Frameworks like React Native, Flutter.

Let’s see how we can set up the development environment for react-native in both windows and mac operating systems.

Windows

install chocolatey. It’s is a Command-line package manager and installer for Windows software, Then using chocolatey we can install node js and OpenJDK.

Open the Powershell window with administrative access. Then enter the command copied from the official website to install chocolatey and wait for a few seconds to complete the installation

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

Open the command prompt with administrative access and install node js and OpenJDK. The installation command is

choco  install nodejs.install openjdk8

Download and install android studio from the official website https://developer.android.com/studio

Goto AVD manager, Tap on “create virtual device” then choose a device, press “Next”, select a system image, Next and finish. We can start the virtual device with the play button. It will open the virtual device in our machine, we can simulate pretty much all the features available in a physical device. If you prefer a physical device then you can connect your device with a USB cable and enable developer options from advanced settings in your device.

Open environment variables from the menu and update the environment variables for java, android SDK, and platform-tools

All the configuration and installation steps completed

Now we can create a new app with a command prompt, Open the command prompt cd into the desktop, and the Command to create a new react native app is

npx react-native init nameoftheapp

we can run the app in this simulator or a connected physical device using a command

Goto the project directory, and run

npx react-native run-android

Mac Os

Open a terminal window from Launchpad. We need 2 packages nodejs and watchman. Like we used chocolatey in windows here we can use homebrew.

brew install node
brew install watchman

Download Xcode from AppStore or from the apple developer downloads

Once the file is downloaded we can extract and open Xcode

from Xcode => preferences search for locations tab, select it and check for command-line tools, Choose the latest command-line tool available in the dropdown and save it.

Goto components tab, here you can see a list of simulators. Select a simulator and press “check and install now”.

We are ready to create a project, open a terminal window from Launchpad and cd into the desktop, then enter the command to create a new app

npx react-native init nameoftheapp

Then cd into the project, and enter the command to run the app.

npx react-native run-ios