React-native: Metro server not reachable when integrating with existing app

[oreyes598]

Description

Following the steps in https://reactnative.dev/docs/integration-with-existing-apps to integrate React Native with existing apps doesn't work. Either it's missing steps or outdated.

Issue 1: Crash with "java.lang.UnsatisfiedLinkError: couldn't find DSO to load: libhermes.so"

Issue 2: Unable to connect to Metro server even when it is already running.

React Native version:

$ react-native info
info Fetching system and libraries information...
System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz
    Memory: 30.73 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 13.12.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.4 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.8.4 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
    Android SDK:
      API Levels: 28, 29
      Build Tools: 28.0.3, 29.0.2
      System Images: android-29 | Google Play Intel x86 Atom
      Android NDK: 21.0.6113669
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6308749
    Xcode: 10.3/10G8 - /usr/bin/xcodebuild
  Languages:
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0 
    react-native: ^0.62.1 => 0.62.1 
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

• Created Android project with Empty Activity

  Commit: https://github.com/oreyes598/YARNAppIssue/commit/40e003bee46e265ac347bcb1f2e3fcee554b579c

• Added package.json

  Commit: https://github.com/oreyes598/YARNAppIssue/commit/89d6d9f46e1c5e9fb2f1ce93b4caa621671f4380

• Added react-native by running the command in the terminal

  yarn add react-native

• See all these warning

