React Native - Environment Setup

React Native - Environment Setup

Setting up your development environment is the first step to building React Native apps. The setup process depends on your development OS (Windows, macOS, or Linux) and your target mobile OS (iOS or Android).

React Native offers two main ways to get started:

• Expo Go: The easiest way to start. You write your app in JavaScript/TypeScript and use the Expo Go app on your phone to see changes instantly. Good for many use cases, but might have limitations if you need custom native code not supported by Expo’s prebuilt SDK.
• React Native CLI (Bare Workflow): Provides more flexibility and control. You’ll need to install and configure native build tools like Android Studio and Xcode. This tutorial focuses on the React Native CLI setup.

Core Dependencies (React Native CLI)

1. Node.js: Install the LTS (Long Term Support) version of Node.js. Node.js comes with npm (Node Package Manager). You can download it from nodejs.org. We recommend using a version manager like nvm.
2. Watchman (macOS/Linux): A file watching service. Recommended for better performance. Install via Homebrew on macOS: brew install watchman.
3. Java Development Kit (JDK): Required for Android development. Install a recent version (e.g., OpenJDK 11 or later). You can install it via package managers like Chocolatey (Windows), Homebrew (macOS), or directly.
4. Android Studio: Required for Android development. It includes the Android SDK, emulator, and command-line tools. Download from developer.android.com/studio.

Step 1: Install React Native CLI

The React Native CLI is now typically invoked using npx, which uses the version of the CLI bundled with your project. You don’t usually need to install react-native-cli globally anymore, though some older guides might mention it.

Step 2: Create a New Project

Open your terminal or command prompt, navigate to the directory where you want to create your project, and run:

npx react-native init YourProjectName

Replace YourProjectName with your desired project name. This command will create a new directory with your project name, containing all the necessary files and dependencies.

Step 3: Configure Android Development Environment

1. Install Android Studio: Follow the installation instructions for your OS.
2. Install Android SDK: Open Android Studio, go to the SDK Manager (Configure > SDK Manager or Tools > SDK Manager). Make sure you have an SDK Platform installed (e.g., Android 12.0 - API Level 31 or newer).
3. Install Android SDK Build-Tools: In the SDK Manager, under the ‘SDK Tools’ tab, ensure you have a recent version of ‘Android SDK Build-Tools’ installed.
4. Configure Environment Variables: Set up ANDROID_HOME (or ANDROID_SDK_ROOT) environment variable to point to your Android SDK location (e.g., ~/Library/Android/sdk on macOS, C:\Users\YourUser\AppData\Local\Android\Sdk on Windows). Add platform-tools to your PATH (e.g., ANDROID_HOME/platform-tools).
5. Configure an Android Virtual Device (AVD): In Android Studio, open the AVD Manager (Configure > AVD Manager or Tools > AVD Manager). Click ‘Create Virtual Device…’, choose a device definition, select a system image (download if necessary), and finish setup. Start your AVD.

Step 4: Configure iOS Development Environment (macOS Only)

1. Install Xcode: Download and install Xcode from the Mac App Store. Xcode includes the iOS SDK, simulator, and required build tools.
2. Install Xcode Command Line Tools: Open Xcode, go to Preferences > Locations, and select the latest version from the Command Line Tools dropdown.
3. Install CocoaPods: CocoaPods is a dependency manager for Swift and Objective-C Cocoa projects. Install it using RubyGems: sudo gem install cocoapods.
4. Install Pods: Navigate to the ios directory within your React Native project and run pod install.

Step 5: Running Your Application

To run your app on Android (ensure an emulator is running or a device is connected):

cd YourProjectName
npx react-native run-android

To run your app on iOS (macOS only, ensure an iOS simulator is running or a device is connected):

cd YourProjectName
npx react-native run-ios

If everything is set up correctly, your app should launch on the selected device/emulator, and the Metro bundler (JavaScript bundler) will start in a new terminal window. Changes you make to your JavaScript code will be applied instantly using Fast Refresh.

For detailed, platform-specific instructions and troubleshooting, always refer to the official React Native Environment Setup guide.