Building a react native app in WSL2

react-native-app-in-wsl2.md

Building a react native app in WSL2

Install, build and debug a react native app in WSL2 (Windows Subsystem for Linux) and Ubuntu.

• Install tools in Windows
• Install tools in WSL2
• Create android virtual device in Windows
• Start android virtual device in Windows
• Start adb server in Windows
• Enable access to adb server from WSL2
• Enable access to metro bundler from Windows
• Create react native app in WSL2
• Build app in WSL2
• Debug app in Visual Studio Code from WSL2

Install tools in Windows

• Install WSL2 and Ubuntu, see here
• Install Android Studio, see here
• Install Viusal Studio Code, see here

Install tools in WSL2

Installation instructions below uses Open JDK version. If you want the Official Oracle version see how to install Official JDK 11

• Install java-8-openjdk in WSL2 (sudo apt-get install openjdk-8-jre or use java11 openjdk-11-jre)
• Install Android SDK cmdline tools in WSL2, see here
• Install nodejs in WSL2, see here

Create android virtual device in Windows

Create a virtual device (e.g. Nexus_5X_API_29) in windows with Android Virtual Device Manager from Android Studio.

Android Studio > Configure > AVD Manager

Start android virtual device in Windows

Start Android virtual device (e.g. Nexus_5X_API_29) in windows

Start adb server in Windows

adb kill-server
adb -a nodaemon server start

Change firewall rule for adb.exe on first usage in Defender Popup or with Windows Defender Firewall allowing access for the public profile, because the vEthernet (Wsl) adapter belongs to the public profile

Enable access to adb server from WSL2

Set environment variable to access adb server, WSL_HOST is ip of vEthernet (WSL) interface in windows

export WSL_HOST=$(tail -1 /etc/resolv.conf | cut -d' ' -f2)
export ADB_SERVER_SOCKET=tcp:$WSL_HOST:5037

Create react native app in WSL2

npx react-native init testapp

Debug app in Visual Studio Code from WSL2

Start vs code in WSL2

code .

and install extensions for VS Code

• Remote - WSL
• React Native Tools

VS Code UI runs in windows and the VS Code Server runs in WSL2, see here

Add a launch configuration in file launch.json with specified type and target, see this StackOverFlow Answer

Build app in WSL2

Add paraameter in file proguard-rules.pro to ignore okhttp3 warnings

-dontwarn okhttp3.internal.platform.*

Edit npm scripts in package.json

• Run adb devices to get <device-name>

"scripts": {
  "android": "react-native run-android --variant=debug --deviceId <device-name>",
  "start": "react-native start --host 127.0.0.1",
}

First, start metro JavaScript bundler (--host 127.0.0.1 binds bundler to localhost which is forwarded to windows)

yarn start

Then, build and deploy app to device (--deviceId <device-name> specifies target device to deploy to)

yarn android

Happy hacking!