React Native Environment Setup

A walkthrough of getting a React Native dev environment running, plus the bits I usually forget.

Base tooling

Windows

choco install python2
choco install adb
npm install -g react-native-cli

Linux (deb)

sudo apt-get install python2
sudo apt-get install adb
sudo npm install -g react-native-cli

Linux (CentOS)

sudo yum install python2
sudo yum install adb
sudo npm install -g react-native-cli

Node and registry mirror

Skip this if Node is already installed.

Windows

choco install nodejs.install
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
npm install -g yarn
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

Linux (deb)

sudo apt-get install nodejs.install
sudo npm config set registry https://registry.npm.taobao.org --global
sudo npm config set disturl https://npm.taobao.org/dist --global
sudo npm install -g yarn
sudo yarn config set registry https://registry.npm.taobao.org --global
sudo yarn config set disturl https://npm.taobao.org/dist --global

Linux (CentOS)

sudo yum install nodejs.install
sudo npm config set registry https://registry.npm.taobao.org --global
sudo npm config set disturl https://npm.taobao.org/dist --global
sudo npm install -g yarn
sudo yarn config set registry https://registry.npm.taobao.org --global
sudo yarn config set disturl https://npm.taobao.org/dist --global

Enable the Gradle daemon

(if not exist "%USERPROFILE%/.gradle" mkdir "%USERPROFILE%/.gradle") && (echo org.gradle.daemon=true >> "%USERPROFILE%/.gradle/gradle.properties")

Android SDK via Android Studio

Make sure these are selected during install

SDK and API 23 (Marshmallow) come by default.

• Performance (Intel HAXM)
• Android Virtual Device

Components to add after install

Android Studio will pull missing pieces on demand, but for RN it’s easier to install them upfront:

• SDK Platforms
  • Android 6.0 (Marshmallow)
    • Google APIs (usually default)
    • Android SDK Platform 23
    • Intel x86 Atom System Image
    • Intel x86 Atom_64 System Image
    • Google APIs Intel x86 Atom_64 System Image
• SDK Tools
  • Android SDK Build Tools
    • Android SDK Build-Tools 23.0.1
    • Android Support Repository

Build-Tools 23.0.3 and a few others get installed by default; if you don’t need them for non-RN work, drop them.

Expect a few install failures along the way — read the error, retry, repeat until everything’s green.

Windows environment variables (skip on other OSes)

• Point ANDROID_HOME at the Android SDK install directory.
• Add the SDK’s tools directory to PATH.

Emulators

Take your pick; the one shipped with Android Studio works too:

• Visual Studio Emulator for Android
• Genymotion

Smoke-test project

react-native init someProject
cd someProject
react-native run-android

App logs in the emulator

adb logcat *:S ReactNative:V ReactNativeJS:V

Running on a real device

Confirm the device is detected

adb devices

Only have one device attached at a time, including emulators.

Run

react-native run-android

Connecting the debug server

Android 5.0 (Lollipop) and above

reverse lets the device talk to the dev server on localhost:

adb reverse tcp:8081 tcp:8081

If the bridge doesn’t catch, shake the phone and hit reload JS. Beyond Android version, there’s enough variance that you’ll occasionally hit something unexplained.

Below Android 5.0

Get the dev machine’s LAN IP first:

ipconfig

Then on the device:

• Connect to the same wifi as the dev machine.
• Launch the app (opening it or react-native run-android both work).
• Shake the device to open the dev menu.
• Enter Dev Settings.
• Tap Debug server host for device.
• Enter the IP and port (usually 8081).
• Go back, or shake again.
• Tap Reload JS.

Aside: pushing an init-ed project straight to GitHub

echo "anything" >> README.md
git init
git add .
git remote add origin https://github.com/somewhere.git
git push -u origin master