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 had problems using expo and the solution @luizwhite gave worked for me.

So, I successfully overrode that with sudo ln -s /mnt/c/Android/Sdk/platform-tools/adb.exe ~/Android/sdk/platform-tools/adb after backing up the original ubuntu adb executable (just fix that path with your windows adb path and your possible custom ubuntu adb path)

However, I'm concerned there could be any kind of performance issues due to WSL2 accessing Windows memory. It would be great if anyone could point out if it could become an issue going forward.

@luizwhite I was able to connect the emulator. However when I run npx expo start --android I get this error. The Expo-*.apk exists in the directory. Any idea?

NVM, I was able to install the apk with: adb install Exponent-2.28.6.apk.

Having issue with npx expo start
Getting error: could not connect to TCP port 5554: Connection refused.

Set environment variables

export WSL_HOST=$(tail -1 /etc/resolv.conf | cut -d' ' -f2)
export ADB_SERVER_SOCKET=tcp:$WSL_HOST:5037
export ANDROID_SERIAL=emulator-5554
export REACT_NATIVE_PACKAGER_HOSTNAME=$(ip addr show eth0 | grep -oP '(?<=inet\s)\d+(\.\d+){3}')

Starting adb in Windows, emulator was started before

> adb -a nodaemon -P 5037 server start
adb.exe I 05-24 10:56:45 20016 16472 auth.cpp:416] adb_auth_init...
adb.exe I 05-24 10:56:45 20016 16472 auth.cpp:152] loaded new key from 'C:\Users\***\.android\adbkey' with fingerprint A7A3F84B061B063E11EFD5034A7C67ED92AA52C7AA569BE5BEE9BD597E01DDB2
adb.exe I 05-24 10:56:45 20016  5140 transport.cpp:335] emulator-5554: read thread spawning
adb.exe I 05-24 10:56:45 20016 17240 transport.cpp:307] emulator-5554: write thread spawning
adb.exe I 05-24 10:56:45 20016 16472 adb.cpp:173] emulator-5554: already offline

adb in WSL

> adb devices
List of devices attached
emulator-5554   device

> adb shell
emu64xa:/ $

It's ridiculous how complicated it is to set up a dev environment

I give up, it's better to learn a native language for mobile or something.

I give up, it's better to learn a native language for mobile or something.

Or just don't use wsl2.
I give up wsl2...

There is a typo in the file name. rearct-native-app-in-wsl2.md -> react-native-app-in-wsl2.md.

I give up, it's better to learn a native language for mobile or something.

Or just don't use wsl2. I give up wsl2...

yes, you're right

@sprngLf @osherz this is the same conclusion I came to. WSL is awesome...unless you need usb. I abandoned Windows on my work machine because react-native dev, while possible on WSL, is just too much maintenance on top of an already very complicated framework.

I didn't follow the guide and I didn't need to do any extra config to make the react native environment work in WSL and testing on a physical device or WSA (Windows Subsystem for Android).

Just on physical device I enabled wifi debugging and on WSL:

adb pair <ip:port of physical device connected on the same network of the host computer that is running the WSL>
adb connect <ip:port>

npx react-native start
npx react-native run-android

After the build process then the app started both on the physical device and also on the WSA

@vagnerlandio Thanks for that solution, i was trying to not leave wsl because i so greate for me, and my workspace is all around windows, so trying to find a solution to not use a device connected to my pc it was hard. To all who wants to usea a emulator, just install the WSA (Windows Subsystem for Android) and having the command line tools from android installed on WSL, you just do:

