Couldn't register the navigator. Have you wrapped your app with 'NavigationContainer' ?

[safaribardia]

Hello! I am trying to use this but this is the error I get: Couldn't register the navigator. Have you wrapped your app with 'NavigationContainer' ?

Here is my code for my TabNavigator:

import React from "react";
import routes from "./routes";
import {View, Text, TouchableOpacity, Dimensions, StyleSheet, Image} from 'react-native'
import HomeButton from "./HomeButton";
import CardsScreen from "../screens/CardsScreen";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import AccountNavigator from "./AccountNavigator";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import defaultStyles from "../config/defaultStyles";
import HomeNavigator from "./HomeNavigator";
import { Feather } from '@expo/vector-icons'; 
import { FontAwesome5 } from '@expo/vector-icons'; 
import { MaterialIcons } from '@expo/vector-icons'; 
import { AnimatedTabBarNavigator } from "react-native-animated-nav-tab-bar";

const Tab = AnimatedTabBarNavigator();
const window = Dimensions.get("window")

const CustomTabBar = ({state, descriptors, navigation}) => {
  let button;
  return(
    <View style={styles.bottomContainer}>
      {state.routes.map((route, index) => {
        const clicked = state.index === index;
        {route.name==="Home" ? button=
        <TouchableOpacity key={route.name}  onPress={()=>{
          if (!clicked) {
            navigation.navigate(route.name);
          }
        }} 
        style={{flex: 1}}
        accessibilityRole="button"
        accessibilityState={clicked ? { selected: true } : {}}
        delayPressIn={0}
        >
            <View style={styles.homeButton}>
              <Feather name="home" size={35} color="white" /> 
            </View>
        </TouchableOpacity> 
        : 
        button=
        <TouchableOpacity key={route.name} onPress={()=>{
          if (!clicked) {
            navigation.navigate(route.name);
          }
        }} 
        style={{flex: 1}}
        accessibilityRole="button"
        accessibilityState={clicked ? { selected: true } : {}}
        delayPressIn={0}
        >
          <View style={styles.sideButton}>
            {route.name==="Account"? <FontAwesome5 name="user-circle" size={window.width*0.09} color={defaultStyles.colors.primary} />:
            <MaterialIcons name="credit-card" size={window.width*0.104} color={defaultStyles.colors.primary} />
            }
          </View>
        </TouchableOpacity>}
        return button;
      })}
    </View>
  )
}

const TabNavigator = (props) => (
    <>
      <Tab.Navigator
        initialRouteName="Home"
        barStyle={{ backgroundColor: defaultStyles.colors.white }}
        activeColor={defaultStyles.colors.white}
        tabBar={(props) => <CustomTabBar {...props}/>}
      >
        <Tab.Screen
          name="Cards"
          component={CardsScreen}
          // options={{
          //   tabBarIcon: ({ color, size }) => (
          //     <MaterialCommunityIcons
          //       name="credit-card-outline"
          //       size={27}
          //       color={color}
          //     />
          //   ),
          // }}
        />
        <Tab.Screen
          name="Home"
          component={HomeNavigator}
          // options={({ navigation }) => ({
          //   tabBarButton: () => (
          //     <HomeButton onPress={() => props.navigation.navigate(routes.HOME)} />
          //   ),
          //   headerShown: false,
          // })}
        />

        <Tab.Screen
          name="Account"
          component={AccountNavigator}
          // options={{
          //   tabBarIcon: ({ color, size }) => (
          //     <MaterialCommunityIcons name="account" size={27} color={color} />
          //   ),
          // }}
        />
      </Tab.Navigator>
    </>
  );

  const styles = StyleSheet.create({
    bottomContainer: {
      flexDirection: 'row', 
      alignItems: 'center',
      bottom: window.height*0.05,
      borderRadius: 25,
      backgroundColor: 'white',
      marginHorizontal: window.width*0.07,
      height: window.height*0.069,
      shadowColor: defaultStyles.colors.primary,
      shadowRadius: 15,
      //shadowOffset: {width: 4, height: 4},
      shadowOpacity: 0.3
    },
    homeButton: {
      width: window.width*0.213,
      height: window.width*0.213,
      backgroundColor: defaultStyles.colors.primary,
      alignSelf: 'center',
      borderRadius: window.width*0.213/2,
      alignItems: 'center',
      justifyContent: 'center',

    },
    homeIcon: {
      height: 32,
      width: 37
    },
    sideButton: {
      justifyContent: 'center',
      alignItems: 'center',
    }
  })

  export default TabNavigator;

