Get active Tab Name in material top tabs

user_9136717 0
Viewed 334
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const Tab = createMaterialTopTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      initialRouteName="Feed"
      screenOptions={{
        tabBarActiveTintColor: '#e91e63',
        tabBarLabelStyle: { fontSize: 12 },
        tabBarStyle: { backgroundColor: 'powderblue' },
      }}
    >
      <Tab.Screen
        name="Feed"
        component={Feed}
        options={{ tabBarLabel: 'Home' }}
      />
      <Tab.Screen
        name="Notifications"
        component={Notifications}
        options={{ tabBarLabel: 'Updates' }}
      />
      <Tab.Screen
        name="Profile"
        component={Profile}
        options={{ tabBarLabel: 'Profile' }}
      />
    </Tab.Navigator>
  );
}

I am using the above code. I am trying to get active tab index and name. So i can do some condition base work. but not able to get tab index and name so any help here.

react-native tabs
1 Answers

Hi~ Have you already solved it?

You just need to make a few modifications in your code.

your code

<Tab.Screen
  name="Feed"
  component={Feed}
  options={{ tabBarLabel: 'Home' }}
/>

change to this code

<Tab.Screen
  name="Feed"  
  options={{ tabBarLabel: 'Home' }}
>
 {props => <Feed {...props} />}
</Tab.Screen>

In this way, you can check 'name' and 'key' as props in the component.

example:

route:
 name: "Feed"
 key: "Feed-your key code"
 params: undefined
 Symbol(CHILD_STATE): undefined
 __proto__: Object
 __proto__: Object

Hope this helps you!

user_153187550
Related