BottomTabNavigator content is appearing twice

Question

I'm building a React-Native app with Expo. I try to implement BottomTabNavigator, but for some reason the content (TripsPage) appears twice.

this is my Implementation of the navigation:

<NavigationContainer>
        <Stack.Navigator
          initialRouteName="TripsPage"
          screenOptions={{
            headerStyle: {
              backgroundColor: Colors.primary,
            },
            headerTintColor: 'black',
            headerTitleAlign: 'center',
            headerTitleStyle: {
              fontWeight: 'bold',
              fontSize: 18,
            },
          }}
        >
          <Stack.Screen
            name="TripDetails"
            component={TripDetails}
            options={{ title: 'Trip Details' }}
          />
          <Stack.Screen
            name="TripsPage"
            component={TripsPage}
            options={{ title: 'Home' }}
          />
          <Stack.Screen
            name="MVPForm"
            component={Form}
            options={{ title: 'Trippy' }}
          />
          <Stack.Screen
            name="Result"
            component={Result}
            options={{ title: 'Car Allocation' }}
          />
        </Stack.Navigator>
      </NavigationContainer>
      <NavigationContainer>
        <Tab.Navigator>
          <Tab.Screen name="Home" component={TripsPage} />
        </Tab.Navigator>
      </NavigationContainer>

Is anyone familiar with this issue?

score 0 · Answer 1 · answered May 11 '20 at 10:20

Hello try using only one <NavigationContainer> and wrap all the navigators in that, like this:

<NavigationContainer>
    <Stack.Navigator
      initialRouteName="TripsPage"
      screenOptions={{
        headerStyle: {
          backgroundColor: Colors.primary,
        },
        headerTintColor: 'black',
        headerTitleAlign: 'center',
        headerTitleStyle: {
          fontWeight: 'bold',
          fontSize: 18,
        },
      }}
    >
      <Stack.Screen
        name="TripDetails"
        component={TripDetails}
        options={{ title: 'Trip Details' }}
      />
      <Stack.Screen
        name="TripsPage"
        component={TripsPage}
        options={{ title: 'Home' }}
      />
      <Stack.Screen
        name="MVPForm"
        component={Form}
        options={{ title: 'Trippy' }}
      />
      <Stack.Screen
        name="Result"
        component={Result}
        options={{ title: 'Car Allocation' }}
      />
    </Stack.Navigator>
    <Tab.Navigator>
      <Tab.Screen name="Home" component={TripsPage} />
    </Tab.Navigator>
  </NavigationContainer>

BottomTabNavigator content is appearing twice

1 Answers1