Facebook API Question posted in
The official documentation for the Facebook APIs can be found here.

ReactNative Metro Bundler not starting automatically

react-native run-android not starting bundler so i tried
react-native start it showing below error.

┌──────────────────────────────────────────────────────────────────────────────┐
│                                                                              │
│  Running Metro Bundler on port 8081.                                         │
│                                                                              │
│  Keep Metro running while developing on any JS projects. Feel free to        │
│  close this tab and run your own Metro instance if you prefer.               │
│                                                                              │
│  https://github.com/facebook/react-native                                    │
│                                                                              │
└──────────────────────────────────────────────────────────────────────────────┘

events.js:167
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE :::8081
    at Server.setupListenHandle [as _listen2] (net.js:1286:14)
    at listenInCluster (net.js:1334:12)
    at Server.listen (net.js:1421:7)
    at /Users/user/Documents/Prasanth/AwesomeProject/node_modules/metro/src/index.js:157:18
    at new Promise (<anonymous>)
    at Object.<anonymous> (/Users/user/Documents/Prasanth/AwesomeProject/node_modules/metro/src/index.js:156:12)
    at Generator.next (<anonymous>)
    at step (/Users/user/Documents/Prasanth/AwesomeProject/node_modules/metro/src/index.js:47:262)
    at /Users/user/Documents/Prasanth/AwesomeProject/node_modules/metro/src/index.js:47:422
Emitted 'error' event at:
    at Server.WebSocketServer._onServerError (/Users/user/Documents/Prasanth/AwesomeProject/node_modules/ws/lib/WebSocketServer.js:82:50)
    at Server.emit (events.js:187:15)
    at emitErrorNT (net.js:1313:8)
    at process._tickCallback (internal/process/next_tick.js:63:19)

react-native info

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.6
      CPU: x64 Intel(R) Core(TM)2 Duo CPU     E7600  @ 3.06GHz
      Memory: 3.36 GB / 12.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 10.12.0 - /usr/local/bin/node
      Yarn: 1.10.1 - /usr/local/bin/yarn
      npm: 6.4.1 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
      Android SDK:
        Build Tools: 21.1.2, 23.0.1, 25.0.0, 26.0.0, 26.0.1, 26.0.2, 26.0.3, 27.0.3, 28.0.2, 28.0.3
        API Levels: 21, 22, 23, 24, 25, 26, 27
    IDEs:
      Android Studio: 3.2 AI-181.5540.7.32.5056338
      Xcode: 10.0/10A255 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.5.0 => 16.5.0 
      react-native: 0.57.2 => 0.57.2 
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

package.json

{
  "name": "AwesomeProject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.5.0",
    "react-native": "0.57.2"
  },
  "devDependencies": {
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "react-test-renderer": "16.5.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

I tried cleaning cache and reverse adb still am getting that issue

react-native run-android showing below error.

enter image description here

Android Home configuration

export ANDROID_HOME=/<Path>/android-sdk-macosx
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/emulator

How to resolve this issue.

Tags:

18

Answers


  1. Chosen as BEST ANSWER
    0

    I tried following steps it resolves my issue

    1. Running packager on different port react-native start --port 8084 --reset-cache
    2. Run react-native run-android --port 8084 in second Command Prompt window.
    3. After error screen appear clicking Android Ctrl + M, iOS Command + D.
    4. Click Dev Settings button at the bottom.
    5. Click Debug server host & port for device button.
    6. Type localhost:8084 and click OK button.
    7. Again run react-native run-android --port 8084

  2. 0

    Its because the port 8081 is in use..

    Try 

    react-native start --port=8080

    This will work out.

    Login or Signup to reply.
  3. 0

    For Unable to load script from assets issue, you need to follow below steps:

    1] Please check whether "assets" folder exists or not in 'android/app/src/main/'
    a] If it exists then, you need to delete two files(i.e. index.android.bundle and index.android.bundle.meta)
    b] If it doesn't exist, then create the assets directory in it.

