react-navigation : How to hide one specific tabBar icon and label when a condtional statement is true

Question

I am using react-navigation. I have five icons for my bottomtabs navigator and I only want to show four icons(screen1,screen2,screen4 and screen 5) and hide the other(screen 3).

How can I hide the icon and the label of screen3 if and only if a conditional statement is true..?

This is my code:

const ButtomTabNavigator = createBottomTabNavigator(
  {
    screen1: {
      screen: screen1,
      navigationOptions: ({ navigation }) => ({
        tabBarLabel: 'screen1',
        header: null,
        tabBarIcon: ({ tintColor }) => (
          <FontAwesome name="gear" color={tintColor} size={30} />
        ),
      })
    },
    screen2: {
      screen: screen2,
      navigationOptions: {
        header: null,
        tabBarLabel: 'screen2',
        tabBarIcon: ({ tintColor }) => (
          <FontAwesome name="gear" color={tintColor} size={30} />
        ),
      }
    },

I want to hide this screen3 icon and label if a conditional statement is true

    screen3: {
          screen: screen3,
          navigationOptions: {
            header: null,
            tabBarLabel: 'screen3',
            tabBarIcon: ({ tintColor }) => (
              <FontAwesome name="gear" color={tintColor} size={30} />
            ),
          }
        },
    screen4: {
          screen: screen4,
          navigationOptions: {
            header: null,
            tabBarLabel: 'screen4',
            tabBarIcon: ({ tintColor }) => (
              <FontAwesome name="gear" color={tintColor} size={30} />
            ),
          }
        },
        screen5: {
          screen: screen5,
          navigationOptions: {
            header: null,
            tabBarLabel: 'screen5',
            tabBarIcon: ({ tintColor }) => (
              <FontAwesome name="gear" color={tintColor} size={30} />
            ),
          }
        },
      },
      {
        tabBarOptions: {
          activeTintColor: '#16bb92',
        },
        shifting: true,
      }
    )

Brian H. Brian H. · Accepted Answer · 2020-05-27T07:41:57

Try my solution

const routes = (condition) => {
     let routes = {
         screen1: {
            screen: screen1,
            navigationOptions: ({ navigation }) => ({
                tabBarLabel: 'screen1',
                header: null,
                tabBarIcon: ({ tintColor }) => (
                    <FontAwesome name="gear" color={tintColor} size={30} />
                ),
            })
        },
        screen2: {
            screen: screen2,
            navigationOptions: {
                header: null,
                tabBarLabel: 'screen2',
                tabBarIcon: ({ tintColor }) => (
                    <FontAwesome name="gear" color={tintColor} size={30} />
                ),
            }
        },
        screen4: {
            screen: screen4,
            navigationOptions: {
                header: null,
                tabBarLabel: 'screen4',
                tabBarIcon: ({ tintColor }) => (
                    <FontAwesome name="gear" color={tintColor} size={30} />
                ),
            }
        },
        screen5: {
            screen: screen5,
            navigationOptions: {
                header: null,
                tabBarLabel: 'screen5',
                tabBarIcon: ({ tintColor }) => (
                    <FontAwesome name="gear" color={tintColor} size={30} />
                ),
            }
        }
     }

     if (condition) {
         routes["screen3"] = {
             screen: screen3,
             navigationOptions: {
             header: null,
             tabBarLabel: 'screen3',
             tabBarIcon: ({ tintColor }) => (
                 <FontAwesome name="gear" color={tintColor} size={30} />
             ),
         }
      }
   }

   return routes;
}

Then in your navigation

const ButtomTabNavigator = createBottomTabNavigator(routes(/**Your condition**/, ....)

Hope that help :)

react-navigation : How to hide one specific tabBar icon and label when a condtional statement is true

1 Answers