diff --git a/native/components/full-screen-view-modal.react.js b/native/components/full-screen-view-modal.react.js --- a/native/components/full-screen-view-modal.react.js +++ b/native/components/full-screen-view-modal.react.js @@ -17,6 +17,8 @@ type PinchGestureEvent, type PanGestureEvent, type TapGestureEvent, + GestureDetector, + Gesture, } from 'react-native-gesture-handler'; import Orientation from 'react-native-orientation-locker'; import Animated from 'react-native-reanimated'; @@ -165,6 +167,7 @@ +actionLinksEnabled: boolean, +updateCloseButtonEnabled: ([number]) => void, +updateActionLinksEnabled: ([number]) => void, + +gesture: ExclusiveGesture, }; class FullScreenViewModal extends React.PureComponent<Props> { @@ -1060,44 +1063,7 @@ </Animated.View> ); return ( - <PinchGestureHandler - onGestureEvent={this.pinchEvent} - onHandlerStateChange={this.pinchEvent} - simultaneousHandlers={this.handlerRefs} - ref={this.pinchHandler} - > - <Animated.View style={styles.container}> - <PanGestureHandler - onGestureEvent={this.panEvent} - onHandlerStateChange={this.panEvent} - simultaneousHandlers={this.handlerRefs} - ref={this.panHandler} - avgTouches - > - <Animated.View style={styles.container}> - <TapGestureHandler - onHandlerStateChange={this.doubleTapEvent} - simultaneousHandlers={this.handlerRefs} - ref={this.doubleTapHandler} - waitFor={this.beforeDoubleTapRefs} - numberOfTaps={2} - > - <Animated.View style={styles.container}> - <TapGestureHandler - onHandlerStateChange={this.singleTapEvent} - simultaneousHandlers={this.handlerRefs} - ref={this.singleTapHandler} - waitFor={this.beforeSingleTapRefs} - numberOfTaps={1} - > - {view} - </TapGestureHandler> - </Animated.View> - </TapGestureHandler> - </Animated.View> - </PanGestureHandler> - </Animated.View> - </PinchGestureHandler> + <GestureDetector gesture={this.props.gesture}>{view}</GestureDetector> ); } @@ -1262,6 +1228,19 @@ [actionLinksEnabled], ); + const gesture = React.useMemo(() => { + const pinchGesture = Gesture.Pinch(); + const panGesture = Gesture.Pan().averageTouches(true); + const doubleTapGesture = Gesture.Tap().numberOfTaps(2); + const singleTapGesture = Gesture.Tap().numberOfTaps(1); + + return Gesture.Exclusive( + Gesture.Simultaneous(pinchGesture, panGesture), + doubleTapGesture, + singleTapGesture, + ); + }, []); + return ( <FullScreenViewModal {...props} @@ -1272,6 +1251,7 @@ actionLinksEnabled={actionLinksEnabled} updateCloseButtonEnabled={updateCloseButtonEnabled} updateActionLinksEnabled={updateActionLinksEnabled} + gesture={gesture} /> ); }); diff --git a/native/flow-typed/npm/react-native-gesture-handler_v2.x.x.js b/native/flow-typed/npm/react-native-gesture-handler_v2.x.x.js --- a/native/flow-typed/npm/react-native-gesture-handler_v2.x.x.js +++ b/native/flow-typed/npm/react-native-gesture-handler_v2.x.x.js @@ -808,6 +808,10 @@ prepare(): void; } +declare class SimultaneousGesture extends ComposedGesture { + prepare(): void; +} + declare type UserSelect = 'none' | 'auto' | 'text'; interface GestureDetectorProps { @@ -816,12 +820,13 @@ children?: React$Node; } -declare const GestureObject: { - Tap: () => TapGesture, - Pan: () => PanGesture, - Pinch: () => PinchGesture, - Exclusive: (...gestures: Array<Gesture>) => ExclusiveGesture, -}; +declare const GestureObject: {| + +Tap: () => TapGesture, + +Pan: () => PanGesture, + +Pinch: () => PinchGesture, + +Exclusive: (...gestures: $ReadOnlyArray<Gesture>) => ExclusiveGesture, + +Simultaneous: (...gestures: $ReadOnlyArray<Gesture>) => SimultaneousGesture, +|}; declare module 'react-native-gesture-handler' { declare export { default as Swipeable } from 'react-native-gesture-handler/Swipeable';