How to avoid having createStackNavigator crash react-native app?

user_518012 0
Viewed 2346

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?

react-native-ios react-native-navigation react-native
2 Answers

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>
  );
}
user_81822480

in the app.js you have to import the components if they are not present in that file. also you will need a navigationContainer wrapping the app.js code, indicating that these areas can be navigated. and you will need an event to navigate of course, a button perhaps, igniting the event and you will need a function. So the navigation.navigate in the docs isnt working but when you change that to push it works. However, it just pushes another screen to your stack. You are not navigating among the existing screens you've created. I'd say just go for the react-router. maybe use an older version of react-nav. v5 seems to be broken.

user_148976050
Related