navigation.getParent().openDrawer() not working

Question

So, I am creating a react native application very much similar to Instagram. Right now, I have 2 drawers, a left drawer nested inside a right drawer and tab navigator which is nested in the left drawer. The tab navigator has 5 tabs and right now one of the tabs has native stack navigator nested in, everything is working fine the tab navigation and drawer navigation and everything. The structure of my application looks something like this:

• right drawer
  • left drawer
    • tab nnavigator
      • feed navigator (stack navigator)
      • screen2
      • screen3
      • screen4
      • screen5

What I want is to open the left drawer from a component in feed navigator.

Here is my code sample.

appNavigator.js:

const AppNavigator = () => {
  return <AddDrawerNavigator />;
};

export default AppNavigator;

addDrawerNavigator.js:

const AddDrawer = createDrawerNavigator();

function AddDrawerNavigator() {
  const dimensions = useWindowDimensions();
  const drawerSwipeEnabled = useSelector(selectDrawerSwipeEnabled);
  return (
    <AddDrawer.Navigator
      id="Post"
      drawerContent={props => <AddPostScreen {...props} />}
      screenOptions={{
        drawerPosition: 'left',
        drawerType: 'slide',
        headerShown: false,
        drawerStyle: {width: dimensions.width},
        swipeEnabled: drawerSwipeEnabled,
      }}>
      <AddDrawer.Screen name="PostDrawer" component={MsgDrawerNavigator} />
    </AddDrawer.Navigator>
  );
}

msgDrawerNavigator.js:

const MsgDrawer = createDrawerNavigator();

function MsgDrawerNavigator({navigation}) {
  const dimensions = useWindowDimensions();
  const drawerSwipeEnabled = useSelector(selectDrawerSwipeEnabled);
  return (
    <MsgDrawer.Navigator
      id="DirectMessages"
      drawerContent={props => <Messages {...props} />}
      screenOptions={{
        drawerPosition: 'right',
        drawerType: 'slide',
        headerShown: false,
        drawerStyle: {width: dimensions.width},
        swipeEnabled: drawerSwipeEnabled,
      }}>
      <MsgDrawer.Screen name="MsgDrawer" component={TabNavigator} />
    </MsgDrawer.Navigator>
  );
}

tabNavigator.js:

const Tab = createBottomTabNavigator();

function TabNavigator({navigation}) {
  const dispatch = useDispatch();
  return (
    <Tab.Navigator
      id="tabs"
      screenOptions={({route}) => ({
        tabBarIcon: ({focused, color, size}) => {
          let iconComponent;

          // ...tabBarIcon configurations

          return iconComponent;
        },
        headerShown: false,
        tabBarShowLabel: false,
      })}>
      <Tab.Screen
        name="Feed"
        component={FeedNavigator}
      />
      {... other screens}
    </Tab.Navigator>
  );
}

feedNavigator.js:

const Stack = createNativeStackNavigator();

function FeedNavigator({navigation}) {
  return (
    <Stack.Navigator
      screenOptions={{headerShown: false}}
      initialRouteName="Feed">
      <Stack.Screen name="Home" component={FeedScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
    </Stack.Navigator>
  );
}

feedScreen.js:

const FeedScreen = ({navigation}) => {
  const navigateToMessages = () => {
    navigation.getParent("DirectMessages").openDrawer();
  };

  return (
    <View style={styles.container}>
          <TouchableOpacity onPress={navigateToMessages}>
            {The component}
          </TouchableOpacity>
    </View>
  );
};

What I am getting: it is just opening a blank screen when i tap on the component

I have tried navigation.getParent('id of left drawer').openDrawer() but it doesn't work.

Answer 1

Please check if this resolve your issue Drawer incompatible with react-native-reanimated@3.2.0 on android but compatible with v3.1.0