Develop React Native app with WSL and WSA

rn-with-wsl-wsa.md

Develop React Native app with WSL and WSA

Requirement

• Windows Subsystem for Linux 2 (WSL2)
• Windows Subsystem for Android (WSA)
• NodeJS install inside WSL2

Steps

WSA

1. Enable developer mode for WSA

WSL2

This tutorial will run on Ubuntu 20.04

1. Install Android debug bridge (adb)

$ sudo apt install adb

2. Connect to WSA

• Connect to WSA via IP

$ adb connect <wsa-ip:port>

• Make sure ADB connect successfully

$ adb devices
List of devices attached
172.19.99.153:5555      device

React Native setup

I'll follow tutorial on ReactNative.dev

# Assuming that you have Node 12 LTS or greater installed, you can use npm to install the Expo CLI command line utility
$ sudo npm install -g expo-cli
# Then run the following commands to create a new React Native project called "AwesomeProject"
$ expo init AwesomeProject

cd AwesomeProject
$ npm start # you can also use: expo start

Select Run on Android device/emulator in expo web client

FAQ

Thank you very much!

This is awesome, thank you!

Many thanks

Thank you!!!

Thank you dude!

failed to connect to '127.0.0.1:58526': Connection refused

I don't have the same options for the ip but there is this ip listed. However, I am unable to connect.

This is a local address and will only be visible to applications running on Windows (NOT WSL).
The IP address option is no longer present in WSA settings (this may have been part of some recent update, because I definitely had the option to copy the public IP address a while ago):

I honestly don't know where to find the exposed IP address that I can connect to from within WSL2. Anybody else facing this?

@kicksent @raf2k07 can you try this:

export NAME_SERVER=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2; exit;}')
adb connect $NAME_SERVER:58526 #58526 is WSA port, check in developer mode settings

WSL doesn't understand localhost as the Windows side. So basically, it will grab the nameserver in /etc/resolv.conf and connect to that IP

@raf2k07
As it says in this matter, now the ip of the wsa is the same as your machine.
ex: 192.168.0.2:58526
https://winaero.com/windows-subsystem-for-android-has-got-new-settings-and-networking-improvements/

@raf2k07 As it says in this matter, now the ip of the wsa is the same as your machine. ex: 192.168.0.2:58526 https://winaero.com/windows-subsystem-for-android-has-got-new-settings-and-networking-improvements/

Yeah this works, thank you! I'm not sure why this bit isn't mentioned in the official WSA docs (as far as I can see).

Can anyone help me?
I can see the device connected when I type adb devices, nut when I try to run the emulator i get a lot of errors

Can anyone help me? I can see the device connected when I type adb devices, nut when I try to run the emulator i get a lot of errors

Look like you do not have android SDK installed in WSL. you should have Android SDK and ANDROID_HOME path setup correctly.

It seems the advanced networking changed the workflow quite a bit. After a bit of struggling, I am able to use expo-go to access https://gist.github.com/lagz0ne/6254a0da99719b650f5c6cf4548a1e6f

For some reason, EXPO GO closes after trying to connect with port 19000, it gives a Java error, but after investigating, I think it may have to do with an option within the WSA settings that does not allow me to enable the wireless debugging option. It's a button that, no matter how much I press, it doesn't activate. Any other ideas?

[ADB] Couldn't reverse port 19000: adb: error: cannot bind listener: Address already in use

Can anyone help me? I can see the device connected when I type adb devices, nut when I try to run the emulator i get a lot of errors

Set environment path in your bash profile:
`export ANDROID_HOME=/home/xxxx/Android
export ANDROID_SDK_ROOT=/home/xxxx/Android

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