react-native-gesture-handler 2.4.1 → 2.4.2

package/src/components/DrawerLayout.tsx

@@ -148,6 +148,11 @@ export interface DrawerLayoutProps {
   onDrawerSlide?: (position: number) => void;
 
   onGestureRef?: (ref: PanGestureHandler) => void;
+
+  // implicit `children` prop has been removed in @types/react^18.0.0
+  children?:
+    | React.ReactNode
+    | ((openValue?: Animated.AnimatedInterpolation) => React.ReactNode);
 }
 
 export type DrawerLayoutState = {
@@ -155,6 +160,8 @@ export type DrawerLayoutState = {
   touchX: Animated.Value;
   drawerTranslation: Animated.Value;
   containerWidth: number;
+  drawerState: DrawerState;
+  drawerOpened: boolean;
 };
 
 export type DrawerMovementOption = {
@@ -189,6 +196,8 @@ export default class DrawerLayout extends Component<
       touchX,
       drawerTranslation,
       containerWidth: 0,
+      drawerState: IDLE,
+      drawerOpened: false,
     };
 
     this.updateAnimatedEvent(props, this.state);
@@ -349,6 +358,7 @@ export default class DrawerLayout extends Component<
       this.handleRelease({ nativeEvent });
     } else if (nativeEvent.state === State.ACTIVE) {
       this.emitStateChanged(DRAGGING, false);
+      this.setState({ drawerState: DRAGGING });
       if (this.props.keyboardDismissMode === 'on-drag') {
         Keyboard.dismiss();
       }
@@ -464,6 +474,7 @@ export default class DrawerLayout extends Component<
     const willShow = toValue !== 0;
     this.updateShowing(willShow);
     this.emitStateChanged(SETTLING, willShow);
+    this.setState({ drawerState: SETTLING });
     if (this.props.hideStatusBar) {
       StatusBar.setHidden(willShow, this.props.statusBarAnimation || 'slide');
     }
@@ -476,6 +487,12 @@ export default class DrawerLayout extends Component<
     }).start(({ finished }) => {
       if (finished) {
         this.emitStateChanged(IDLE, willShow);
+        this.setState({ drawerOpened: willShow });
+        if (this.state.drawerState !== DRAGGING) {
+          // it's possilbe that user started drag while the drawer
+          // was settling, don't override state in this case
+          this.setState({ drawerState: IDLE });
+        }
         if (willShow) {
           this.props.onDrawerOpen?.();
         } else {
@@ -516,11 +533,14 @@ export default class DrawerLayout extends Component<
   private renderOverlay = () => {
     /* Overlay styles */
     invariant(this.openValue, 'should be set');
-    const overlayOpacity = this.openValue.interpolate({
-      inputRange: [0, 1],
-      outputRange: [0, 1],
-      extrapolate: 'clamp',
-    });
+    let overlayOpacity;
+
+    if (this.state.drawerState !== IDLE) {
+      overlayOpacity = this.openValue;
+    } else {
+      overlayOpacity = this.state.drawerOpened ? 1 : 0;
+    }
+
     const dynamicOverlayStyles = {
       opacity: overlayOpacity,
       backgroundColor: this.props.overlayColor,
@@ -579,11 +599,15 @@ export default class DrawerLayout extends Component<
     let drawerTranslateX: number | Animated.AnimatedInterpolation = 0;
     if (drawerSlide) {
       const closedDrawerOffset = fromLeft ? -drawerWidth! : drawerWidth!;
-      drawerTranslateX = openValue.interpolate({
-        inputRange: [0, 1],
-        outputRange: [closedDrawerOffset, 0],
-        extrapolate: 'clamp',
-      });
+      if (this.state.drawerState !== IDLE) {
+        drawerTranslateX = openValue.interpolate({
+          inputRange: [0, 1],
+          outputRange: [closedDrawerOffset, 0],
+          extrapolate: 'clamp',
+        });
+      } else {
+        drawerTranslateX = this.state.drawerOpened ? 0 : closedDrawerOffset;
+      }
     }
     const drawerStyles: {
       transform: { translateX: number | Animated.AnimatedInterpolation }[];

package/src/handlers/ForceTouchGestureHandler.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { tagMessage } from '../utils';
 import PlatformConstants from '../PlatformConstants';
 import createHandler from './createHandler';
@@ -13,7 +13,8 @@ export const forceTouchGestureHandlerProps = [
   'feedbackOnActivation',
 ] as const;
 
-class ForceTouchFallback extends React.Component {
+// implicit `children` prop has been removed in @types/react^18.0.0
+class ForceTouchFallback extends React.Component<PropsWithChildren<unknown>> {
   static forceTouchAvailable = false;
   componentDidMount() {
     console.warn(

package/src/handlers/createHandler.ts

@@ -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);
+        }
       }
     }
 

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

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