I'm working on a simple app and have now added drawer navigation, but I'm having a weird problem with the drawer that opens again after navigating to the screen from the drawer content.
PlayerZone is a BottomTabNavigation that contains Profile and other screens.
I tried to dispatch close drawer action before and after navigate to screen, also I tried requestAnimationFrame
but nothing helps.
DrawerScreens:
<Animated.View style={[styles.stack, style]}>
<Stack.Navigator
screenOptions={{
header: () => null,
}}>
<Stack.Screen name="PlayerZone" component={PlayerZone} />
</Stack.Navigator>
<GameBottomNavigation />
</Animated.View>
Drawer:
<DrawerItem
label="Profile"
style={styles.item}
labelStyle={styles.itemLabel}
onPress={() => {
props.navigation.navigate('PlayerZone', {
screen: 'Profile',
id: null,
});
}}
/>
<DrawerItem
label="Items"
style={styles.item}
labelStyle={styles.itemLabel}
onPress={() => {
props.navigation.navigate('PlayerZone', {
screen: 'Profile',
id: 'some-id',
});
}}
/>
PlayerZone:
<Tab.Navigator
initialRouteName="Profile"
screenOptions={{
header: () => null,
}}>
<Tab.Screen name="Profile" component={Profile} />
{!peeking && <Tab.Screen name="Items" component={Items} />}
</Tab.Navigator>
Items:
import React, {FC} from 'react';
import {BottomTabScreenProps} from '@react-navigation/bottom-tabs';
import Block from '../../components/Block';
import Text from '../../components/Text';
import {PlayerZoneTabParamList} from '.';
type Props = BottomTabScreenProps<PlayerZoneTabParamList, 'Items'>;
const Items: FC<Props> = () => {
return (
<Block middle center>
<Text>Items</Text>
</Block>
);
};
export default Items;