react-native-gesture-handler 2.4.1 → 2.6.0

package/src/handlers/{createHandler.ts → createHandler.tsx}

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {
   Platform,
-  Touchable,
   UIManager,
   DeviceEventEmitter,
   EmitterSubscription,
@@ -26,8 +25,9 @@ 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';
 
 const UIManagerAny = UIManager as any;
 
@@ -148,6 +148,8 @@ type InternalEventHandlers = {
   onGestureHandlerStateChange?: (event: any) => void;
 };
 
+const UNRESOLVED_REFS_RETRY_LIMIT = 1;
+
 // TODO(TS) - make sure that BaseGestureHandlerProps doesn't need other generic parameter to work with custom properties.
 export default function createHandler<
   T extends BaseGestureHandlerProps<U>,
@@ -198,7 +200,7 @@ export default function createHandler<
           'toggleElementInspector',
           () => {
             this.setState((_) => ({ allowTouches }));
-            this.update();
+            this.update(UNRESOLVED_REFS_RETRY_LIMIT);
           }
         );
       }
@@ -211,7 +213,7 @@ export default function createHandler<
         // be resolved by then.
         this.updateEnqueued = setImmediate(() => {
           this.updateEnqueued = null;
-          this.update();
+          this.update(UNRESOLVED_REFS_RETRY_LIMIT);
         });
       }
 
@@ -231,7 +233,7 @@ export default function createHandler<
       if (this.viewTag !== viewTag) {
         this.attachGestureHandler(viewTag as number); // TODO(TS) - check interaction between _viewTag & findNodeHandle
       }
-      this.update();
+      this.update(UNRESOLVED_REFS_RETRY_LIMIT);
     }
 
     componentWillUnmount() {
@@ -361,14 +363,26 @@ export default function createHandler<
       scheduleFlushOperations();
     };
 
