ReactNative-SetUp

Install the React Native CLI & set up a React Native development environment

September 08, 2021

To install the React Native CLI and set up a React Native development environment, follow these steps:

1. Install Node.js

React Native requires Node.js to be installed on your system.
You can download it from Node.js official website.

  • Recommended version: LTS version (which comes with npm)

Verify the installation by running:

node -v
npm -v


2. Install Watchman (macOS/Linux)

Watchman is a tool used to watch files for changes. It's recommended for better performance and necessary on macOS.

  • macOS: Install it using Homebrew:  brew install watchman

    Linux: You can install Watchman via your package manager or build it from source:- sudo apt install watchman For Windows, you can skip this step.

3. Install the React Native CLI globally

The React Native CLI is required to initiate and manage your React Native projects. To install it globally, use the following command:

npm install -g react-native-cli

4. Set up Android Studio (for Android Development)

If you want to build and run your React Native apps on Android, follow these steps:

  • Download and install Android Studio.
  • During installation, ensure that the following components are selected:
    • Android SDK
    • Android SDK Platform
    • Android Virtual Device (AVD)

After installation:

  • Open Android Studio.
  • Go to Preferences → Appearance & Behavior → System Settings → Android SDK.
  • Install the required SDK tools and system images (API level 31 or higher).

5. Configure Environment Variables for Android (macOS/Linux/Windows)

You need to add the ANDROID_HOME environment variable to your path.

macOS/Linux

Add the following lines to your ~/.bash_profile or ~/.zshrc (depending on your shell):

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

source ~/.bash_profile

Windows
  1. Open Control Panel → System and Security → System → Advanced system settings.
  2. Click Environment Variables, then under User variables or System variables, click New.
  3. Set ANDROID_HOME as the variable name and the Android SDK path (e.g., C:\Users\<Your-Username>\AppData\Local\Android\Sdk) as the variable value.
  4. Add the following paths to the PATH variable:
    • C:\Users\<Your-Username>\AppData\Local\Android\Sdk\platform-tools
    • C:\Users\<Your-Username>\AppData\Local\Android\Sdk\emulator

6. Create a New React Native Project

Once everything is set up, you can create a new project with:

npx react-native init MyNewProject

Run the App

  • For Android: Ensure that either an Android emulator is running or a physical device is connected.

    npx react-native run-android
  • For iOS: Ensure that Xcode is installed, and you have set up your environment. You can run the app using:

    npx react-native run-ios

Notes:

  • iOS development requires a macOS machine.
  • For Windows, Xcode is unavailable, so Android development is the only option unless you're using macOS.

Now your React Native environment should be set up, and you can start developing!