Popular Searches
Popular Course Categories
Popular Courses

Setting Up React Native CLI and Native Development Tools

Setting Up React Native CLI and Native Development Tools

React Native Installation and Environment Setup

Setting Up React Native CLI and Native Development Tools

Course: React Native Training

Topic: Setting Up React Native CLI and Native Development Tools

Course Link: React Native Training at JustAcademy

Demo Link: Register for a Free Course Demo

JustAcademy Website: Visit JustAcademy

Official React Native Setup Guide: Set Up Your Development Environment


1. Introduction to React Native CLI and Native Development Tools

React Native is an open-source framework that allows developers to build mobile applications for Android and iOS using JavaScript or TypeScript and React. It enables developers to create mobile interfaces using reusable components while accessing native platform capabilities.

Before building a React Native application with native development support, developers must configure their computer with the appropriate runtime, command-line tools, platform SDKs, build tools, emulator or simulator, and code editor.

React Native CLI workflows are useful when developers need direct access to Android and iOS project files, native configurations, custom native modules, and platform-specific build processes.

1.1 What Is React Native CLI?

React Native CLI refers to command-line tooling used to create, run, inspect, and build React Native projects. The current Community CLI can generate a project and run native development commands from a terminal.

For a new project without a framework, the official React Native documentation provides this command:

npx @react-native-community/cli@latest init MyFirstApp

The command uses npx to run the Community CLI without requiring a globally installed legacy React Native CLI package.

1.2 What Are Native Development Tools?

Native development tools are software packages required to compile, install, test, and debug applications for a particular operating system.

  • Node.js: Runs JavaScript-based development tools.
  • npm: Installs and manages JavaScript packages.
  • React Native Community CLI: Provides project creation and development commands.
  • Android Studio: Provides Android SDK management, emulators, and Android build tooling.
  • Java Development Kit: Supports Android builds that use Java and Gradle.
  • Xcode: Provides Apple's tools for building and testing iOS applications.
  • CocoaPods: Manages many native dependencies used by iOS projects.
  • Metro: Serves and transforms JavaScript and TypeScript code during development.

2. Learning Objectives

After completing this topic, learners should be able to:

  • Understand the React Native CLI development workflow.
  • Explain the difference between React Native CLI and Expo-based workflows.
  • Install and verify Node.js and npm.
  • Configure Android Studio and the Android SDK.
  • Set up the Java Development Kit and Android environment variables.
  • Create an Android Virtual Device or configure a physical Android device.
  • Understand Xcode, iOS Simulator, and CocoaPods requirements.
  • Create a React Native project using the Community CLI.
  • Start Metro and run an application on an emulator or connected device.
  • Identify and troubleshoot common environment setup errors.

3. Understanding the React Native Development Workflow

A typical React Native CLI development process starts with writing application code, running Metro, compiling the native project, installing the application on a device, and testing the result.

3.1 Basic Workflow

  1. Install the required development tools.
  2. Verify Node.js, npm, Java, and platform SDK installations.
  3. Create a React Native project.
  4. Open the project in a code editor.
  5. Start the Metro development server.
  6. Launch an Android emulator or connect a physical device.
  7. Compile and install the application.
  8. Test features and resolve errors.

3.2 How the Tools Work Together

Tool Purpose
Node.js Runs the JavaScript development toolchain.
npm Installs project dependencies and runs scripts.
Community CLI Creates projects and coordinates development commands.
Metro Bundles and serves JavaScript and TypeScript modules during development.
JDK Provides Java development tools used by Android builds.
Gradle Automates Android project compilation and packaging.
Android SDK Provides platform APIs, build tools, and device communication utilities.
Android Studio Manages Android tooling, SDKs, emulators, and native project files.
Xcode Builds, signs, launches, and debugs native iOS applications.
CocoaPods Installs and manages iOS native library dependencies.

4. React Native CLI vs Expo Workflow

React Native supports different development approaches. Expo is a React Native framework that simplifies many setup tasks, while a direct Community CLI workflow provides access to native project configuration from the beginning.

