Building a react native app in WSL2

rearct-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
• Enable mirrored networking mode in WSL2
• Install tools in WSL2
• Connect to android hardware device from Windows
• Connect to android hardware device from WSL2
• Connect to android virtual device in 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

Enable mirrored networking mode in WSL2

Mirrored mode networking has the goal of 'mirroring' the network interfaces that you have on Windows into Linux. All programs on Windows and Linux can connect via localhost.

Add the following lines to %UserProfile%/.wslconfig (thanks to @craigjones-dev)

[wsl2]
networkingMode=mirrored
hostAddressLoopback=true

Install tools in WSL2

• Install java-21-openjdk in WSL2 (sudo apt-get install openjdk-21-jre)
• Install Android SDK cmdline tools in WSL2, see here and adjust directory structure, see here
• Install nodejs in WSL2, see here

Set environment variables in .profile or .bash_profile

export ANDROID_HOME=/home/xxx/Android/cmdline-tools/latest
export ANDROID_SDK_ROOT=/home/xxx/Android

PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools
PATH=$PATH:$ANDROID_HOME/bin

export JAVA_HOME=/usr/lib/jvm/java-8-openjdk-amd64

Connect to android hardware device from Windows

To debug on a hardware device connect to android device via adb

• start adb server in Windows: adb kill-server && adb server start

Connect to android hardware device from WSL2

To debug on a hardware device connect to android device via usbip and adb from WSL2 (thanks to @cjshearer):

• Connect USB device to WSL
• start adb server in WSL2: adb kill-server && adb server start

Connect to android virtual device in Windows

To debug on a virtual device

• create a virtual device in windows with Android Virtual Device Manager, see here
• start the Android Emulator, see here, the adb server automatically starts on Windows.

Create react native app in WSL2

npx react-native init AwesomeProject

Build app in WSL2

Start metro JavaScript bundler and bind to an ipv4 address to enable port forwarding to windows

npx react-native start --host 127.0.0.1

Build app, set device as parameter deviceId from result of adb devices

• deviceId emulator: emulator-5554

npx react-native run-android --variant=debug --deviceId <deviceId>

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 request

"name": "Attach to packager",
"cwd": "${workspaceFolder}",
"type": "reactnative",
"request": "attach"

Build app, attach to packager and start debugging, see here.

I found that the official documentation states that the minimum system for mirror mode is Windows 11

Title: Using WiFi for RN Debugging in WSL2 (Mirrored Network Environment)

Prerequisites:

• Ensure WSL2 is running in a mirrored network environment.
• Enable Wireless debugging in the Developer Options on your phone.

Connection Steps:

1. Pair the device using a pairing code:
   adb pair <device_ip>:<pairing_port>
   Enter the matching pairing code when prompted. You should see Successfully paired.
2. Connect to the device:
   adb connect <device_ip>:<port>
   You should see connected to <device_ip>: indicating success.
3. Verify the connection:
   adb devices
   The output should list your device as: <device_ip>: device

React Native App Configuration (on the phone):

1. Shake the phone to open the Dev Menu.
2. Tap Dev Settings.
3. Tap Debug server host & port for device.
4. Enter: localhost:8081

Start the Metro Bundler

@AdalZayas I was already using the mirror mode. Even though adb devices shows an emulator device - with adb in the SDK actually pointing to Windows' adb.exe version (through a symlink), gradle does not seem to be able to work with it. I get this loop forever:

2025-12-10T22:22:02.179+0100 [INFO] [org.gradle.api.Task] [DeviceMonitor]: adb restarted
2025-12-10T22:22:03.254+0100 [INFO] [org.gradle.api.Task] [DeviceMonitor]: adb restarted
2025-12-10T22:22:04.328+0100 [INFO] [org.gradle.api.Task] [DeviceMonitor]: adb restarted
...
2025-12-10T22:22:27.972+0100 [INFO] [org.gradle.api.Task] [DeviceMonitor]: adb restarted

And yet the Windows firewall is disabled.

I give up on this hybrid solution.

With WSLg and nested virtualization, it looks like a full WSL2 solution can be tested. Otherwise, I can still go full Linux, in dual boot or maybe through Virtualbox.

@wuleninja when i was working with this i was using adb but directly on the WSL. This will read some required envs from wsl to run.

I know is kinda tricky to run. It happened to me that some day it was working fine and sometimes not