2] Use below commands from your root project directory:
    cd android
    ./gradlew clean

3] Go to the root directory and check:
    a] If there is only one file(i.e. index.js), then run below command:
        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

    b] If there are two files(i.e index.android.js and index.ios.js), then below command:
        react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

4] Finally run below command:
    react-native run-android
    Login or Signup to reply.
  4. 0

    You can go to your Users folder and delete the “.expo” directory. It might be hidden as a system directory, so view all and then delete the .expo folder.

    Run npm start again.

    Login or Signup to reply.
  5. 0

    Same exact problem I am facing too. I just updated to 0.59.1 and this isn’t working…
    As a work around, I am running the metro builder in a separate tab, and then running react in a separate tab.

    react-native start --reset-cache

    in one terminal and left it open

    react-native run-android

    in another terminal

    Login or Signup to reply.
  6. 0

    From the error what I understand it must run bundle command first before starting JS Server

    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

    Finally you can check if no any dependency is missing by following command

    ./gradlew assembleRelease -x bundleReleaseJsAndAssets

    then you can run android and react native server

    react-native run-android
react-native start --reset-cache

    Good Luck !

    Login or Signup to reply.
  7. 0

    Adding android:usesCleartextTraffic=”true” to the application tag in AndroidManifest work for me

    <application
        ...
        android:usesCleartextTraffic="true"
        ...
    Login or Signup to reply.
  8. 0

    Same issue I’ve faced. The above solutions didn’t worked for me.
    The problem was from NodeJS version.

    The installed version of NodeJS was 12.11.1 in which I got the above problems. Then I replaced with the stable version 10.16.3 LTS and It works.

    Hope this solution may helpful.

    Login or Signup to reply.
  9. 0

    Replace the code with this one. The path of the file is –

    node_modulesmetro-configsrcdefaultsblacklist.js

    var sharedBlacklist = [
  /node_modules[/\]react[/\]dist[/\].*/,
  /website/node_modules/.*/,
  /heapCapture/bundle.js/,
  /.*/__tests__/.*/
];

    I found this solution from Github.

    Login or Signup to reply.
  10. 0

    It’s worked for me 

    react-native start --port=8080
    Login or Signup to reply.
  11. 0

    I solved this by running "yarn start" on another terminal before starting "react-native run-android"

    Login or Signup to reply.
  12. 0

    I have got the solution of the problem

    • go to your project and run 2 command shell
    • in first shell, run npm start
    • in the second shell, react-native run-android

    then it will run

    Login or Signup to reply.
  13. 0

    I suggest u delete this line import com.facebook.react.BuildConfig in Android / MainApplication

    Login or Signup to reply.
  14. 0

    I just solved by watching the youtube below..
    https://youtu.be/LPYez4cs5LY

    I summary like below

    1. make the directory

    "android/app/src/main/assets/"

    1. replace sharedBlacklist variable in node_modules/metro-config/src/defaults/blacklist.js like below
    var sharedBlacklist = [
  /node_modules[/\]react[/\]dist[/\].*/,
  /website/node_modules/.*/,
  /heapCapture/bundle.js/,
  /.*/__tests__/.*/
];

    with :

    var sharedBlacklist = [
  /node_modules[/\]react[/\]dist[/\].*/,
  /website/node_modules/.*/,
  /heapCapture/bundle.js/,
  /.*/__tests__/.*/
];
    1. execute command like below on the terminal

    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

    Login or Signup to reply.
  15. 0

    This is the Gradle issue.

    update the distributionURL in app/gradle/wrapper/gradle-wrapper.properties

    from

    distributionUrl=https://services.gradle.org/distributions/gradle-6.2-all.zip

    to

    distributionUrl=https://services.gradle.org/distributions/gradle-6.6-all.zip
    Login or Signup to reply.
  16. 0

    1.- Create directory:

    android/app/src/main/assets

    2.- edit file project:

    node_modulemetro-configsrcdefaultsblacklist.js

    or RN 0.64:

    node_modulemetro-configsrcdefaultsexclusionList.js

    Replace :

    var sharedBlacklist = [
  /node_modules[/\]react[/\]dist[/\].*/,
  /website/node_modules/.*/,
  /heapCapture/bundle.js/,
  /.*/__tests__/.*/
];

    with :

    var sharedBlacklist = [
  /node_modules[/\]react[/\]dist[/\].*/,
  /website/node_modules/.*/,
  /heapCapture/bundle.js/,
  /.*/__tests__/.*/
];

    or RN 0.64

    var list = [/website/node_modules/.*/, /.*/__tests__/.*/];

    with:

    var list =  [
  /node_modules[/\]react[/\]dist[/\].*/,
  /website/node_modules/.*/,
  /heapCapture/bundle.js/,
  /.*/__tests__/.*/
];

    3.- in folder project run this:

    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

    4.- react-native run-android

    This work for me!

    Login or Signup to reply.
  17. 0

    Note: Solution for iOS

    Updating files in node_modules is not a solution. It might fix it in your machine but won’t fix it for all. Every time you reinstall the modules, you need to patch it up again.

    Problem

    When I ran yarn android the metro bundler successfully runs in a separate terminal and app runs with no issue.

    But for yarn ios, app builds and opens up in simulator but the metro-bundler could not start so app is not running.

    enter image description here

    Cause

    What I found is, react-native uses
    packages/myapp/ios/myapp.xcodeproj/project.pbxproj:178 file to organize the sequence of action for a build.

                buildPhases = (
                9BD325B29C2F37E3FB2D5CCB /* [CP] Check Pods Manifest.lock */,
                FD10A7F022414F080027D42C /* Start Packager */,
                13B07F871A680F5B00A75B9A /* Sources */,
                13B07F8C1A680F5B00A75B9A /* Frameworks */,
                13B07F8E1A680F5B00A75B9A /* Resources */,
                00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
                422396959450562FD5166D49 /* [CP] Embed Pods Frameworks */,
                3C714C11B606C47481E15B97 /* [CP] Copy Pods Resources */,

    You can see that(FD10A7F022414F080027D42C /* Start Packager */,) metro bundler is expected to run in the beginning so that app could connect to it ASAP.

    In my case, the packager could not find the metro package as my node_modules folder has changed location. So I needed to let it know the new location.

    How I solved? (Monorepo)

    I dug deep and found the solution in packages/myapp/ios/myapp.xcodeproj/project.pbxproj:395

            FD10344022414F080027D42C /* Start Packager */ = {
            ...


            ...

            shellScript = "export RCT_METRO_PORT="${RCT_METRO_PORT:=8081}"necho "export RCT_METRO_PORT=${RCT_METRO_PORT}" > "${SRCROOT}/../../../node_modules/react-native/scripts/.packager.env"nif [ -z "${RCT_NO_LAUNCH_PACKAGER+xxx}" ] ; thenn  if nc -w 5 -z localhost ${RCT_METRO_PORT} ; thenn    if ! curl -s "http://localhost:${RCT_METRO_PORT}/status" | grep -q "packager-status:running" ; thenn      echo "Port ${RCT_METRO_PORT} already in use, packager is either not running or not running correctly"n      exit 2n    fin  elsen    open "$SRCROOT/../../../node_modules/react-native/scripts/launchPackager.command" || echo "Can't start packager automatically"n  finfin";

    you might notice that I am using /../../../node_modules because I have a directory structure like

    .
└── node_modules
└── packages
    ├── common
    ├── myapp
    └── their_app

    Its normally like this ../node_modules

    what I basically doing is maintaining two mobile apps in a single repo. See https://engineering.brigad.co/react-native-monorepos-code-sharing-f6c08172b417 for more info.

    Login or Signup to reply.
  18. 0

    In my case I just stopped Metro and tried running my app again and it worked.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search