@react-navigation/bottom-tabs get active tab

@react-navigation/bottom-tabs get active tab

If you are using the @react-navigation/bottom-tabs library for your React Native application, you may come across a situation where you need to get the active tab. This may be useful for various reasons such as changing the style of the active tab or performing some specific action based on the active tab.

Using the useNavigation hook

The simplest way to get the active tab is by using the useNavigation hook provided by the @react-navigation/native library. This hook returns the navigation object which contains various properties including state. The state object contains the current navigation state which includes the current route and any params passed to it.

import { useNavigation } from '@react-navigation/native';

function MyComponent() {
  const navigation = useNavigation();
  const activeTab = navigation.state.index;

  return (
    <div>
      <p>Active tab: {activeTab}</p>
    </div>
  );
}

In the above example, we are using the useNavigation hook to get the navigation object and then accessing the state.index property to get the active tab. The activeTab variable will contain the index of the active tab.

Using the useRoute hook

Another way to get the active tab is by using the useRoute hook provided by the @react-navigation/native library. This hook returns the current route object which contains various properties including key and name.

import { useRoute } from '@react-navigation/native';

function MyComponent() {
  const route = useRoute();
  const activeTab = route.key;

  return (
    <div>
      <p>Active tab: {activeTab}</p>
    </div>
  );
}

In the above example, we are using the useRoute hook to get the current route object and then accessing the key property to get the active tab. The activeTab variable will contain the key of the active tab.

Using the tabBarOnPress prop

If you are using the <Tab.Screen> component provided by the @react-navigation/bottom-tabs library, you can also get the active tab by using the tabBarOnPress prop. This prop is called whenever a tab is pressed and provides the index of the pressed tab as an argument.

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function MyComponent() {
  function handleTabPress(index) {
    console.log('Pressed tab index:', index);
  }

  return (
    <Tab.Navigator
      tabBarOptions={{ ... }}
    >
      <Tab.Screen
        name="Tab1"
        component={Tab1}
        tabBarOnPress={({ navigation, route }) => {
          handleTabPress(route.key);
          navigation.navigate(route.name);
        }}
      />
      <Tab.Screen
        name="Tab2"
        component={Tab2}
        tabBarOnPress={({ navigation, route }) => {
          handleTabPress(route.key);
          navigation.navigate(route.name);
        }}
      />
    </Tab.Navigator>
  );
}

In the above example, we are defining a handleTabPress function which will be called whenever a tab is pressed. This function takes the index of the pressed tab as an argument and logs it to the console. We are then passing this function to the tabBarOnPress prop of each <Tab.Screen> component. When a tab is pressed, the handleTabPress function will be called with the index of the pressed tab.

These are some ways you can get the active tab when using the @react-navigation/bottom-tabs library in your React Native application. Each method has its own advantages and disadvantages, so choose the one that best suits your needs.