navigation.navigate crashes on android

How to / Third Party Tooling
1

Unless I set animationEnabled: false the app crashes on Android when I initiate a navigation.navigate("myscreen") call. Anybody else experiencing the same thing?

“@react-navigation/bottom-tabs”: “^5.0.5”,
“@react-navigation/drawer”: “^5.0.5”,
“@react-navigation/native”: “^5.0.5”,
“@react-navigation/stack”: “^5.0.5”,

2

please share a mcve :slight_smile:

you can post it to snack if you like

1 Like
3

But I can’t make the snack work… Device: (0:0) Unable to resolve module ‘module://@react-navigation/stack.js’

4

Hi. Yes, snack doesn’t like that dependency for some reason.

However, it looks like you have a few other dependencies missing. Did you follow the expo install step shown here?

https://reactnavigation.org/docs/en/getting-started.html#installing-dependencies-into-a-bare-react-native-project

I suspect it’s crashing because you’re missing the react-native-reanimated dependency.

Also it doesn’t look like you have the NavigationContainer wrapping your app as shown at the bottom of that page.

e.g.:

diff --git App.js App.js
index a054dba..2938f24 100644
--- App.js
+++ App.js
@@ -15,6 +15,7 @@ import {
   Easing,
   Image
 } from "react-native";
+import { NavigationContainer } from '@react-navigation/native';
 import {
   createStackNavigator,
   TransitionPresets,
@@ -65,6 +66,7 @@ function WelcomePage({ navigation }) {
 
 export default function App({ navigation }) {
   return (
+    <NavigationContainer>
       <Stack.Navigator
         screenOptions={{
           animationEnabled: true,
@@ -81,6 +83,7 @@ export default function App({ navigation }) {
           component={FullstoryScreen}
         />
       </Stack.Navigator>
+    </NavigationContainer>
   );
 }
5

Oops! Forgot to add the NavigationContainer to the snack. And yes, I RTFM :smiley:

Here is my package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-native-community/masked-view": "0.1.5",
    "@react-navigation/bottom-tabs": "^5.0.5",
    "@react-navigation/drawer": "^5.0.5",
    "@react-navigation/native": "^5.0.5",
    "@react-navigation/stack": "^5.0.5",
    "expo": "^36.0.0",
    "expo-asset": "~8.0.0",
    "expo-av": "~8.0.0",
    "expo-blur": "~8.0.0",
    "expo-device": "~2.0.0",
    "expo-font": "~8.0.0",
    "expo-linear-gradient": "~8.0.0",
    "expo-localization": "~8.0.0",
    "expo-location": "~8.0.0",
    "expo-permissions": "~8.0.0",
    "expo-speech": "~8.0.0",
    "react": "16.9.0",
    "react-dom": "16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz",
    "react-native-autoheight-webview": "^1.4.1",
    "react-native-button": "^2.4.0",
    "react-native-gesture-handler": "~1.5.0",
    "react-native-modal": "^11.5.3",
    "react-native-reanimated": "~1.4.0",
    "react-native-safe-area-context": "0.6.0",
    "react-native-scalable-image": "^1.0.0",
    "react-native-screens": "2.0.0-alpha.12",
    "react-native-vector-icons": "^6.6.0",
    "react-native-web": "^0.11.7",
    "react-native-webview": "7.4.3"
  },
  "devDependencies": {
    "babel-preset-expo": "^8.0.0",
    "@babel/core": "^7.0.0"
  },
  "private": true
}

react-native-reanimated is there but are you saying that I should import it?

[EDIT]

It is actually a react-native-webview related issue:
https://github.com/react-native-community/react-native-webview/issues/575
https://github.com/react-native-community/react-native-webview/pull/854

6

hello, is your issue solved? i faced the same issue whenever i tried to start my app on android it gets crashed on android. However it’s been solved now the problem was related to react-native-screen

7

if it’s still not solved you can check it here