Feature React Native Community CLI Expo Framework
Initial setup Requires platform-specific native development tools for local native builds. Provides an integrated framework and developer tooling.
Native project access Android and iOS project directories are created as part of the workflow. Native projects may be generated when required by the chosen workflow.
Native customization Direct access to native configuration and source files. Supports native customization through its supported configuration and development-build workflows.
Build tools Uses Android tooling and, for iOS, Xcode and related tools. Can use local native tooling or supported cloud build services.
Best suited for Projects requiring direct native project control or specialized native integration. Projects that benefit from integrated development tools and framework conventions.

Important: Both approaches use React Native. The appropriate choice depends on the project requirements and how much direct native configuration is needed.

5. System Requirements and Preparation

Before installing the development environment, check that your computer meets the requirements of the operating system, Android Studio, Xcode, and the React Native version being used.

5.1 Supported Development Platforms

Operating System Android Development Native iOS Development
Windows Supported with Android development tools. Local native iOS builds require macOS and Xcode.
macOS Supported with Android development tools. Supported with Xcode and iOS Simulator.
Linux Supported with compatible Android development tools. Local native iOS builds require macOS and Xcode.

5.2 Preparation Checklist

  • Ensure you have sufficient disk space for SDKs, emulators, and build files.
  • Use a supported version of Node.js for the React Native version you are installing.
  • Check hardware virtualization support if you intend to use an Android emulator.
  • Keep your development tools compatible with the project's React Native version.
  • Use a reliable internet connection when downloading dependencies.
  • Choose a code editor such as Visual Studio Code.

6. Installing Node.js and npm

Node.js is a JavaScript runtime used by React Native development tools. npm, which is normally installed with Node.js, is used to install project dependencies and execute development scripts.

6.1 Installation Steps

  1. Visit the official Node.js website.
  2. Download an appropriate supported LTS release.
  3. Run the installer and follow the installation instructions.
  4. Open a new terminal or command prompt.
  5. Verify that Node.js and npm are available.

6.2 Verify Installation

node --version
npm --version
npx --version

Each command should display a version number. If a command is not recognized, check that Node.js was installed correctly and that its installation directory is included in the system PATH.

6.3 Understanding npm, npx, and package.json

  • npm: Installs dependencies and runs scripts defined in package.json.
  • npx: Executes a package command without requiring a permanent global installation.
  • package.json: Contains project metadata, dependencies, and scripts.
  • package-lock.json: Records the resolved npm dependency tree for more reproducible installs.

Example of running a project script:

npm start

7. Installing and Configuring the React Native Community CLI

The React Native Community CLI provides commands to initialize projects and run native development tasks. Modern React Native setup instructions use npx to invoke the CLI.

7.1 Create a New Project

npx @react-native-community/cli@latest init MyFirstApp

This command creates a project named MyFirstApp. The CLI downloads the required project template and dependencies. Follow the official instructions for the React Native version you intend to use.

7.2 Avoid the Legacy Global CLI

Older tutorials may recommend globally installing the legacy react-native-cli package. This is not the recommended way to initialize a new project with the current Community CLI.

npm uninstall -g react-native-cli @react-native-community/cli

Use the removal command only if you previously installed these packages globally and want to eliminate possible command conflicts. A project may still have its own local CLI dependencies.

7.3 Useful CLI Commands

Command Purpose
npx @react-native-community/cli@latest init MyFirstApp Creates a new React Native project.
npm start Starts the Metro development server using the project's script.
npm run android Runs the configured Android development script, when available.
npm run ios Runs the configured iOS development script, when available on a supported Mac setup.
npx react-native doctor Checks common development environment requirements when supported by the installed CLI.
npx react-native info Displays environment and toolchain information.

Available commands can vary by CLI and project version. Check the project's scripts and the official documentation if a command is unavailable.

8. Installing a Code Editor

A code editor is used to write, inspect, and maintain application source files. Visual Studio Code is a popular choice because it supports JavaScript, TypeScript, debugging extensions, and integrated terminals.

8.1 Recommended Editor Setup

  1. Download Visual Studio Code.
  2. Install it using the official installer.
  3. Open the React Native project folder.
  4. Use the integrated terminal to execute npm and CLI commands.
  5. Install only extensions that are useful for your project.

8.2 Common Editor Features

  • Syntax highlighting for JavaScript and TypeScript.
  • Automatic formatting and code navigation.
  • Integrated terminal access.
  • Git source control integration.
  • Error highlighting and debugging support.

Android Studio and Xcode remain important for native tooling even if you write most of your application code in a separate editor.

