From e3862a7d0b60f2334963e944d19fd109f073b705 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82?= <michal.bert@swmansion.com>
Date: Mon, 7 Sep 2026 16:37:20 +0200
Subject: [PATCH 1/2] Lazy import DrawerLayout

---
 .../src/components/GestureComponents.tsx      | 29 ++++++++++++++++---
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/packages/react-native-gesture-handler/src/components/GestureComponents.tsx b/packages/react-native-gesture-handler/src/components/GestureComponents.tsx
index c0dde9f4f5..30a4b5ac0e 100644
--- a/packages/react-native-gesture-handler/src/components/GestureComponents.tsx
+++ b/packages/react-native-gesture-handler/src/components/GestureComponents.tsx
@@ -1,6 +1,7 @@
 import type { PropsWithChildren, ReactElement } from 'react';
 import * as React from 'react';
 import type {
+  DrawerLayoutAndroid as RNDrawerLayoutAndroid,
   DrawerLayoutAndroidProps as RNDrawerLayoutAndroidProps,
   FlatListProps as RNFlatListProps,
   ScrollViewProps as RNScrollViewProps,
@@ -8,7 +9,6 @@ import type {
   TextInputProps as RNTextInputProps,
 } from 'react-native';
 import {
-  DrawerLayoutAndroid as RNDrawerLayoutAndroid,
   FlatList as RNFlatList,
   RefreshControl as RNRefreshControl,
   ScrollView as RNScrollView,
@@ -96,18 +96,39 @@ export const LegacyTextInput =
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export type LegacyTextInput = typeof LegacyTextInput & RNTextInput;
 
+// RN's `DrawerLayoutAndroid` export is a getter that logs a deprecation
+// warning on access, so resolve it at render time instead of module load.
+// `require` is used on purpose: `import * as RN` would read every export
+// eagerly under Metro's `experimentalImportSupport`.
+const LazyDrawerLayoutAndroid = (
+  props: PropsWithChildren<RNDrawerLayoutAndroidProps> & {
+    ref?: React.Ref<React.ComponentRef<typeof RNDrawerLayoutAndroid> | null>;
+  }
+) => {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  const { DrawerLayoutAndroid } = require('react-native') as {
+    DrawerLayoutAndroid: typeof RNDrawerLayoutAndroid;
+  };
+  return <DrawerLayoutAndroid {...props} />;
+};
+LazyDrawerLayoutAndroid.displayName = 'DrawerLayoutAndroid';
+
 /**
  * @deprecated use `DrawerLayoutAndroid` instead
  */
 export const LegacyDrawerLayoutAndroid: React.ComponentType<
-  PropsWithChildren<RNDrawerLayoutAndroidProps> & NativeViewGestureHandlerProps
+  PropsWithChildren<RNDrawerLayoutAndroidProps> &
+    NativeViewGestureHandlerProps & {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ref?: React.Ref<React.ComponentType<any> | null>;
+    }
 > = createNativeWrapper<PropsWithChildren<RNDrawerLayoutAndroidProps>>(
-  RNDrawerLayoutAndroid,
+  LazyDrawerLayoutAndroid,
   { disallowInterruption: true }
 );
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export type LegacyDrawerLayoutAndroid = typeof LegacyDrawerLayoutAndroid &
-  RNDrawerLayoutAndroid;
+  React.ComponentRef<typeof RNDrawerLayoutAndroid>;
 
 /**
  * @deprecated use `FlatList` instead

From bde08a96cc194223d385f369abcb7ce4478ed507 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82?= <michal.bert@swmansion.com>
Date: Mon, 7 Sep 2026 16:44:21 +0200
Subject: [PATCH 2/2] store drawer in top level

---
 .../src/components/GestureComponents.tsx        | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/react-native-gesture-handler/src/components/GestureComponents.tsx b/packages/react-native-gesture-handler/src/components/GestureComponents.tsx
index 30a4b5ac0e..38ab8ae201 100644
--- a/packages/react-native-gesture-handler/src/components/GestureComponents.tsx
+++ b/packages/react-native-gesture-handler/src/components/GestureComponents.tsx
@@ -97,19 +97,24 @@ export const LegacyTextInput =
 export type LegacyTextInput = typeof LegacyTextInput & RNTextInput;
 
 // RN's `DrawerLayoutAndroid` export is a getter that logs a deprecation
-// warning on access, so resolve it at render time instead of module load.
+// warning on access, so resolve it on first render instead of module load.
 // `require` is used on purpose: `import * as RN` would read every export
 // eagerly under Metro's `experimentalImportSupport`.
+let DrawerLayoutAndroidImpl: typeof RNDrawerLayoutAndroid | undefined;
+
 const LazyDrawerLayoutAndroid = (
   props: PropsWithChildren<RNDrawerLayoutAndroidProps> & {
     ref?: React.Ref<React.ComponentRef<typeof RNDrawerLayoutAndroid> | null>;
   }
 ) => {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  const { DrawerLayoutAndroid } = require('react-native') as {
-    DrawerLayoutAndroid: typeof RNDrawerLayoutAndroid;
-  };
-  return <DrawerLayoutAndroid {...props} />;
+  if (!DrawerLayoutAndroidImpl) {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const { DrawerLayoutAndroid } = require('react-native') as {
+      DrawerLayoutAndroid: typeof RNDrawerLayoutAndroid;
+    };
+    DrawerLayoutAndroidImpl = DrawerLayoutAndroid;
+  }
+  return <DrawerLayoutAndroidImpl {...props} />;
 };
 LazyDrawerLayoutAndroid.displayName = 'DrawerLayoutAndroid';