Is there a way to check if a specific bottom tab is active before showing another component?

Question

I'm using react navigation 5 and used createBottomTabNavigator() to create a bottom tab to render the body with different components when tapped. The problem now is that I also need to show a text component only when 'Settings' tab is active and it's showing the Settings component. Is there a way to check which bottom tab is active?

I know for navigation routes there's useRoutes is there something similar?

    <Tab.Navigator
        initialRouteName="Home"
        tabBarOptions={{
          inactiveTintColor: theme.inactive,
          activeTintColor: theme.active,
        }}>
        <Tab.Screen
          name="Home"
          options={{
            tabBarIcon: ({color}) => <HomeIcon color={color} />,
          }}>
          {() => (
            <Home content={feed} />
          )}
        </Tab.Screen>
        <Tab.Screen
          name="Settings"
          component={Settings}
          options={{
            tabBarIcon: ({color}) => <SettingsIcon color={color} />,
          }}
        />
      </Tab.Navigator>

i.e. route.name === "Settings" ? this : that

score 4 · Answer 1 · answered Feb 19 '21 at 03:00

4

options={{
        tabBarIcon: ({focused}) => <SettingsIcon color={focused ? 'red' : 'blue'} />,
      }}

you could use props focused. It return True if your tab focused. Opposite, it return false

answered Feb 19 '21 at 03:00

meowww

138
7

I'm trying to render a text component when the Settings tab is active. Is there a way to check if a specific bottom tab is focused to toggle a different component? – zosozo Feb 19 '21 at 06:07
1

Yep. with focused prop, you could render any thing you want. suggest: `tabBarIcon: ({focused}) => { focused ? Setting : }` – meowww Feb 19 '21 at 06:14

score 1 · Accepted Answer · answered Mar 01 '21 at 19:48

1

The useFocusEffect() hook provided by React Navigation is the answer to my question.

https://reactnavigation.org/docs/use-focus-effect/

answered Mar 01 '21 at 19:48

zosozo

393
2
5
16

Is there a way to check if a specific bottom tab is active before showing another component?

2 Answers2