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 ponent for route 'Library' must be a React ponent. For example:

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

You can also use a navigator:

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

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 ponent for route 'Library' must be a React ponent. For example:

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

You can also use a navigator:

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

• javascript
• react-native
• react-navigation

3 Answers 3

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"
        ponent={HomeScreen}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="home" color={color} size={size} />
          ),
        }}
      />
      {showTab ? (
        <Tab.Screen
          name="About"
          ponent={AboutScreen}
          options={{
            tabBarLabel: 'About',
            tabBarIcon: ({ color, size }) => (
              <MaterialCommunityIcons name="book" color={color} size={size} />
            ),
          }}
        />
      ) : null}
      <Tab.Screen
        name="Settings"
        ponent={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

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./a/58520533/1256697

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

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

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

export default createAppContainer(TabHome)