react-native-gesture-handler 2.4.0 → 2.5.0

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

@@ -268,11 +268,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 +322,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
@@ -490,10 +513,9 @@ function useAnimatedGesture(
 
 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);
@@ -605,7 +627,11 @@ 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

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

@@ -21,6 +21,7 @@ const attachGestureHandler = NOOP;
 const createGestureHandler = NOOP;
 const dropGestureHandler = NOOP;
 const updateGestureHandler = NOOP;
+const flushOperations = NOOP;
 const NativeViewGestureHandler = View;
 const TapGestureHandler = View;
 const ForceTouchGestureHandler = View;
@@ -59,6 +60,7 @@ export default {
   createGestureHandler,
   dropGestureHandler,
   updateGestureHandler,
+  flushOperations,
   // probably can be removed
   Directions,
   State,

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)) {

package/src/web/utils.ts

@@ -20,5 +20,5 @@ export function fireAfterInterval(
     method();
     return null;
   }
-  return setTimeout(() => method(), interval);
+  return setTimeout(() => method(), interval as number);
 }

package/ios/RNGestureHandler.xcodeproj/xcuserdata/jakubpiasecki.xcuserdatad/xcschemes/xcschememanagement.plist

@@ -1,19 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
-<plist version="1.0">
-<dict>
-	<key>SchemeUserState</key>
-	<dict>
-		<key>RNGestureHandler-tvOS.xcscheme_^#shared#^_</key>
-		<dict>
-			<key>orderHint</key>
-			<integer>1</integer>
-		</dict>
-		<key>RNGestureHandler.xcscheme_^#shared#^_</key>
-		<dict>
-			<key>orderHint</key>
-			<integer>0</integer>
-		</dict>
-	</dict>
-</dict>
-</plist>