[1/4] 🔍  Resolving packages...
warning react-native > fbjs > [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
warning react-native > create-react-class > fbjs > [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
warning react-native > fbjs-scripts > [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
warning react-native > metro-babel-register > [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
warning react-native > @react-native-community/cli > metro-core > jest-haste-map > micromatch > snapdragon > source-map-resolve > [email protected]: Please see https://github.com/lydell/urix#deprecated
warning react-native > @react-native-community/cli > metro-core > jest-haste-map > micromatch > snapdragon > source-map-resolve > [email protected]: https://github.com/lydell/resolve-url#deprecated
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "react-native > [email protected]" has unmet peer dependency "@babel/core@*".
warning "react-native > [email protected]" has unmet peer dependency "react@^16.8.0".
warning " > [email protected]" has unmet peer dependency "[email protected]".

• Resolved all warnings by running these commands

  $ yarn add core-js@3

  $ yarn add @babel/core@*

  $ yarn add [email protected]

  Commit: https://github.com/oreyes598/YARNAppIssue/commit/e8a487ed5e82c4cf5936b670ded63974ba6ab5b0

• Added dependencies to Android app build.gradle and repository in root build.gradle project

  Commit: https://github.com/oreyes598/YARNAppIssue/commit/b8bed2b8d263da3992d8c426db7247ba490847ba

• Updated AndroidManifest file to add permissions and Actvity

  Commit: https://github.com/oreyes598/YARNAppIssue/commit/1eed5ba318a6ff1c14bd7f6b10d92790ccb49c43

• Created ReactNative Activity in the Android project

  Commit: https://github.com/oreyes598/YARNAppIssue/commit/2280efa1cde06ac5445beea04f2bc5c8d701f51c

• Added a button in the MainActivity to start the MyReactActivity

  Commit: https://github.com/oreyes598/YARNAppIssue/commit/9d41ac099a2b5d50bd5080c703cf23013c7d844c

• Now ready to run the application. Started Metro server

  yarn start

• ISSUE #1: In Android Studio, ran the app and clicked the button to start the MyReactActivity but encountered this crash. Also attempted to start the app just using 'npx react-native run-android' and the same issue.

2020-04-03 14:44:55.688 3337-3438/com.yarn.appissue D/SoLoader: About to load: libhermes.so
2020-04-03 14:44:55.691 3337-3438/com.yarn.appissue D/SoLoader: libhermes.so not found on /data/data/com.yarn.appissue/lib-main
2020-04-03 14:44:55.692 3337-3438/com.yarn.appissue D/SoLoader: libhermes.so not found on /data/app/com.yarn.appissue-kDz7svHCD1g1jexnsvDB3A==/lib/x86
2020-04-03 14:44:55.709 3337-3438/com.yarn.appissue D/SoLoader: libhermes.so not found on /vendor/lib
2020-04-03 14:44:55.709 3337-3438/com.yarn.appissue D/SoLoader: libhermes.so not found on /system/lib
2020-04-03 14:44:55.722 3337-3438/com.yarn.appissue E/SoLoader: couldn't find DSO to load: libhermes.so

    --------- beginning of crash
2020-04-03 14:44:55.723 3337-3438/com.yarn.appissue E/AndroidRuntime: FATAL EXCEPTION: create_react_context
    Process: com.yarn.appissue, PID: 3337
    java.lang.UnsatisfiedLinkError: couldn't find DSO to load: libhermes.so
        at com.facebook.soloader.SoLoader.doLoadLibraryBySoName(SoLoader.java:789)
        at com.facebook.soloader.SoLoader.loadLibraryBySoName(SoLoader.java:639)
        at com.facebook.soloader.SoLoader.loadLibrary(SoLoader.java:577)
        at com.facebook.soloader.SoLoader.loadLibrary(SoLoader.java:525)
        at com.facebook.hermes.reactexecutor.HermesExecutor.<clinit>(HermesExecutor.java:20)
        at com.facebook.hermes.reactexecutor.HermesExecutorFactory.create(HermesExecutorFactory.java:29)
        at com.facebook.react.ReactInstanceManager$5.run(ReactInstanceManager.java:997)
        at java.lang.Thread.run(Thread.java:919)

• ISSUE #2: Updated root project gradle.build and app gradle.build to add android-jsc support and that stopped the crash above from happening but getting new crash now.

  Commit: https://github.com/oreyes598/YARNAppIssue/commit/511754990215d73745915897e111c124627cee5e

2020-04-03 14:57:34.887 3986-3986/com.yarn.appissue D/ReactNative: ReactInstanceManager.createReactContextInBackground()
2020-04-03 14:57:34.887 3986-3986/com.yarn.appissue D/ReactNative: ReactInstanceManager.recreateReactContextInBackgroundInner()
2020-04-03 14:57:34.935 3986-4052/com.yarn.appissue W/unknown:ReactNative: The packager does not seem to be running as we got an IOException requesting its status: socket failed: EPERM (Operation not permitted)
2020-04-03 14:57:34.940 3986-4051/com.yarn.appissue W/unknown:InspectorPackagerConnection: Couldn't connect to packager, will silently retry
2020-04-03 14:57:34.943 3986-4050/com.yarn.appissue W/unknown:ReconnectingWebSocket: Couldn't connect to "ws://10.0.2.2:8081/message?device=Android%20SDK%20built%20for%20x86%20-%2010%20-%20API%2029&app=com.yarn.appissue&clientid=DevSupportManagerImpl", will silently retry
2020-04-03 14:57:34.948 3986-3986/com.yarn.appissue W/unknown:ReactNative: Packager connection already open, nooping.
:
2020-04-03 14:57:35.061 3986-4054/com.yarn.appissue D/ReactNative: CatalystInstanceImpl.runJSBundle()
2020-04-03 14:57:35.065 3986-4054/com.yarn.appissue E/unknown:ReactNative: Exception in native call
    java.lang.RuntimeException: Unable to load script. Make sure you're either running a Metro server (run 'react-native start') or that your bundle 'index.android.bundle' is packaged correctly for release.
        at com.facebook.react.bridge.CatalystInstanceImpl.jniLoadScriptFromAssets(Native Method)
        at com.facebook.react.bridge.CatalystInstanceImpl.loadScriptFromAssets(CatalystInstanceImpl.java:235)
        at com.facebook.react.bridge.JSBundleLoader$1.loadScript(JSBundleLoader.java:29)
        at com.facebook.react.bridge.CatalystInstanceImpl.runJSBundle(CatalystInstanceImpl.java:259)
        at com.facebook.react.ReactInstanceManager.createReactContext(ReactInstanceManager.java:1243)
        at com.facebook.react.ReactInstanceManager.access$1000(ReactInstanceManager.java:132)
        at com.facebook.react.ReactInstanceManager$5.run(ReactInstanceManager.java:996)
        at java.lang.Thread.run(Thread.java:919)

• NOTE: Metro server is running and even accessible in browser http://localhost:8081/. Getting "React Native packager is running." message when loaded in the browser.

• After several search for this issue and not able to find solution I ended up not relying on Metro server to get JavaScript code so just added it to the Android project. Ran the command below to bundle the JavaScript code to Android project.

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/

Commit: https://github.com/oreyes598/YARNAppIssue/commit/9dab535e63756ddbb1e1c236c0a4542ab71a4adb

Expected Results

Expected Result 1: Feedback whether it is really needed to add support for android-jsc and configure the project as such.

Expected Result 2: Should be able to connect to Metro server for online development of React Native application.

Snack, code example, screenshot, or link to a repository:

Sample Project: https://github.com/oreyes598/YARNAppIssue

Note: This project is working but solution/workaround added may not be the right approach so need feedback and/or maybe documentation needs updating.

[lylest]

same problem here

[uditvishnoi2]

@oreyes598 Did you find any solution ?

[danielfx90]

Same here. Metro says it can not connect (typical red screen), but when I write down the exact same URL in the browser, it reaches my laptop and comes back with the code.

I am using a Motorola G7 Plus, which has an USB-C port. Connecting through WIFI shows the same results. Android 10.

Done the following from command line:

$ adb devices
    # It shows my device
$ adb reverse tcp:8081 tcp:8081
$ fastlane dev
    # this just assembles a debug apk for local env
$ adb install -r <path-to-debug-apk>
    # the app icon shows on device
$ node node_modules/react-native/local-cli/cli.js start --reset-cache
    # the server loads the dependency graph

[uditvishnoi2]

For everyone, who is facing this issue, I was able to build the project using the steps provided on https://reactnative.dev/docs/integration-with-existing-apps.

Two things which was missed earlier :

1. Apply the usesCleartextTraffic option to your Debug AndroidManifest.xml.

** Do not ignore this line , the usesCleartextTraffic should be added in debug folder , androidmanifest.xml file , otherwise metro bundler won't able to connect.

1. Be careful to use your package’s BuildConfig and not the one from the facebook package.

** Important , import the buildconfig from your project , not from facebook.

Hope it will save someone time. cheers

[oreyes598]

@uditvishnoi2 In the sample I have, I don't have debug folder so I don't have another AndroidManifest.xml there. Are you saying that adding Debug folder/variant and adding AndroidManifest.xml there helped resolve the issue?

Here's the src directory for the sample project showing it only has main, https://github.com/oreyes598/YARNAppIssue/tree/master/android/app/src

[rebirthtobi]

Any solution to this, i am also experiencing this right now, App crashes immediately after startup and when i check the logcat i get

    java.lang.RuntimeException: Unable to load script. Make sure you're either running a Metro server (run 'react-native start') or that your bundle 'index.android.bundle' is packaged correctly for release.
        at com.facebook.react.bridge.CatalystInstanceImpl.jniLoadScriptFromAssets(Native Method)
        at com.facebook.react.bridge.CatalystInstanceImpl.loadScriptFromAssets(CatalystInstanceImpl.java:227)
        at com.facebook.react.bridge.JSBundleLoader$1.loadScript(JSBundleLoader.java:28)

[uditvishnoi2]

@oreyes598 It will be better to create project from scratch , using : npx react-native init AwesomeProject and copy the existing code in it. Debug folder ,is created using buck , which is located under app folder.

[oreyes598]

@uditvishnoi2 Thanks for the suggestion and that will most likely work for simple existing projects that's easy to move to another project. But for a big complex project I was hoping to avoid that and follow the given instructions.

[rebirthtobi]

I was able to resolve this issue by removing the build import from MainActivity in Android

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.