React Native Tab Navigator

Question

I am totally new to React Native and I am currently trying show BottomTabNavigator on child/details page, for example: I have a page called Training and I have another page called TrainingDetails.

I wanna show BottomTabNavigator on TrainingDetails.

On truth, I wanna show BottomTabNavigator in all pages, main pages and detail pages.

Here is my Main.js Thanks so much!

const Tab = createBottomTabNavigator();
  return (
    <Tab.Navigator tabBarOptions={{ activeTintColor: theme.colors.primary, inactiveTintColor: theme.colors.neutral_100, style: {backgroundColor: theme.colors.active} }}>
      <Tab.Screen
        options={{
          title: "Trabalhar",
          tabBarIcon: ({ focused, color, size }) => (
            <MaterialIcon name={"headset"} size={size} color={color} />
          ),
        }}
        name="Home"
        component={HomeScreen}
      />
      <Tab.Screen
        options={{
          title: "Estudar",
          tabBarIcon: ({ focused, color, size }) => (
            <SimpleLineIcon name={"graduation"} size={size} color={color} />
          ),
        }}
        name="Study"
        component={Training}
      />
      <Tab.Screen
        options={{
          title: "Notificações",
          tabBarIcon: ({ focused, color, size }) => (
            <MaterialIcon name={"bell-outline"} size={size} color={color} />
          ),
        }}
        name="Notification"
        component={HomeScreen}
      />
      <Tab.Screen
        options={{
          title: "Resultados",
          tabBarIcon: ({ focused, color, size }) => (
            <MaterialIcon name={"trending-up"} size={size} color={color} />
          ),
        }}
        name="Results"
        component={HomeScreen}
      />
      <Tab.Screen
        options={{
          title: "Carteira",
          tabBarIcon: ({ focused, color, size }) => (
            <MaterialIcon name={"wallet-outline"} size={size} color={color} />
          ),
        }}
        name="Wallet"
        component={HomeScreen}
      />
    </Tab.Navigator>
  );
};
export default Main;

score 0 · Answer 1 · edited Oct 26 '22 at 11:50

You can put a stackNavigator inside a tab navigator, so for example if you want a home screen and then another screen called details that doesn't have a tab at the bottom but still has the tabs at the bottom you can replace the home screen with a homeStack that has both a home screen and details screen inside it.

const Stack = createStackNavigator();

function HomeStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Details" component={Details} />
    </Stack.Navigator>
  );
}

and then replace your home component in the tab navigator with HomeStack component.

React Native Tab Navigator

1 Answers1