create a navigator does not take an argument - react-native

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

Answer 2

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