How to hide Tab conditionally in react-navigation?

Question

I want to hide one of my tabs conditionally if user login,

So I have 5 Tabs If user login\register I get a boolean from a redux store, if this user login i want to how a "Library tab" if not login, i don't want to show this tab "Library" with others and just keep 4 tabs in the App

Code

import {createAppContainer} from 'react-navigation';
import {createBottomTabNavigator} from 'react-navigation-tabs';

let {isLogin} = store.getState().user;


const TabHome = createBottomTabNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        tabBarLabel: 'Home',
      },
    },
    Browse: {
      screen: Browse,
      navigationOptions: {
        tabBarLabel: 'Browse',
      },
    },
    Search: {
      screen: Search,
      navigationOptions: {
        tabBarLabel: 'Search',
        headerShown: false,
      },
    },
    Radio: {
      screen: Radio,
      navigationOptions: {
        tabBarLabel: 'Radio',
      },
    },
    Library: isLogin ? (
      {
        screen: YourLibrary,
        navigationOptions: {
          tabBarLabel: 'Library',
        },
      }
    ) : (
      <View /> // Or :null => Not work and got the under error msg
    ),
    // Library: {
    //   screen: YourLibrary,
    // },
  },
)

export default createAppContainer(TabHome);

Error: The component for route 'Library' must be a React component. For example:

import MyScreen from './MyScreen'; ... Library: MyScreen, }

You can also use a navigator:

import MyNavigator from './MyNavigator'; ... Library: MyNavigator, }

score 10 · Accepted Answer · answered Jun 12 '20 at 00:41

In React Navigation v5:

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

function HomeScreen(props) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

function AboutScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>About!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

function MyTabs() {
  const [showTab, setShowTab] = React.useState(true);

  // Show the about tab after 5 seconds.
  // Change this to use Redux or however
  // you would like to change which tabs are displayed
  setTimeout(() => {
    setShowTab(false);
    console.log('Hide tab');
  }, 5000);

  return (
    <Tab.Navigator>
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="home" color={color} size={size} />
          ),
        }}
      />
      {showTab ? (
        <Tab.Screen
          name="About"
          component={AboutScreen}
          options={{
            tabBarLabel: 'About',
            tabBarIcon: ({ color, size }) => (
              <MaterialCommunityIcons name="book" color={color} size={size} />
            ),
          }}
        />
      ) : null}
      <Tab.Screen
        name="Settings"
        component={SettingsScreen}
        options={{
          tabBarLabel: 'Settings',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="settings" color={color} size={size} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}

Example in Expo https://snack.expo.io/@jackvial/createbottomtabnavigator-%7C-react-navigation-v5

UH old days :"D,yeah that's a perfect way in V5, And that's what i was doing :"D I just forget to provide an answer here So Thank you Jack it's work very well, but notice when i check expo example in [ios](https://i.imgur.com/eZFY3yP.png) device it does not appear IDK why! but Web it's work well — Oliver D, Jun 12 '20 at 00:56
You're most welcome! I had a feeling you would have figured it out by now :D . v5 is a big improvement, currently updating my ducted taped together solution using that used v3. Hmm, not seeing the issue with iOS, I'm running chrome on mac. — Jack Vial, Jun 12 '20 at 01:03
@GWANHUIKIM In react navigation v4 my solution was to create two tab bars and use react context or redux to switch between rendering each tab bar. Each tab bar can have different tabs. — Jack Vial, Jul 24 '20 at 18:15

score 0 · Answer 2 · answered Feb 18 '20 at 18:11

You'd know that you can override the Tabbar Component and add your own logic for it? Maybe this gives you an Idea about that: https://stackoverflow.com/a/58520533/1256697

Maybe this way, you can set conditional styles to show or hide single items of your TabBar.

score 0 · Answer 3 · edited Feb 19 '20 at 10:00

0

remove Library tab definition from TabHome and add it just before exporting the component:

if(isLogin) {
  TabHome.Library = {
    screen: YourLibrary,
    navigationOptions: {
      tabBarLabel: 'Library',
    }
  }
}

export default createAppContainer(TabHome)

edited Feb 19 '20 at 10:00

dcangulo

1,888
1
16
48

answered Feb 19 '20 at 08:11

farhad

226
3
8

Hey @farhad, thank you for a response but sadly not work, It's just hidden tabs if the condition true/false – Oliver D Feb 19 '20 at 14:11

How to hide Tab conditionally in react-navigation?

3 Answers3

Linked