On my App.js, I am indeed wrapping it:

      <NavigationContainer theme={NavigationTheme.DefaultAppTheme}>
        <OverflowMenuProvider>
          <AuthNavigator />
        </OverflowMenuProvider>
      </NavigationContainer>

I know that's not the issue because when I replace const Tab = AnimatedTabBarNavigator(); with const Tab = createBottomTabNavigator(); it works just fine. I also tried it using the example provided in the documentation with a really simple navigator and same error.

[torgeadelin]

Hi, could you confirm which OS are you testing with? iOS or Android?

[safaribardia]

I'm testing it on iOS 14.0 on the iPhone 11 simulator.

[safaribardia]

Should probably point out that I am also using expo!

[torgeadelin]

Ok... this is very odd. I copy pasted your code (removed imports which i don't have) and it works. I also ran it in expo with iPhone 11 simulator. Would it be possible to send me your whole project so I can debug? Since I cannot reproduce the error, I won't be able to fix it.. There are more users complaining about this so there must be an bug somewhere.

[torgeadelin]

Please also tell me which version of the library are using. Please make sure you're using the latest 3.0.5. Please confirm that

[safaribardia]

Yes! I just installed it a few hours ago so it is the latest version. Is it cool if I email it to you just so I'm not posting this on Github? Thank you!

[torgeadelin]

Thanks a bunch for offering to share your project. You can email it to me at torgeadelin@gmail.com I will have a look sometime this week.

[safaribardia]

No worries! Thanks and I will email!

[danieldeev]

I had the same problem in my project using Expo, any solution for that?

[Taikylah]

I do have the same issue on an IPhone 11 on IOS 14 too.any solution yet ?

[axelphunter]

I downgraded @react-navigation/native to ^5.1.6 and it worked

[natalyayyad]

Hello I'm facing the same issue here! Here is my code: ` import React, {useState} from 'react'; import { Platform, StyleSheet, SafeAreaView, Dimensions } from 'react-native'; import { Ionicons, Feather, FontAwesome5 } from '@expo/vector-icons'; import { NavigationContainer } from '@react-navigation/native'; import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'; import { createStackNavigator } from '@react-navigation/stack'; import { AppearanceProvider } from 'react-native-appearance'; import { AnimatedTabBarNavigator } from "react-native-animated-nav-tab-bar";

const bottomTab = AnimatedTabBarNavigator();

export default function App() { return (

  <NavigationContainer>
    <bottomTab.Navigator
      initialRouteName="Home"
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;
          let icon;

          if (route.name === 'Home') {
            iconName = focused
              ? icon = <Ionicons name={`${Platform.OS === "ios" ? "ios" : "md"}-home`} size={30} color={color} />
              : icon = <Ionicons name={`${Platform.OS === "ios" ? "ios" : "md"}-home`} size={30} color={color} />;
          } else if (route.name === 'Search') {
            iconName = focused
              ? icon = <Feather name="search" size={size} color={color} />
              : icon = <Feather name="search" size={size} color={color} />;
          }
          else if (route.name === 'History') {
            iconName = focused
              ? icon = <Ionicons name={`${Platform.OS === "ios" ? "ios" : "md"}-list`} size={30} color={color} />
              : icon = <Ionicons name={`${Platform.OS === "ios" ? "ios" : "md"}-list`} size={30} color={color} />;
          } else if (route.name === 'More') {
            iconName = focused
              ? icon = <Feather name="more-horizontal" size={size} color={color} />
              : icon = <Feather name="more-horizontal" size={size} color={color} />;
          }
          return icon;
        },
      })}
      tabBarOptions={{
        activeTintColor: Theme.COLORS.MAIN,
        inactiveTintColor: 'grey',
      }}
    >
      <bottomTab.Screen name="Home" component={TopTabsNavigator} />
      <bottomTab.Screen name="Search" component={SearchStackNavigator} />
      <bottomTab.Screen name="History" component={collapse} />
      <bottomTab.Screen name="More" component={MoreStackNavigator} />
    </bottomTab.Navigator>
  </NavigationContainer>

); } `

[trgkyle]

+1

[TheAlmightyThor]

Same issue, downgrading @react-navigation/native didn't solve the problem for me

[pastean]

works at 5.1.6

@TheAlmightyThor make sure to run the bundler with --reset-cache

[torgeadelin]

This issue should now be fixed with the latest react-navigation version ^5.9.0