react-native-gesture-handler 2.5.0 → 2.6.0

package/src/components/GestureComponents.tsx

@@ -16,6 +16,7 @@ import {
   DrawerLayoutAndroidProps as RNDrawerLayoutAndroidProps,
   FlatList as RNFlatList,
   FlatListProps as RNFlatListProps,
+  RefreshControl as RNRefreshControl,
 } from 'react-native';
 
 import createNativeWrapper from '../handlers/createNativeWrapper';
@@ -25,16 +26,53 @@ import {
   nativeViewProps,
 } from '../handlers/NativeViewGestureHandler';
 
-export const ScrollView = createNativeWrapper<
-  PropsWithChildren<RNScrollViewProps>
->(RNScrollView, {
+import { toArray } from '../utils';
+
+export const RefreshControl = createNativeWrapper(RNRefreshControl, {
   disallowInterruption: true,
   shouldCancelWhenOutside: false,
 });
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export type RefreshControl = typeof RefreshControl & RNRefreshControl;
+
+const GHScrollView = createNativeWrapper<PropsWithChildren<RNScrollViewProps>>(
+  RNScrollView,
+  {
+    disallowInterruption: true,
+    shouldCancelWhenOutside: false,
+  }
+);
+export const ScrollView = React.forwardRef<
+  RNScrollView,
+  RNScrollViewProps & NativeViewGestureHandlerProps
+>((props, ref) => {
+  const refreshControlGestureRef = React.useRef<RefreshControl>(null);
+  const { refreshControl, waitFor, ...rest } = props;
+
+  return (
+    <GHScrollView
+      {...rest}
+      // @ts-ignore `ref` exists on `GHScrollView`
+      ref={ref}
+      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
+        )
+      }
+    />
+  );
+});
 // backward type compatibility with https://github.com/software-mansion/react-native-gesture-handler/blob/db78d3ca7d48e8ba57482d3fe9b0a15aa79d9932/react-native-gesture-handler.d.ts#L440-L457
 // include methods of wrapped components by creating an intersection type with the RN component instead of duplicating them.
 // eslint-disable-next-line @typescript-eslint/no-redeclare
