5

Introduction

I'm attempting to create a Hello World style program with React Native 0.63.3 using the official docs. I'm using to the React Native CLI Quickstart path in that link.

What I've Done So Far

I've gotten to the section:
Running your React Native application
Step 1: Start Metro

And I've run:

npx react-native start --verbose

And I get the following output:

               ######                ######               
             ###     ####        ####     ###             
            ##          ###    ###          ##            
            ##             ####             ##            
            ##             ####             ##            
            ##           ##    ##           ##            
            ##         ###      ###         ##            
             ##  ########################  ##             
          ######    ###            ###    ######          
      ###     ##    ##              ##    ##     ###      
   ###         ## ###      ####      ### ##         ###   
  ##           ####      ########      ####           ##  
 ##             ###     ##########     ###             ## 
  ##           ####      ########      ####           ##  
   ###         ## ###      ####      ### ##         ###   
      ###     ##    ##              ##    ##     ###      
          ######    ###            ###    ######          
             ##  ########################  ##             
            ##         ###      ###         ##            
            ##           ##    ##           ##            
            ##             ####             ##            
            ##             ####             ##            
            ##          ###    ###          ##            
             ###     ####        ####     ###             
               ######                ######               
                                                          
debug Checking for a newer version of React Native
debug Current version: 0.63.3
debug Cached release version: 0.60.0
debug Checking for newer releases on GitHub
                 Welcome to React Native!
                Learn once, write anywhere



To reload the app press "r"
To open developer menu press "d"

debug Latest release: 0.60.0

Pressing "r" gives the following:

No apps connected. Sending "reload" to all React Native apps failed. Make sure your app is running in the simulator or on a phone connected via USB.
info Reloading app...

Pressing "d" gives the following:

warn No apps connected. Sending "devMenu" to all React Native apps failed. Make sure your app is running in the simulator or on a phone connected via USB.
info Opening developer menu...

Question

How do I successfully run and finish the Metro process so that I can run my React Native application?

karobar
  • 1,115
  • 6
  • 24
  • 57
  • 2
    you also need to start with an emulator (npx react-native ios) or (npx react-native android) – Denis Tsoi Nov 07 '20 at 21:25
  • 1
    Oh nice! Got this working using `npx react-native run-android`. I'll let you answer this question if you want the rep, otherwise I'll self-answer soon. – karobar Nov 07 '20 at 21:34
  • This documentation isn't stellar. I always wait for a step to finish before moving on to the next and I didn't know that Metro runs continuously in the background. There isn't any output of the command that screams out to me that everything is working as intended. – karobar Nov 07 '20 at 21:37
  • thanks! - answer below – Denis Tsoi Nov 07 '20 at 22:40

2 Answers2

6

With npx react-native start, you're running the build, however, to run the application, you'll need to choose to run either on android or on ios. source:

android:

npx react-native run-android

ios: (mac)

npx react-native run-ios
Denis Tsoi
  • 7,765
  • 7
  • 31
  • 51
-1

following Set Up React-Native on Your WSL2 for Android Development and Building a react native app in WSL2

But I have the same problem

To reload the app press "r" To open developer menu press "d" warn No apps connected. Sending "reload" to all React Native apps failed. Make sure your app is running in the simulator or on a phone connected via USB. info Reloading app...

Solution - Result

  1. creating an assets folder

follow this link:This error usually happens because the system was unable to create the initial bundle that contains all the Javascript code in the application. To resolve start by creating an assets folder within your react-native project folder:

  • go to your project folder in wsl or ubuntu

cd android/app/src/main/

  • Create a folder of the name assets

mkdir assets

  • create the initial bundle that contains all the Javascript code follow this link to create the initial bundle

    [your project]/android/app/src/main$ npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

  1. If adb crashes using the environment variable config use socat
  • Run in PowerShell :

adb kill-server ;adb -a -P 5037 nodaemon server

  • Run on ubuntu or wsl:

socat -d -d TCP-LISTEN:5037,reuseaddr,fork TCP:$(cat /etc/resolv.conf | tail -n1 | cut -d " " -f 2):5037

  • Run in NEW PowerShell :

$WSL_CLIENT = bash.exe -c "ip addr show eth0 | grep -oP '(?<=inet\s)\d+(.\d+){3}'"

then

iex "netsh interface portproxy add v4tov4 listenport=8081 listenaddress=127.0.0.1 connectport=8081 connectaddress=$WSL_CLIENT"

mahdi hngr
  • 1
  • 1