react navigation drawer reopen after navigate to screen

Viewed 1008

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.

how it looks like

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;
1 Answers

So after some time trying everything I could think of I found solution (kind of). In drawer navigator I had props useLegacyImplementation set to false because I have configured reanimated 2. I removed this props and everything start working properly.

Related