How can I customise the TabBar while keeping some routes hidden?

[patrick91]

I have this layout:

export default function HomeLayout() {
  return (
    <Tabs
      screenOptions={{
        headerShown: false,
      }}
      tabBar={TabBar}
    >
      <Tabs.Screen
        name="room/[id]"
        options={{
          href: null,
        }}
      />
    </Tabs>
  );
}

My TabBar looks something like this:

import { TouchableOpacity, View, Text } from "react-native";

import { BottomTabBarProps } from "@react-navigation/bottom-tabs";
import tw from "../lib/tailwind";

export const TabBar = ({
  state,
  descriptors,
  navigation,
  ...rest
}: BottomTabBarProps) => {
  return (
    <View
      style={tw`border-2 rounded-3xl mx-6 mb-8 flex-row absolute bottom-0 bg-white`}
    >
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];

        const label =
          options.tabBarLabel !== undefined
            ? options.tabBarLabel
            : options.title !== undefined
            ? options.title
            : route.name;

        const isFocused = state.index === index;

        const onPress = () => {
          const event = navigation.emit({
            type: "tabPress",
            target: route.key,
            canPreventDefault: true,
          });

          if (!isFocused && !event.defaultPrevented) {
            // The `merge: true` option makes sure that the params inside the tab screen are preserved
            // @ts-ignore
            navigation.navigate({ name: route.name, merge: true });
          }
        };

        const onLongPress = () => {
          navigation.emit({
            type: "tabLongPress",
            target: route.key,
          });
        };

        return (
          <TouchableOpacity
            accessibilityRole="button"
            accessibilityState={isFocused ? { selected: true } : {}}
            accessibilityLabel={options.tabBarAccessibilityLabel}
            testID={options.tabBarTestID}
            onPress={onPress}
            onLongPress={onLongPress}
            key={route.key}
          >
            <Text>
              {label}
            </Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
};

which works, but it shows all the routes, including the one I marked with href: null, so I wonder if I'm doing something wrong?

[stefanosandes]

You can iterate descriptors:

{Object.entries(props.descriptors).map((descriptor) => (
  <View key={descriptor[1].route.key}>
    <Text>{descriptor[1].options.title}</Text>
  </View>
))}

[sitiom]

Check if the rendered button from tabBarButton is null:

state.routes.filter(
  (route) =>
    descriptors[route.key].options.tabBarButton?.({
      children: undefined,
    }) !== null
  ),
}}

[Chamberlainfrancis]

for some reasons, setting href: null doesn't solve the problem especially when you are using a customised tabBar.

in my case what works is to filter and remove routes with the title you want to hide from your code.

See example:

<Wrapper containerWidth={width}>
      {state.routes
        .filter((route: any) => {
          const { options } = descriptors[route.key];
          return options.title !== "explore";
        })
        .map((route: any, index: Key) => {
          const { options } = descriptors[route.key];

          
        return (
          <TouchableOpacity
            key={index}
            onPress={onPress}
            style={{ flex: 1, marginVertical: 10 }}
          >
            <Navigation
              isFocused={isFocused}
              label={label}
              options={options}
            />
          </TouchableOpacity>
        );
      })}
  </Wrapper>