How do I nest my tab navigator with my stack navigator in react native?

sean froelich 0
Viewed 28

Good evening,

I successfully created a project inside react native now I would like to nest my tab navigator with my stack navigator. I'm getting errors when I put my tab navigator with the stack navigator. My tab navigation code is:

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Earnings" component={EarningsScreen} />
    </Tab.Navigator>
  );
}

function Root() {
  return (
    <NavigationContainer>
      <MyTabs/>
    </NavigationContainer>
  );

My stack navigator code is:

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Notifications" component={NotificationsScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
      <Stack.Screen name="Settings" component={SettingsScreen} />
    </Stack.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyStack />
    </NavigationContainer>
  );
}
react-navigation react-native
1 Answers

It looks like you're using two separate NavigationContainers, and you're not nesting the navigators at all; the code for each is completely separate.

Given that your question is about needing the tabs within the stack, try this instead:

  • delete the Root component (you should only have one NavigationContainer in your app)
  • use the MyTabs component as one of your stack screens

Example:

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Earnings" component={EarningsScreen} />
    </Tab.Navigator>
  );
}

function MyStack() {
  return (
    <Stack.Navigator>
      {/* Tabs are inserted here */}
      <Stack.Screen name="Tabs" component={MyTabs} />
      <Stack.Screen name="Notifications" component={NotificationsScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
      <Stack.Screen name="Settings" component={SettingsScreen} />
    </Stack.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyStack />
    </NavigationContainer>
  );
}
userVqYI0
Related