react-native-gesture-handler 2.6.0 → 2.6.2

package/lib/typescript/web/interfaces.d.ts

@@ -19,6 +19,16 @@ export interface Config extends Record<string, ConfigArgs> {
     simultaneousHandlers?: Handler[] | null;
     waitFor?: Handler[] | null;
     hitSlop?: HitSlop;
+    shouldCancelWhenOutside?: boolean;
+    activateAfterLongPress?: number;
+    failOffsetXStart?: number;
+    failOffsetYStart?: number;
+    failOffsetXEnd?: number;
+    failOffsetYEnd?: number;
+    activeOffsetXStart?: number;
+    activeOffsetXEnd?: number;
+    activeOffsetYStart?: number;
+    activeOffsetYEnd?: number;
     minPointers?: number;
     maxPointers?: number;
     minDist?: number;
@@ -29,14 +39,6 @@ export interface Config extends Record<string, ConfigArgs> {
     minVelocitySq?: number;
     maxDist?: number;
     maxDistSq?: number;
-    failOffsetXStart?: number;
-    failOffsetYStart?: number;
-    failOffsetXEnd?: number;
-    failOffsetYEnd?: number;
-    activeOffsetXStart?: number;
-    activeOffsetXEnd?: number;
-    activeOffsetYStart?: number;
-    activeOffsetYEnd?: number;
     numberOfPointers?: number;
     minDurationMs?: number;
     numberOfTaps?: number;
@@ -44,6 +46,8 @@ export interface Config extends Record<string, ConfigArgs> {
     maxDelayMs?: number;
     maxDeltaX?: number;
     maxDeltaY?: number;
+    shouldActivateOnStart?: boolean;
+    disallowInterruption?: boolean;
     direction?: Directions;
 }
 declare type NativeEventArgs = number | State | boolean | undefined;
@@ -55,24 +59,47 @@ interface NativeEvent extends Record<string, NativeEventArgs> {
     target: number;
     oldState?: State;
 }
+export interface PointerData {
+    id: number;
+    x: number;
+    y: number;
+    absoluteX: number;
+    absoluteY: number;
+}
+declare type TouchNativeArgs = number | State | TouchEventType | PointerData[];
+interface NativeTouchEvent extends Record<string, TouchNativeArgs> {
+    handlerTag: number;
+    state: State;
+    eventType: TouchEventType;
+    changedTouches: PointerData[];
+    allTouches: PointerData[];
+    numberOfTouches: number;
+}
 export interface ResultEvent extends Record<string, NativeEvent | number> {
     nativeEvent: NativeEvent;
     timeStamp: number;
 }
+export interface ResultTouchEvent extends Record<string, NativeTouchEvent | number> {
+    nativeEvent: NativeTouchEvent;
+    timeStamp: number;
+}
 export interface PropsRef {
     onGestureHandlerEvent: () => void;
     onGestureHandlerStateChange: () => void;
 }
-export interface AdaptedPointerEvent {
+export interface AdaptedEvent {
     x: number;
     y: number;
     offsetX: number;
     offsetY: number;
     pointerId: number;
     eventType: EventTypes;
-    pointerType: string;
+    pointerType: PointerType;
     buttons: number;
     time: number;
+    allTouches?: TouchList;
+    changedTouches?: TouchList;
+    touchEventType?: TouchEventType;
 }
 export declare enum MouseButtons {
     NONE = 0,
@@ -94,4 +121,17 @@ export declare enum EventTypes {
     OUT = 6,
     CANCEL = 7
 }
+export declare enum TouchEventType {
+    UNDETERMINED = 0,
+    DOWN = 1,
+    MOVE = 2,
+    UP = 3,
+    CANCELLED = 4
+}
+export declare enum PointerType {
+    NONE = "none",
+    MOUSE = "mouse",
+    TOUCH = "touch",
+    PEN = "pen"
+}
 export {};

package/lib/typescript/web/tools/EventManager.d.ts

@@ -1,28 +1,30 @@
-import { AdaptedPointerEvent } from '../interfaces';
-export default class EventManager {
-    private activePointers;
-    private readonly view;
+import { AdaptedEvent, EventTypes, TouchEventType } from '../interfaces';
+export default abstract class EventManager {
+    protected readonly view: HTMLElement;
+    protected pointersInBounds: number[];
+    protected activePointersCounter: number;
     constructor(view: HTMLElement);
-    setListeners(): void;
-    private onPointerDown;
-    private onPointerUp;
-    private onPointerMove;
-    private onPointerOut;
-    private onPointerEnter;
-    private onPointerCancel;
-    private onPointerOutOfBounds;
-    setOnPointerDown(callback: (event: AdaptedPointerEvent) => void): void;
-    setOnPointerUp(callback: (event: AdaptedPointerEvent) => void): void;
-    setOnPointerMove(callback: (event: AdaptedPointerEvent) => void): void;
-    setOnPointerOut(callback: (event: AdaptedPointerEvent) => void): void;
-    setOnPointerEnter(callback: (event: AdaptedPointerEvent) => void): void;
-    setOnPointerCancel(callback: (event: AdaptedPointerEvent) => void): void;
-    setOnPointerOutOfBounds(callback: (event: AdaptedPointerEvent) => void): void;
-    private mapEvent;
-    isPointerInBounds({ x, y }: {
-        x: number;
-        y: number;
-    }): boolean;
-    private addActivePointer;
-    private removeActivePointer;
+    abstract setListeners(): void;
+    protected abstract mapEvent(event: Event, eventType: EventTypes, index?: number, touchEventType?: TouchEventType): AdaptedEvent;
+    protected onPointerDown(_event: AdaptedEvent): void;
+    protected onPointerAdd(_event: AdaptedEvent): void;
+    protected onPointerUp(_event: AdaptedEvent): void;
+    protected onPointerRemove(_event: AdaptedEvent): void;
+    protected onPointerMove(_event: AdaptedEvent): void;
+    protected onPointerOut(_event: AdaptedEvent): void;
+    protected onPointerEnter(_event: AdaptedEvent): void;
+    protected onPointerCancel(_event: AdaptedEvent): void;
+    protected onPointerOutOfBounds(_event: AdaptedEvent): void;
+    setOnPointerDown(callback: (event: AdaptedEvent) => void): void;
+    setOnPointerAdd(callback: (event: AdaptedEvent) => void): void;
+    setOnPointerUp(callback: (event: AdaptedEvent) => void): void;
+    setOnPointerRemove(callback: (event: AdaptedEvent) => void): void;
+    setOnPointerMove(callback: (event: AdaptedEvent) => void): void;
+    setOnPointerOut(callback: (event: AdaptedEvent) => void): void;
+    setOnPointerEnter(callback: (event: AdaptedEvent) => void): void;
+    setOnPointerCancel(callback: (event: AdaptedEvent) => void): void;
+    setOnPointerOutOfBounds(callback: (event: AdaptedEvent) => void): void;
+    protected markAsInBounds(pointerId: number): void;
+    protected markAsOutOfBounds(pointerId: number): void;
+    resetManager(): void;
 }

package/lib/typescript/web/tools/GestureHandlerOrchestrator.d.ts

@@ -1,5 +1,4 @@
 import { State } from '../../State';
-import { AdaptedPointerEvent } from '../interfaces';
 import GestureHandler from '../handlers/GestureHandler';
 export default class GestureHandlerOrchestrator {
     private static instance;
@@ -11,11 +10,13 @@ export default class GestureHandlerOrchestrator {
     private constructor();
     private scheduleFinishedHandlersCleanup;
     private cleanHandler;
+    removeHandlerFromOrchestrator(handler: GestureHandler): void;
     private cleanupFinishedHandlers;
     private hasOtherHandlerToWaitFor;
     private tryActivate;
+    private shouldActivate;
     private cleanupAwaitingHandlers;
-    onHandlerStateChange(handler: GestureHandler, newState: State, oldState: State, event: AdaptedPointerEvent): void;
+    onHandlerStateChange(handler: GestureHandler, newState: State, oldState: State, sendIfDisabled?: boolean): void;
     private makeActive;
     private addAwaitingHandler;
     recordHandlerIfNotPresent(handler: GestureHandler): void;
@@ -24,5 +25,6 @@ export default class GestureHandlerOrchestrator {
     private shouldHandlerBeCancelledBy;
     private checkOverlap;
     private isFinished;
+    cancelMouseAndPenGestures(currentHandler: GestureHandler): void;
     static getInstance(): GestureHandlerOrchestrator;
 }

package/lib/typescript/web/tools/InteractionManager.d.ts

@@ -1,8 +1,10 @@
 import GestureHandler from '../handlers/GestureHandler';
 import { Config } from '../interfaces';
 export default class InteractionManager {
+    private static instance;
     private readonly waitForRelations;
     private readonly simultaneousRelations;
+    private constructor();
     configureInteractions(handler: GestureHandler, config: Config): void;
     shouldWaitForHandlerFailure(handler: GestureHandler, otherHandler: GestureHandler): boolean;
     shouldRecognizeSimultaneously(handler: GestureHandler, otherHandler: GestureHandler): boolean;
@@ -10,4 +12,5 @@ export default class InteractionManager {
     shouldHandlerBeCancelledBy(_handler: GestureHandler, _otherHandler: GestureHandler): boolean;
     dropRelationsForHandlerWithTag(handlerTag: number): void;
     reset(): void;
+    static getInstance(): InteractionManager;
 }

package/lib/typescript/web/tools/NodeManager.d.ts

@@ -1,11 +1,11 @@
 import { ValueOf } from '../../typeUtils';
 import { Gestures } from '../../RNGestureHandlerModule.web';
-export default class NodeManager {
+export default abstract class NodeManager {
     private static gestures;
-    static getHandler(tag: number): import("../handlers/PanGestureHandler").default | import("../handlers/TapGestureHandler").default | import("../handlers/LongPressGestureHandler").default | import("../handlers/PinchGestureHandler").default | import("../handlers/RotationGestureHandler").default | import("../handlers/FlingGestureHandler").default | import("../handlers/NativeViewGestureHandler").default;
+    static getHandler(tag: number): import("../handlers/PanGestureHandler").default | import("../handlers/TapGestureHandler").default | import("../handlers/LongPressGestureHandler").default | import("../handlers/PinchGestureHandler").default | import("../handlers/RotationGestureHandler").default | import("../handlers/FlingGestureHandler").default | import("../handlers/NativeViewGestureHandler").default | import("../handlers/ManualGestureHandler").default;
     static createGestureHandler(handlerTag: number, handler: InstanceType<ValueOf<typeof Gestures>>): void;
     static dropGestureHandler(handlerTag: number): void;
     static getNodes(): {
-        [x: number]: import("../handlers/PanGestureHandler").default | import("../handlers/TapGestureHandler").default | import("../handlers/LongPressGestureHandler").default | import("../handlers/PinchGestureHandler").default | import("../handlers/RotationGestureHandler").default | import("../handlers/FlingGestureHandler").default | import("../handlers/NativeViewGestureHandler").default;
+        [x: number]: import("../handlers/PanGestureHandler").default | import("../handlers/TapGestureHandler").default | import("../handlers/LongPressGestureHandler").default | import("../handlers/PinchGestureHandler").default | import("../handlers/RotationGestureHandler").default | import("../handlers/FlingGestureHandler").default | import("../handlers/NativeViewGestureHandler").default | import("../handlers/ManualGestureHandler").default;
     };
 }

package/lib/typescript/web/tools/PointerEventManager.d.ts

@@ -0,0 +1,6 @@
+import { AdaptedEvent, EventTypes } from '../interfaces';
+import EventManager from './EventManager';
+export default class PointerEventManager extends EventManager {
+    setListeners(): void;
+    protected mapEvent(event: PointerEvent, eventType: EventTypes): AdaptedEvent;
+}

package/lib/typescript/web/tools/PointerTracker.d.ts

@@ -1,5 +1,5 @@
-import { AdaptedPointerEvent } from '../interfaces';
-interface TrackerElement {
+import { AdaptedEvent } from '../interfaces';
+export interface TrackerElement {
     lastX: number;
     lastY: number;
     timeStamp: number;
@@ -8,12 +8,37 @@ interface TrackerElement {
 }
 export default class PointerTracker {
     private trackedPointers;
-    addToTracker(event: AdaptedPointerEvent): void;
+    private touchEventsIds;
+    private lastMovedPointerId;
+    private cachedAverages;
+    constructor();
+    addToTracker(event: AdaptedEvent): void;
     removeFromTracker(pointerId: number): void;
-    track(event: AdaptedPointerEvent): void;
+    track(event: AdaptedEvent): void;
+    private mapTouchEventId;
+    private removeMappedTouchId;
+    getMappedTouchEventId(touchEventId: number): number;
     getVelocityX(pointerId: number): number;
     getVelocityY(pointerId: number): number;
+    /**
+     * Returns X coordinate of last moved pointer
+     */
+    getLastX(): number;
+    /**
+     *
+     * @param pointerId
+     * Returns X coordinate of given pointer
+     */
     getLastX(pointerId: number): number;
+    /**
+     * Returns Y coordinate of last moved pointer
+     */
+    getLastY(): number;
+    /**
+     *
+     * @param pointerId
+     * Returns Y coordinate of given pointer
+     */
     getLastY(pointerId: number): number;
     getLastAvgX(): number;
     getLastAvgY(): number;
@@ -25,4 +50,3 @@ export default class PointerTracker {
     resetTracker(): void;
     static shareCommonPointers(stPointers: number[], ndPointers: number[]): boolean;
 }
-export {};

package/lib/typescript/web/tools/TouchEventManager.d.ts

@@ -0,0 +1,6 @@
+import { AdaptedEvent, EventTypes, TouchEventType } from '../interfaces';
+import EventManager from './EventManager';
+export default class TouchEventManager extends EventManager {
+    setListeners(): void;
+    protected mapEvent(event: TouchEvent, eventType: EventTypes, index: number, touchEventType: TouchEventType): AdaptedEvent;
+}

package/lib/typescript/web/utils.d.ts

@@ -0,0 +1,4 @@
+export declare function isPointerInBounds(view: HTMLElement, { x, y }: {
+    x: number;
+    y: number;
+}): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gesture-handler",
-  "version": "2.6.0",
+  "version": "2.6.2",
   "description": "Experimental implementation of a new declarative API for gesture handling in react-native",
   "scripts": {
     "prepare": "bob build",
@@ -80,7 +80,7 @@
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/jest": "^27.0.3",
     "@types/react": "^17.0.0",
-    "@types/react-native": "^0.64.2",
+    "@types/react-native": "^0.69.6",
     "@types/react-test-renderer": "^17.0.0",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",

package/src/EnableExperimentalWebImplementation.ts

@@ -1,7 +1,16 @@
+import { Platform } from 'react-native';
+
 let EXPERIMENTAL_WEB_IMPLEMENTATION = false;
 let getWasCalled = false;
 
 export function enableExperimentalWebImplementation(shouldEnable = true): void {
+  if (
+    Platform.OS !== 'web' ||
+    EXPERIMENTAL_WEB_IMPLEMENTATION === shouldEnable
+  ) {
+    return;
+  }
+
   if (getWasCalled) {
     console.error(
       'Some parts of this application have already started using old gesture handler implementation. No changes will be applied. You can try enabling new implementation earlier.'

package/src/RNGestureHandlerModule.macos.ts

@@ -11,6 +11,7 @@ import PinchGestureHandler from './web/handlers/PinchGestureHandler';
 import RotationGestureHandler from './web/handlers/RotationGestureHandler';
 import FlingGestureHandler from './web/handlers/FlingGestureHandler';
 import NativeViewGestureHandler from './web/handlers/NativeViewGestureHandler';
+import ManualGestureHandler from './web/handlers/ManualGestureHandler';
 
 //Hammer Handlers
 import * as HammerNodeManager from './web_hammer/NodeManager';
@@ -21,7 +22,7 @@ import HammerLongPressGestureHandler from './web_hammer/LongPressGestureHandler'
 import HammerPinchGestureHandler from './web_hammer/PinchGestureHandler';
 import HammerRotationGestureHandler from './web_hammer/RotationGestureHandler';
 import HammerFlingGestureHandler from './web_hammer/FlingGestureHandler';
-import { Config } from './web_hammer/GestureHandler';
+import { Config } from './web/interfaces';
 
 export const Gestures = {
   NativeViewGestureHandler,
@@ -31,6 +32,7 @@ export const Gestures = {
   PinchGestureHandler,
   RotationGestureHandler,
   FlingGestureHandler,
+  ManualGestureHandler,
 };
 
 export const HammerGestures = {
@@ -44,12 +46,11 @@ export const HammerGestures = {
 };
 
 export default {
-  // Direction,
-  handleSetJSResponder(tag: number, blockNativeResponder: boolean) {
-    console.warn('handleSetJSResponder: ', tag, blockNativeResponder);
+  handleSetJSResponder(_tag: number, _blockNativeResponder: boolean) {
+    // NO-OP
   },
   handleClearJSResponder() {
-    console.warn('handleClearJSResponder: ');
+    // NO-OP
   },
   createGestureHandler<T>(
     handlerName: keyof typeof Gestures,
@@ -57,28 +58,37 @@ export default {
     config: T
   ) {
     if (isExperimentalWebImplementationEnabled()) {
-      if (!(handlerName in Gestures)) return;
-
-      const interactionManager = new InteractionManager();
+      if (!(handlerName in Gestures)) {
+        throw new Error(
+          `react-native-gesture-handler: ${handlerName} is not supported on web.`
+        );
+      }
 
       const GestureClass = Gestures[handlerName];
       NodeManager.createGestureHandler(handlerTag, new GestureClass());
-      interactionManager.configureInteractions(
+      InteractionManager.getInstance().configureInteractions(
         NodeManager.getHandler(handlerTag),
         (config as unknown) as Config
       );
     } else {
-      if (!(handlerName in HammerGestures)) return;
+      if (!(handlerName in HammerGestures)) {
+        throw new Error(
+          `react-native-gesture-handler: ${handlerName} is not supported on web.`
+        );
+      }
 
+      // @ts-ignore If it doesn't exist, the error is thrown
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
       const GestureClass = HammerGestures[handlerName];
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
       HammerNodeManager.createGestureHandler(handlerTag, new GestureClass());
     }
 
-    this.updateGestureHandler(handlerTag, config);
+    this.updateGestureHandler(handlerTag, (config as unknown) as Config);
   },
   attachGestureHandler(
     handlerTag: number,
-    newView: number, //ref
+    newView: number,
     _actionType: ActionType,
     propsRef: React.RefObject<unknown>
   ) {
@@ -88,9 +98,14 @@ export default {
       HammerNodeManager.getHandler(handlerTag).setView(newView, propsRef);
     }
   },
-  updateGestureHandler(handlerTag: number, newConfig: any) {
+  updateGestureHandler(handlerTag: number, newConfig: Config) {
     if (isExperimentalWebImplementationEnabled()) {
       NodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);
+
+      InteractionManager.getInstance().configureInteractions(
+        NodeManager.getHandler(handlerTag),
+        newConfig
+      );
     } else {
       HammerNodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);
     }

package/src/RNGestureHandlerModule.ts

@@ -16,7 +16,10 @@ if (RNGestureHandlerModule == null) {
   );
 }
 
-if (RNGestureHandlerModule.flushOperations === undefined) {
+if (
+  RNGestureHandlerModule &&
+  RNGestureHandlerModule.flushOperations === undefined
+) {
   RNGestureHandlerModule.flushOperations = () => {
     // NO-OP if not defined
   };

package/src/RNGestureHandlerModule.web.ts

@@ -1,4 +1,7 @@
+import React from 'react';
+
 import { ActionType } from './ActionType';
+import { isExperimentalWebImplementationEnabled } from './EnableExperimentalWebImplementation';
 
 //GestureHandlers
 import InteractionManager from './web/tools/InteractionManager';
@@ -10,6 +13,7 @@ import PinchGestureHandler from './web/handlers/PinchGestureHandler';
 import RotationGestureHandler from './web/handlers/RotationGestureHandler';
 import FlingGestureHandler from './web/handlers/FlingGestureHandler';
 import NativeViewGestureHandler from './web/handlers/NativeViewGestureHandler';
+import ManualGestureHandler from './web/handlers/ManualGestureHandler';
 
 //Hammer Handlers
 import * as HammerNodeManager from './web_hammer/NodeManager';
@@ -21,7 +25,6 @@ import HammerPinchGestureHandler from './web_hammer/PinchGestureHandler';
 import HammerRotationGestureHandler from './web_hammer/RotationGestureHandler';
 import HammerFlingGestureHandler from './web_hammer/FlingGestureHandler';
 import { Config } from './web/interfaces';
-import { isExperimentalWebImplementationEnabled } from './EnableExperimentalWebImplementation';
 
 export const Gestures = {
   NativeViewGestureHandler,
@@ -31,6 +34,7 @@ export const Gestures = {
   PinchGestureHandler,
   RotationGestureHandler,
   FlingGestureHandler,
+  ManualGestureHandler,
 };
 
 export const HammerGestures = {
@@ -43,10 +47,7 @@ export const HammerGestures = {
   FlingGestureHandler: HammerFlingGestureHandler,
 };
 
-const interactionManager = new InteractionManager();
-
 export default {
-  // Direction,
   handleSetJSResponder(tag: number, blockNativeResponder: boolean) {
     console.warn('handleSetJSResponder: ', tag, blockNativeResponder);
   },
@@ -67,7 +68,7 @@ export default {
 
       const GestureClass = Gestures[handlerName];
       NodeManager.createGestureHandler(handlerTag, new GestureClass());
-      interactionManager.configureInteractions(
+      InteractionManager.getInstance().configureInteractions(
         NodeManager.getHandler(handlerTag),
         (config as unknown) as Config
       );
@@ -78,7 +79,10 @@ export default {
         );
       }
 
+      // @ts-ignore If it doesn't exist, the error is thrown
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
       const GestureClass = HammerGestures[handlerName];
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
       HammerNodeManager.createGestureHandler(handlerTag, new GestureClass());
     }
 
@@ -86,13 +90,22 @@ export default {
   },
   attachGestureHandler(
     handlerTag: number,
-    newView: number,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    newView: any,
     _actionType: ActionType,
     propsRef: React.RefObject<unknown>
   ) {
+    if (
+      !(newView instanceof HTMLElement || newView instanceof React.Component)
+    ) {
+      return;
+    }
+
     if (isExperimentalWebImplementationEnabled()) {
+      //@ts-ignore Types should be HTMLElement or React.Component
       NodeManager.getHandler(handlerTag).init(newView, propsRef);
     } else {
+      //@ts-ignore Types should be HTMLElement or React.Component
       HammerNodeManager.getHandler(handlerTag).setView(newView, propsRef);
     }
   },
@@ -100,7 +113,7 @@ export default {
     if (isExperimentalWebImplementationEnabled()) {
       NodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);
 
-      interactionManager.configureInteractions(
+      InteractionManager.getInstance().configureInteractions(
         NodeManager.getHandler(handlerTag),
         newConfig
       );

package/src/components/GestureComponents.tsx

@@ -57,14 +57,12 @@ export const ScrollView = React.forwardRef<
       waitFor={[...toArray(waitFor ?? []), refreshControlGestureRef]}
       // @ts-ignore we don't pass `refreshing` prop as we only want to override the ref
       refreshControl={
-        refreshControl ? (
-          <RefreshControl
-            {...refreshControl.props}
-            ref={refreshControlGestureRef}
-          />
-        ) : (
-          refreshControl
-        )
+        refreshControl
+          ? React.cloneElement(refreshControl, {
+              // @ts-ignore for reasons unknown to me, `ref` doesn't exist on the type inferred by TS
+              ref: refreshControlGestureRef,
+            })
+          : undefined
       }
     />
   );
@@ -129,14 +127,12 @@ export const FlatList = React.forwardRef((props, ref) => {
       )}
       // @ts-ignore we don't pass `refreshing` prop as we only want to override the ref
       refreshControl={
-        refreshControl ? (
-          <RefreshControl
-            {...refreshControl.props}
-            ref={refreshControlGestureRef}
-          />
-        ) : (
-          refreshControl
-        )
+        refreshControl
+          ? React.cloneElement(refreshControl, {
+              // @ts-ignore for reasons unknown to me, `ref` doesn't exist on the type inferred by TS
+              ref: refreshControlGestureRef,
+            })
+          : undefined
       }
     />
   );

package/src/components/GestureComponents.web.tsx

@@ -12,7 +12,7 @@ import {
 import createNativeWrapper from '../handlers/createNativeWrapper';
 
 export const ScrollView = createNativeWrapper(RNScrollView, {
-  disallowInterruption: true,
+  disallowInterruption: false,
 });
 
 export const Switch = createNativeWrapper(RNSwitch, {

package/src/components/Swipeable.tsx

@@ -106,12 +106,15 @@ export interface SwipeableProps
   /**
    * Called when action panel gets open (either right or left).
    */
-  onSwipeableOpen?: (direction: 'left' | 'right') => void;
+  onSwipeableOpen?: (direction: 'left' | 'right', swipeable: Swipeable) => void;
 
   /**
    * Called when action panel is closed.
    */
-  onSwipeableClose?: (direction: 'left' | 'right') => void;
+  onSwipeableClose?: (
+    direction: 'left' | 'right',
+    swipeable: Swipeable
+  ) => void;
 
   /**
    * @deprecated Use `direction` argument of onSwipeableWillOpen()
@@ -161,7 +164,8 @@ export interface SwipeableProps
    * */
   renderRightActions?: (
     progressAnimatedValue: Animated.AnimatedInterpolation,
-    dragAnimatedValue: Animated.AnimatedInterpolation
+    dragAnimatedValue: Animated.AnimatedInterpolation,
+    swipeable: Swipeable
   ) => React.ReactNode;
 
   useNativeAnimations?: boolean;
@@ -381,13 +385,13 @@ export default class Swipeable extends Component<
       if (finished) {
         if (toValue > 0) {
           this.props.onSwipeableLeftOpen?.();
-          this.props.onSwipeableOpen?.('left');
+          this.props.onSwipeableOpen?.('left', this);
         } else if (toValue < 0) {
           this.props.onSwipeableRightOpen?.();
-          this.props.onSwipeableOpen?.('right');
+          this.props.onSwipeableOpen?.('right', this);
         } else {
           const closingDirection = fromValue > 0 ? 'left' : 'right';
-          this.props.onSwipeableClose?.(closingDirection);
+          this.props.onSwipeableClose?.(closingDirection, this);
         }
       }
     });
@@ -463,7 +467,7 @@ export default class Swipeable extends Component<
           styles.rightActions,
           { transform: [{ translateX: this.rightActionTranslate! }] },
         ]}>
-        {renderRightActions(this.showRightAction!, this.transX!)}
+        {renderRightActions(this.showRightAction!, this.transX!, this)}
         <View
           onLayout={({ nativeEvent }) =>
             this.setState({ rightOffset: nativeEvent.layout.x })