feat: make useIsDrawerOpen workable inside drawer content (#7746)

packages/drawer/src/utils/useIsDrawerOpen.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useNavigation, ParamListBase } from '@react-navigation/native';
 import { DrawerNavigationProp } from '../types';
+import DrawerOpenContext from '../views/DrawerOpenContext';
 
 /**
  * Hook to detect if the drawer is open in a parent navigator.
@@ -10,6 +11,8 @@ export default function useIsDrawerOpen() {
 
   let drawer = navigation as DrawerNavigationProp<ParamListBase>;
 
+  const drawerOpenContext = React.useContext(DrawerOpenContext);
+
   // The screen might be inside another navigator such as stack nested in drawer
   // We need to find the closest drawer navigator and add the listener there
   while (drawer && drawer.dangerouslyGetState().type !== 'drawer') {
@@ -34,5 +37,9 @@ export default function useIsDrawerOpen() {
     return unsubscribe;
   }, [drawer, isDrawerOpen]);
 
+  if (drawerOpenContext !== null) {
+    return drawerOpenContext;
+  }
+
   return isDrawerOpen;
 }

packages/drawer/src/views/Drawer.tsx

@@ -18,6 +18,7 @@ import {
 } from 'react-native-gesture-handler';
 import Animated from 'react-native-reanimated';
 import Overlay from './Overlay';
+import DrawerOpenContext from './DrawerOpenContext';
 
 const {
   Clock,
@@ -635,7 +636,9 @@ export default class DrawerView extends React.PureComponent<Props> {
               drawerStyle as any,
             ]}
           >
-            {renderDrawerContent({ progress: this.progress })}
+            <DrawerOpenContext.Provider value={open}>
+              {renderDrawerContent({ progress: this.progress })}
+            </DrawerOpenContext.Provider>
           </Animated.View>
         </Animated.View>
       </PanGestureHandler>

packages/drawer/src/views/DrawerOpenContext.tsx

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+const DrawerOpenContext = React.createContext<boolean | null>(null);
+
+export default DrawerOpenContext;