9. Installing the Java Development Kit (JDK)

The Java Development Kit provides tools needed by Android builds. React Native Android projects use Gradle and Android build tooling, so a compatible JDK is essential.

9.1 Recommended JDK Version

Use the JDK version recommended by the React Native and Android Gradle Plugin versions in your project. React Native setup instructions have commonly recommended JDK 17; always verify the requirements for your selected project version.

9.2 Install JDK on Windows

  1. Download a supported OpenJDK distribution, such as Eclipse Temurin.
  2. Run the installer and complete the setup.
  3. Configure JAVA_HOME if required by your installation.
  4. Ensure the JDK bin directory is available in PATH if necessary.
  5. Open a new terminal and verify the installation.

9.3 Install JDK on macOS

Install a compatible JDK using an official installer or an appropriate package manager. Verify that the selected JDK is the one used by your terminal and Android build tools.

9.4 Verify Java

java -version
javac -version

Both commands should display compatible version information. If they show different installations or versions, check JAVA_HOME and PATH.

10. Installing Android Studio

Android Studio is Google's integrated development environment for Android. React Native developers use it to install Android SDK packages, create virtual devices, inspect native project files, and diagnose build errors.

10.1 Download Android Studio

  1. Visit the official Android Studio website.
  2. Download the version appropriate for your operating system.
  3. Run the installer and follow the setup wizard.
  4. Allow the installer to download required SDK components.
  5. Open Android Studio after installation finishes.

10.2 Important Components

Component Purpose
Android SDK Provides libraries and tools for Android development.
Android SDK Platform Provides APIs for a selected Android platform version.
Android SDK Build-Tools Provides utilities used to build Android applications.
Android SDK Platform-Tools Includes utilities such as ADB.
Android Emulator Runs a virtual Android device on your computer.
Android Virtual Device Manager Creates and manages emulator configurations.
Android SDK Command-line Tools Provides command-line utilities for SDK management.

11. Installing the Android SDK and Build Tools

The Android SDK contains the platform APIs and utilities needed to compile, install, and test Android applications. The correct SDK packages depend on the React Native and Android Gradle Plugin versions used by your project.

11.1 Open SDK Manager

  1. Open Android Studio.
  2. Open SDK Manager from the welcome screen or the IDE settings.
  3. Review the installed SDK platforms.
  4. Install the Android platform version required by the official React Native setup guide for your project.
  5. Open the SDK Tools tab and check the required build tools, platform tools, emulator, and command-line tools.
  6. Apply the changes and wait for installation to finish.

11.2 Important SDK Packages

  • Android SDK Platform: Platform-specific APIs for compiling the application.
  • Android SDK Build-Tools: Tools required by Android build processes.
  • Android SDK Platform-Tools: Includes ADB for communicating with Android devices.
  • Android Emulator: Runs a simulated Android device.
  • Command-line Tools: Supports SDK package management and related tasks.

Do not assume that the newest SDK package is always the exact one required by every project. Follow the setup guide for the React Native version you are using.

12. Configuring Android Environment Variables

Environment variables allow development tools to locate installed SDKs and related utilities. React Native Android builds commonly use the ANDROID_HOME variable.

12.1 Finding the Android SDK Location

Open Android Studio's SDK Manager to find the actual SDK installation path. Common default locations include:

  • Windows: %LOCALAPPDATA%\Android\Sdk
  • macOS: $HOME/Library/Android/sdk
  • Linux: $HOME/Android/Sdk

These are typical defaults; use the path shown in your Android Studio settings if your installation differs.

12.2 Configure on Windows

  1. Search Windows for environment variables.
  2. Open the environment variable settings for your user account.
  3. Create or update ANDROID_HOME with the actual Android SDK path.
  4. Edit the user PATH variable.
  5. Add the SDK platform-tools directory.
  6. Optionally add the emulator directory if required by your workflow.
  7. Save the changes and open a new terminal.

Typical PATH entries are:

%LOCALAPPDATA%\Android\Sdk\platform-tools
%LOCALAPPDATA%\Android\Sdk\emulator

12.3 Configure on macOS or Linux

Add the appropriate lines to the configuration file used by your shell. For example, a Zsh configuration can contain:

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

