2

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;
ramiong
  • 91
  • 6
  • what's `peeking`? – Will Jenkins Jan 18 '22 at 10:40
  • It checks if current signed user has the same id that user profile we are currently at. If it's the same then we are on our profile screen and have access to other screens that we cannot see in others profile. – ramiong Jan 18 '22 at 10:44

1 Answers1

7

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.

ramiong
  • 91
  • 6
  • 2
    I set it to true and everything worked fine. But i don't understand what was the problem. First i didn't had reanimated 2 configured and also the prop was not set. I thought it may work after configuring the reanimated 2. After doing so, nothing happened. Now i have reanimated 2 configured and also useLegacyImplementation set to true .... – Irfan wani Mar 19 '22 at 12:55
  • this is the correct answer that worked for me, more information : https://reactnavigation.org/docs/drawer-navigator#uselegacyimplementation – nima May 24 '22 at 07:40