Getting error while implementing Tab Navigator in React Native - reactjs

Question

Trying to create a BottomTabNavigtor in a React Native Application. This is my Navigator Code.
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { Platform } from "react-native";
import CategoriesScreen from "../screens/CategoriesScreen";
import CategoryMealScreen from "../screens/CategoryMealScreen";
import MealDetailScreen from "../screens/MealDetailScreen";
import FavoritesScreen from "../screens/FavoritesScreen";
import Colors from "../constants/colors";
const MealsNavigator = createStackNavigator(
{
Categories: {
screen: CategoriesScreen,
navigationOptions: {
title: "Meal Categories"
}
},
CategoryMeals: {
screen: CategoryMealScreen
}, MealDetail: MealDetailScreen
},
{
defaultNavigationOptions: {
headerStyle: {
backgroundColor: Platform.OS === 'android' ? Colors.primaryColor : ''
},
headerTintColor: Platform.OS === 'android' ? 'white' : Colors.primaryColor
},
}
);
const MealsFavTabNavigator = createBottomTabNavigator({
Meals: MealsNavigator,
Favorites: FavoritesScreen
});
export default createAppContainer(MealsFavTabNavigator);
Following a course for this application. Getting this error:
TypeError: (0, _native.createNavigatorFactory) is not a function.
(In '(0, _native.createNavigatorFactory)(BottomTabNavigator)',
'(0, _native.createNavigatorFactory)' is undefined)
Any Help would be appreciated. Thanks.

Answer 1

Well if you're using latest release of react-navigation, lots of things have changed:
https://reactnavigation.org/docs/en/bottom-tab-navigator.html
Now you have to use this syntax :
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
function MyTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
);
}