For Linux, replace the SDK location with the actual Linux SDK path. Reload the appropriate shell configuration file, or open a new terminal.

12.4 Verify Environment Variables

On Windows Command Prompt:

echo %ANDROID_HOME%
adb --version

On PowerShell:

$env:ANDROID_HOME
adb --version

On macOS or Linux:

echo $ANDROID_HOME
adb --version

If the SDK path is empty or ADB is not recognized, verify the environment variable and PATH entries.

13. Understanding Android Debug Bridge (ADB)

Android Debug Bridge, commonly called ADB, is a command-line utility that allows a computer to communicate with Android emulators and physical Android devices.

13.1 Common ADB Commands

adb --version
adb devices
adb devices -l
adb install app-debug.apk
adb logcat
  • adb --version displays the installed ADB version.
  • adb devices lists connected devices and emulators.
  • adb devices -l displays additional device details.
  • adb install installs an APK file when the path is correct and the device is available.
  • adb logcat displays Android system and application logs.

13.2 Why ADB Is Important

  • It confirms whether a device is visible to the development environment.
  • It helps install and debug Android applications.
  • It assists with investigating runtime crashes.
  • It supports communication between development tools and connected devices.

14. Creating an Android Virtual Device (AVD)

An Android Virtual Device is a configurable emulator profile that represents a virtual Android phone or tablet. It allows developers to test applications without requiring a physical Android device.

14.1 Steps to Create an Emulator

  1. Open Android Studio.
  2. Open Device Manager.
  3. Select the option to create a virtual device.
  4. Choose a suitable phone or tablet hardware profile.
  5. Select a compatible Android system image.
  6. Download the image if required.
  7. Finish the configuration and launch the emulator.
  8. Wait until the Android home screen is fully loaded.

14.2 Benefits of Using an Emulator

  • Tests application layouts across device sizes.
  • Supports testing different Android API levels.
  • Allows repeated testing without a physical device.
  • Provides tools for inspecting application behavior.

14.3 Emulator Performance Tips

  • Enable hardware virtualization where supported.
  • Choose a system image compatible with your computer's architecture.
  • Close unnecessary applications if system resources are limited.
  • Keep the emulator and SDK components updated when compatible with your project.

15. Connecting a Physical Android Device

Developers can test a React Native application on a real Android phone. This is useful for checking real-world performance, device-specific behavior, camera access, sensors, and other hardware-dependent features.

15.1 Enable Developer Options

  1. Open the phone's Settings.
  2. Find the About phone section.
  3. Tap the Build number repeatedly until developer options are enabled. The exact steps vary by manufacturer.
  4. Return to Settings and open Developer options.
  5. Enable USB debugging when permitted.
  6. Connect the phone to the computer using a data-capable USB cable.
  7. Approve the debugging authorization prompt on the phone.

15.2 Verify the Device

adb devices

A connected and authorized device should appear in the output. If it shows as unauthorized, unlock the phone and approve the authorization prompt.

15.3 Troubleshooting Physical Device Connections

  • Use a USB cable that supports data transfer.
  • Try another USB port if the device is not detected.
  • Check the USB connection mode and debugging settings.
  • On Windows, install the appropriate device driver if needed.
  • Restart the ADB server if the device connection becomes stuck.
adb kill-server
adb start-server
adb devices

16. Understanding Gradle and Android Build Configuration

Gradle is a build automation system used by Android projects. It compiles source code, resolves dependencies, processes resources, and packages applications.

16.1 Important Android Project Files

File or Directory Purpose
android/ Contains the native Android project.
android/build.gradle or related Gradle files Defines shared build configuration, depending on the project template.
android/app/build.gradle Contains application module configuration.
android/gradle/wrapper/gradle-wrapper.properties Specifies the Gradle distribution used by the project.
android/gradlew Runs the Gradle wrapper on macOS and Linux.
android/gradlew.bat Runs the Gradle wrapper on Windows.
AndroidManifest.xml Declares application components and relevant Android configuration.

16.2 Why Version Compatibility Matters

The JDK, Gradle wrapper, Android Gradle Plugin, Android SDK, and React Native version must work together. Installing the newest version of each component independently can cause build errors.

When a build fails, inspect the error message and the project's existing configuration before changing version numbers.

17. Setting Up iOS Development with Xcode

