Add integration with gesture handler

README.md

@@ -53,6 +53,8 @@ const YourComponent = () => {
 
 More Examples: https://github.com/paufau/react-native-multiple-modals-examples
 
+---
+
 ## Properties
 
 ### `contentContainerStyle?: ViewStyle`
@@ -90,9 +92,3 @@ Use to change the modals's rendering area. May be useful for foldable devices.
 Default: Dimensions.get('screen')
 
 ---
-
-## Integrations
-
-### react-native-gesture-handler
-
-Wrap your content with `<GestureHandlerRootView> ... </GestureHandlerRootView>` to make gestures work inside a modal

src/ModalView.tsx

@@ -10,6 +10,7 @@ import {
 } from 'react-native';
 
 import { ScrollContextResetter } from './ScrollContextResetter';
+import { GestureHandlerRootView } from './integrations/GestureHandlerRootView';
 import RNTModalView from './newarch/RNTModalViewNativeComponent';
 import { useScreenDimensions } from './useScreenDimensions';
 
@@ -58,31 +59,33 @@ export const ModalView: FC<ModalViewProps> = ({
         }
       >
         <View collapsable={false}>
-          <View style={fullScreenStyle}>
-            {renderBackdrop ? (
-              renderBackdrop()
-            ) : (
-              <Pressable
-                accessibilityLabel={backdropAccessibilityLabel}
-                accessibilityHint={backdropAccessibilityHint}
-                {...backdropProps}
-                onPress={() => onRequestDismiss?.(DismissalSource.Backdrop)}
-                style={[styles.defaultBackdrop, backdropProps?.style]}
-              />
-            )}
-          </View>
-          <ScrollContextResetter>
-            <View
-              pointerEvents='box-none'
-              style={[
-                preferredContainerSize,
-                styles.content,
-                contentContainerStyle,
-              ]}
-            >
-              {children}
+          <GestureHandlerRootView>
+            <View style={fullScreenStyle}>
+              {renderBackdrop ? (
+                renderBackdrop()
+              ) : (
+                <Pressable
+                  accessibilityLabel={backdropAccessibilityLabel}
+                  accessibilityHint={backdropAccessibilityHint}
+                  {...backdropProps}
+                  onPress={() => onRequestDismiss?.(DismissalSource.Backdrop)}
+                  style={[styles.defaultBackdrop, backdropProps?.style]}
+                />
+              )}
             </View>
-          </ScrollContextResetter>
+            <ScrollContextResetter>
+              <View
+                pointerEvents='box-none'
+                style={[
+                  preferredContainerSize,
+                  styles.content,
+                  contentContainerStyle,
+                ]}
+              >
+                {children}
+              </View>
+            </ScrollContextResetter>
+          </GestureHandlerRootView>
         </View>
       </RNTModalView>
     </View>

src/integrations/GestureHandlerRootView.tsx

@@ -0,0 +1,37 @@
+/* eslint-disable no-console */
+/* eslint-disable @typescript-eslint/no-require-imports */
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable import/no-unused-modules */
+/* eslint-disable global-require */
+
+import { ReactNode } from 'react';
+
+// The library is connected if it is detected at runtime.
+// By default, gestures do not work inside a modal window.
+const importGestureHandlerRootView = () => {
+  const Errors = {
+    GestureHandlerRootViewNotFound: new Error(
+      'GestureHandlerRootView not found. Please report the issue: https://github.com/paufau/react-native-multiple-modals/issues',
+    ),
+  };
+
+  try {
+    const GestureHandlerRootViewComponent =
+      require('react-native-gesture-handler').GestureHandlerRootView;
+
+    if (!GestureHandlerRootViewComponent) {
+      throw Errors.GestureHandlerRootViewNotFound;
+    }
+
+    return GestureHandlerRootViewComponent;
+  } catch (e) {
+    if (e === Errors.GestureHandlerRootViewNotFound) {
+      console.error(e);
+    }
+
+    // Fallback component used if the library is not found
+    return ({ children }: { children: ReactNode }) => children;
+  }
+};
+
+export const GestureHandlerRootView = importGestureHandlerRootView();