Get active Tab Name in material top tabs - react-native

Question

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.

Answer 1

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!