Xcode is Apple's development environment for building, running, and debugging native iOS applications. A Mac is required for local native iOS builds using Xcode.

17.1 Install Xcode

  1. Use a supported Mac running a compatible version of macOS.
  2. Download Xcode from the official Apple Xcode page or the Mac App Store.
  3. Open Xcode and complete its initial setup.
  4. Install any additional platform components it requests.
  5. Open Xcode settings and select a suitable Command Line Tools version.

17.2 Install or Select an iOS Simulator

  1. Open Xcode.
  2. Navigate to its platform or simulator settings.
  3. Install a compatible iOS Simulator runtime if it is not already installed.
  4. Select a simulator device for testing.
  5. Launch the simulator before running the application if needed.

17.3 Verify Xcode Command-Line Tools

xcode-select -p
xcodebuild -version

These commands help verify the selected Xcode developer directory and installed Xcode version.

18. Installing CocoaPods for iOS Dependencies

CocoaPods is a dependency manager used by many native iOS projects. React Native iOS projects may use it to install native libraries required by JavaScript packages.

18.1 Install and Configure CocoaPods

Follow the official CocoaPods installation guide to choose an appropriate installation method for your Mac and Ruby environment.

18.2 Install Project Dependencies

After creating a React Native project, review its iOS instructions. A common workflow is:

cd MyFirstApp/ios
bundle install
bundle exec pod install

Use the Bundler workflow when the project provides a Gemfile. Otherwise, follow the installation commands documented for your project version. Return to the project root when finished.

18.3 Common CocoaPods Problems

  • Ruby version conflicts.
  • Missing native library specifications.
  • Outdated or incompatible pod dependencies.
  • Incorrect Xcode command-line tools selection.
  • Network errors while downloading dependencies.

19. Understanding Metro Bundler

Metro is the JavaScript bundler used by React Native. During development, it serves the application's JavaScript bundle and transforms source modules so the application can load them.

19.1 Start Metro

Open a terminal in the project root and run:

npm start

Keep the Metro terminal running while developing. Open a separate terminal for commands that build or launch the native application.

19.2 Why Metro Is Important

  • Serves JavaScript code to the development application.
  • Transforms modules and processes application imports.
  • Supports a rapid development feedback loop.
  • Displays bundling errors and useful development messages.

19.3 Restart Metro with a Clean Cache

If you encounter persistent bundling problems, stop the server and try starting it with a reset cache option supported by the project's script or CLI.

npx react-native start --reset-cache

20. Creating Your First React Native CLI Project

After configuring the environment, create a project to verify that the tools are installed correctly.

20.1 Generate the Project

npx @react-native-community/cli@latest init MyFirstApp

Wait for the project files and dependencies to be created. If the command fails, review the complete error output before repeating the installation.

20.2 Open the Project

cd MyFirstApp

Open the MyFirstApp folder in Visual Studio Code or your preferred editor. The project includes JavaScript or TypeScript source files and native Android and iOS project directories.

20.3 Typical Project Structure

MyFirstApp/
├── android/
├── ios/
├── node_modules/
├── App.tsx
├── package.json
├── package-lock.json
├── app.json
└── tsconfig.json

The exact files vary by template and React Native version. The node_modules directory contains installed packages and is generally not committed to version control.

21. Running the Application on Android

Ensure that Android Studio, the SDK, the JDK, and an emulator or physical device are configured before attempting the first native build.

21.1 Start Metro

In the project root, run:

npm start

21.2 Launch the Android App

Open another terminal in the project root and run:

npm run android

This command works when the generated project's package.json defines the Android script. It triggers the Android build and attempts to install and launch the app on an available device.

21.3 Verify the Result

  • Confirm the emulator or physical device is running.
  • Wait for Gradle to finish the initial build.
  • Check that the application opens on the device.
  • Review Metro and build logs if the application fails to load.
  • Make a small source-code change to verify that development updates work.

22. Running the Application on iOS

To build a React Native application for iOS locally, you need macOS, compatible Xcode tools, an iOS Simulator or device, and the required native dependencies.

22.1 Start Metro

npm start

22.2 Launch the iOS App

Open another terminal in the project root and run:

npm run ios

This assumes that the project defines an iOS script and the local iOS environment is configured. You can also use the React Native CLI's supported iOS run command as described in the official documentation.

