React Native: app doesn't load, but no error messages, after installing react-navigation

Question

I followed all the steps in React Native's get started page, including running npx react-native init AwesomeProject to create a starter project. (I'm following the steps for "React Native CLI Quickstart" / "macOS" / "Android"). Then I open up Android Studio, start the emulator, cd into the project's folder, and run npx react-native run-android . Everything works fine. I get to tweak the starter project here and there, reload, and everything works.

But I need to use React Navigation. I follow the steps here and apparently React Navigation is installed without any issues. Then when I run npx react-native run-android again the thing builds successfully and that Metro thing - that separate Terminal tab/window - says "done". But the emulator doesn't show my app. For a second it shows a blank page and then that disappears and I get the emulator's home screen. That's even if I don't tweak the starter code at all - I'm not even trying to import React Navigation, all I need to do to cause this error is to have it installed.

Here's what my Terminal tabs look like after npx react-native run-android :

I've tried closing Terminal and Android Studio after installing React Navigation. Same thing.

I'm using macOS 10.15.3 and Android Studio 3.5.3.

What am I doing wrong?

Answer 1

I was also seeing this issue.

Aside: I used Android Studio's logcat to see any errors produced when launching my app. My logcat contained the following errors. Although this didn't really help me much.

--------- beginning of crash
2020-05-04 12:14:45.284 6139-6170/com.gettingstarted E/AndroidRuntime: FATAL EXCEPTION: FlipperConnectionThread
    Process: com.gettingstarted, PID: 6139
    java.lang.NoClassDefFoundError: <clinit> failed for class com.facebook.flipper.android.EventBase; see exception in other thread
        at com.facebook.flipper.android.FlipperThread.run(FlipperThread.java:25)
2020-05-04 12:14:45.285 6139-6169/com.gettingstarted E/AndroidRuntime: FATAL EXCEPTION: FlipperEventBaseThread
    Process: com.gettingstarted, PID: 6139
    java.lang.UnsatisfiedLinkError: couldn't find DSO to load: libfbjni.so result: 0
        at com.facebook.soloader.SoLoader.doLoadLibraryBySoName(SoLoader.java:825)
        at com.facebook.soloader.SoLoader.loadLibraryBySoName(SoLoader.java:673)
        at com.facebook.soloader.SoLoader.loadLibrary(SoLoader.java:611)
        at com.facebook.soloader.SoLoader.loadLibrary(SoLoader.java:559)
        at com.facebook.soloader.NativeLoaderToSoLoaderDelegate.loadLibrary(NativeLoaderToSoLoaderDelegate.java:25)
        at com.facebook.soloader.nativeloader.NativeLoader.loadLibrary(NativeLoader.java:44)
        at com.facebook.jni.HybridData.<clinit>(HybridData.java:34)
        at com.facebook.flipper.android.FlipperThread.run(FlipperThread.java:25)
2020-05-04 12:14:45.416 6171-6178/? E/.gettingstarte: Failed to send DDMS packet REAQ to debugger (-1 of 20): Broken pipe
2020-05-04 12:14:45.709 6171-6171/? E/SoLoader: couldn't find DSO to load: libjscexecutor.so result: 0
2020-05-04 12:14:45.800 6171-6203/? E/SoLoader: couldn't find DSO to load: libfbjni.so result: 0
2020-05-04 12:14:45.801 6171-6204/? E/AndroidRuntime: FATAL EXCEPTION: FlipperConnectionThread
    Process: com.gettingstarted, PID: 6171
    java.lang.NoClassDefFoundError: <clinit> failed for class com.facebook.flipper.android.EventBase; see exception in other thread
        at com.facebook.flipper.android.FlipperThread.run(FlipperThread.java:25)
2020-05-04 12:14:45.801 6171-6203/? E/AndroidRuntime: FATAL EXCEPTION: FlipperEventBaseThread
    Process: com.gettingstarted, PID: 6171
    java.lang.UnsatisfiedLinkError: couldn't find DSO to load: libfbjni.so result: 0
        at com.facebook.soloader.SoLoader.doLoadLibraryBySoName(SoLoader.java:825)
        at com.facebook.soloader.SoLoader.loadLibraryBySoName(SoLoader.java:673)
        at com.facebook.soloader.SoLoader.loadLibrary(SoLoader.java:611)
        at com.facebook.soloader.SoLoader.loadLibrary(SoLoader.java:559)
        at com.facebook.soloader.NativeLoaderToSoLoaderDelegate.loadLibrary(NativeLoaderToSoLoaderDelegate.java:25)
        at com.facebook.soloader.nativeloader.NativeLoader.loadLibrary(NativeLoader.java:44)
        at com.facebook.jni.HybridData.<clinit>(HybridData.java:34)
        at com.facebook.flipper.android.FlipperThread.run(FlipperThread.java:25)
2020-05-04 12:14:45.817 1656-1656/? E/lowmemorykiller: Error writing /proc/6171/oom_score_adj; errno=22
2020-05-04 12:14:45.905 1775-1804/? E/SurfaceFlinger: ro.sf.lcd_density must be defined as a build property

Searching the.net I found some people saying about cleaning your environment. Therefore I did the following

• created a new emulator: no change issue still presented
• remove "node_modules" and "package-lock.json" and then run "npm install": no change
  issue still presented
• cleaned all caches/"node_modules"/"package-lock.json": no change issue still presented
  • removed metro cache (on my machine it was in "rm -rf $TEMP/metro-cache", other people say its in "rm -rf $TEMP/metro-bundler-cache-*")
  • other people say to remove "rm -rf $TEMP/react-native-packager-cache-*" but there was no "react-native-packager-cache" folder on my windows machine
  • remove node_modules and package-lock.json and then run "npm install"
  • "npm cache clean --force"

I did however finally get a working environment

• delete "node_modules" and "package-lock.json"
• "npm install"
• "cd android"
• "gradle clean"
• back at root run the app

For me it seemed that cleaning the gradle cache from under Android was the key step.

Answer 2

1. Before build your app run "adb devices" and check if emulator shows up in the list. If it doens't that's the problem.

2. I know you said that you followed everything on React Navigation Documentation, but make sure you didn't skip what's bellow:

To finalize installation of react-native-gesture-handler, add the following at the top (make sure it's at the top and there's nothing else before it) of your entry file, such as index.js or App.js:

import 'react-native-gesture-handler';

Note: If you skip this step, your app may crash in production even if it works fine in development.

Answer 3

I was able to fix the problem using like this:

1. npm install react-navigation

2. expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

3. npm install react-navigation-stack @react-native-community/masked-view

4. expo r -c

Also we aware that createStackNavigator was move to 'react-navigation-stack':

import { createStackNavigator } from 'react-navigation-stack';