title: React Native: createBottomTabNavigator is not working
body: <p>I placed all of my navigation inside a <code>navigation/MealsNavigator.js</code> file:</p>
  <pre><code>import React from 'react';
  import { NavigationContainer } from '@react-navigation/native';
  import { createStackNavigator } from '@react-navigation/stack';
  
  import CategoriesScreen from '../screens/CategoriesScreen';
  import CategoryMealsScreen from '../screens/CategoryMealsScreen';
  import MealDetailScreen from '../screens/MealDetailScreen';
  
  import FavoritesScreen from '../screens/FavoritesScreen';
  
  import HeaderButton from '../components/HeaderButton';
  import { HeaderButtons, Item } from 'react-navigation-header-buttons';
  
  import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
  
  import { CATEGORIES } from '../data/dummy-data';
  
  import Colors from '../constants/colors';
  
  const MealsNav = createStackNavigator();
  
  const MealsNavigator = () =&gt; {
      return (
          &lt;NavigationContainer&gt;
              &lt;MealsNav.Navigator
                  mode=&quot;modal&quot;
                  screenOptions={{
                      headerStyle: {
                          backgroundColor: Colors.primaryColor,
                      },
                      headerTintColor: '#fff',
                      headerTitleStyle: {
                          fontSize: 17
                      }
                  }}
              &gt;
                  &lt;MealsNav.Screen
                      name=&quot;Categories&quot;
                      component={CategoriesScreen}
                      options={{
                          title: 'Meals Categories'
                      }}
  
                  /&gt;
                  &lt;MealsNav.Screen
                      name=&quot;CategoryMeals&quot;
                      component={CategoryMealsScreen}
                      options={({ route }) =&gt; {
                          const catId = route.params.categoryId;
                          const selectedCategory = CATEGORIES.find((cat) =&gt; cat.id === catId);
  
                          return {
                              title: selectedCategory.title,
                          };
  
                      }}
                  /&gt;
                  &lt;MealsNav.Screen
                      name=&quot;MealDetail&quot;
                      component={MealDetailScreen}
                      options={{
                          title: 'Meal Detail',
                          headerRight: () =&gt; (
                              &lt;HeaderButtons HeaderButtonComponent={HeaderButton}&gt;
                                  &lt;Item
                                      title='Favorite'
                                      iconName='ios-star'
                                      onPress={() =&gt; console.log('Mark as the favorite')}
                                  /&gt;
                              &lt;/HeaderButtons&gt;
                          ),
                      }}
                  /&gt;
              &lt;/MealsNav.Navigator&gt;
          &lt;/NavigationContainer&gt;
      );
  };
  
  const MealsFavTabNavigator = createBottomTabNavigator();
  
  const MealsTabNav = () =&gt; {
      return (
          &lt;MealsFavTabNavigator.Navigator&gt;
            &lt;MealsFavTabNavigator.Screen name=&quot;Meals&quot; component={MealsNavigator} /&gt;
            &lt;MealsFavTabNavigator.Screen name=&quot;Favorites&quot; component={FavoritesScreen} /&gt;
          &lt;/MealsFavTabNavigator.Navigator&gt;
        );
  };
  
  
  export default MealsTabNav;
  </code></pre>
  <p>I tried to follow the documentation here: <a href="https://reactnavigation.org/docs/bottom-tab-navigator/" rel="nofollow noreferrer">https://reactnavigation.org/docs/bottom-tab-navigator/</a></p>
  <p>And the responsible for the bottom tabs is this part of the code:</p>
  <pre><code>const MealsFavTabNavigator = createBottomTabNavigator();
  
  const MealsTabNav = () =&gt; {
      return (
          &lt;MealsFavTabNavigator.Navigator&gt;
            &lt;MealsFavTabNavigator.Screen name=&quot;Meals&quot; component={MealsNavigator} /&gt;
            &lt;MealsFavTabNavigator.Screen name=&quot;Favorites&quot; component={FavoritesScreen} /&gt;
          &lt;/MealsFavTabNavigator.Navigator&gt;
        );
  };
  export default MealsTabNav;
  </code></pre>
  <p>At first, I thought I am following through the docs until it threw me an error:</p>
  <pre><code>could not register the navigator. Have you wrapped your app with &quot;NavigationContainer&quot;?
  </code></pre>
  <p>I included all the necessary files but still I am getting these errors. Any idea how to fix this?</p>
  <p>Beginner here.</p>