and im a beginner at coding. i folllow tutorials on youtube and other online sources. i am making an expo project that is consist of bottom tab navigator but i keep on getting an error message: Error: Creating a navigator doesn't take an argument. Maybe you are trying to use React Navigation 4 API? See https://reactnavigation.org/docs/hello-react-navigation for the latest API and guides.
Here is my app.js:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Explore from './screens/Explore';
import Saved from './screens/Saved';
import Trips from './screens/Trips';
import Inbox from './screens/Inbox';
class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}
}
export default createBottomTabNavigator({
Explore:{
screen:Explore
},
Saved:{
screen:Saved
},
Trips:{
screen:Trips
},
Inbox:{
screen:Inbox
}
})
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
and here is my package.json file:
"dependencies": {
"@react-navigation/bottom-tabs": "^6.2.0",
"@react-navigation/native": "^6.0.8",
"@react-navigation/native-stack": "^6.5.0",
"expo": "~44.0.0",
"expo-status-bar": "~1.2.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-gesture-handler": "~2.1.0",
"react-native-reanimated": "~2.3.1",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "~3.10.1",
"react-native-web": "0.17.1",
"react-navigation": "^4.4.4"
},
i followed the documentation page from react and i still didnt get to solve it, so please can someone help me out. Thanks
The way you have defined your navigator isn't correct in React Navigation 6. Instead of:
export default createBottomTabNavigator({
Explore:{
screen:Explore
},
Saved:{
screen:Saved
},
Trips:{
screen:Trips
},
Inbox:{
screen:Inbox
}
})
Do:
const Tab = createBottomTabNavigator();
export default function BottomTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Explore" component={Explore} />
<Tab.Screen name="Saved" component={Saved} />
<Tab.Screen name="Trips" component={Trips} />
<Tab.Screen name="Inbox" component={Inbox} />
</Tab.Navigator>
);
}
You should always read official documentation first, then follow third-party tutorials if you have problems understanding the documentation or want more examples.