create a navigator does not take an argument

Question

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?

Answer 1

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 https://reactnavigation.org/docs/en/tab-based-navigation.html