I'm trying to learn navigation in React-native and I want to run this code:
import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from '@react-navigation/stack';
export default class App extends Component {
render() {
return <AppContainer />;
}
}
class HomeScreen extends Component {
render() {
return (
<View style={styles.container}>
<Text>Home</Text>
</View>
);
}
}
const AppNavigator = createStackNavigator({
Home: {
screen: HomeScreen,
},
});
const AppContainer = createAppContainer(AppNavigator);
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
});
But when I try to run with android I got an error like:
Error: Creating a navigator doesn't take an argument. Maybe you are trying to use React Navigation 4 API with React Navigation 5? See .x for migration guide.
ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
After a brief research I tried re-install all dependencies and stuff. But still got an error when I tried to run "expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-munity/masked-view" >:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.0" from @react-native-munity/[email protected]
npm ERR! node_modules/@react-native-munity/masked-view
npm ERR! @react-native-munity/masked-view@"^0.1.10" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this mand with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\campo\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A plete log of this run can be found in:
npm ERR! C:\Users\campo\AppData\Local\npm-cache\_logs\2021-03-17T16_11_56_237Z-debug.log
I couldn't find any updated solution online. And finally here is my package.json file:
{
"name": "NavigationApp",
"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-native-munity/masked-view": "^0.1.10",
"@react-navigation/native": "^5.9.3",
"@react-navigation/stack": "^5.14.3",
"fbjs": "^3.0.0",
"react": "17.0.1",
"react-native": "0.64.0",
"react-native-gesture-handler": "^1.10.3",
"react-native-reanimated": "^2.0.0",
"react-native-safe-area-context": "^3.2.0",
"react-native-screens": "^2.18.1"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@babel/runtime": "^7.12.5",
"@react-native-munity/eslint-config": "^2.0.0",
"babel-jest": "^26.6.3",
"eslint": "7.14.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.64.0",
"react-navigation": "^4.1.1",
"react-test-renderer": "17.0.1"
},
"jest": {
"preset": "react-native"
}
}
I'm trying to learn navigation in React-native and I want to run this code:
import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from '@react-navigation/stack';
export default class App extends Component {
render() {
return <AppContainer />;
}
}
class HomeScreen extends Component {
render() {
return (
<View style={styles.container}>
<Text>Home</Text>
</View>
);
}
}
const AppNavigator = createStackNavigator({
Home: {
screen: HomeScreen,
},
});
const AppContainer = createAppContainer(AppNavigator);
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
});
But when I try to run with android I got an error like:
Error: Creating a navigator doesn't take an argument. Maybe you are trying to use React Navigation 4 API with React Navigation 5? See https://reactnavigation/docs/upgrading-from-4.x for migration guide.
ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
After a brief research I tried re-install all dependencies and stuff. But still got an error when I tried to run "expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-munity/masked-view" >:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.0" from @react-native-munity/[email protected]
npm ERR! node_modules/@react-native-munity/masked-view
npm ERR! @react-native-munity/masked-view@"^0.1.10" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this mand with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\campo\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A plete log of this run can be found in:
npm ERR! C:\Users\campo\AppData\Local\npm-cache\_logs\2021-03-17T16_11_56_237Z-debug.log
I couldn't find any updated solution online. And finally here is my package.json file:
{
"name": "NavigationApp",
"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-native-munity/masked-view": "^0.1.10",
"@react-navigation/native": "^5.9.3",
"@react-navigation/stack": "^5.14.3",
"fbjs": "^3.0.0",
"react": "17.0.1",
"react-native": "0.64.0",
"react-native-gesture-handler": "^1.10.3",
"react-native-reanimated": "^2.0.0",
"react-native-safe-area-context": "^3.2.0",
"react-native-screens": "^2.18.1"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@babel/runtime": "^7.12.5",
"@react-native-munity/eslint-config": "^2.0.0",
"babel-jest": "^26.6.3",
"eslint": "7.14.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.64.0",
"react-navigation": "^4.1.1",
"react-test-renderer": "17.0.1"
},
"jest": {
"preset": "react-native"
}
}
2 Answers
Reset to default 3For me the following worked:
npm install @react-native-munity/masked-view --force
I guess following code is not enough for npm to save our dependency.
npm install @react-native-munity/masked-view --force
When I also used --save option, it worked for me. Try the following:
npm install --save @react-native-munity/masked-view --force
npm install react-native-safe-area-context