'How to run react native on WSL with android emulator on Windows

I have a react native expo project on WSL2 and I need to run it on an android emulator on Windows, and I am also willing to run the project using yarn start. How would I set up React Native to be able to run yarn start in WSL and run the app in an Android emulator on Windows?

Here are the steps I followed:

  1. On Windows: Install WSL2, Ubuntu, and Android, also created device emulator
  2. On WSL2: Installed java-8-openjdk in WSL2 (sudo apt-get install openjdk-8-jre), I already have nodejs, npm and nvm installed.
  3. Installed Android SDK cmdline tools in WSL2 using these commands, and adjust directory structure as home//android-sdk/ has a few sub-directories: build-tools, cmdline-tools, licenses, platform-tools, platforms and cmdline-tools has a sub-directory: tools
sudo apt-get install unzip
wget https://dl.google.com/android/repository/sdk-tools-linux-4333796.zip
unzip sdk-tools-linux-4333796.zip -d Android
rm sdk-tools-linux-4333796.zip
sudo apt-get install -y lib32z1 openjdk-8-jdk

export JAVA_HOME=/usr/lib/jvm/java-8-openjdk-amd64
export PATH=$PATH:$JAVA_HOME/bin
printf "\n\nexport JAVA_HOME=/usr/lib/jvm/java-8-openjdk-amd64\nexport PATH=\$PATH:\$JAVA_HOME/bin" >> ~/.bashrc
cd Android/tools/bin
./sdkmanager "platform-tools" "platforms;android-26" "build-tools;26.0.3"

#on bashrc I export the following paths
export ANDROID_SDK_ROOT=/home/<user>/android-sdk
export PATH=$ANDROID_SDK_ROOT/cmdline-tools/tools/bin:$PATH
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools

android update sdk --no-ui
sudo apt-get install gradle
gradle -v
adb start-server
  1. on .bashrc file of wsl2

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

    export ADB_SERVER_SOCKET=tcp:$WSL_HOST:5037

  2. On Windows: Installed socat (eg. sudo apt-get install socat). Socat relays the requests from wsl2 to windows using the following command: socat -d -d TCP-LISTEN:5037,reuseaddr,fork TCP:$(cat /etc/resolv.conf | tail -n1 | cut -d " " -f 2):5037

  3. on Windows: typed these commandsadb kill-server & adb.exe start-server

  4. I checked the adb version on both WSL2 and Windows are the same adb --version

  5. Opening the emulator on windows android.

  6. running the project on WSL2 using yarn start, then type 'a' which should open the android but I end up in that error when I type 'a'.

› Press a │ open Android
› Press w │ open web

› Press r │ reload app
› Press m │ toggle menu
› Press d │ show developer tools
› shift+d │ toggle auto opening developer tools on startup (enabled)

› Press ? │ show all commands

Logs for your project will appear below. Press Ctrl+C to exit.
› Opening on Android...
/home/menna/kr8/celo-digital-sports-card/node_modules/metro-hermes-compiler/src/emhermesc.js:77
          throw ex;
          ^

RuntimeError: abort(Error: adb W 05-13 02:39:03  3216  3216 network.cpp:149] failed to connect to '172.21.160.1:5037': Connection timed out
* cannot start server on remote host
error: cannot connect to daemon at tcp:172.21.160.1:5037: failed to connect to '172.21.160.1:5037': Connection timed out). Build with -s ASSERTIONS=1 for more info.
    at process.abort (/home/menna/kr8/celo-digital-sports-card/node_modules/metro-hermes-compiler/src/emhermesc.js:440:13)
    at process.emit (node:events:390:28)
    at process.emit (/mnt/c/Users/PC/AppData/Roaming/npm/node_modules/expo-cli/node_modules/source-map-support/source-map-support.js:439:21)
    at emit (node:internal/process/promises:136:22)
    at processPromiseRejections (node:internal/process/promises:242:25)
    at processTicksAndRejections (node:internal/process/task_queues:97:32)
error Command failed with exit code 7.

update I also run these commands in powershell admin

iex "netsh interface portproxy delete v4tov4 listenport=3333 listenaddress=127.0.0.1" | out-null;

# GET THE WSL IP AND CHECKS IT FORMAT xxx.xxx.xxx.xxx
$WSL_CLIENT = bash.exe -c "ip addr show eth0 | grep -oP '(?<=inet\s)\d+(\.\d+){3}'";
$WSL_CLIENT -match '\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}';
$WSL_CLIENT = $matches[0];

# ADD PORTS FORWARD FROM WSL TO WINDOWS
#(With this command, windows port 3333 starts to listen port 3333 of wsl2)
iex "netsh interface portproxy add v4tov4 listenport=3333 listenaddress=127.0.0.1 connectport=3333 connectaddress=$WSL_CLIENT"

# TO CHECK ALL PORTS CONFIGURED:
netsh interface portproxy show all


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source