Setting Up React Native on Windows: A Comprehensive Guide

Aditya BholeAditya Bhole
4 min read

Developing mobile apps with React Native on a Windows machine can be a little tricky, especially for first-time users. However, once set up correctly, it works seamlessly. In this guide, we’ll walk through the essential steps to install React Native on your Windows system, along with the important Android SDK configurations.


Step 1: Install Node.js

First, you’ll need to install Node.js, as React Native relies on Node.js for building the JavaScript part of your app.

Once installed, verify the installation by running the following command in your terminal:

bashCopy codenode -v

Step 2: Install Android Studio

React Native requires Android Studio for Android development. Follow these steps to install it:

  1. Download and install Android Studio.

  2. During installation, ensure the boxes for Android SDK, Android SDK Platform, and Android Virtual Device are checked.

  3. Open Android Studio and go to SDK Manager to ensure the following are installed:

    • SDK Build Tools

    • SDK Platform Tools

    • Android Emulator

    • Google Play License

You can access this by going to Configure > SDK Manager in Android Studio. Under SDK Tools, make sure that:

  • Android SDK Build-Tools

  • Android SDK Command-Line Tools

  • Android Emulator

are installed.


Step 3: Set Up Android SDK Path

This step is crucial for enabling React Native to communicate with the Android SDK. You’ll need to set environment variables for your Android SDK location.

  1. Navigate to the SDK location by following this path on your Windows system:
makefileCopy codeC:\Users\<YourUsername>\AppData\Local\Android\Sdk

If you don’t see the AppData folder, it might be hidden. You can access it by manually typing the path or enabling the option to show hidden folders in Windows.

  1. Set the environment variables:

    • Android SDK: Point this to your SDK path.

    • Platform Tools: Point this to the platform tools inside the SDK directory.

Steps to set environment variables:

  • Open the Start menu and search for "Environment Variables."

  • Click Edit the system environment variables.

  • In the System Properties window, click Environment Variables.

  • Add a new user variable for ANDROID_HOME and point it to your SDK path.

  1. The paths you need to set include:

    • ANDROID_HOME: The Android SDK location.

    • SDK\platform-tools: For device and emulator management.

    • SDK\tools: Essential for Android build processes.


Step 4: Create a New React Native Project

With Node.js and the Android SDK in place, you’re now ready to start a React Native project.

  1. Open a command prompt and navigate to your preferred project folder.

  2. Run the following command to initialize a new React Native project:

bashCopy codenpx react-native init MyNewApp

This will create a new folder with your project structure.


Step 5: Running Your First App on an Emulator

Now, you can either use an Android emulator or a physical device to run your app.

  1. To use an emulator:

    • Open Android Studio and launch the Virtual Device Manager.

    • Select or create an emulator device and start it.

  2. To run the React Native app, go to your project directory in the terminal and run:

bashCopy codenpx react-native run-android

This will build and launch your app on the emulator. The first build might take time, but subsequent builds will be faster.


Step 6: Common Issues and Fixes

Here are a few common problems users face during installation and how to fix them:

  • SDK Location Not Found: Double-check the SDK path is set correctly in the environment variables.

  • App Build Failing: Sometimes, rebuilding the project using the following command can resolve issues:

      bashCopy codenpm install
    
  • License Not Accepted: Make sure you’ve accepted all the SDK licenses during installation or manually run:

      bashCopy codesdkmanager --licenses
    

Step 7: Conclusion

Once everything is properly set up, React Native development becomes a smooth process on Windows. Make sure you have the proper SDK paths configured and the Android emulator or physical device ready to go. After that, you’ll be able to build and test your apps without any hassles.

If you encounter any issues or need help, feel free to reach out to the developer community for quick solutions.

Happy Coding!

0
Subscribe to my newsletter

Read articles from Aditya Bhole directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Aditya Bhole
Aditya Bhole