Installing a Windows development environment

You will need Node, a JDK, the React Native command-line interface and Android Studio. While you can use any editor of your choice to develop your app, you will need to install Android Studio to set up the necessary tooling to build your React Native app for Android.

Node

NAGRA recommends installing Node via the Chocolatey package manager for Windows. You should close and open a new command line after each installation.

If you have already installed Node on your system, make sure it is Node 12 or newer. To switch between different Node versions, install Node via the Node version manager for Windows nvm-windows. You can find additional installation options on the Node Downloads page.

JDK

React Native requires Java SE Development Kit (JDK), which can also be installed using Chocolatey. If you already have a JDK on your system, make sure it is version 8 or newer.

Open an Administrator Command Prompt (right-click Command Prompt and select Run as Administrator) and run choco install -y nodejs.install openjdk8.

If you are using the latest version of the Java Development Kit, you will need to change the Gradle version of your project so it can recognise the JDK. You can do that by going to {project root folder}\android\gradle\wrapper\gradle-wrapper.properties and changing the distributionUrl value to upgrade the Gradle version. See the latest releases of Gradle.

React Native command-line interface

React Native has a built-in command-line interface. Rather than install and manage a specific version of the CLI globally, NAGRA recommends you access the current version at runtime using npx, which is provided with Node.js. With npx react-native <command>, the current stable version of the CLI will be downloaded and executed when the command is run. This version of the player uses react-native v0.63.4; to set up a project with this particular version of React Native, pass  --version 0.63.4 to the npx react-native cli.

Android Studio

There are items you may need to configure; follow the next steps carefully.

Installing Android Studio

Download and install Android Studio. In the Android Studio installation wizard, ensure the boxes next to all the following items are checked and click Next to install the components.

• Android SDK

• Android SDK Platform

• Android Virtual Device

• If you are not already using Hyper-V: Performance (Intel ® HAXM) (See AMD or Hyper-V)

If the checkboxes are greyed out, you will be able to install these components later on.

When setup has been finalised, a Welcome screen is displayed.

Installing the Android SDK

Android Studio installs the latest Android SDK by default. However, building a React Native app with native code requires the Android 10 (Q) SDK. Additional Android SDKs can be installed through the SDK Manager in Android Studio; to do that, open Android Studio, click the Configure button and select SDK Manager.

The SDK Manager can be found within the Android Studio Preferences dialogue, under Appearance & Behavior > System Settings > Android SDK.

1. Select the SDK Platforms tab from within the SDK Manager, then check the box in the bottom right corner next to Show Package Details.

2. Look for and expand the Android 10 (Q) entry, then make sure the following items are checked:

   • Android SDK Platform 29

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

3. Select the SDK Tools tab and check the Show Package Details box. Locate and expand the Android SDK Build-Tools entry and make sure that 29.0.2 is selected.

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

Configuring the ANDROID_HOME environment variable

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

1. Open the Windows Control Panel, click User Accounts and then click User Accounts again.

2. Click Change my environment variables and 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 %LOCALAPPDATA%\Android\Sdk.

3. Ensure the new environment variable is loaded before proceeding to the next step.
   Open PowerShell, copy and paste Get-ChildItem -Path Env:\ into PowerShell and verify ANDROID_HOME has been added.

Adding platform tools to the path

1. Click Change my environment variables and select the Path variable and click Edit.

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

3. Open the Windows Control Panel. Click User Accounts, then click User Accounts again.