How to avoid having createStackNavigator crash react-native app?

Question

I'm trying to implement a basic stack navigation using createStackNavigator:

App.js

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

const Stack = createStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Notifications" component={Notifications} />
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}

When I run this on my Mac (Big Sur), I get this error in the Metro console:

[Mon Jan 25 2021 19:21:42.268]  BUNDLE  ./index.js 

[Mon Jan 25 2021 19:21:44.595]  ERROR    TypeError: null is not an object (evaluating '_RNGestureHandlerModule.default.Direction')
[Mon Jan 25 2021 19:21:44.596]  ERROR    Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)
[Mon Jan 25 2021 19:21:45.600]  ERROR    Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)

Here is my package.json:

{
  "name": "stack_navigation",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-navigation/stack": "^5.14.2",
    "react": "16.13.1",
    "react-native": "0.63.4"
  },
  "devDependencies": {
    "@babel/core": "7.12.10",
    "@babel/runtime": "7.12.5",
    "@react-native-community/eslint-config": "1.1.0",
    "babel-jest": "25.5.1",
    "eslint": "6.8.0",
    "jest": "25.5.4",
    "metro-react-native-babel-preset": "0.59.0",
    "react-test-renderer": "16.13.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

Is there anything I can do to be able using createStackNavigator without crashing?

question from:https://stackoverflow.com/questions/65894759/how-to-avoid-having-createstacknavigator-crash-react-native-app

Answer 1

In react-navigation installation guide they mentioned that, with react navigation you have to install some other dependencies as well.

So first install these library as well with react-natvigation :

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

If you are on android auto linking will done automatically, if you are on ios you have to run:

pod install

Now, import react-native-gesture-handle on your app top of the file like in app.js or index.js :

import 'react-native-gesture-handler';

As documentation mentioned you have to do this, you can not skip this installation step if you are building app for android or ios:

Note: If you are building for Android or iOS, do not skip this step, or your app may crash in production even if it works fine in development. This is not applicable to other platforms.

And last you need to wrap the whole app in NavigationContainer. Usually you'd do this in your entry file, such as index.js or App.js:

import 'react-native-gesture-handler';
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
  );
}