Running React Native in WSL with the emulator running directly in Windows

android android-studio react-native windows-subsystem-for-linux
Leo Jiang picture Leo Jiang · Mar 5, 2017 · Viewed 13.1k times · Source

I haven't done Android development in a while, so my knowledge of modern Android development is spotty.

I'm trying to learn React Native. I use WSL as my primary development environment. Since it'll probably be a pain to set up the Android emulator in Linux/WSL, I want to run the emulator directly on Windows. However, I'd prefer to be able to run react-native run-android in WSL.

How would I set up React Native to be able to run react-native run-android in WSL and run the app in an Android emulator on Windows?

My ANDROID_HOME variable should be set up correctly, but I don't know enough about Android to know if this is doing anything:

export ANDROID_HOME=/mnt/c/Users/Leo/AppData/Local/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools

Answer

pscl picture pscl · Sep 23, 2017

AFAIK it is not possible to use react-native in WSL due to a number of issues.

e.g. https://github.com/Microsoft/BashOnWindows/issues/1523

However, I've found a workaround that combines a native windows android build with a npm stack in WSL. Realistically, you'll want to install the native Windows Android Studio/SDK to use the Intellij IDE and the emulator anyway. The trick is to separate out the Gradle based Android compile.

Workflow

All project setup and package management performed in WSL with npm/yarn. react-native-cli installed globally in WSL. No need for a duplicate windows binary node/npm stack.

Don't use react-native run-android, instead compile and deploy from cmd. From the /android directory inside your project, execute the gradle wrapper gradlew.bat installDebug, or with the Creator's Update, you can do this from inside the WSL bash shell /mnt/c/Windows/System32/cmd.exe /C gradlew.bat installDebug. Don't use the unix gradlew script.

Once the APK has been assembled and uploaded to your device or emulator, run the debug server from within WSL using the command react-native start.

I've tested this out with some fairly complex projects using multiple native Android components. Hope this helps.

  • Note: For this to work your project needs to be located in the native Windows file system i.e. /mnt/c.

Related questions

error: package com.android.annotations does not exist

I have the following class import com.android.annotations.NonNullByDefault; @NonNullByDefault public final class Log { ... } and here is my build.gradle file (some parts omitted) apply plugin: 'com.android.application' android { compileSdkVersion 25 buildToolsVersion '24.0.1' defaultConfig { minSdkVersion 16 targetSdkVersion 25 versionCode 2 versionName "0.2" } …

Read More
Tools > Android menu doesn't exist in Android Studio

From the docs: To run the AVD Manager, do one of the following: In Android Studio, select Tools > Android > AVD Manager. Click AVD Manager in the toolbar. Neither of these things exist. I went into the settings and …

Read More
How to import react native project in android studio

I started development of the android application using atom text editor. It is working fine as long I am writing code in JS and JSX. I have to do functionality which is not available in react native, so I need …

Read More