22.3 Verify the iOS Setup

  • Confirm Xcode is installed and selected correctly.
  • Confirm a compatible iOS Simulator runtime is available.
  • Install the project's CocoaPods dependencies when required.
  • Check the Xcode build logs for compilation or signing issues.
  • Use a Mac for local native iOS builds.

23. Sample React Native Application Code

Once the project runs, update its main application component to display a simple welcome screen. The following example uses JSX-compatible React Native components.

import React from 'react';
import { SafeAreaView, Text, StyleSheet } from 'react-native';

function App() {
  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.title}>
        Welcome to React Native!
      </Text>
      <Text style={styles.description}>
        Your development environment is ready.
      </Text>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 12,
  },
  description: {
    fontSize: 16,
    textAlign: 'center',
  },
});

export default App;

23.1 Code Explanation

  • SafeAreaView: Provides a safe-area-aware container on supported platforms. For new projects, follow the current documentation about safe-area handling.
  • Text: Displays text content in the native interface.
  • StyleSheet: Organizes styles for React Native components.
  • flex: 1: Allows the container to fill available space.
  • justifyContent: Aligns children along the main axis.
  • alignItems: Aligns children along the cross axis.

Save the file and check the running application. If Metro is running and the application is connected to the development server, the changes should appear through the development refresh workflow.

24. Troubleshooting Common Setup Problems

Problem Possible Cause Solution
node is not recognized Node.js is missing or PATH is incorrect. Install Node.js and reopen the terminal.
npm is not recognized Node.js installation or PATH configuration is incomplete. Repair the installation and verify npm's path.
java is not recognized JDK is missing or Java is not on PATH. Install a compatible JDK and configure JAVA_HOME if needed.
ANDROID_HOME is empty The environment variable has not been configured correctly. Set it to the actual Android SDK directory and open a new terminal.
adb is not recognized Platform-tools is not on PATH. Add the Android SDK platform-tools directory to PATH.
No Android device found The emulator is stopped or the phone is not authorized. Launch the emulator or check USB debugging and run adb devices.
Gradle build fails JDK, Gradle, SDK, or plugin versions may be incompatible. Inspect the build error and follow the project's version requirements.
Metro cannot start Port conflicts, dependency problems, or cache issues. Close conflicting processes, inspect the error, and restart Metro if necessary.
iOS build fails Xcode selection, simulator, signing, or CocoaPods setup may be incorrect. Check Xcode configuration and reinstall project dependencies as documented.
Project creation fails Network issues, unsupported Node version, or CLI conflicts. Verify Node.js, review the CLI output, and retry using the official instructions.

25. A Systematic Troubleshooting Process

When a React Native setup command fails, follow a structured process instead of reinstalling every tool immediately.

  1. Read the complete error: Identify whether it originates from Node.js, the CLI, Metro, Gradle, Android SDK, Xcode, or CocoaPods.
  2. Verify tool versions: Run the appropriate version commands for Node.js, npm, Java, Android Studio tools, and Xcode where applicable.
  3. Check environment variables: Confirm SDK and Java paths point to the intended installations.
  4. Check the target device: Use adb devices for Android and confirm the selected iOS Simulator for iOS.
  5. Inspect project configuration: Review package.json, Gradle configuration, and native dependency files.
  6. Apply a targeted fix: Change only the configuration related to the actual error.
  7. Test again: Rerun the failed command and confirm the application launches.

26. Best Practices for React Native Environment Setup

  • Use the official React Native documentation for the selected project version.
  • Prefer supported Node.js and JDK versions rather than choosing versions at random.
  • Use the Community CLI through npx when following the direct CLI workflow.
  • Avoid installing obsolete global CLI packages unless a specific project requires them.
  • Keep Android SDK, Gradle, and Android Gradle Plugin versions compatible.
  • Use version control before making significant native configuration changes.
  • Do not commit credentials, signing keys, local SDK paths, or private configuration files.
  • Keep package dependencies consistent with the project's lockfile.
  • Use emulators for quick testing and physical devices for hardware-specific verification.
  • Read the build logs before clearing caches or reinstalling dependencies.
  • Document environment-specific steps so team members can reproduce the setup.
  • Build and test both Android and iOS if the project is intended to support both platforms.

27. Practical Exercise