-export type ScrollView = typeof ScrollView & RNScrollView;
+export type ScrollView = typeof GHScrollView & RNScrollView;
 
 export const Switch = createNativeWrapper<RNSwitchProps>(RNSwitch, {
   shouldCancelWhenOutside: false,
@@ -56,9 +94,13 @@ export type DrawerLayoutAndroid = typeof DrawerLayoutAndroid &
   RNDrawerLayoutAndroid;
 
 export const FlatList = React.forwardRef((props, ref) => {
+  const refreshControlGestureRef = React.useRef<RefreshControl>(null);
+
+  const { waitFor, refreshControl, ...rest } = props;
+
   const flatListProps = {};
   const scrollViewProps = {};
-  for (const [propName, value] of Object.entries(props)) {
+  for (const [propName, value] of Object.entries(rest)) {
     // https://github.com/microsoft/TypeScript/issues/26255
     if ((nativeViewProps as readonly string[]).includes(propName)) {
       // @ts-ignore - this function cannot have generic type so we have to ignore this error
@@ -70,14 +112,32 @@ export const FlatList = React.forwardRef((props, ref) => {
       flatListProps[propName] = value;
     }
   }
+
   return (
     // @ts-ignore - this function cannot have generic type so we have to ignore this error
     <RNFlatList
       ref={ref}
       {...flatListProps}
       renderScrollComponent={(scrollProps) => (
-        <ScrollView {...{ ...scrollProps, ...scrollViewProps }} />
+        <ScrollView
+          {...{
+            ...scrollProps,
+            ...scrollViewProps,
+            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
+        )
+      }
     />
   );
 }) as <ItemT = any>(

package/src/components/GestureComponents.web.tsx

@@ -6,6 +6,7 @@ import {
   TextInput as RNTextInput,
   ScrollView as RNScrollView,
   FlatListProps,
+  View,
 } from 'react-native';
 
 import createNativeWrapper from '../handlers/createNativeWrapper';
@@ -25,6 +26,10 @@ export const DrawerLayoutAndroid = createNativeWrapper(RNDrawerLayoutAndroid, {
 });
 // @ts-ignore -- TODO(TS) to investigate if it's needed
 DrawerLayoutAndroid.positions = RNDrawerLayoutAndroid.positions;
+// RefreshControl is implemented as a functional component, rendering a View
+// NativeViewGestureHandler needs to set a ref on its child, which cannot be done
+// on functional components
+export const RefreshControl = createNativeWrapper(View);
 
 export const FlatList = React.forwardRef(
   <ItemT extends any>(props: FlatListProps<ItemT>, ref: any) => (

package/src/components/Swipeable.tsx

@@ -219,7 +219,7 @@ export default class Swipeable extends Component<
     );
   }
 
-  UNSAFE_componentWillUpdate(props: SwipeableProps, state: SwipeableState) {
+  shouldComponentUpdate(props: SwipeableProps, state: SwipeableState) {
     if (
       this.props.friction !== props.friction ||
       this.props.overshootLeft !== props.overshootLeft ||
@@ -231,6 +231,8 @@ export default class Swipeable extends Component<
     ) {
       this.updateAnimatedEvent(props, state);
     }
+
+    return true;
   }
 
   private onGestureEvent?: (

package/src/components/touchables/GenericTouchable.tsx

@@ -278,6 +278,7 @@ export default class GenericTouchable extends Component<
         disallowInterruption={this.props.disallowInterruption}
         testID={this.props.testID}
         touchSoundDisabled={this.props.touchSoundDisabled ?? false}
+        enabled={!this.props.disabled}
         {...this.props.extraButtonProps}>
         <Animated.View {...coreProps} style={this.props.style}>
           {this.props.children}

package/src/handlers/createHandler.tsx

@@ -25,7 +25,7 @@ import {
   scheduleFlushOperations,
 } from './gestureHandlerCommon';
 import { ValueOf } from '../typeUtils';
-import { isFabric, isJestEnv } from '../utils';
+import { isFabric, isJestEnv, tagMessage } from '../utils';
 import { ActionType } from '../ActionType';
 import { PressabilityDebugView } from './PressabilityDebugView';
 
@@ -407,6 +407,7 @@ export default function createHandler<
         onGestureEvent,
         onGestureHandlerEvent,
       }: OnGestureEventHandlers = this.props;
+
       if (onGestureEvent && typeof onGestureEvent !== 'function') {
         // If it's not a method it should be an native Animated.event
         // object. We set it directly as the handler for the view
@@ -469,7 +470,17 @@ export default function createHandler<
 
       this.propsRef.current = events;
 
-      const child: any = React.Children.only(this.props.children);
+      let child: any = null;
+      try {
+        child = React.Children.only(this.props.children);
+      } catch (e) {
+        throw new Error(
+          tagMessage(
+            `${name} got more than one view as a child. If you want the gesture to work on multiple views, wrap them with a common parent and attach the gesture to that view.`
+          )
+        );
+      }
+
       let grandChildren = child.props.children;
       if (
         __DEV__ &&

package/src/handlers/gestures/GestureDetector.tsx

@@ -40,6 +40,8 @@ import { getShadowNodeFromRef } from '../../getShadowNodeFromRef';
 import { Platform } from 'react-native';
 import type RNGestureHandlerModuleWeb from '../../RNGestureHandlerModule.web';
 import { onGestureHandlerEvent } from './eventReceiver';
+import { RNRenderer } from '../../RNRenderer';
+import { isExperimentalWebImplementationEnabled } from '../../EnableExperimentalWebImplementation';
 
 declare const global: {
   isFormsStackingContext: (node: unknown) => boolean | null; // JSI function
@@ -116,6 +118,9 @@ function checkGestureCallbacksForWorklets(gesture: GestureType) {
 
 interface WebEventHandler {
   onGestureHandlerEvent: (event: HandlerStateChangeEvent<unknown>) => void;
+  onGestureHandlerStateChange?: (
+    event: HandlerStateChangeEvent<unknown>
+  ) => void;
 }
 
 interface AttachHandlersConfig {
@@ -511,6 +516,51 @@ function useAnimatedGesture(
   preparedGesture.animatedHandlers = sharedHandlersCallbacks;
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function validateDetectorChildren(ref: any) {
+  // finds the first native view under the Wrap component and traverses the fiber tree upwards
+  // to check whether there is more than one native view as a pseudo-direct child of GestureDetector
+  // i.e. this is not ok:
+  //            Wrap
+  //             |
+  //            / \
+  //           /   \
+  //          /     \
+  //         /       \
+  //   NativeView  NativeView
+  //
+  // but this is fine:
+  //            Wrap
+  //             |
+  //         NativeView
+  //             |
+  //            / \
+  //           /   \
+  //          /     \
+  //         /       \
+  //   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, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
+    let instance = RNRenderer.findHostInstance_DEPRECATED(ref)
+      ._internalFiberInstanceHandleDEV;
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    while (instance && instance.elementType !== wrapType) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+      if (instance.sibling) {
+        throw new Error(
+          'GestureDetector has more than one native view as its children. This can happen if you are using a custom component that renders multiple views, like React.Fragment. You should wrap content of GestureDetector with a <View> or <Animated.View>.'
+        );
+      }
+
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+      instance = instance.return;
+    }
+  }
+}
+
 interface GestureDetectorProps {
   gesture?: ComposedGesture | GestureType;
   children?: React.ReactNode;
@@ -525,6 +575,11 @@ export const GestureDetector = (props: GestureDetectorProps) => {
     onGestureHandlerEvent: (e: HandlerStateChangeEvent<unknown>) => {
       onGestureHandlerEvent(e.nativeEvent);
     },
+    onGestureHandlerStateChange: isExperimentalWebImplementationEnabled()
+      ? (e: HandlerStateChangeEvent<unknown>) => {
+          onGestureHandlerEvent(e.nativeEvent);
+        }
+      : undefined,
   });
 
   const preparedGesture = React.useRef<GestureConfigReference>({
@@ -561,6 +616,8 @@ export const GestureDetector = (props: GestureDetectorProps) => {
   useEffect(() => {
     firstRenderRef.current = true;
     const viewTag = findNodeHandle(viewRef.current) as number;
+
+    validateDetectorChildren(viewRef.current);
     attachHandlers({
       preparedGesture,
       gestureConfig,
@@ -579,6 +636,7 @@ export const GestureDetector = (props: GestureDetectorProps) => {
       const viewTag = findNodeHandle(viewRef.current) as number;
 
       if (needsToReattach(preparedGesture, gesture)) {
+        validateDetectorChildren(viewRef.current);
         dropHandlers(preparedGesture);
         attachHandlers({
           preparedGesture,
@@ -633,18 +691,26 @@ class Wrap extends React.Component<{
   children?: React.ReactNode;
 }> {
   render() {
-    // I don't think that fighting with types over such a simple function is worth it
-    // The only thing it does is add 'collapsable: false' to the child component
-    // to make sure it is in the native view hierarchy so the detector can find
-    // correct viewTag to attach to.
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const child: any = React.Children.only(this.props.children);
-    return React.cloneElement(
-      child,
-      { collapsable: false },
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-      child.props.children
-    );
+    try {
+      // I don't think that fighting with types over such a simple function is worth it
+      // The only thing it does is add 'collapsable: false' to the child component
+      // to make sure it is in the native view hierarchy so the detector can find
+      // correct viewTag to attach to.
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const child: any = React.Children.only(this.props.children);
+      return React.cloneElement(
+        child,
+        { collapsable: false },
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        child.props.children
+      );
+    } catch (e) {
+      throw new Error(
+        tagMessage(
+          `GestureDetector got more than one view as a child. If you want the gesture to work on multiple views, wrap them with a common parent and attach the gesture to that view.`
+        )
+      );
+    }
   }
 }
 

package/src/handlers/gestures/reanimatedWrapper.ts

@@ -30,6 +30,13 @@ let Reanimated: {
 try {
   Reanimated = require('react-native-reanimated');
 
+  if (!Reanimated.useSharedValue) {
+    // @ts-ignore Make sure the loaded module is actually Reanimated, if it's not
+    // reset the module to undefined so we can fallback to the default implementation
+    Reanimated = undefined;
+    throw new Error('react-native-reanimated is not found');
+  }
+
   if (!Reanimated.setGestureState) {
     Reanimated.setGestureState = () => {
       'worklet';

package/src/index.ts

@@ -105,6 +105,7 @@ export {
   TextInput,
   DrawerLayoutAndroid,
   FlatList,
+  RefreshControl,
 } from './components/GestureComponents';
 export type {
   //events
@@ -156,4 +157,6 @@ export type {
 } from './components/DrawerLayout';
 export { default as DrawerLayout } from './components/DrawerLayout';
 
+export { enableExperimentalWebImplementation } from './EnableExperimentalWebImplementation';
+
 initialize();

package/src/web/constants.ts

@@ -1,20 +1,4 @@
-import Hammer from '@egjs/hammerjs';
-
-import { State } from '../State';
-
-export const CONTENT_TOUCHES_DELAY = 240;
-export const CONTENT_TOUCHES_QUICK_TAP_END_DELAY = 50;
-export const MULTI_FINGER_PAN_MAX_PINCH_THRESHOLD = 0.1;
-export const MULTI_FINGER_PAN_MAX_ROTATION_THRESHOLD = 7;
-export const DEG_RAD = Math.PI / 180;
-
-// Map Hammer values to RNGH
-export const EventMap = {
-  [Hammer.INPUT_START]: State.BEGAN,
-  [Hammer.INPUT_MOVE]: State.ACTIVE,
-  [Hammer.INPUT_END]: State.END,
-  [Hammer.INPUT_CANCEL]: State.FAILED,
-} as const;
+export const DEFAULT_TOUCH_SLOP = 15;
 
 export const Direction = {
   RIGHT: 1,
@@ -22,27 +6,3 @@ export const Direction = {
   UP: 4,
   DOWN: 8,
 };
-
-export const DirectionMap = {
-  [Hammer.DIRECTION_RIGHT]: Direction.RIGHT,
-  [Hammer.DIRECTION_LEFT]: Direction.LEFT,
-  [Hammer.DIRECTION_UP]: Direction.UP,
-  [Hammer.DIRECTION_DOWN]: Direction.DOWN,
-};
-
-export const HammerInputNames = {
-  [Hammer.INPUT_START]: 'START',
-  [Hammer.INPUT_MOVE]: 'MOVE',
-  [Hammer.INPUT_END]: 'END',
-  [Hammer.INPUT_CANCEL]: 'CANCEL',
-};
-export const HammerDirectionNames = {
-  [Hammer.DIRECTION_HORIZONTAL]: 'HORIZONTAL',
-  [Hammer.DIRECTION_UP]: 'UP',
-  [Hammer.DIRECTION_DOWN]: 'DOWN',
-  [Hammer.DIRECTION_VERTICAL]: 'VERTICAL',
-  [Hammer.DIRECTION_NONE]: 'NONE',
-  [Hammer.DIRECTION_ALL]: 'ALL',
-  [Hammer.DIRECTION_RIGHT]: 'RIGHT',
-  [Hammer.DIRECTION_LEFT]: 'LEFT',
-};

package/src/web/detectors/RotationGestureDetector.ts

@@ -0,0 +1,199 @@
+import { AdaptedPointerEvent, EventTypes } from '../interfaces';
+import PointerTracker from '../tools/PointerTracker';
+
+export interface RotationGestureListener {
+  onRotationBegin: (detector: RotationGestureDetector) => boolean;
+  onRotation: (
+    detector: RotationGestureDetector,
+    event: AdaptedPointerEvent
+  ) => boolean;
+  onRotationEnd: (
+    detector: RotationGestureDetector,
+    event: AdaptedPointerEvent
+  ) => void;
+}
+
+export default class RotationGestureDetector
+  implements RotationGestureListener {
+  onRotationBegin: (detector: RotationGestureDetector) => boolean;
+  onRotation: (
+    detector: RotationGestureDetector,
+    event: AdaptedPointerEvent
+  ) => boolean;
+  onRotationEnd: (
+    detector: RotationGestureDetector,
+    event: AdaptedPointerEvent
+  ) => void;
+
+  private currentTime = 0;
+  private previousTime = 0;
+
+  private previousAngle = 0;
+  private rotation = 0;
+
+  private anchorX = 0;
+  private anchorY = 0;
+
+  private isInProgress = false;
+
+  private keyPointers: number[] = [NaN, NaN];
+
+  constructor(callbacks: RotationGestureListener) {
+    this.onRotationBegin = callbacks.onRotationBegin;
+    this.onRotation = callbacks.onRotation;
+    this.onRotationEnd = callbacks.onRotationEnd;
+  }
+
+  private updateCurrent(
+    event: AdaptedPointerEvent,
+    tracker: PointerTracker
+  ): void {
+    this.previousTime = this.currentTime;
+    this.currentTime = event.time;
+
+    const [firstPointerID, secondPointerID] = this.keyPointers;
+
+    const firstPointerX: number = tracker.getLastX(firstPointerID);
+    const firstPointerY: number = tracker.getLastY(firstPointerID);
+    const secondPointerX: number = tracker.getLastX(secondPointerID);
+    const secondPointerY: number = tracker.getLastY(secondPointerID);
+
+    const vectorX: number = secondPointerX - firstPointerX;
+    const vectorY: number = secondPointerY - firstPointerY;
+
+    this.anchorX = (firstPointerX + secondPointerX) / 2;
+    this.anchorY = (firstPointerY + secondPointerY) / 2;
+
+    //Angle diff should be positive when rotating in clockwise direction
+    const angle: number = -Math.atan2(vectorY, vectorX);
+    this.rotation = Number.isNaN(this.previousAngle)
+      ? 0
+      : this.previousAngle - angle;
+
+    this.previousAngle = angle;
+
+    if (this.rotation > Math.PI) {
+      this.rotation -= Math.PI;
+    } else if (this.rotation < -Math.PI) {
+      this.rotation += Math.PI;
+    }
+
+    if (this.rotation > Math.PI / 2) {
+      this.rotation -= Math.PI;
+    } else if (this.rotation < -Math.PI / 2) {
+      this.rotation += Math.PI;
+    }
+  }
+
+  private finish(event: AdaptedPointerEvent): void {
+    if (!this.isInProgress) {
+      return;
+    }
+
+    this.isInProgress = false;
+    this.keyPointers = [NaN, NaN];
+    this.onRotationEnd(this, event);
+  }
+
+  private setKeyPointers(tracker: PointerTracker): void {
+    if (this.keyPointers[0] && this.keyPointers[1]) {
+      return;
+    }
+
+    const pointerIDs: IterableIterator<number> = tracker.getData().keys();
+
+    this.keyPointers[0] = pointerIDs.next().value as number;
+    this.keyPointers[1] = pointerIDs.next().value as number;
+  }
+
+  public onTouchEvent(
+    event: AdaptedPointerEvent,
+    tracker: PointerTracker
+  ): boolean {
+    this.adaptEvent(event, tracker);
+
+    switch (event.eventType) {
+      case EventTypes.DOWN:
+        this.isInProgress = false;
+        break;
+
+      case EventTypes.ADDITIONAL_POINTER_DOWN:
+        if (this.isInProgress) {
+          break;
+        }
+
+        this.isInProgress = true;
+
+        this.previousTime = event.time;
+        this.previousAngle = NaN;
+
+        this.setKeyPointers(tracker);
+
+        this.updateCurrent(event, tracker);
+        this.onRotationBegin(this);
+        break;
+
+      case EventTypes.MOVE:
+        if (!this.isInProgress) {
+          break;
+        }
+
+        this.updateCurrent(event, tracker);
+        this.onRotation(this, event);
+
+        break;
+
+      case EventTypes.ADDITIONAL_POINTER_UP:
+        if (!this.isInProgress) {
+          break;
+        }
+
+        if (this.keyPointers.indexOf(event.pointerId) >= 0) {
+          this.finish(event);
+        }
+
+        break;
+
+      case EventTypes.UP:
+        this.finish(event);
+        break;
+    }
+
+    return true;
+  }
+
+  private adaptEvent(
+    event: AdaptedPointerEvent,
+    tracker: PointerTracker
+  ): void {
+    if (
+      tracker.getTrackedPointersCount() &&
+      event.eventType === EventTypes.DOWN
+    ) {
+      event.eventType = EventTypes.ADDITIONAL_POINTER_DOWN;
+    }
+
+    if (
+      tracker.getTrackedPointersCount() > 1 &&
+      event.eventType === EventTypes.UP
+    ) {
+      event.eventType = EventTypes.ADDITIONAL_POINTER_UP;
+    }
+  }
+
+  public getTimeDelta(): number {
+    return this.currentTime + this.previousTime;
+  }
+
+  public getAnchorX(): number {
+    return this.anchorX;
+  }
+
+  public getAnchorY(): number {
+    return this.anchorY;
+  }
+
+  public getRotation(): number {
+    return this.rotation;
+  }
+}