How To Hide Tab Conditionally In React-navigation?

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

Solution 1:

In React Navigation v5:

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

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

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

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

constTab = createBottomTabNavigator();

functionMyTabs() {
  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 displayedsetTimeout(() => {
    setShowTab(false);
    console.log('Hide tab');
  }, 5000);

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

exportdefaultfunctionApp() {
  return (
    <NavigationContainer><MyTabs /></NavigationContainer>
  );
}

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

Solution 2:

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.

Solution 3:

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

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

export defaultcreateAppContainer(TabHome)