adb connect <ip:port> (try with 127.0.0.1:58526 if isn't working use yout local ip ex: 10.5.0.2:58526)

The port you can find it on the WSA > Advance Settings > Developer mode

Then run:

adb devices

List of devices attached
6pt8t8dqzhtwswz5        device
10.5.0.2:58526      device

With that now you can just run your command to run your RN app on the WSA

this is more of a comment, but all this feels very un-intuitive and damn near impossible.

Why do we need to start the metro bundle with --host 127.0.0.1. I can access the bundle fine from windows with a browser without setting the host but its not possible with the emulator that runs in windows. I fail to understand why.

(@luizwhite regarding this comment) for the record, react-native run-android --interactive and react-native run-android --list-devices also call adb -s emulator-5554 emu avd name.

Calling that from Windows returns:

> adb -s emulator-5554 emu avd name
company-tablet
OK

While calling it from WSL returns:

$ adb -s emulator-5554 emu avd name
error: could not connect to TCP port 5554: Connection refused

And if I run it after I call socat, although the packets are captured, my adb session just hangs indefinitely:

$ socat -d -d TCP-LISTEN:5554,reuseaddr,fork TCP:$WSL_HOST:5554
2024/01/03 19:47:27 socat[22203] N listening on AF=2 0.0.0.0:5554
2024/01/03 19:47:33 socat[22203] N accepting connection from AF=2 127.0.0.1:51001 on AF=2 127.0.0.1:5554
2024/01/03 19:47:33 socat[22203] N forked off child process 22205
2024/01/03 19:47:33 socat[22203] N listening on AF=2 0.0.0.0:5554
2024/01/03 19:47:33 socat[22205] N opening connection to AF=2 172.27.208.1:5554
################ Long amount of time passes ################
2024/01/03 19:49:47 socat[22205] E connect(5, AF=2 172.27.208.1:5554, 16): Connection timed out
2024/01/03 19:49:47 socat[22205] N exit(1)
2024/01/03 19:49:47 socat[22203] N childdied(): handling signal 17

I can issue adb devices, adb shell and any other adb commands from my WSL without any issues, it is just this command that is the culprit.

P.S. react-native start and react-native run-android work fine without any issues with socat for port 5037 (ADB server). Linking Windows ADB to WSL ADB helped the other commands to execute fine as well.

@vagnerlandio Genius solution! Thank you. It works well!

@AdalZayas WSA + WSL sounds ideal, but when I try to run

# WSL Terminal
$ adb connect 127.0.0.1:58526 # this is the correct IP:PORT from the WSA Developer Settings area
failed to connect to '127.0.0.1:58526': Connection refused

Any ideas what I may be doing wrong? I've been trying to coax ChatGPT into helping but we've tried about everything including toggling my firewalls. 🙃

For everyone complaining about how insanely, overly-complicated this is, WELCOME TO REACT NATIVE, friends! 🎉 🫠

@corysimmons Try using the ip of your windows machine

@AdalZayas I've tried using every IPv4 that appears in my ipconfig on my Windows machine + that port.

@corysimmons have you tried to turn off all the firewall of wondows, idk why this make a conflict and this block the connection

@AdalZayas Yep. I'm not sure either. I mostly just wanted to confirm you were running adb connect 127.0.0.1:58526 in your WSL Terminal.

@corysimmons Right now im running with my local ip

Added these in my shell rc file

export WSL_HOST_IP="$(tail -1 /etc/resolv.conf | cut -d' ' -f2)"
export ADB_SERVER_SOCKET=tcp:$WSL_HOST_IP:5037
export ADB_TRACE=adb
export EXPO_DEBUG=1
export ANDROID_SERIAL=emulator-5554
export REACT_NATIVE_PACKAGER_HOSTNAME=$(ip addr show eth0 | grep -oP '(?<=inet\s)\d+(\.\d+){3}')

I source it and then after adb deviecs I get

 adb devices                                    
03-04 11:55:52.779 81522 81522 D adb     : adb_trace.cpp:187 Android Debug Bridge version 1.0.41
03-04 11:55:52.779 81522 81522 D adb     : adb_trace.cpp:187 Version 35.0.0-11411520
03-04 11:55:52.779 81522 81522 D adb     : adb_trace.cpp:187 Installed as /home/user/SDKs/Android/platform-tools/adb
03-04 11:55:52.779 81522 81522 D adb     : adb_trace.cpp:187 Running on Linux 5.15.133.1-microsoft-standard-WSL2 (x86_64)
03-04 11:55:52.779 81522 81522 D adb     : adb_trace.cpp:187 
03-04 11:55:52.779 81522 81522 D adb     : commandline.cpp:1646 Using server socket: tcp:172.27.192.1:5037
03-04 11:55:52.779 81522 81522 D adb     : adb_client.cpp:160 _adb_connect: host:version
03-04 11:55:52.780 81522 81522 D adb     : adb_client.cpp:194 _adb_connect: return fd 3
List of devices attached
03-04 11:55:52.781 81522 81522 D adb     : adb_client.cpp:400 adb_query: host:devices
03-04 11:55:52.781 81522 81522 D adb     : adb_client.cpp:358 adb_connect: service: host:devices
03-04 11:55:52.781 81522 81522 D adb     : adb_client.cpp:160 _adb_connect: host:devices
03-04 11:55:52.782 81522 81522 D adb     : adb_client.cpp:194 _adb_connect: return fd 3
03-04 11:55:52.782 81522 81522 D adb     : adb_client.cpp:376 adb_connect: return fd 3
emulator-5554   device

I then proceed launching forwarding

• Disabled windows firewall completely
• In Windows powershell - adb kill-server && adb -a -P 5037 nodaemon server start
• In WSL Ubuntu For port 3037 - socat -d -d TCP-LISTEN:5037,reuseaddr,fork TCP:$(cat /etc/resolv.conf | tail -n1 | cut -d " " -f 2):5037
• In WSL Ubuntu For port 5554 - socat -d -d TCP-LISTEN:5037,reuseaddr,fork TCP:$(cat /etc/resolv.conf | tail -n1 | cut -d " " -f 2):5554

I try yarn android then it crashes

CommandError: Failed to get properties for device (03-04): Command failed: /home/user/SDKs/Android/platform-tools/adb -s 03-04 shell getprop ro.product.cpu.abilist
03-04 12:01:51.982 85678 85678 D adb     : adb_trace.cpp:187 Android Debug Bridge version 1.0.41
03-04 12:01:51.982 85678 85678 D adb     : adb_trace.cpp:187 Version 35.0.0-11411520
03-04 12:01:51.982 85678 85678 D adb     : adb_trace.cpp:187 Installed as /home/user/SDKs/Android/platform-tools/adb
03-04 12:01:51.982 85678 85678 D adb     : adb_trace.cpp:187 Running on Linux 5.15.133.1-microsoft-standard-WSL2 (x86_64)
03-04 12:01:51.982 85678 85678 D adb     : adb_trace.cpp:187 
03-04 12:01:51.982 85678 85678 D adb     : commandline.cpp:1646 Using server socket: tcp:172.27.192.1:5037
03-04 12:01:51.982 85678 85678 D adb     : adb_client.cpp:400 adb_query: host-serial:03-04:features
03-04 12:01:51.982 85678 85678 D adb     : adb_client.cpp:358 adb_connect: service: host-serial:03-04:features
03-04 12:01:51.982 85678 85678 D adb     : adb_client.cpp:160 _adb_connect: host:version
03-04 12:01:51.982 85678 85678 D adb     : adb_client.cpp:194 _adb_connect: return fd 3
03-04 12:01:51.982 85678 85678 D adb     : adb_client.cpp:160 _adb_connect: host-serial:03-04:features
03-04 12:01:51.983 85678 85678 D adb     : adb_client.cpp:372 _adb_connect error: device '03-04' not found
03-04 12:01:51.983 85678 85678 D adb     : adb_client.cpp:376 adb_connect: return fd -1
adb: device '03-04' not found

Any clue ? It looks like parsing/extraction error - but who is responsible for this

1. On native windows adb devices I get

adb devices
List of devices attached
emulator-5554   device

2. On WSL linux adb devices I get

adb devices
03-04 12:29:44.557 16415 16415 D adb     : adb_trace.cpp:187 Android Debug Bridge version 1.0.41
03-04 12:29:44.557 16415 16415 D adb     : adb_trace.cpp:187 Version 35.0.0-11411520
03-04 12:29:44.557 16415 16415 D adb     : adb_trace.cpp:187 Installed as /home/user/SDKs/Android/platform-tools/adb
03-04 12:29:44.557 16415 16415 D adb     : adb_trace.cpp:187 Running on Linux 5.15.133.1-microsoft-standard-WSL2 (x86_64)
03-04 12:29:44.557 16415 16415 D adb     : adb_trace.cpp:187
03-04 12:29:44.557 16415 16415 D adb     : commandline.cpp:1646 Using server socket: tcp:172.27.192.1:5037
03-04 12:29:44.557 16415 16415 D adb     : adb_client.cpp:160 _adb_connect: host:version
03-04 12:29:44.558 16415 16415 D adb     : adb_client.cpp:194 _adb_connect: return fd 3
List of devices attached
03-04 12:29:44.558 16415 16415 D adb     : adb_client.cpp:400 adb_query: host:devices
03-04 12:29:44.558 16415 16415 D adb     : adb_client.cpp:358 adb_connect: service: host:devices
03-04 12:29:44.558 16415 16415 D adb     : adb_client.cpp:160 _adb_connect: host:devices
03-04 12:29:44.558 16415 16415 D adb     : adb_client.cpp:194 _adb_connect: return fd 3
03-04 12:29:44.558 16415 16415 D adb     : adb_client.cpp:376 adb_connect: return fd 3
emulator-5554   device

So there are extra lines coming from a DEBUG flag or something - found it, it is @expo/cli that gets confused

    const splitItems = output.trim().replace(/\n$/, "").split(_os.default.EOL);
    // First line is `"List of devices attached"`, remove it
    // @ts-ignore: todo
    const attachedDevices = splitItems.slice(1, splitItems.length).map((line)=>{
        // unauthorized: ['FA8251A00719', 'unauthorized', 'usb:338690048X', 'transport_id:5']
        // authorized: ['FA8251A00719', 'device', 'usb:336592896X', 'product:walleye', 'model:Pixel_2', 'device:walleye', 'transport_id:4']
        // emulator: ['emulator-5554', 'offline', 'transport_id:1']
        const props = line.split(" ").filter(Boolean);
        const isAuthorized = props[1] !== "unauthorized";
        const type = line.includes("emulator") ? "emulator" : "device";
        return {
            props,
            type,
            isAuthorized
        };
    }).filter(({ props: [pid]  })=>!!pid
    );
```

@vagnerlandio thanks for tips. I think I almost there but Im getting error in the WSA when starting Expo in development build: "Unable to load script.Make sure you are running Metro." and then when i try to reload it loses connection to development server.
Does anybody here make it work with Expo ? Expo Go works on WSA.

wsa is dead

@vagnerlandio Thank you so much !
This guide used to work for me but after upgrading to react-native 0.73 it stopped working.

⚠️ If you're planning on using react-native > 0.71 and can connect both your PC and smartphone to the same network I highly recommend doing what's described in this comment.

Good news, using the new mirrored mode networking feature of WSL2, the setup part for connecting the device or emulator to the project server is now simpler.

1. enable mirrored mode networking through the .wslconfig file (usually located in C:\Users\<user_name>)

[wsl2]
networkingMode=mirrored

2. add this in the rc file (eg. .bashrc), so that when we run the project in wsl it uses the adb in windows

### Make alias for adb in Windows so that it can be called within WSL
alias adb="/mnt/c/Users/<user_name>/AppData/Local/Android/Sdk/platform-tools/adb.exe"

thats pretty much it.

Also make sure the firewall isn't the way by adding inbound rules with the ports for adb (5037) and the project server (usually 8081)

Before I had to add export WSL_HOST_IP="$(tail -1 /etc/resolv.conf | cut -d' ' -f2)", export ADB_SERVER_SOCKET=tcp:$WSL_HOST_IP:5037 and export REACT_NATIVE_PACKAGER_HOSTNAME=$(ip addr show eth0 | grep -oP '(?<=inet\s)\d+(\.\d+){3}') in the rc file. And to connect my physical device and the project server I had to run adb kill-server and adb -a nodaemon server start in windows first, every time I want to start the project.

Now with this we can just start the project directly and it should now connect to the physical device.

Big thanks for the people who contributed to this guide, hope this helps someone.

Good news, using the new mirrored mode networking feature of WSL2, the setup part for connecting the device or emulator to the project server is now simpler.

1. enable mirrored mode networking through the .wslconfig file (usually located in C:\Users\<user_name>)

[wsl2]
networkingMode=mirrored

2. add this in the rc file (eg. .bashrc), so that when we run the project in wsl it uses the adb in windows

### Make alias for adb in Windows so that it can be called within WSL
alias adb="/mnt/c/Users/<user_name>/AppData/Local/Android/Sdk/platform-tools/adb.exe"

thats pretty much it.

Also make sure the firewall isn't the way by adding inbound rules with the ports for adb (5037) and the project server (usually 8081)

Before I had to add export WSL_HOST_IP="$(tail -1 /etc/resolv.conf | cut -d' ' -f2)", export ADB_SERVER_SOCKET=tcp:$WSL_HOST_IP:5037 and export REACT_NATIVE_PACKAGER_HOSTNAME=$(ip addr show eth0 | grep -oP '(?<=inet\s)\d+(\.\d+){3}') in the rc file. And to connect my physical device and the project server I had to run adb kill-server and adb -a nodaemon server start in windows first, every time I want to start the project.

Now with this we can just start the project directly and it should now connect to the physical device.

Big thanks for the people who contributed to this guide, hope this helps someone.

Ok so after a few days I've realized that this only works if I type adb devices in wsl terminal before starting the expo project, this is because I had 2 copies of adb, one in wsl and the other in windows, and this starts the adb server in windows.

After digging through the source code of expo, found out that expo checks if adb server is already running, if it is, it uses that server, this explains why running the adb server in windows then starting the expo project in wsl works. We can also see that in assertSdkRoot() (source) it tries to find the adb through the environment variable $ANDROID_HOME, so this explains why when we start the project it still runs the adb in wsl.

In order for us to no longer do the extra step of starting the adb server in windows through typing adb devices or adb start-server in wsl terminal before we start the project, a hacky way to fix this is to make a symlink (not really the same but think of it as a shortcut file windows but in linux) in the platform-tools folder in wsl that points to the adb in windows.

Type this is wsl terminal:

ln -s /mnt/c/Users/<user_name_windows>/AppData/Local/Android/Sdk/platform-tools/adb.exe /home/<user_name_wsl>/Android/platform-tools/adb

with this, we've eliminated the extra step, now we can just start the project in wsl and it should connect to your physical device 😄

Good news, using the new mirrored mode networking feature of WSL2, the setup part for connecting the device or emulator to the project server is now simpler.

1. enable mirrored mode networking through the .wslconfig file (usually located in C:\Users\<user_name>)

[wsl2]
networkingMode=mirrored

2. add this in the rc file (eg. .bashrc), so that when we run the project in wsl it uses the adb in windows

### Make alias for adb in Windows so that it can be called within WSL
alias adb="/mnt/c/Users/<user_name>/AppData/Local/Android/Sdk/platform-tools/adb.exe"

thats pretty much it.
Also make sure the firewall isn't the way by adding inbound rules with the ports for adb (5037) and the project server (usually 8081)
Before I had to add export WSL_HOST_IP="$(tail -1 /etc/resolv.conf | cut -d' ' -f2)", export ADB_SERVER_SOCKET=tcp:$WSL_HOST_IP:5037 and export REACT_NATIVE_PACKAGER_HOSTNAME=$(ip addr show eth0 | grep -oP '(?<=inet\s)\d+(\.\d+){3}') in the rc file. And to connect my physical device and the project server I had to run adb kill-server and adb -a nodaemon server start in windows first, every time I want to start the project.
Now with this we can just start the project directly and it should now connect to the physical device.
Big thanks for the people who contributed to this guide, hope this helps someone.

Ok so after a few days I've realized that this only works if I type adb devices in wsl terminal before starting the expo project, this is because I had 2 copies of adb, one in wsl and the other in windows, and this starts the adb server in windows.

After digging through the source code of expo, found out that expo checks if adb server is already running, if it is, it uses that server, this explains why running the adb server in windows then starting the expo project in wsl works. We can also see that in assertSdkRoot() (source) it tries to find the adb through the environment variable $ANDROID_HOME, so this explains why when we start the project it still runs the adb in wsl.

In order for us to no longer do the extra step of starting the adb server in windows through typing adb devices or adb start-server in wsl terminal before we start the project, a hacky way to fix this is to make a symlink (not really the same but think of it as a shortcut file windows but in linux) in the platform-tools folder in wsl that points to the adb in windows.

Type this is wsl terminal:

ln -s /mnt/c/Users/<user_name_windows>/AppData/Local/Android/Sdk/platform-tools/adb.exe /home/<user_name_wsl>/Android/platform-tools/adb

with this, we've eliminated the extra step, now we can just start the project in wsl and it should connect to your physical device 😄

@Se7enSe7enSe7en
I installed Windows 10 because I dont want BSOD for Win 11
I am trying to run a -Bare React Native Project- and not React-Expo

Have you tested your mirrored mode networking to see if it works for Bare React Native?

My head is really spinning at this point from reading so many threads
when i apply the configs of a particular thread, it results in another error
and now i am entrapped in a vicious loop

Can you create your own New Gist and simply link to it here?
I ask this because i am unsure of how to setup my dev environment following the configs in this current gist alongside this mirrored mode networking feature

It seems expo.fyi is updated with a simple .wslconfig:

[wsl2]
networkingMode=mirrored
[experimental]
hostAddressLoopback=true

Working well compared to all the hacky methods I've tried in the last year or so.

@craigjones-dev thanks, now there is a much simpler workflow.