Exercise: Set up a React Native CLI development environment and run your first application.

Tasks

  1. Install Node.js and verify Node.js, npm, and npx versions.
  2. Install a compatible JDK and verify Java.
  3. Install Android Studio and the SDK components required by the project.
  4. Configure ANDROID_HOME and platform-tools.
  5. Create and launch an Android Virtual Device.
  6. Create a project named SetupPractice using the React Native Community CLI.
  7. Open the project in your code editor.
  8. Start Metro and launch the Android application.
  9. Modify the main screen to show a welcome message.
  10. Record any errors and document how you resolved them.

Expected Outcome

At the end of this exercise, you should have a working React Native project running on an Android emulator or a connected Android device. Learners using macOS can additionally configure Xcode and run the project on an iOS Simulator.

28. Interview Questions and Answers

Q1. What is React Native CLI?

Answer: React Native CLI tooling helps developers create, run, inspect, and build React Native applications through terminal commands.

Q2. What is the purpose of Node.js in React Native?

Answer: Node.js runs JavaScript-based development tools, including the CLI and Metro development server.

Q3. What is npm?

Answer: npm is the Node.js package manager used to install dependencies and execute project scripts.

Q4. Why is a JDK required for Android development?

Answer: The JDK provides Java development tools needed by the Android build toolchain, including Gradle-based build processes.

Q5. What is Android Studio used for in React Native?

Answer: Android Studio manages SDK packages, emulators, native Android project configuration, and Android development tools.

Q6. What is Android SDK?

Answer: The Android SDK provides platform APIs and utilities required to build, install, and test Android applications.

Q7. What is ANDROID_HOME?

Answer: ANDROID_HOME is an environment variable commonly used to identify the location of the Android SDK.

Q8. What is ADB?

Answer: Android Debug Bridge is a command-line tool for communicating with Android devices and emulators.

Q9. What is an Android Virtual Device?

Answer: An AVD is an emulator configuration that represents a virtual Android device for development and testing.

Q10. What is Metro?

Answer: Metro is the JavaScript bundler that serves and transforms application modules during React Native development.

Q11. Why is Xcode required for native iOS builds?

Answer: Xcode provides Apple's compiler, build tools, simulator, and debugging environment for iOS applications.

Q12. What is CocoaPods?

Answer: CocoaPods manages native dependencies for many iOS projects.

Q13. How do you create a React Native CLI project?

Answer: Use npx @react-native-community/cli@latest init MyFirstApp after preparing the required environment.

Q14. How do you start Metro?

Answer: Run npm start in the project root when the generated project defines that script.

Q15. How do you check whether an Android device is connected?

Answer: Run adb devices and verify that the device is listed and authorized.

Q16. Can you build a native iOS app locally on Windows?

Answer: Local native iOS builds using Xcode require macOS. Windows developers can build Android applications locally and consider supported remote or cloud build workflows for iOS.

Q17. Why should tool versions be compatible?

Answer: React Native, the JDK, Gradle, Android Gradle Plugin, and SDK must work together. Incompatible versions can cause compilation and build errors.

29. Quick Revision Checklist

  • Node.js and npm installed and verified.
  • React Native Community CLI available through npx.
  • Compatible JDK installed.
  • Android Studio installed.
  • Required Android SDK platforms and build tools installed.
  • ANDROID_HOME configured correctly.
  • Android SDK platform-tools available in PATH.
  • Android emulator or physical device ready.
  • Metro starts successfully.
  • React Native project created successfully.
  • Android application builds and launches.
  • Xcode and CocoaPods configured if native iOS development is required.
  • Common environment errors understood and documented.

30. Official Learning Resources

31. Conclusion

Setting up React Native CLI and native development tools is an essential step toward building and maintaining mobile applications. A reliable environment includes Node.js, npm, the Community CLI, a compatible JDK, Android Studio, Android SDK packages, and a device or emulator. Developers targeting native iOS builds also need macOS, Xcode, and the project's required iOS dependencies.

After completing the setup, create a project, start Metro, launch the application, and verify that changes appear correctly. When errors occur, inspect the logs and confirm tool compatibility before changing the configuration. Following the official documentation for the project's React Native version helps maintain a stable and reproducible development environment.

For structured learning, visit JustAcademy's React Native Training course or register for a course demo.

whatsapp