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?