CODEWITHSUNDEEP
expoexpo-routerreact-navigation-top-tabs
aakashgupta.0205
aakashgupta.0205

Reputation: 687

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

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?

Upvotes: 2

Views: 1091

Answers (2)

user1987392
user1987392

Reputation: 3991

Use the redirect prop of the Tabs.Screen as such:

const Tab = createMaterialTopTabNavigator();
const showTab1 = false

// ...

<Tab.Navigator>
      <Tabs.Screen name="Tab1" redirect={!showTab1} />
      <Tabs.Screen name="Tab2" />
</Tab.Navigator>

Took me a while to figure this one out, hope it helps others.

Upvotes: 3

Torben Nordtorp
Torben Nordtorp

Reputation: 324

Have you tried simply using conditional rendering on the <Tabs.Screen> component directly?

<Tab.Navigator>
  <Tabs.Screen name="Tab1" />
  { enableTab2 && <Tabs.Screen name="Tab2" /> }
</Tab.Navigator>

Upvotes: -1

Related Questions