feat: Expose gesture state in swipe callbacks (#537)

* Expose gesture state in swipe callbacks * Fix type
react-native-modal · Apr 10, 2021 · bc09826 · bc09826
1 parent 2fd79d1
commit bc09826
Showing 1 changed file with 29 additions and 17 deletions.
diff --git a/src/modal.tsx b/src/modal.tsx
@@ -54,10 +54,16 @@ type State = {
 
 export interface ModalProps extends ViewProps {
   children: React.ReactNode;
-  onSwipeStart?: () => void;
-  onSwipeMove?: (percentageShown: number) => void;
-  onSwipeComplete?: (params: OnSwipeCompleteParams) => void;
-  onSwipeCancel?: () => void;
+  onSwipeStart?: (gestureState: PanResponderGestureState) => void;
+  onSwipeMove?: (
+    percentageShown: number,
+    gestureState: PanResponderGestureState,
+  ) => void;
+  onSwipeComplete?: (
+    params: OnSwipeCompleteParams,
+    gestureState: PanResponderGestureState,
+  ) => void;
+  onSwipeCancel?: (gestureState: PanResponderGestureState) => void;
   style?: StyleProp<ViewStyle>;
   swipeDirection?: Direction | Array<Direction>;
   onDismiss?: () => void;
@@ -266,7 +272,10 @@ export class ReactNativeModal extends React.Component<ModalProps, State> {
   }
 
   componentWillUnmount() {
-    BackHandler.removeEventListener('hardwareBackPress', this.onBackButtonPress);
+    BackHandler.removeEventListener(
+      'hardwareBackPress',
+      this.onBackButtonPress,
+    );
     DeviceEventEmitter.removeListener(
       'didUpdateDimensions',
       this.handleDimensionsUpdate,
@@ -308,11 +317,11 @@ export class ReactNativeModal extends React.Component<ModalProps, State> {
   getDeviceWidth = () => this.props.deviceWidth || this.state.deviceWidth;
   onBackButtonPress = () => {
     if (this.props.onBackButtonPress && this.props.isVisible) {
-      this.props.onBackButtonPress()
-      return true
+      this.props.onBackButtonPress();
+      return true;
     }
-    return false
-  }  
+    return false;
+  };
   buildPanResponder = () => {
     let animEvt: OrNull<AnimationEvent> = null;
 
@@ -328,7 +337,7 @@ export class ReactNativeModal extends React.Component<ModalProps, State> {
           const shouldSetPanResponder =
             Math.abs(gestureState.dx) >= 4 || Math.abs(gestureState.dy) >= 4;
           if (shouldSetPanResponder && this.props.onSwipeStart) {
-            this.props.onSwipeStart();
+            this.props.onSwipeStart(gestureState);
           }
 
           this.currentSwipingDirection = this.getSwipingDirection(gestureState);
@@ -338,7 +347,7 @@ export class ReactNativeModal extends React.Component<ModalProps, State> {
 
         return false;
       },
-      onStartShouldSetPanResponder: (e: any) => {
+      onStartShouldSetPanResponder: (e: any, gestureState) => {
         const hasScrollableView =
           e._dispatchInstances &&
           e._dispatchInstances.some((instance: any) =>
@@ -354,7 +363,7 @@ export class ReactNativeModal extends React.Component<ModalProps, State> {
           return false; // user needs to be able to scroll content back up
         }
         if (this.props.onSwipeStart) {
-          this.props.onSwipeStart();
+          this.props.onSwipeStart(gestureState);
         }
 
         // Cleared so that onPanResponderMove can wait to have some delta
@@ -387,7 +396,7 @@ export class ReactNativeModal extends React.Component<ModalProps, State> {
           animEvt!(evt, gestureState);
 
           if (this.props.onSwipeMove) {
-            this.props.onSwipeMove(newOpacityFactor);
+            this.props.onSwipeMove(newOpacityFactor, gestureState);
           }
         } else {
           if (this.props.scrollTo) {
@@ -418,9 +427,12 @@ export class ReactNativeModal extends React.Component<ModalProps, State> {
         ) {
           if (this.props.onSwipeComplete) {
             this.inSwipeClosingState = true;
-            this.props.onSwipeComplete({
-              swipingDirection: this.getSwipingDirection(gestureState),
-            });
+            this.props.onSwipeComplete(
+              {
+                swipingDirection: this.getSwipingDirection(gestureState),
+              },
+              gestureState,
+            );
             return;
           }
           // Deprecated. Remove later.
@@ -433,7 +445,7 @@ export class ReactNativeModal extends React.Component<ModalProps, State> {
 
         //Reset backdrop opacity and modal position
         if (this.props.onSwipeCancel) {
-          this.props.onSwipeCancel();
+          this.props.onSwipeCancel(gestureState);
         }
 
         if (this.backdropRef) {