How to avoid having createStackNavigator crash react-native app? - react-native

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?

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

Answer 2

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.