Create a Navigator Does Not Take an Argument

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?

0
Maya Lin-Takahashi
Author

Maya Lin-Takahashi

Maya is a hardware enthusiast who tests and reviews smart home devices, smartphones, wearables, and audio gear. She focuses on practical consumer value and build quality.