How to hide a tab from bottom navigation bar in expo?

36 Views Asked by At

I have three main pages in my expo (sdk50) application and I want to nest some tabs inside the home route. I want the bottom navigation bar to show Home, Tests, and Settings. But if I nest a route inside Home folder it shows the nested files in the navigation bar. How can I hide it? I added the tabBarShowLabel: false property to try to hide it but it didn't work despite restarting the application to apply changes. Is there any other way to do it?

export default function TabsLayout() {
  return (
    <Tabs screenOptions={{ tabBarActiveTintColor: "#404ae3" }}>
      <Tabs.Screen
        name="home/index"
        options={{
          title: "Home",
          tabBarIcon: ({ color }) => <FontAwesome name="home" size={28} color={color} />,
        }}
      />
      <Tabs.Screen
        name="tests/index"
        options={{
          title: "Tests",
          tabBarIcon: ({ color }) => <FontAwesome name="pencil" size={28} color={color} />,
        }}
      />
      <Tabs.Screen
        name="settings/index"
        options={{
          title: "Settings",
          tabBarIcon: ({ color }) => <FontAwesome name="cog" size={28} color={color} />,
        }}
      />
      <Tabs.Screen name="home/course/[id]" options={{ tabBarShowLabel: false }} />
    </Tabs>
  );
}
0

There are 0 best solutions below