react-native-gesture-handler 2.6.1 → 2.6.2

package/lib/typescript/utils.d.ts

@@ -1,3 +1,7 @@
+export declare const REACT_NATIVE_VERSION: {
+    major: number;
+    minor: number;
+};
 export declare function toArray<T>(object: T | T[]): T[];
 export declare type withPrevAndCurrentMapFn<T, Transformed> = (previous: Transformed | null, current: T) => Transformed;
 export declare function withPrevAndCurrent<T, Transformed>(array: T[], mapFn: withPrevAndCurrentMapFn<T, Transformed>): Transformed[];

package/lib/typescript/web/handlers/GestureHandler.d.ts

@@ -67,6 +67,7 @@ export default abstract class GestureHandler {
     sendEvent: (newState: State, oldState: State) => void;
     private transformEventData;
     private transformTouchEvent;
+    private cancelTouches;
     protected transformNativeEvent(): {};
     updateGestureConfig({ enabled, ...props }: Config): void;
     protected checkCustomActivationCriteria(criterias: string[]): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gesture-handler",
-  "version": "2.6.1",
+  "version": "2.6.2",
   "description": "Experimental implementation of a new declarative API for gesture handling in react-native",
   "scripts": {
     "prepare": "bob build",

package/src/RNGestureHandlerModule.macos.ts

@@ -46,11 +46,11 @@ export const HammerGestures = {
 };
 
 export default {
-  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,

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/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 })

package/src/handlers/gestures/GestureDetector.tsx

@@ -35,7 +35,7 @@ import { State } from '../../State';
 import { TouchEventType } from '../../TouchEventType';
 import { ComposedGesture } from './gestureComposition';
 import { ActionType } from '../../ActionType';
-import { isFabric, tagMessage } from '../../utils';
+import { isFabric, REACT_NATIVE_VERSION, tagMessage } from '../../utils';
 import { getShadowNodeFromRef } from '../../getShadowNodeFromRef';
 import { Platform } from 'react-native';
 import type RNGestureHandlerModuleWeb from '../../RNGestureHandlerModule.web';
@@ -539,8 +539,13 @@ function validateDetectorChildren(ref: any) {
   //         /       \
   //   NativeView  NativeView
   if (__DEV__ && Platform.OS !== 'web') {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
-    const wrapType = ref._reactInternals.elementType;
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    const wrapType =
+      REACT_NATIVE_VERSION.minor > 63 || REACT_NATIVE_VERSION.major > 0
+        ? // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+          ref._reactInternals.elementType
+        : // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+          ref._reactInternalFiber.elementType;
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
     let instance = RNRenderer.findHostInstance_DEPRECATED(ref)
       ._internalFiberInstanceHandleDEV;

package/src/utils.ts

@@ -1,6 +1,10 @@
 import pack from 'react-native/package.json';
 
-const rnVersion = pack.version;
+const [majorStr, minorStr] = pack.version.split('.');
+export const REACT_NATIVE_VERSION = {
+  major: parseInt(majorStr, 10),
+  minor: parseInt(minorStr, 10),
+};
 
 export function toArray<T>(object: T | T[]): T[] {
   if (!Array.isArray(object)) {
@@ -52,12 +56,8 @@ export function isFabric(): boolean {
 }
 
 export function shouldUseCodegenNativeComponent(): boolean {
-  const [majorStr, minorStr] = rnVersion.split('.');
-  const major = Number.parseInt(majorStr);
-  const minor = Number.parseInt(minorStr);
-
   // use codegenNativeComponent starting with RN 0.68
-  return minor >= 68 || major > 0;
+  return REACT_NATIVE_VERSION.minor >= 68 || REACT_NATIVE_VERSION.major > 0;
 }
 
 export function isRemoteDebuggingEnabled(): boolean {

package/src/web/handlers/GestureHandler.ts

@@ -121,6 +121,15 @@ export default abstract class GestureHandler {
       return;
     }
 
+    if (
+      this.tracker.getTrackedPointersCount() > 0 &&
+      (newState === State.END ||
+        newState === State.CANCELLED ||
+        newState === State.FAILED)
+    ) {
+      this.cancelTouches();
+    }
+
     const oldState = this.currentState;
     this.currentState = newState;
 
@@ -507,6 +516,56 @@ export default abstract class GestureHandler {
     };
   }
 
+  private cancelTouches(): void {
+    const rect = this.view.getBoundingClientRect();
+
+    const all: PointerData[] = [];
+    const changed: PointerData[] = [];
+
+    const trackerData = this.tracker.getData();
+
+    if (trackerData.size === 0) {
+      return;
+    }
+
+    trackerData.forEach((element: TrackerElement, key: number): void => {
+      const id: number = this.tracker.getMappedTouchEventId(key);
+
+      all.push({
+        id: id,
+        x: element.lastX - rect.left,
+        y: element.lastY - rect.top,
+        absoluteX: element.lastX,
+        absoluteY: element.lastY,
+      });
+
+      changed.push({
+        id: id,
+        x: element.lastX - rect.left,
+        y: element.lastY - rect.top,
+        absoluteX: element.lastX,
+        absoluteY: element.lastY,
+      });
+    });
+
+    const cancelEvent: ResultTouchEvent = {
+      nativeEvent: {
+        handlerTag: this.handlerTag,
+        state: this.currentState,
+        eventType: TouchEventType.CANCELLED,
+        changedTouches: changed,
+        allTouches: all,
+        numberOfTouches: all.length,
+      },
+      timeStamp: Date.now(),
+    };
+
+    const { onGestureHandlerEvent }: PropsRef = this.propsRef
+      .current as PropsRef;
+
+    invokeNullableMethod(onGestureHandlerEvent, cancelEvent);
+  }
+
   protected transformNativeEvent() {
     return {};
   }