react-native-gesture-handler 2.18.1 → 2.20.0

package/src/components/ReanimatedSwipeable.tsx

@@ -199,6 +199,26 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
     props: SwipeableProps,
     ref: ForwardedRef<SwipeableMethods>
   ) {
+    const {
+      leftThreshold,
+      rightThreshold,
+      onSwipeableOpenStartDrag,
+      onSwipeableCloseStartDrag,
+      enableTrackpadTwoFingerGesture,
+      enabled,
+      containerStyle,
+      childrenContainerStyle,
+      animationOptions,
+      overshootLeft,
+      overshootRight,
+      onSwipeableWillOpen,
+      onSwipeableWillClose,
+      onSwipeableOpen,
+      onSwipeableClose,
+      testID,
+      ...remainingProps
+    } = props;
+
     const rowState = useSharedValue<number>(0);
 
     const userDrag = useSharedValue<number>(0);
@@ -240,8 +260,8 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
       overshootFriction = defaultProps.overshootFriction,
     } = props;
 
-    const overshootLeftProp = props.overshootLeft;
-    const overshootRightProp = props.overshootRight;
+    const overshootLeftProp = overshootLeft;
+    const overshootRightProp = overshootRight;
 
     const calculateCurrentOffset = useCallback(() => {
       'worklet';
@@ -317,45 +337,40 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
 
     const dispatchImmediateEvents = useCallback(
       (fromValue: number, toValue: number) => {
-        if (toValue > 0 && props.onSwipeableWillOpen) {
-          props.onSwipeableWillOpen('left');
-        } else if (toValue < 0 && props.onSwipeableWillOpen) {
-          props.onSwipeableWillOpen('right');
-        } else if (props.onSwipeableWillClose) {
+        if (toValue > 0 && onSwipeableWillOpen) {
+          onSwipeableWillOpen('left');
+        } else if (toValue < 0 && onSwipeableWillOpen) {
+          onSwipeableWillOpen('right');
+        } else if (onSwipeableWillClose) {
           const closingDirection = fromValue > 0 ? 'left' : 'right';
-          props.onSwipeableWillClose(closingDirection);
+          onSwipeableWillClose(closingDirection);
         }
       },
-      [
-        props,
-        props.onSwipeableWillClose,
-        props.onSwipeableWillOpen,
-        swipeableMethods,
-      ]
+      [onSwipeableWillClose, onSwipeableWillOpen]
     );
 
     const dispatchEndEvents = useCallback(
       (fromValue: number, toValue: number) => {
-        if (toValue > 0 && props.onSwipeableOpen) {
-          props.onSwipeableOpen('left', swipeableMethods.current);
-        } else if (toValue < 0 && props.onSwipeableOpen) {
-          props.onSwipeableOpen('right', swipeableMethods.current);
-        } else if (props.onSwipeableClose) {
+        if (toValue > 0 && onSwipeableOpen) {
+          onSwipeableOpen('left', swipeableMethods.current);
+        } else if (toValue < 0 && onSwipeableOpen) {
+          onSwipeableOpen('right', swipeableMethods.current);
+        } else if (onSwipeableClose) {
           const closingDirection = fromValue > 0 ? 'left' : 'right';
-          props.onSwipeableClose(closingDirection, swipeableMethods.current);
+          onSwipeableClose(closingDirection, swipeableMethods.current);
         }
       },
-      [props, props.onSwipeableClose, props.onSwipeableOpen, swipeableMethods]
+      [onSwipeableClose, onSwipeableOpen]
     );
 
-    const animationOptionsProp = props.animationOptions;
+    const animationOptionsProp = animationOptions;
 
     const animateRow = useCallback(
       (fromValue: number, toValue: number, velocityX?: number) => {
         'worklet';
         rowState.value = Math.sign(toValue);
 
-        const springConfig = {
+        const translationSpringConfig = {
           duration: 1000,
           dampingRatio: 0.9,
           stiffness: 500,
@@ -364,9 +379,14 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
           ...animationOptionsProp,
         };
 
+        const progressSpringConfig = {
+          ...translationSpringConfig,
+          velocity: 0,
+        };
+
         appliedTranslation.value = withSpring(
           toValue,
-          springConfig,
+          translationSpringConfig,
           (isFinished) => {
             if (isFinished) {
               runOnJS(dispatchEndEvents)(fromValue, toValue);
@@ -376,23 +396,27 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
 
         const progressTarget = toValue === 0 ? 0 : 1;
 
-        // Velocity is in px, while progress is in %
-        springConfig.velocity = 0;
-
         showLeftProgress.value =
-          leftWidth.value > 0 ? withSpring(progressTarget, springConfig) : 0;
+          leftWidth.value > 0
+            ? withSpring(progressTarget, progressSpringConfig)
+            : 0;
         showRightProgress.value =
-          rightWidth.value > 0 ? withSpring(progressTarget, springConfig) : 0;
+          rightWidth.value > 0
+            ? withSpring(progressTarget, progressSpringConfig)
+            : 0;
 
         runOnJS(dispatchImmediateEvents)(fromValue, toValue);
       },
       [
-        showLeftProgress,
+        rowState,
+        animationOptionsProp,
         appliedTranslation,
-        dispatchEndEvents,
+        showLeftProgress,
+        leftWidth.value,
+        showRightProgress,
+        rightWidth.value,
         dispatchImmediateEvents,
-        animationOptionsProp,
-        rowState,
+        dispatchEndEvents,
       ]
     );
 
@@ -483,8 +507,8 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
       </Animated.View>
     );
 
-    const leftThresholdProp = props.leftThreshold;
-    const rightThresholdProp = props.rightThreshold;
+    const leftThresholdProp = leftThreshold;
+    const rightThresholdProp = rightThreshold;
 
     const handleRelease = (
       event: GestureStateChangeEvent<PanGestureHandlerEventPayload>
@@ -535,9 +559,6 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
       }
     });
 
-    const onSwipeableOpenStartDrag = props.onSwipeableOpenStartDrag;
-    const onSwipeableCloseStartDrag = props.onSwipeableCloseStartDrag;
-
     const panGesture = Gesture.Pan()
       .onUpdate((event: GestureUpdateEvent<PanGestureHandlerEventPayload>) => {
         userDrag.value = event.translationX;
@@ -564,10 +585,8 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
         }
       );
 
-    if (props.enableTrackpadTwoFingerGesture) {
-      panGesture.enableTrackpadTwoFingerGesture(
-        props.enableTrackpadTwoFingerGesture
-      );
+    if (enableTrackpadTwoFingerGesture) {
+      panGesture.enableTrackpadTwoFingerGesture(enableTrackpadTwoFingerGesture);
     }
 
     panGesture.activeOffsetX([
@@ -580,7 +599,7 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
       swipeableMethods,
     ]);
 
-    panGesture.enabled(props.enabled !== false);
+    panGesture.enabled(enabled !== false);
 
     const animatedStyle = useAnimatedStyle(
       () => ({
@@ -590,12 +609,10 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
       [appliedTranslation, rowState]
     );
 
-    const containerStyle = props.containerStyle;
-    const childrenContainerStyle = props.childrenContainerStyle;
-
-    return (
+    const swipeableComponent = (
       <GestureDetector gesture={panGesture} touchAction="pan-y">
         <Animated.View
+          {...remainingProps}
           onLayout={onRowLayout}
           style={[styles.container, containerStyle]}>
           {leftElement}
@@ -608,6 +625,12 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
         </Animated.View>
       </GestureDetector>
     );
+
+    return testID ? (
+      <View testID={testID}>{swipeableComponent}</View>
+    ) : (
+      swipeableComponent
+    );
   }
 );
 

package/src/handlers/GestureHandlerEventPayload.ts

@@ -1,3 +1,5 @@
+import { StylusData } from '../web/interfaces';
+
 export type FlingGestureHandlerEventPayload = {
   x: number;
   y: number;
@@ -120,6 +122,11 @@ export type PanGestureHandlerEventPayload = {
    * value is expressed in point units per second.
    */
   velocityY: number;
+
+  /**
+   * Object containing additional stylus data.
+   */
+  stylusData: StylusData | undefined;
 };
 
 export type PinchGestureHandlerEventPayload = {
@@ -182,3 +189,38 @@ export type RotationGestureHandlerEventPayload = {
    */
   velocity: number;
 };
+
+export type HoverGestureHandlerEventPayload = {
+  /**
+   * X coordinate of the current position of the pointer relative to the view
+   * attached to the handler. Expressed in point units.
+   */
+  x: number;
+
+  /**
+   * Y coordinate of the current position of the pointer relative to the view
+   * attached to the handler. Expressed in point units.
+   */
+  y: number;
+
+  /**
+   * X coordinate of the current position of the pointer relative to the window.
+   * The value is expressed in point units. It is recommended to use it instead
+   * of `x` in cases when the original view can be transformed as an
+   * effect of the gesture.
+   */
+  absoluteX: number;
+
+  /**
+   * Y coordinate of the current position of the pointer relative to the window.
+   * The value is expressed in point units. It is recommended to use it instead
+   * of `y` in cases when the original view can be transformed as an
+   * effect of the gesture.
+   */
+  absoluteY: number;
+
+  /**
+   * Object containing additional stylus data.
+   */
+  stylusData: StylusData | undefined;
+};

package/src/handlers/LongPressGestureHandler.ts

@@ -8,6 +8,7 @@ import {
 export const longPressGestureHandlerProps = [
   'minDurationMs',
   'maxDist',
+  'numberOfPointers',
 ] as const;
 
 export interface LongPressGestureConfig {
@@ -24,6 +25,11 @@ export interface LongPressGestureConfig {
    * will fail to recognize the gesture. The default value is 10.
    */
   maxDist?: number;
+
+  /**
+   * Determine exact number of points required to handle the long press gesture.
+   */
+  numberOfPointers?: number;
 }
 
 export interface LongPressGestureHandlerProps

package/src/handlers/createHandler.tsx

@@ -529,6 +529,7 @@ export default function createHandler<
             ? {
                 handlerType: name,
                 handlerTag: this.handlerTag,
+                enabled: this.props.enabled,
               }
             : {}),
           testID: this.props.testID ?? child.props.testID,

package/src/handlers/gestures/GestureDetector/utils.ts

@@ -1,6 +1,6 @@
 import { Platform } from 'react-native';
 
-import { tagMessage } from '../../../utils';
+import { isJestEnv, tagMessage } from '../../../utils';
 import { GestureRef, BaseGesture, GestureType } from '../gesture';
 
 import { flingGestureHandlerProps } from '../../FlingGestureHandler';
@@ -100,7 +100,7 @@ export function checkGestureCallbacksForWorklets(gesture: GestureType) {
   const areAllNotWorklets = !areSomeWorklets && areSomeNotWorklets;
   // If none of the callbacks are worklets and the gesture is not explicitly marked with
   // `.runOnJS(true)` show a warning
-  if (areAllNotWorklets) {
+  if (areAllNotWorklets && !isJestEnv()) {
     console.warn(
       tagMessage(
         `None of the callbacks in the gesture are worklets. If you wish to run them on the JS thread use '.runOnJS(true)' modifier on the gesture to make this explicit. Otherwise, mark the callbacks as 'worklet' to run them on the UI thread.`

package/src/handlers/gestures/gesture.ts

@@ -18,6 +18,7 @@ import type {
   RotationGestureHandlerEventPayload,
   TapGestureHandlerEventPayload,
   NativeViewGestureHandlerPayload,
+  HoverGestureHandlerEventPayload,
 } from '../GestureHandlerEventPayload';
 import { isRemoteDebuggingEnabled } from '../../utils';
 
@@ -31,7 +32,8 @@ export type GestureType =
   | BaseGesture<PinchGestureHandlerEventPayload>
   | BaseGesture<FlingGestureHandlerEventPayload>
   | BaseGesture<ForceTouchGestureHandlerEventPayload>
-  | BaseGesture<NativeViewGestureHandlerPayload>;
+  | BaseGesture<NativeViewGestureHandlerPayload>
+  | BaseGesture<HoverGestureHandlerEventPayload>;
 
 export type GestureRef =
   | number

package/src/handlers/gestures/hoverGesture.ts

@@ -1,12 +1,6 @@
 import { BaseGestureConfig, ContinousBaseGesture } from './gesture';
 import { GestureUpdateEvent } from '../gestureHandlerCommon';
-
-export type HoverGestureHandlerEventPayload = {
-  x: number;
-  y: number;
-  absoluteX: number;
-  absoluteY: number;
-};
+import type { HoverGestureHandlerEventPayload } from '../GestureHandlerEventPayload';
 
 export type HoverGestureChangeEventPayload = {
   changeX: number;

package/src/handlers/gestures/longPressGesture.ts

@@ -31,6 +31,15 @@ export class LongPressGesture extends BaseGesture<LongPressGestureHandlerEventPa
     this.config.maxDist = distance;
     return this;
   }
+
+  /**
+   * Determine exact number of points required to handle the long press gesture.
+   * @param pointers
+   */
+  numberOfPointers(pointers: number) {
+    this.config.numberOfPointers = pointers;
+    return this;
+  }
 }
 
 export type LongPressGestureType = InstanceType<typeof LongPressGesture>;

package/src/jestUtils/jestUtils.ts

@@ -138,6 +138,7 @@ const handlersDefaultEvents: DefaultEventsMapping = {
     velocityX: 3,
     velocityY: 0,
     numberOfPointers: 1,
+    stylusData: undefined,
   },
   [pinchHandlerName]: {
     focalX: 0,
@@ -404,6 +405,7 @@ interface HandlerData {
   emitEvent: EventEmitter;
   handlerType: HandlerNames;
   handlerTag: number;
+  enabled: boolean | undefined;
 }
 function getHandlerData(
   componentOrGesture: ReactTestInstance | GestureType
@@ -416,6 +418,7 @@ function getHandlerData(
       },
       handlerType: gesture.handlerName as HandlerNames,
       handlerTag: gesture.handlerTag,
+      enabled: gesture.config.enabled,
     };
   }
   const gestureHandlerComponent = componentOrGesture;
@@ -425,6 +428,7 @@ function getHandlerData(
     },
     handlerType: gestureHandlerComponent.props.handlerType as HandlerNames,
     handlerTag: gestureHandlerComponent.props.handlerTag as number,
+    enabled: gestureHandlerComponent.props.enabled,
   };
 }
 type AllGestures =
@@ -466,9 +470,13 @@ export function fireGestureHandler<THandler extends AllGestures | AllHandlers>(
   componentOrGesture: ReactTestInstance | GestureType,
   eventList: Partial<GestureHandlerTestEvent<ExtractConfig<THandler>>>[] = []
 ): void {
-  const { emitEvent, handlerType, handlerTag } =
+  const { emitEvent, handlerType, handlerTag, enabled } =
     getHandlerData(componentOrGesture);
 
+  if (enabled === false) {
+    return;
+  }
+
   let _ = fillMissingStatesTransitions(
     eventList,
     isDiscreteHandler(handlerType)

package/src/{mocks.ts → mocks.tsx}

@@ -1,3 +1,4 @@
+import React from 'react';
 import {
   TouchableHighlight,
   TouchableNativeFeedback,
@@ -30,9 +31,13 @@ const LongPressGestureHandler = View;
 const PinchGestureHandler = View;
 const RotationGestureHandler = View;
 const FlingGestureHandler = View;
-const RawButton = TouchableNativeFeedback;
-const BaseButton = TouchableNativeFeedback;
-const RectButton = TouchableNativeFeedback;
+const RawButton = ({ enabled, ...rest }: any) => (
+  <TouchableNativeFeedback disabled={!enabled} {...rest}>
+    <View />
+  </TouchableNativeFeedback>
+);
+const BaseButton = RawButton;
+const RectButton = RawButton;
 const BorderlessButton = TouchableNativeFeedback;
 
 export default {

package/src/utils.ts

@@ -98,3 +98,5 @@ export function deepEqual(obj1: any, obj2: any) {
 
   return true;
 }
+
+export const INT32_MAX = 2 ** 31 - 1;

package/src/web/constants.ts

@@ -1,2 +1,2 @@
 export const DEFAULT_TOUCH_SLOP = 15;
-export const MINIMAL_FLING_VELOCITY = 0.1;
+export const MINIMAL_RECOGNIZABLE_MAGNITUDE = 0.1;

package/src/web/handlers/GestureHandler.ts

@@ -14,10 +14,10 @@ import EventManager from '../tools/EventManager';
 import GestureHandlerOrchestrator from '../tools/GestureHandlerOrchestrator';
 import InteractionManager from '../tools/InteractionManager';
 import PointerTracker, { TrackerElement } from '../tools/PointerTracker';
-import { GestureHandlerDelegate } from '../tools/GestureHandlerDelegate';
 import IGestureHandler from './IGestureHandler';
 import { MouseButton } from '../../handlers/gestureHandlerCommon';
 import { PointerType } from '../../PointerType';
+import { GestureHandlerDelegate } from '../tools/GestureHandlerDelegate';
 
 export default abstract class GestureHandler implements IGestureHandler {
   private lastSentState: State | null = null;
@@ -507,7 +507,7 @@ export default abstract class GestureHandler implements IGestureHandler {
       nativeEvent: {
         handlerTag: this.handlerTag,
         state: this.currentState,
-        eventType: event.touchEventType ?? eventType,
+        eventType: eventType,
         changedTouches: changed,
         allTouches: all,
         numberOfTouches: numberOfTouches,
@@ -589,6 +589,8 @@ export default abstract class GestureHandler implements IGestureHandler {
     this.config = { enabled: enabled, ...props };
     this.enabled = enabled;
 
+    this.delegate.onEnabledChange(enabled);
+
     if (this.config.shouldCancelWhenOutside !== undefined) {
       this.setShouldCancelWhenOutside(this.config.shouldCancelWhenOutside);
     }

package/src/web/handlers/HoverGestureHandler.ts

@@ -1,13 +1,22 @@
 import { State } from '../../State';
-import { AdaptedEvent, Config } from '../interfaces';
+import { AdaptedEvent, Config, StylusData } from '../interfaces';
 import GestureHandlerOrchestrator from '../tools/GestureHandlerOrchestrator';
 import GestureHandler from './GestureHandler';
 
 export default class HoverGestureHandler extends GestureHandler {
+  private stylusData: StylusData | undefined;
+
   public init(ref: number, propsRef: React.RefObject<unknown>) {
     super.init(ref, propsRef);
   }
 
+  protected transformNativeEvent(): Record<string, unknown> {
+    return {
+      ...super.transformNativeEvent(),
+      stylusData: this.stylusData,
+    };
+  }
+
   public updateGestureConfig({ enabled = true, ...props }: Config): void {
     super.updateGestureConfig({ enabled: enabled, ...props });
   }
@@ -16,6 +25,7 @@ export default class HoverGestureHandler extends GestureHandler {
     GestureHandlerOrchestrator.getInstance().recordHandlerIfNotPresent(this);
 
     this.tracker.addToTracker(event);
+    this.stylusData = event.stylusData;
     super.onPointerMoveOver(event);
 
     if (this.getState() === State.UNDETERMINED) {
@@ -25,7 +35,9 @@ export default class HoverGestureHandler extends GestureHandler {
   }
 
   protected onPointerMoveOut(event: AdaptedEvent): void {
-    this.tracker.addToTracker(event);
+    this.tracker.removeFromTracker(event.pointerId);
+    this.stylusData = event.stylusData;
+
     super.onPointerMoveOut(event);
 
     this.end();
@@ -33,6 +45,8 @@ export default class HoverGestureHandler extends GestureHandler {
 
   protected onPointerMove(event: AdaptedEvent): void {
     this.tracker.track(event);
+    this.stylusData = event.stylusData;
+
     super.onPointerMove(event);
   }
 

package/src/web/handlers/LongPressGestureHandler.ts

@@ -12,6 +12,7 @@ export default class LongPressGestureHandler extends GestureHandler {
   private defaultMaxDistSq = DEFAULT_MAX_DIST_DP * SCALING_FACTOR;
 
   private maxDistSq = this.defaultMaxDistSq;
+  private numberOfPointers = 1;
   private startX = 0;
   private startY = 0;
 
@@ -45,6 +46,10 @@ export default class LongPressGestureHandler extends GestureHandler {
     if (this.config.maxDist !== undefined) {
       this.maxDistSq = this.config.maxDist * this.config.maxDist;
     }
+
+    if (this.config.numberOfPointers !== undefined) {
+      this.numberOfPointers = this.config.numberOfPointers;
+    }
   }
 
   protected resetConfig(): void {
@@ -64,17 +69,36 @@ export default class LongPressGestureHandler extends GestureHandler {
 
     this.tracker.addToTracker(event);
     super.onPointerDown(event);
-    this.tryBegin(event);
+
+    this.startX = event.x;
+    this.startY = event.y;
+
+    this.tryBegin();
     this.tryActivate();
-    this.checkDistanceFail(event);
 
     this.tryToSendTouchEvent(event);
   }
+  protected onPointerAdd(event: AdaptedEvent): void {
+    super.onPointerAdd(event);
+    this.tracker.addToTracker(event);
+
+    if (this.tracker.getTrackedPointersCount() > this.numberOfPointers) {
+      this.fail();
+      return;
+    }
+
+    const absoluteCoordsAverage = this.tracker.getAbsoluteCoordsAverage();
+
+    this.startX = absoluteCoordsAverage.x;
+    this.startY = absoluteCoordsAverage.y;
+
+    this.tryActivate();
+  }
 
   protected onPointerMove(event: AdaptedEvent): void {
     super.onPointerMove(event);
     this.tracker.track(event);
-    this.checkDistanceFail(event);
+    this.checkDistanceFail();
   }
 
   protected onPointerUp(event: AdaptedEvent): void {
@@ -88,7 +112,19 @@ export default class LongPressGestureHandler extends GestureHandler {
     }
   }
 
-  private tryBegin(event: AdaptedEvent): void {
+  protected onPointerRemove(event: AdaptedEvent): void {
+    super.onPointerRemove(event);
+    this.tracker.removeFromTracker(event.pointerId);
+
+    if (
+      this.tracker.getTrackedPointersCount() < this.numberOfPointers &&
+      this.getState() !== State.ACTIVE
+    ) {
+      this.fail();
+    }
+  }
+
+  private tryBegin(): void {
     if (this.currentState !== State.UNDETERMINED) {
       return;
     }
@@ -97,12 +133,13 @@ export default class LongPressGestureHandler extends GestureHandler {
     this.startTime = this.previousTime;
 
     this.begin();
-
-    this.startX = event.x;
-    this.startY = event.y;
   }
 
   private tryActivate(): void {
+    if (this.tracker.getTrackedPointersCount() !== this.numberOfPointers) {
+      return;
+    }
+
     if (this.minDurationMs > 0) {
       this.activationTimeout = setTimeout(() => {
         this.activate();
@@ -112,9 +149,11 @@ export default class LongPressGestureHandler extends GestureHandler {
     }
   }
 
-  private checkDistanceFail(event: AdaptedEvent): void {
-    const dx = event.x - this.startX;
-    const dy = event.y - this.startY;
+  private checkDistanceFail(): void {
+    const absoluteCoordsAverage = this.tracker.getAbsoluteCoordsAverage();
+
+    const dx = absoluteCoordsAverage.x - this.startX;
+    const dy = absoluteCoordsAverage.y - this.startY;
     const distSq = dx * dx + dy * dy;
 
     if (distSq <= this.maxDistSq) {

package/src/web/handlers/NativeViewGestureHandler.ts

@@ -27,10 +27,7 @@ export default class NativeViewGestureHandler extends GestureHandler {
 
     const view = this.delegate.getView() as HTMLElement;
 
-    view.style['touchAction'] = 'auto';
-    // @ts-ignore Turns on defualt touch behavior on Safari
-    view.style['WebkitTouchCallout'] = 'auto';
-
+    this.restoreViewStyles(view);
     this.buttonRole = view.getAttribute('role') === 'button';
   }
 
@@ -43,6 +40,19 @@ export default class NativeViewGestureHandler extends GestureHandler {
     if (this.config.disallowInterruption !== undefined) {
       this.disallowInterruption = this.config.disallowInterruption;
     }
+
+    const view = this.delegate.getView() as HTMLElement;
+    this.restoreViewStyles(view);
+  }
+
+  private restoreViewStyles(view: HTMLElement) {
+    if (!view) {
+      return;
+    }
+
+    view.style['touchAction'] = 'auto';
+    // @ts-ignore Turns on defualt touch behavior on Safari
+    view.style['WebkitTouchCallout'] = 'auto';
   }
 
   protected resetConfig(): void {