I'm new to React Native. I'm trying to use Router from 'react-native-router-flux'. But I got this error:
Router.js:135 Uncaught TypeError: Cannot read properties of undefined (reading 'style')
at Module../node_modules/react-native-router-flux/src/Router.js (Router.js:135)
at __webpack_require__ (bootstrap:789)
at fn (bootstrap:100)
at Module../node_modules/react-native-router-flux/src/index.js (index.js:1)
at __webpack_require__ (bootstrap:789)
My App.js:
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { Router, Scene } from 'react-native-router-flux';
export default function App() {
return (
<View style={styles.container}>
<Router>
<Scene key="root">
<Scene key="Home"
component={Home}
title="Home"
initial
/>
<Scene
key="Forgotpassword"
component={Forgotpassword}
title="Forgotpassword"
/>
</Scene>
</Router>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
}
});
My package.json:
"dependencies": {
"@react-navigation/native": "^6.0.10",
"@react-navigation/native-stack": "^6.6.2",
"expo": "~45.0.0",
"expo-status-bar": "~1.3.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-native": "0.68.2",
"react-native-paper": "^4.12.1",
"react-native-router-flux": "^4.3.1",
"react-native-safe-area-context": "^4.2.4",
"react-native-screens": "~3.11.1",
"react-native-web": "0.17.7"
},
Edit : Earlier I forgot to add styles in my question. Now I added it my question. Sorry for the inconveniences.
You gave your 'view' a style of 'styles.container' but I cannot see anywhere in your code where you defined 'styles'. You can add custom styles to your View by using the below code:
const styles = Stylesheet.create({
// Write the styles here similar to CSS but in camelcase
})
Remember to import Stylesheet from react-native in your module. If you have already defined stylesheet in your code. Please include that in your question.