How can i hide a tab in bottom navigation - react native

Question

Can someone please advise how can i hide a tab from display in Bottom Navigation, i want to jumpTo the tab from code but i don't want it show in the Bottom Navigation. Below is some code i am using, i just want to hide the vehicle_edit tab from bottom but i want to keep using it in my code via jumpTo,

please if someone can advise.

//routes
const [routes] = React.useState([
{ key: "dashboard", title: "Dashboard", icon: "home" },
{ key: "notifications", title: "Notifications", icon: "bell" },
{ key: "account", title: "My Account", icon: "account" },
{ key: "vehicle_edit", title: "Vehicles", icon: "car" },
{ key: "appointments", title: "Appointments", icon: "calendar" },
]);

//set bottom tab to first always
useEffect(() => {
setIndex(0);
}, []);

//screens
const renderScene = BottomNavigation.SceneMap({
dashboard: DashboardScreen,
notifications: NotificationsScreen,
account: AccountScreen,
vehicle_edit: VehicleEditScreen,
appointments: AppointmentsScreen,
});

//render
return <BottomNavigation navigationState={{ index, routes }} onIndexChange={setIndex} renderScene={renderScene} />;

score 1 · Accepted Answer · answered Dec 12 '21 at 12:48

1

react-native-paper Bottom Navigation component design for only for Bottom navigation screen.

You need stack navigation for vehicle_edit. You can simply achieve this by using React navigation stack navigator

answered Dec 12 '21 at 12:48

Fiston Emmanuel

4,242
1
8
14

Great. Glad you figure it out. Can you confirm this answer to future developers who have some issues? Thanks. – Fiston Emmanuel Dec 12 '21 at 13:14
yes posted it below if you can also answer this question i have please @BYIRINGIRO Emmanuel https://stackoverflow.com/questions/70323936/react-native-login-and-loggedin-navigation-correct-way-advise – Gss86 Dec 12 '21 at 13:21

score 0 · Answer 2 · answered Dec 12 '21 at 13:15

Brilliant thanks that solved it..

const Stack = createStackNavigator();
const Account = () => {
  return (
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      <Stack.Screen name="Account" component={AccountScreen} />
      <Stack.Screen name="VehicleEdit" component={VehicleEditScreen} />
    </Stack.Navigator>
  );
};
//screens
  const renderScene = BottomNavigation.SceneMap({
    dashboard: DashboardScreen,
    notifications: NotificationsScreen,
    account: Account,
    appointments: AppointmentsScreen, 
  });

How can i hide a tab in bottom navigation - react native

2 Answers2