CODEWITHSUNDEEP
reactjsreact-nativereact-navigationreact-navigation-v5react-navigation-bottom-tab
zosozo
zosozo

Reputation: 433

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

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

Upvotes: 2

Views: 4677

Answers (2)

zosozo
zosozo

Reputation: 433

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

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

Upvotes: 1

meowww
meowww

Reputation: 153

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

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

Upvotes: 4

Related Questions