'How to inject NativeID to React Navigation material-top-tabs?

I am using @react-navigation/material-top-tabs to display tabs in my application. How can I inject NativeID to tabs to have an access to them with e.g. Selenium?

The only way that I found was using tabBar property, creating custom tabs and adding NativeID to TouchableOpacity. Is there more simple way?

<NavigationContainer>
    <Tab.Navigator  tabBar={(props) => <MyTabBar {...props}  />}  >
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
        <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
</NavigationContainer>

function MyTabBar({ state, descriptors, navigation, position }) {  
return (
<View  style={{ flexDirection: 'row', paddingTop: 20 }}>
  {
    state.routes.map((route, index) => {
    // ....       
    return (
      <TouchableOpacity nativeID={"tab_"+label} >
        <Animated.Text style={{ opacity }}>{label}</Animated.Text>
      </TouchableOpacity>
    );
  })}
</View>
);
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source