'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 |
|---|
