create a navigator does not take an argument

I am trying to create Bottom Navigation in React Native project. But I am getting the following error.

Error: Creating a navigator doesn't take an argument. Maybe you are trying to use React Navigation 4 API with React Navigation 5?

App.js

import React from 'react'; import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs'; import { createAppContainer } from 'react-navigation'; import { Icon } from 'react-native-vector-icons'; import Accounts from './src/components/Accounts'; .... importing other screens here... const Tab = createMaterialBottomTabNavigator( { Accounts: { screen: Accounts, navigationOptions: { tabBarIcon: ({ tintColor }) => { <Icon name={'ios-home'} size={25} style={[{ color: tintColor }]} /> } } }, Categories: { screen: Categories }, Transactions: { screen: Transactions }, Budget: { screen: Budget }, Overview: { screen: Overview } }, { initialRouteName: 'Accounts', activeColor: '#f0edf6', inactiveColor: '#3e2465', barStyle: { backgroundColor: '#694fad' } } ); export default createAppContainer(Tab) 

Index.js

import React from 'react'; import { AppRegistry } from 'react-native'; import App from './App'; import { name as appName } from './app.json'; import { createStore } from 'redux'; import { Provider } from 'react-redux'; import rootReducer from './src/redux/reducers/rootReducer' const store = createStore(rootReducer) const Root = () => ( <Provider store={store}> <App /> </Provider> ) AppRegistry.registerComponent(appName, () => Root); 

I want Bottom Navigation with 5 tabs. What is the mistake in my coding?

2 Answers

in v5 creating navigators changed, createMaterialBottomTabNavigator function does not any parameters, u have to use this structure

import { NavigationContainer } from '@react-navigation/native'; import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs'; const Tab = createMaterialBottomTabNavigator(); function MyTabs() { return ( <NavigationContainer> <Tab.Navigator screenOptions={({ route }) => ({ tabBarIcon: ({ focused, color, size }) => { let iconName; if (route.name === 'Home') { iconName = focused ? 'ios-information-circle' : 'ios-information-circle-outline'; } else if (route.name === 'Settings') { iconName = focused ? 'ios-list-box' : 'ios-list'; } // You can return any component that you like here! return <Ionicons name={iconName} size={size} color={color} />; }, })} tabBarOptions={{ activeTintColor: 'tomato', inactiveTintColor: 'gray', }} > <Tab.Screen name="Home" component={HomeScreen} /> <Tab.Screen name="Settings" component={SettingsScreen} /> </Tab.Navigator> </NavigationContainer> ); } 

go here for more details

You are using v4 react-navigation and for createMaterialBottomTabNavigator you are using higher version