feat: wrapInGestureHandlerRootView prop

README.md

@@ -98,6 +98,7 @@ export default YourComponent;
  `topOffset`             | number                        | 0                       | Determines the amount of space that the swipeable content will be offset from the top edge of window.
  `containerProps`        | ViewProps                     |                         | Additional props to be applied to the container.
  `hideKeyboardOnShow`    | boolean                       | true                    | Set to `true` if you want to hide keyboard on show modal if was opened.
+ `wrapInGestureHandlerRootView`| boolean                 | false                   | Set to `true` if you want to wrap content in to GestureHandlerRootView (required if you want to use modal inside react-native Modal component).
 
 ## Public Methods
 

src/components/SwipeModal/SwipeModal.styles.ts

@@ -24,4 +24,8 @@ export default StyleSheet.create( {
   flex: {
     flex: 1,
   },
+  rootView: {
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
 } );

src/components/SwipeModal/index.tsx

@@ -5,7 +5,7 @@ import { View, Dimensions, LayoutChangeEvent } from 'react-native';
 import Animated, {
   useSharedValue, useAnimatedStyle, useAnimatedReaction, runOnJS, withTiming,
 } from 'react-native-reanimated';
-import { GestureDetector, ScrollView } from 'react-native-gesture-handler';
+import { GestureDetector, GestureHandlerRootView, ScrollView } from 'react-native-gesture-handler';
 import AnimatedModal from '../AnimatedModal';
 import ModalScrollView from './scroll';
 import { SwipeModalProps, SwipeModalPublicMethods } from '../../core/dto/swipeModalDTO';
@@ -55,6 +55,7 @@ const SwipeModal = forwardRef<SwipeModalPublicMethods, SwipeModalProps>( ( {
   disableSwipe = false,
   topOffset = 0,
   containerProps,
+  wrapInGestureHandlerRootView,
   ...props
 }, ref ) => {
 
@@ -232,11 +233,19 @@ const SwipeModal = forwardRef<SwipeModalPublicMethods, SwipeModalProps>( ( {
 
   }
 
+  const content = (
+    <Animated.View style={!disableSwipe && animatedStyle} testID="swipeModal">
+      <GestureDetector gesture={gesture}>{modalChildren}</GestureDetector>
+    </Animated.View>
+  );
+
   return (
     <AnimatedModal ref={modalRef} {...props}>
-      <Animated.View style={!disableSwipe && animatedStyle} testID="swipeModal">
-        <GestureDetector gesture={gesture}>{modalChildren}</GestureDetector>
-      </Animated.View>
+      {wrapInGestureHandlerRootView ? (
+        <GestureHandlerRootView style={SwipeModalStyles.rootView}>
+          {content}
+        </GestureHandlerRootView>
+      ) : content}
     </AnimatedModal>
   );
 

src/core/dto/swipeModalDTO.ts

@@ -23,6 +23,7 @@ export interface SwipeModalProps extends AnimatedModalProps {
   disableSwipe?: boolean;
   topOffset?: number;
   containerProps?: ViewProps;
+  wrapInGestureHandlerRootView?: boolean;
 }
 
 export type SwipeModalPublicMethods = {