I am still using this successfully in React 18 & React Native 0.76+

[nabilfreeman]

It works quite well with the addition of the following patch:

react-native-drawer+2.5.1.patch

diff --git a/node_modules/react-native-drawer/index.js b/node_modules/react-native-drawer/index.js
index ad60ecc..6218288 100644
--- a/node_modules/react-native-drawer/index.js
+++ b/node_modules/react-native-drawer/index.js
@@ -9,6 +9,9 @@ const DOUBLE_TAP_INTERVAL = 500
 const TAP_DURATION = 250
 const propsWhomRequireUpdate = ['closedDrawerOffset', 'openDrawerOffset', 'type', 'styles']
 
+// Create a context for drawer
+const DrawerContext = React.createContext(null);
+
 export default class Drawer extends Component {
 
   _length = 0;
@@ -105,10 +108,8 @@ export default class Drawer extends Component {
     useInteractionManager: false,
   };
 
-  /*** CONTEXT ***/
-  static contextTypes = { drawer: PropTypes.object };
-  static childContextTypes = { drawer: PropTypes.object };
-  getChildContext = () => ({ drawer: this });
+   /*** CONTEXT ***/
+  static contextType = DrawerContext;
   /*** END CONTEXT ***/
 
   _registerChildDrawer(drawer) {
@@ -117,15 +118,15 @@ export default class Drawer extends Component {
     this._childDrawer = drawer
   }
 
-  componentWillMount() {
-    if (this.context.drawer) this.context.drawer._registerChildDrawer(this)
+  UNSAFE_componentWillMount() {
+    if (this.context) this.context._registerChildDrawer(this)
     if (this.props.openDrawerThreshold && process.env.NODE_ENV !== 'production') console.error('react-native-drawer: openDrawerThreshold is obsolete. Use panThreshold instead.')
     if (this.props.panStartCompensation && process.env.NODE_ENV !== 'production') console.error('react-native-drawer: panStartCompensation is deprecated.')
     if (this.props.relativeDrag && process.env.NODE_ENV !== 'production') console.error('react-native-drawer: relativeDrag is deprecated.')
     this.initialize(this.props)
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.requiresResync(nextProps)) this.resync(null, nextProps)
 
     if (nextProps.open !== null && this._open !== nextProps.open) {
@@ -364,7 +365,7 @@ export default class Drawer extends Component {
 
     // Disable if parent or child drawer exist and are open
     // @TODO make cleaner, generalize to work with 3+ drawers, prop to disable/configure
-    if (this.context.drawer && this.context.drawer._open) return false
+    if (this.context && this.context._open) return false
     if (this._childDrawer && this._childDrawer._open) return false
 
     let pos0 = this.isLeftOrRightSide() ? e.nativeEvent.pageX : e.nativeEvent.pageY
@@ -563,14 +564,16 @@ export default class Drawer extends Component {
     let second = this.props.type === 'overlay' ? this.renderDrawer() : this.renderMain()
 
     return (
-      <View
-        key="drawerContainer"
-        onLayout={this.handleSetViewport}
-        style={this.stylesheet.container}
-        >
-        {first}
-        {second}
-      </View>
+      <DrawerContext.Provider value={this}>
+        <View
+          key="drawerContainer"
+          onLayout={this.handleSetViewport}
+          style={this.stylesheet.container}
+          >
+          {first}
+          {second}
+        </View>
+      </DrawerContext.Provider>
     )
   }
 

However performance is definitely not perfect as it's the only part of our app consistently dropping frames as it opens and closes.

Is there any better solution, via an alternative library or patching this one?

p.s. I don't want to add a stack navigator just to get a drawer opening and closing.

EDIT: I have updated the patch file to be compatible with React 18's context deprecations.

[marlo22]

Very useful, also works on React 19 (Expo 53). Thank you very much! 🙂