Elozino Ovedhe

Guide to setup React Native on a new Windows device

Elozino Ovedhe's photo
Elozino Ovedhe
·

4 min read

Table of Contents:

  1. Introduction

  2. Prerequisites

  3. Installing Node.js and npm

  4. Installing Git for Version Control

  5. Setting up Android Development Environment, Installing Android Studio, Configuring SDK, and Virtual Device, Setting up Environment Variables

  6. Conclusion

Introduction:

React Native is a popular framework for building cross-platform mobile applications using the JavaScript programming language. Setting up React Native on a new device is the first step to kickstart your mobile app development journey. In this guide, we will walk you through the step-by-step process of setting up React Native on a new Windows device.

Prerequisites:

Before diving into the setup process, make sure you have the following prerequisites installed on your system:

  • Operating System: Windows 10.

  • Node.js: Latest LTS (Long-Term Support) version

  • npm: Latest version

  • Git: Installed and configured (for version control)

Installing Node.js and npm:

  1. Visit the official Node.js website (nodejs.org) and download the latest LTS version for the Windows operating system.

  2. Run the Node.js installer and follow the installation instructions.

  3. After installation, open your terminal or command prompt and verify the Node.js and npm versions by running the following commands:

node --version
npm --version

// Alternative
npm -- version

Installing Git for version control:

  1. Visit https://git-scm.com/downloads and download for Windows.

  2. Run the installer and follow the instruction. (It is recommended you use the default unless you have technical know-how).

  3. After installation, open your terminal or command prompt and verify the git version running by following commands:

git --version

Setting up Android Development Environment, Installing Android Studio, Configuring SDK, and Virtual Device, Setting up Environment Variables:

  • Installing Android Studio

Step 1: Go to https://developer.android.com/studio and download android studio.

Step 2: Install Android Studio on your device.

  • Setting Development Environment

  1. Enter the command in your PowerShell terminal.
    NB: Run as administrator else you will get an error
choco install -y nodejs-lts microsoft-openjdk11
  1. To check choco version, run:
choco

  • Configuring SDK and Virtual Devices

  1. Open android studio, it will prompt some requirements for you to install. Click them and install

  2. Click on More Action then click on SDK manager

  3. In the SDK Manager, go to Languages & Frameworks -> Android SDK

  4. Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the preferred OS you want to target, then make sure the following items are checked:

For Android 13,

  • Android SDK Platform 33

  • Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image

  1. Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the Android SDK Build-Tools entry, then make sure that 33.0.0 is selected.

  2. Click "Apply" to download and install the Android SDK and related build tools.

  • Setting up Environment Variables

The React Native tools require some environment variables to be set up to build apps with native code.

  1. Open the Windows Control Panel.

  2. Click on User Accounts, then click User Accounts again

  3. Click on Change my Environment variables

  4. Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

The SDK is installed, by default, at the following location: %LOCALAPPDATA%\Android\Sdk

  • Add platform-tools to Path Open the Windows Control Panel.

    1. Open the Windows Control Panel.

      1. Click on User Accounts, then click User Accounts again

      2. Click on Change my Environment variables

      3. Select the Path variable.

      4. Click Edit.

      5. Click New and add the path to platform-tools to the list. The default location for this folder is: %LOCALAPPDATA%\Android\Sdk\platform-tools

Conclusion:

Setting up React Native on a new device may appear difficult at first, but following this complete guide will make the process simple and painless. You may now begin creating your next mobile application using React Native, taking advantage of its strength and adaptability, once it has been installed and setup. Happy coding!

PS: For more information on creating a React Native project, check out How to create react native project

React NativeExpoMobile Development