-    private update() {
-      const newConfig = filterConfig(
-        transformProps ? transformProps(this.props) : this.props,
-        [...allowedProps, ...customNativeProps],
-        config
-      );
-      if (!deepEqual(this.config, newConfig)) {
-        this.updateGestureHandler(newConfig);
+    private update(remainingTries: number) {
+      const props: HandlerProps<U> = this.props;
+
+      // When ref is set via a function i.e. `ref={(r) => refObject.current = r}` instead of
+      // `ref={refObject}` it's possible that it won't be resolved in time. Seems like trying
+      // again is easy enough fix.
+      if (hasUnresolvedRefs(props) && remainingTries > 0) {
+        this.updateEnqueued = setImmediate(() => {
+          this.updateEnqueued = null;
+          this.update(remainingTries - 1);
+        });
+      } else {
+        const newConfig = filterConfig(
+          transformProps ? transformProps(this.props) : this.props,
+          [...allowedProps, ...customNativeProps],
+          config
+        );
+        if (!deepEqual(this.config, newConfig)) {
+          this.updateGestureHandler(newConfig);
+        }
       }
     }
 
@@ -393,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
@@ -455,10 +470,20 @@ 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 (
-        Touchable.TOUCH_TARGET_DEBUG &&
+        __DEV__ &&
         child.type &&
         (child.type === 'RNGestureHandlerButton' ||
           child.type.name === 'View' ||
@@ -466,10 +491,11 @@ export default function createHandler<
       ) {
         grandChildren = React.Children.toArray(grandChildren);
         grandChildren.push(
-          Touchable.renderDebugView({
-            color: 'mediumspringgreen',
-            hitSlop: child.props.hitSlop,
-          })
+          <PressabilityDebugView
+            key="pressabilityDebugView"
+            color="mediumspringgreen"
+            hitSlop={child.props.hitSlop}
+          />
         );
       }
 

package/src/handlers/gestureHandlerCommon.ts

@@ -126,6 +126,8 @@ export type BaseGestureHandlerProps<
   onHandlerStateChange?: (
     event: HandlerStateChangeEvent<ExtraEventPayloadT>
   ) => void;
+  // implicit `children` prop has been removed in @types/react^18.0.0
+  children?: React.ReactNode;
 };
 
 function isConfigParam(param: unknown, name: string) {

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 {
@@ -268,11 +273,34 @@ function updateHandlers(
     }
 
     if (preparedGesture.animatedHandlers) {
-      preparedGesture.animatedHandlers.value = (preparedGesture.config
+      const previousHandlersValue =
+        preparedGesture.animatedHandlers.value ?? [];
+      const newHandlersValue = (preparedGesture.config
         .filter((g) => g.shouldUseReanimated) // ignore gestures that shouldn't run on UI
         .map((g) => g.handlers) as unknown) as HandlerCallbacks<
         Record<string, unknown>
       >[];
+
+      // if amount of gesture configs changes, we need to update the callbacks in shared value
+      let shouldUpdateSharedValue =
+        previousHandlersValue.length !== newHandlersValue.length;
+
+      if (!shouldUpdateSharedValue) {
+        // if the amount is the same, we need to check if any of the configs inside has changed
+        for (let i = 0; i < newHandlersValue.length; i++) {
+          if (
+            // we can use the `gestureId` prop as it's unique for every config instance
+            newHandlersValue[i].gestureId !== previousHandlersValue[i].gestureId
+          ) {
+            shouldUpdateSharedValue = true;
+            break;
+          }
+        }
+      }
+
+      if (shouldUpdateSharedValue) {
+        preparedGesture.animatedHandlers.value = newHandlersValue;
+      }
     }
 
     scheduleFlushOperations();
@@ -299,90 +327,90 @@ function needsToReattach(
   return false;
 }
 
-function useAnimatedGesture(
-  preparedGesture: GestureConfigReference,
-  needsRebuild: boolean
-) {
-  if (!Reanimated) {
-    return;
-  }
+function isStateChangeEvent(
+  event: GestureUpdateEvent | GestureStateChangeEvent | GestureTouchEvent
+): event is GestureStateChangeEvent {
+  'worklet';
+  // @ts-ignore Yes, the oldState prop is missing on GestureTouchEvent, that's the point
+  return event.oldState != null;
+}
 
-  function isStateChangeEvent(
-    event: GestureUpdateEvent | GestureStateChangeEvent | GestureTouchEvent
-  ): event is GestureStateChangeEvent {
-    'worklet';
-    // @ts-ignore Yes, the oldState prop is missing on GestureTouchEvent, that's the point
-    return event.oldState != null;
-  }
+function isTouchEvent(
+  event: GestureUpdateEvent | GestureStateChangeEvent | GestureTouchEvent
+): event is GestureTouchEvent {
+  'worklet';
+  return event.eventType != null;
+}
 
-  function isTouchEvent(
-    event: GestureUpdateEvent | GestureStateChangeEvent | GestureTouchEvent
-  ): event is GestureTouchEvent {
-    'worklet';
-    return event.eventType != null;
+function getHandler(
+  type: CALLBACK_TYPE,
+  gesture: HandlerCallbacks<Record<string, unknown>>
+) {
+  'worklet';
+  switch (type) {
+    case CALLBACK_TYPE.BEGAN:
+      return gesture.onBegin;
+    case CALLBACK_TYPE.START:
+      return gesture.onStart;
+    case CALLBACK_TYPE.UPDATE:
+      return gesture.onUpdate;
+    case CALLBACK_TYPE.CHANGE:
+      return gesture.onChange;
+    case CALLBACK_TYPE.END:
+      return gesture.onEnd;
+    case CALLBACK_TYPE.FINALIZE:
+      return gesture.onFinalize;
+    case CALLBACK_TYPE.TOUCHES_DOWN:
+      return gesture.onTouchesDown;
+    case CALLBACK_TYPE.TOUCHES_MOVE:
+      return gesture.onTouchesMove;
+    case CALLBACK_TYPE.TOUCHES_UP:
+      return gesture.onTouchesUp;
+    case CALLBACK_TYPE.TOUCHES_CANCELLED:
+      return gesture.onTouchesCancelled;
   }
+}
 
-  function getHandler(
-    type: CALLBACK_TYPE,
-    gesture: HandlerCallbacks<Record<string, unknown>>
-  ) {
-    'worklet';
-    switch (type) {
-      case CALLBACK_TYPE.BEGAN:
-        return gesture.onBegin;
-      case CALLBACK_TYPE.START:
-        return gesture.onStart;
-      case CALLBACK_TYPE.UPDATE:
-        return gesture.onUpdate;
-      case CALLBACK_TYPE.CHANGE:
-        return gesture.onChange;
-      case CALLBACK_TYPE.END:
-        return gesture.onEnd;
-      case CALLBACK_TYPE.FINALIZE:
-        return gesture.onFinalize;
-      case CALLBACK_TYPE.TOUCHES_DOWN:
-        return gesture.onTouchesDown;
-      case CALLBACK_TYPE.TOUCHES_MOVE:
-        return gesture.onTouchesMove;
-      case CALLBACK_TYPE.TOUCHES_UP:
-        return gesture.onTouchesUp;
-      case CALLBACK_TYPE.TOUCHES_CANCELLED:
-        return gesture.onTouchesCancelled;
-    }
+function touchEventTypeToCallbackType(
+  eventType: TouchEventType
+): CALLBACK_TYPE {
+  'worklet';
+  switch (eventType) {
+    case TouchEventType.TOUCHES_DOWN:
+      return CALLBACK_TYPE.TOUCHES_DOWN;
+    case TouchEventType.TOUCHES_MOVE:
+      return CALLBACK_TYPE.TOUCHES_MOVE;
+    case TouchEventType.TOUCHES_UP:
+      return CALLBACK_TYPE.TOUCHES_UP;
+    case TouchEventType.TOUCHES_CANCELLED:
+      return CALLBACK_TYPE.TOUCHES_CANCELLED;
   }
+  return CALLBACK_TYPE.UNDEFINED;
+}
 
-  function touchEventTypeToCallbackType(
-    eventType: TouchEventType
-  ): CALLBACK_TYPE {
-    'worklet';
-    switch (eventType) {
-      case TouchEventType.TOUCHES_DOWN:
-        return CALLBACK_TYPE.TOUCHES_DOWN;
-      case TouchEventType.TOUCHES_MOVE:
-        return CALLBACK_TYPE.TOUCHES_MOVE;
-      case TouchEventType.TOUCHES_UP:
-        return CALLBACK_TYPE.TOUCHES_UP;
-      case TouchEventType.TOUCHES_CANCELLED:
-        return CALLBACK_TYPE.TOUCHES_CANCELLED;
-    }
-    return CALLBACK_TYPE.UNDEFINED;
+function runWorklet(
+  type: CALLBACK_TYPE,
+  gesture: HandlerCallbacks<Record<string, unknown>>,
+  event: GestureStateChangeEvent | GestureUpdateEvent | GestureTouchEvent,
+  ...args: any[]
+) {
+  'worklet';
+  const handler = getHandler(type, gesture);
+  if (gesture.isWorklet[type]) {
+    // @ts-ignore Logic below makes sure the correct event is send to the
+    // correct handler.
+    handler?.(event, ...args);
+  } else if (handler) {
+    console.warn(tagMessage('Animated gesture callback must be a worklet'));
   }
+}
 
-  function runWorklet(
-    type: CALLBACK_TYPE,
-    gesture: HandlerCallbacks<Record<string, unknown>>,
-    event: GestureStateChangeEvent | GestureUpdateEvent | GestureTouchEvent,
-    ...args: any[]
-  ) {
-    'worklet';
-    const handler = getHandler(type, gesture);
-    if (gesture.isWorklet[type]) {
-      // @ts-ignore Logic below makes sure the correct event is send to the
-      // correct handler.
-      handler?.(event, ...args);
-    } else if (handler) {
-      console.warn(tagMessage('Animated gesture callback must be a worklet'));
-    }
+function useAnimatedGesture(
+  preparedGesture: GestureConfigReference,
+  needsRebuild: boolean
+) {
+  if (!Reanimated) {
+    return;
   }
 
   // Hooks are called conditionally, but the condition is whether the
@@ -488,12 +516,56 @@ 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;
 }
-export const GestureDetector: React.FunctionComponent<GestureDetectorProps> = (
-  props
-) => {
+export const GestureDetector = (props: GestureDetectorProps) => {
   const gestureConfig = props.gesture;
   const gesture = gestureConfig?.toGestureArray?.() ?? [];
   const useReanimatedHook = gesture.some((g) => g.shouldUseReanimated);
@@ -503,6 +575,11 @@ export const GestureDetector: React.FunctionComponent<GestureDetectorProps> = (
     onGestureHandlerEvent: (e: HandlerStateChangeEvent<unknown>) => {
       onGestureHandlerEvent(e.nativeEvent);
     },
+    onGestureHandlerStateChange: isExperimentalWebImplementationEnabled()
+      ? (e: HandlerStateChangeEvent<unknown>) => {
+          onGestureHandlerEvent(e.nativeEvent);
+        }
+      : undefined,
   });
 
   const preparedGesture = React.useRef<GestureConfigReference>({
@@ -539,6 +616,8 @@ export const GestureDetector: React.FunctionComponent<GestureDetectorProps> = (
   useEffect(() => {
     firstRenderRef.current = true;
     const viewTag = findNodeHandle(viewRef.current) as number;
+
+    validateDetectorChildren(viewRef.current);
     attachHandlers({
       preparedGesture,
       gestureConfig,
@@ -557,6 +636,7 @@ export const GestureDetector: React.FunctionComponent<GestureDetectorProps> = (
       const viewTag = findNodeHandle(viewRef.current) as number;
 
       if (needsToReattach(preparedGesture, gesture)) {
+        validateDetectorChildren(viewRef.current);
         dropHandlers(preparedGesture);
         attachHandlers({
           preparedGesture,
@@ -605,20 +685,32 @@ export const GestureDetector: React.FunctionComponent<GestureDetectorProps> = (
   }
 };
 
-class Wrap extends React.Component<{ onGestureHandlerEvent?: unknown }> {
+class Wrap extends React.Component<{
+  onGestureHandlerEvent?: unknown;
+  // implicit `children` prop has been removed in @types/react^18.0.0
+  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/gesture.ts

@@ -53,6 +53,7 @@ type TouchEventHandlerType = (
 ) => void;
 
 export type HandlerCallbacks<EventPayloadT extends Record<string, unknown>> = {
+  gestureId: number;
   handlerTag: number;
   onBegin?: (event: GestureStateChangeEvent<EventPayloadT>) => void;
   onStart?: (event: GestureStateChangeEvent<EventPayloadT>) => void;
@@ -115,17 +116,32 @@ export abstract class Gesture {
   abstract prepare(): void;
 }
 
+let nextGestureId = 0;
 export abstract class BaseGesture<
   EventPayloadT extends Record<string, unknown>
 > extends Gesture {
+  private gestureId = -1;
   public handlerTag = -1;
   public handlerName = '';
   public config: BaseGestureConfig = {};
   public handlers: HandlerCallbacks<EventPayloadT> = {
+    gestureId: -1,
     handlerTag: -1,
     isWorklet: [],
   };
 
+  constructor() {
+    super();
+
+    // Used to check whether the gesture config has been updated when wrapping it
+    // with `useMemo`. Since every config will have a unique id, when the dependencies
+    // don't change, the config won't be recreated and the id will stay the same.
+    // If the id is different, it means that the config has changed and the gesture
+    // needs to be updated.
+    this.gestureId = nextGestureId++;
+    this.handlers.gestureId = this.gestureId;
+  }
+
   private addDependency(
     key: 'simultaneousWith' | 'requireToFail',
     gesture: Exclude<GestureRef, number>

package/src/handlers/gestures/gestureStateManager.ts

@@ -13,14 +13,19 @@ const warningMessage = tagMessage(
   'react-native-reanimated is required in order to use synchronous state management'
 );
 
+// check if reanimated module is available, but look for useSharedValue as conditional
+// require of reanimated can sometimes return content of `utils.ts` file (?)
+const REANIMATED_AVAILABLE = Reanimated?.useSharedValue !== undefined;
+const setGestureState = Reanimated?.setGestureState;
+
 export const GestureStateManager = {
   create(handlerTag: number): GestureStateManagerType {
     'worklet';
     return {
       begin: () => {
         'worklet';
-        if (Reanimated) {
-          Reanimated.setGestureState(handlerTag, State.BEGAN);
+        if (REANIMATED_AVAILABLE) {
+          setGestureState(handlerTag, State.BEGAN);
         } else {
           console.warn(warningMessage);
         }
@@ -28,8 +33,8 @@ export const GestureStateManager = {
 
       activate: () => {
         'worklet';
-        if (Reanimated) {
-          Reanimated.setGestureState(handlerTag, State.ACTIVE);
+        if (REANIMATED_AVAILABLE) {
+          setGestureState(handlerTag, State.ACTIVE);
         } else {
           console.warn(warningMessage);
         }
@@ -37,8 +42,8 @@ export const GestureStateManager = {
 
       fail: () => {
         'worklet';
-        if (Reanimated) {
-          Reanimated.setGestureState(handlerTag, State.FAILED);
+        if (REANIMATED_AVAILABLE) {
+          setGestureState(handlerTag, State.FAILED);
         } else {
           console.warn(warningMessage);
         }
@@ -46,8 +51,8 @@ export const GestureStateManager = {
 
       end: () => {
         'worklet';
-        if (Reanimated) {
-          Reanimated.setGestureState(handlerTag, State.END);
+        if (REANIMATED_AVAILABLE) {
+          setGestureState(handlerTag, State.END);
         } else {
           console.warn(warningMessage);
         }

package/src/handlers/gestures/panGesture.ts

@@ -131,6 +131,11 @@ export class PanGesture extends ContinousBaseGesture<
     return this;
   }
 
+  activateAfterLongPress(duration: number) {
+    this.config.activateAfterLongPress = duration;
+    return this;
+  }
+
   onChange(
     callback: (
       event: GestureUpdateEvent<

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/utils.ts

@@ -1,4 +1,6 @@
-import { version as rnVersion } from 'react-native/package.json';
+import pack from 'react-native/package.json';
+
+const rnVersion = pack.version;
 
 export function toArray<T>(object: T | T[]): T[] {
   if (!Array.isArray(object)) {