BHARATH M

Posted on Oct 16

Setting Up Your React Native Development Environment

#reactnative #javascript #react #beginners

Introduction

Embarking on mobile app development with React Native requires a properly configured development environment. This guide will walk you through setting up everything you need, including installing the React Native CLI, Android Studio, Xcode, and configuring your system. By the end of this tutorial, you'll be ready to start building your first React Native app.

Prerequisites

Before you begin, ensure you have the following:

A computer running macOS, Windows, or Linux.
Node.js and npm installed.
Basic familiarity with the command line.

Installing Node.js and npm

React Native relies on Node.js, a JavaScript runtime, and npm, the Node package manager.

Steps:

Download Node.js:

Visit the official Node.js website and download the LTS (Long Term Support) version suitable for your operating system.

Install Node.js:

Run the installer and follow the on-screen instructions.
This will also install npm.

Verify Installation:

Open your terminal or command prompt.
Run:

    node -v 
    npm -v

You should see version numbers displayed.

Installing the React Native CLI

The React Native CLI helps in creating and managing React Native projects.

Install via npm:

npm install -g react-native-cli

Note: Alternatively, you can use npx to run React Native commands without installing the CLI globally.

Setting Up Android Development Environment

To develop for Android, you’ll need to set up Java and Android-specific tools.

Installing Java Development Kit (JDK)

React Native requires JDK 8 or newer.

Download JDK:

Visit the Oracle JDK download page or use OpenJDK.

Install JDK:

Run the installer and follow the instructions.

Verify Installation:

Run:

java -version

Confirm the version number.

Installing Android Studio

Android Studio provides the necessary SDKs and emulators.

Download Android Studio:

Visit the Android Studio website and download the installer.

Install Android Studio:

Run the installer.
During the installation, select the option to install the Android SDK, Android SDK Platform-Tools, and Android Virtual Device.

Set Up SDK Platforms:

Open Android Studio.
Navigate to Configure > SDK Manager.
Under SDK Platforms, select Android 10.0 (Q) or the latest version.
Under SDK Tools, ensure the following are checked:

Android SDK Build-Tools
Android Emulator
Android SDK Platform-Tools
Intel x86 Emulator Accelerator (HAXM installer)

Configuring Environment Variables

Set environment variables so React Native can locate your Android SDK.

On macOS/Linux:

Edit Profile File:

Open terminal and run:

nano ~/.bash_profile

Or for Zsh shell:

nano ~/.zshrc

Add Variables:

    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

Save and Reload:

Press Ctrl + O to save, then Ctrl + X to exit.
Reload the profile:

    source ~/.bash_profile

    source ~/.zshrc

On Windows:

Access Environment Variables:

Right-click on This PC > Properties > Advanced System Settings > Environment Variables.

Add ANDROID_HOME:

Under User variables, click New.
Variable name: ANDROID_HOME
Variable value: C:\Users\YourUserName\AppData\Local\Android\Sdk

Edit Path Variable:

Select Path under System variables and click Edit.
Add the following paths:

    %ANDROID_HOME%\emulator 
    %ANDROID_HOME%\tools 
    %ANDROID_HOME%\tools\bin 
    %ANDROID_HOME%\platform-tool

Setting Up iOS Development Environment (macOS Only)

If you’re on a Mac and wish to develop for iOS, you’ll need Xcode.

Xcode is not avaible for Windows.

Installing Xcode

Download Xcode:

Open the App Store and search for Xcode.
Click Get and then Install.

Install Command Line Tools:

Open terminal and run:

    xcode-select --install

Follow the prompts.

Accept Xcode License:

Run:

    sudo xcodebuild -license accept

Open Xcode and Set Up Simulators:

Open Xcode.
Go to Preferences > Components.
Download the necessary simulators.

Node & Watchman

Installing Node and Watchman using Homebrew. Run the following commands in a Terminal after installing Homebrew:

    brew install node
    brew install watchman

Using react-native doctor to Verify Setup

React Native provides a built-in tool to check your development environment.

Running the Doctor

npx react-native doctor

This command checks for common issues and missing dependencies.

Reviewing the Results

Errors: Highlighted in red.
Warnings: Highlighted in yellow.
Successes: Highlighted in green.

Fixing Issues

Automatic Fixes:

The doctor may offer to fix some issues automatically.
Follow the prompts by typing the number corresponding to the fix.

Manual Fixes:

For issues that require manual intervention, the doctor provides guidance.
Follow the instructions to resolve the issues.

Re-running the Doctor

After applying fixes, run the doctor again to ensure all issues are resolved.

    npx react-native doctor

DEV Community