I'm upgrading my App from react-navigation 4 to 5.
In version 4 I have a tab that open the drawer using the following code
const MainNavigator = createBottomTabNavigator(
{
More: {
screen: AdminNavigator,
navigationOptions: {
tabBarIcon: (tabInfo) => {
//return <Ionicons name="ios-star" size={25} color={tabInfo.tintColor} />;
return (
<Icon
name="tune"
color={tabInfo.tintColor}
size={tabInfo.focused ? 32 : 28}
style={{
paddingTop: 10,
}}
/>
);
},
tabBarColor: Colors.primary,
tabBarOnPress: ({ navigation }) => {
navigation.openDrawer();
},
},
},
}
In new version 5 I have the following Navigation config
<NavigationContainer>
<Drawer.Navigator>
<Drawer.Screen name="Home" component={TabsScreen} />
<Drawer.Screen name="Favorites" component={FavoritesStackScreen} />
<Drawer.Screen name="Language" component={LanguageStackScreen} />
</Drawer.Navigator>
</NavigationContainer>
where TabScreen is my bottom tab navigator
const TabsScreen = () => (
<Tabs.Navigator>
<Tabs.Screen name={"Home"} component={HomeStackScreen} />
<Tabs.Screen name={"Cocktails"} component={CocktailsStackScreen} />
<Tabs.Screen
name={"More"}
component={HomeStackScreen}
options={{
...
}}
/>
</Tabs.Navigator>
);
I'm looking for the equivalent in V5 of the following
tabBarOnPress: ({ navigation }) => {
navigation.openDrawer();
},
Try the following:
<Tabs.Screen
name={"More"}
component={HomeStackScreen}
listeners={({ navigation }) => ({
tabPress: e => {
e.preventDefault();
navigation.openDrawer();
}
})}
/>
https://reactnavigation.org/docs/navigation-events/#listeners-prop-on-screen