React Native – Installation and Setup

To get started with React Native development, you need to install several tools and set up the development environment on your system. Below is a step-by-step guide for installing and setting up React Native on both Windows and macOS.

Prerequisites:

1. Node.js: React Native requires Node.js for managing dependencies. You can download the latest version of Node.js from nodejs.org.
2. npm or Yarn: npm (Node Package Manager) comes with Node.js. Alternatively, you can use Yarn, which is a package manager that works well with React Native.
3. Java Development Kit (JDK):
   • Install JDK 11 or higher to build Android apps. You can download it from AdoptOpenJDK.
4. Android Studio (for Android):
   • For Android development, you need to install Android Studio. It includes the Android SDK, emulator, and other necessary tools for Android development.
5. Xcode (for iOS) (macOS only):
   • If you want to develop for iOS, you’ll need Xcode. It can be downloaded from the Mac App Store.

Steps for Installing React Native on Windows or macOS:

1. Install React Native CLI:

You can install React Native using either npm or Yarn.

npm install -g react-native-cli

Alternatively, if you prefer Yarn, use:

yarn global add react-native-cli

2. Create a New React Native Project:

Once the CLI is installed, you can create a new React Native project by running:

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

This will create a new directory called MyNewProject with the basic project structure.

3. Install Android Studio (For Android):

• Download Android Studio from here.
• During the installation, make sure to install the Android SDK and Android Virtual Device (AVD) for the Android Emulator.

4. Setting Up the Android Emulator:

Once Android Studio is installed:

• Open Android Studio.
• Go to Tools > AVD Manager.
• Create a new Android Virtual Device (AVD) for testing the app.

5. Setting Up Xcode (For iOS) [macOS Only]:

For iOS development, install Xcode from the Mac App Store. Then, set up the Xcode Command Line Tools:

code-select --install

6. Run the React Native Application:

After setting up the development environment, navigate to your project directory and run:

• For Android:

npx react-native run-android

• For iOS (macOS only):

npx react-native run-ios

This will compile and launch your React Native app on the Android Emulator or iOS Simulator.

Before running the above command you must set environment path for Gradle and Android

C:\gradle-8.10.2\bin

and valid SDK location with an ANDROID_HOME environment variable

export ANDROID_HOME=/Users/<YourUsername>/Library/Android/sdk

Conclusion:

Once you follow these steps, you’ll have React Native set up and ready for development. You can now build your mobile apps for both Android and iOS using a single codebase.