React Native Navigation: Another Navigator is already registered for this container-CodePudding

I want my component to render a TopTab Navigator on the top and also a Drawer Navigator at the same time.

So something like

<TopTab.Navigator>
 <TopTab.Screen />
</TopTab.Navigator>
<Drawer.Navigator>
 <Drawer.Screen />
</Drawer.Navigator>

However I'm getting an error of "Another navigator is already registered for this container. You likely have multiple navigators under a single "NavigationContainer" or "Screen" Make sure each navigator is under a separate "ScreenContainer"

CodePudding user response：

Why dont you try using it like this, drawerNavigator holds as the main wrapper and inside it topTab

const HomeScreen = () => {
return(
<TopTab.Navigator>
 <TopTab.Screen />
</TopTab.Navigator>

)

}

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  )
}

This should work, feel free for doubts

CodePudding user response：

You have to set Tab navigator inside drawer navigator, you can search to get better solutions like "how we use multiple navigator in react native?" visit below link https://dev.to/easybuoy/combining-stack-tab-drawer-navigations-in-react-native-with-react-navigation-5-da