Conditionally hide a tab in Expo Router with Material Top Tab Navigator

147 views Asked by At

I am using Expo Router along with Material Top Tab Navigator in a React Native application. I am trying to conditionally hide a tab based on a certain criterion, but setting href: null doesn't seem to work as expected.

Here's a simplified version of my code:

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { Tabs } from 'expo-router';

const Tab = createMaterialTopTabNavigator();

// ... other imports and components

export function MyTopTabNavigator({ route }) {
  // ... other logic

  return (
    <Tab.Navigator>
      <Tabs.Screen name="Tab1" />
      <Tabs.Screen name="Tab2" />
    </Tab.Navigator>
  );
}

I am not able to show the tab Tab2 conditionally based on a boolean (let's say enableTab2). What would be the correct way to conditionally hide a tab in Expo Router with Material Top Tab Navigator?

0

There are 0 answers