react-native-gesture-handler 3.0.0-beta.4 → 3.0.0-beta.5

package/src/v3/detectors/HostGestureDetector.web.tsx

@@ -10,6 +10,7 @@ import type {
 import RNGestureHandlerModule from '../../RNGestureHandlerModule.web';
 import { tagMessage } from '../../utils';
 import { type PropsRef } from '../../web/interfaces';
+import NodeManager from '../../web/tools/NodeManager';
 import { useNativeGestureRole } from './useNativeGestureRole';
 
 export interface GestureHandlerDetectorProps extends PropsRef {
@@ -31,7 +32,193 @@ export interface VirtualChildrenWeb {
   enableContextMenu?: boolean | undefined;
 }
 
-const EMPTY_HANDLERS = new Set<number>();
+// Bundles all per-instance state passed to the standalone helpers below. Holding everything in
+// one stable object keeps the helpers pure (no closures over component-render-scoped values),
+// which means the useEffects don't need them in their deps lists.
+type DetectorRefs = {
+  owner: object;
+  viewRef: RefObject<Element | null>;
+  propsRef: RefObject<GestureHandlerDetectorProps>;
+  // Tags observed for the detector view (top-level).
+  subscribedHandlers: Set<number>;
+  // Flat set of tags currently bound to *some* element (top-level or virtual). Mirrors iOS
+  // `_attachedHandlers` / Android `attachedHandlers`.
+  attachedHandlers: Set<number>;
+  // Tags whose handler asked to attach to the detector's child element rather than the detector
+  // itself (`shouldAttachGestureToChildView`). Kept here so we can (re)bind them as subviews
+  // appear.
+  nativeHandlers: Set<number>;
+  // For each virtual child's viewTag, the set of currently-observed handler tags.
+  subscribedVirtualHandlers: Map<number, Set<number>>;
+  // Latest snapshot of virtual children keyed by viewTag. The ready callback reads this so
+  // re-fires after a child's per-DOM props change use the up-to-date values.
+  virtualChildren: Map<number, VirtualChildrenWeb>;
+};
+
+// Invoked from `NodeManager.observeHandler` once the handler is known to exist. Branches on
+// handler kind + actionType to pick the right binding flow. May be called multiple times for
+// the same tag (handler re-registration), so each branch must be idempotent.
+function attachReadyHandler(
+  refs: DetectorRefs,
+  tag: number,
+  actionType: ActionType,
+  virtualViewTag?: number
+) {
+  const handler = RNGestureHandlerModule.getGestureHandlerNode(tag);
+
+  if (
+    actionType === ActionType.NATIVE_DETECTOR &&
+    handler.shouldAttachGestureToChildView()
+  ) {
+    refs.nativeHandlers.add(tag);
+    if (
+      refs.viewRef.current != null &&
+      refs.viewRef.current.childElementCount > 0
+    ) {
+      tryAttachNativeHandlersToChildView(refs);
+    }
+    return;
+  }
+
+  if (actionType === ActionType.VIRTUAL_DETECTOR) {
+    const child =
+      virtualViewTag != null
+        ? refs.virtualChildren.get(virtualViewTag)
+        : undefined;
+    if (child == null || child.viewRef.current == null) {
+      return;
+    }
+
+    if (!refs.attachedHandlers.has(tag)) {
+      RNGestureHandlerModule.attachGestureHandler(
+        tag,
+        child.viewRef.current,
+        actionType,
+        refs.propsRef
+      );
+      refs.attachedHandlers.add(tag);
+    }
+
+    RNGestureHandlerModule.updateGestureHandlerConfig(tag, {
+      userSelect: child.userSelect,
+      touchAction: child.touchAction,
+      enableContextMenu: child.enableContextMenu,
+    });
+    return;
+  }
+
+  if (refs.viewRef.current == null) {
+    return;
+  }
+
+  if (!refs.attachedHandlers.has(tag)) {
+    RNGestureHandlerModule.attachGestureHandler(
+      tag,
+      refs.viewRef.current,
+      actionType,
+      refs.propsRef
+    );
+    refs.attachedHandlers.add(tag);
+  }
+
+  RNGestureHandlerModule.updateGestureHandlerConfig(tag, {
+    userSelect: refs.propsRef.current.userSelect,
+    touchAction: refs.propsRef.current.touchAction,
+    enableContextMenu: refs.propsRef.current.enableContextMenu,
+  });
+}
+
+function tryAttachNativeHandlersToChildView(refs: DetectorRefs) {
+  if (refs.nativeHandlers.size === 0) {
+    return;
+  }
+
+  const view = refs.viewRef.current;
+  if (view == null) {
+    return;
+  }
+
+  if (view.childElementCount > 1) {
+    throw new Error(
+      tagMessage(
+        'Cannot have more than one child view when native gesture handlers are attached to the detector'
+      )
+    );
+  }
+
+  const target = view.firstElementChild;
+  if (target == null) {
+    return;
+  }
+
+  for (const tag of refs.nativeHandlers) {
+    // A tag may be in `nativeHandlers` from an earlier ready callback but the underlying
+    // handler may have been dropped since. Skip — a re-registration fires the observation again.
+    if (!NodeManager.hasHandler(tag)) {
+      continue;
+    }
+    if (refs.attachedHandlers.has(tag)) {
+      continue;
+    }
+    RNGestureHandlerModule.attachGestureHandler(
+      tag,
+      target,
+      ActionType.NATIVE_DETECTOR,
+      refs.propsRef
+    );
+    refs.attachedHandlers.add(tag);
+    RNGestureHandlerModule.updateGestureHandlerConfig(tag, {
+      userSelect: refs.propsRef.current.userSelect,
+      touchAction: refs.propsRef.current.touchAction,
+      enableContextMenu: refs.propsRef.current.enableContextMenu,
+    });
+  }
+}
+
+// Reconcile `subscribedSet` against `currentTags`: observe new tags, cancel observation and
+// detach for tags no longer present. The ready callback set up here is responsible for actually
+// binding the handler once it exists.
+function syncSubscriptions(
+  refs: DetectorRefs,
+  currentTags: Iterable<number>,
+  subscribedSet: Set<number>,
+  actionType: ActionType,
+  virtualViewTag?: number
+) {
+  const toUnsubscribe = new Set(subscribedSet);
+  for (const tag of currentTags) {
+    toUnsubscribe.delete(tag);
+    if (subscribedSet.has(tag)) {
+      continue;
+    }
+    NodeManager.observeHandler(tag, refs.owner, () => {
+      attachReadyHandler(refs, tag, actionType, virtualViewTag);
+    });
+    subscribedSet.add(tag);
+  }
+
+  for (const tag of toUnsubscribe) {
+    NodeManager.cancelObservation(tag, refs.owner);
+    if (refs.attachedHandlers.has(tag)) {
+      RNGestureHandlerModule.detachGestureHandler(tag);
+      refs.attachedHandlers.delete(tag);
+    }
+    subscribedSet.delete(tag);
+    refs.nativeHandlers.delete(tag);
+  }
+}
+
+function teardown(refs: DetectorRefs) {
+  NodeManager.cancelAllObservationsForOwner(refs.owner);
+  for (const tag of refs.attachedHandlers) {
+    RNGestureHandlerModule.detachGestureHandler(tag);
+  }
+  refs.attachedHandlers.clear();
+  refs.subscribedHandlers.clear();
+  refs.nativeHandlers.clear();
+  refs.subscribedVirtualHandlers.clear();
+  refs.virtualChildren.clear();
+}
 
 const HostGestureDetector = (props: GestureHandlerDetectorProps) => {
   const { handlerTags, children } = props;
@@ -40,72 +227,28 @@ const HostGestureDetector = (props: GestureHandlerDetectorProps) => {
 
   const viewRef = useRef<Element>(null);
   const propsRef = useRef<GestureHandlerDetectorProps>(props);
-  const attachedHandlers = useRef<Set<number>>(new Set<number>());
-  const attachedNativeHandlers = useRef<Set<number>>(new Set<number>());
-  const attachedVirtualHandlers = useRef<Map<number, Set<number>>>(new Map());
-
-  const detachHandlers = (
-    currentHandlerTags: Set<number>,
-    attachedHandlerTags: Set<number>
-  ) => {
-    const oldHandlerTags = attachedHandlerTags.difference(currentHandlerTags);
-    oldHandlerTags.forEach((tag) => {
-      RNGestureHandlerModule.detachGestureHandler(tag);
-      attachedHandlerTags.delete(tag);
-    });
-  };
-
-  const attachHandlers = (
-    viewRef: RefObject<Element | null>,
-    propsRef: RefObject<GestureHandlerDetectorProps>,
-    currentHandlerTags: Set<number>,
-    attachedHandlerTags: Set<number>,
-    actionType: ActionType
-  ) => {
-    const newHandlerTags = currentHandlerTags.difference(attachedHandlerTags);
-
-    newHandlerTags.forEach((tag) => {
-      if (
-        RNGestureHandlerModule.getGestureHandlerNode(
-          tag
-        ).shouldAttachGestureToChildView() &&
-        actionType === ActionType.NATIVE_DETECTOR
-      ) {
-        if (viewRef.current!.childElementCount > 1) {
-          throw new Error(
-            tagMessage(
-              'Cannot have more than one child view when native gesture handlers are attached to the detector'
-            )
-          );
-        }
 
-        RNGestureHandlerModule.attachGestureHandler(
-          tag,
-          viewRef.current!.firstChild,
-          actionType,
-          propsRef
-        );
-        attachedNativeHandlers.current.add(tag);
-      } else {
-        RNGestureHandlerModule.attachGestureHandler(
-          tag,
-          viewRef.current,
-          actionType,
-          propsRef
-        );
-      }
-      attachedHandlerTags.add(tag);
-
-      RNGestureHandlerModule.updateGestureHandlerConfig(tag, {
-        userSelect: props.userSelect,
-        touchAction: props.touchAction,
-        enableContextMenu: props.enableContextMenu,
-      });
-    });
-  };
+  // Stable per-instance state
+  const refsRef = useRef<DetectorRefs | null>(null);
+  if (refsRef.current === null) {
+    refsRef.current = {
+      owner: {},
+      viewRef,
+      propsRef,
+      subscribedHandlers: new Set<number>(),
+      attachedHandlers: new Set<number>(),
+      nativeHandlers: new Set<number>(),
+      subscribedVirtualHandlers: new Map<number, Set<number>>(),
+      virtualChildren: new Map<number, VirtualChildrenWeb>(),
+    };
+  }
+  const refs = refsRef.current;
 
   useNativeGestureRole(viewRef, children);
 
+  // Keep propsRef in sync and re-apply detector-level DOM props to top-level attached handlers
+  // when they change. Virtual children get their own (potentially different) DOM props applied
+  // in the virtualChildren effect below, so we only touch top-level subscribers here.
   useEffect(() => {
     const shouldUpdateDOMProps =
       propsRef.current.userSelect !== props.userSelect ||
@@ -115,7 +258,17 @@ const HostGestureDetector = (props: GestureHandlerDetectorProps) => {
     propsRef.current = props;
 
     if (shouldUpdateDOMProps) {
-      for (const tag of attachedHandlers.current) {
+      // attachedHandlers ⊆ subscribedHandlers ⋃ subscribedVirtualHandlers, we want to ignore the
+      // handlers attached by the virtual detectors not to overwrite their DOM props.
+      const claimedByVirtual = Array.from(
+        refs.subscribedVirtualHandlers.values()
+      ).reduce((acc, current) => acc.union(current), new Set<number>());
+
+      const handlersToUpdate = refs.subscribedHandlers
+        .intersection(refs.attachedHandlers)
+        .difference(claimedByVirtual);
+
+      for (const tag of handlersToUpdate) {
         RNGestureHandlerModule.updateGestureHandlerConfig(tag, {
           userSelect: props.userSelect,
           touchAction: props.touchAction,
@@ -123,38 +276,38 @@ const HostGestureDetector = (props: GestureHandlerDetectorProps) => {
         });
       }
     }
-  }, [props]);
+  }, [props, refs]);
 
   useEffect(() => {
-    detachHandlers(handlerTagsSet, attachedHandlers.current);
-
-    attachHandlers(
-      viewRef,
-      propsRef,
+    syncSubscriptions(
+      refs,
       handlerTagsSet,
-      attachedHandlers.current,
+      refs.subscribedHandlers,
       ActionType.NATIVE_DETECTOR
     );
-    return () => {
-      detachHandlers(EMPTY_HANDLERS, attachedHandlers.current);
-      attachedVirtualHandlers?.current.forEach((childHandlerTags) => {
-        detachHandlers(EMPTY_HANDLERS, childHandlerTags);
-      });
-    };
-  }, [handlerTagsSet, viewRef]);
+  }, [handlerTagsSet, refs]);
 
   useEffect(() => {
-    const virtualChildrenToDetach: Set<number> = new Set(
-      attachedVirtualHandlers.current.keys()
-    );
+    // Refresh the snapshot used by the ready callback so re-fires read current child props.
+    refs.virtualChildren.clear();
+    props.virtualChildren?.forEach((child) => {
+      refs.virtualChildren.set(child.viewTag, child);
+    });
 
+    const virtualChildrenToDetach = new Set(
+      refs.subscribedVirtualHandlers.keys()
+    );
     props.virtualChildren?.forEach((child) => {
       virtualChildrenToDetach.delete(child.viewTag);
     });
 
-    virtualChildrenToDetach.forEach((tag) => {
-      detachHandlers(EMPTY_HANDLERS, attachedVirtualHandlers.current.get(tag)!);
-    });
+    for (const viewTag of virtualChildrenToDetach) {
+      const tags = refs.subscribedVirtualHandlers.get(viewTag);
+      if (tags != null) {
+        syncSubscriptions(refs, [], tags, ActionType.VIRTUAL_DETECTOR, viewTag);
+      }
+      refs.subscribedVirtualHandlers.delete(viewTag);
+    }
 
     props.virtualChildren?.forEach((child) => {
       if (child.viewRef.current == null) {
@@ -162,33 +315,37 @@ const HostGestureDetector = (props: GestureHandlerDetectorProps) => {
         // switches its component based on whether animated/reanimated events should run.
         return;
       }
-      if (!attachedVirtualHandlers.current.has(child.viewTag)) {
-        attachedVirtualHandlers.current.set(child.viewTag, new Set());
-      }
-
-      const currentHandlerTags = new Set(child.handlerTags);
-      detachHandlers(
-        currentHandlerTags,
-        attachedVirtualHandlers.current.get(child.viewTag)!
-      );
 
-      attachHandlers(
-        child.viewRef,
-        propsRef,
-        currentHandlerTags,
-        attachedVirtualHandlers.current.get(child.viewTag)!,
-        ActionType.VIRTUAL_DETECTOR
+      let subs = refs.subscribedVirtualHandlers.get(child.viewTag);
+      if (subs == null) {
+        subs = new Set();
+        refs.subscribedVirtualHandlers.set(child.viewTag, subs);
+      }
+      syncSubscriptions(
+        refs,
+        child.handlerTags,
+        subs,
+        ActionType.VIRTUAL_DETECTOR,
+        child.viewTag
       );
-
-      currentHandlerTags.forEach((tag) => {
-        RNGestureHandlerModule.updateGestureHandlerConfig(tag, {
-          userSelect: child.userSelect,
-          touchAction: child.touchAction,
-          enableContextMenu: child.enableContextMenu,
-        });
-      });
+      // Re-apply per-child DOM props on every run. Already-attached tags need this when only
+      // the child's props change; tags attached via a sync-fired observer already had it
+      // applied in `attachReadyHandler`, so this is a no-op for them.
+      for (const tag of subs) {
+        if (refs.attachedHandlers.has(tag)) {
+          RNGestureHandlerModule.updateGestureHandlerConfig(tag, {
+            userSelect: child.userSelect,
+            touchAction: child.touchAction,
+            enableContextMenu: child.enableContextMenu,
+          });
+        }
+      }
     });
-  }, [props.virtualChildren]);
+  }, [props.virtualChildren, refs]);
+
+  useEffect(() => {
+    return () => teardown(refs);
+  }, [refs]);
 
   return (
     <View style={{ display: 'contents' }} ref={viewRef as Ref<View>}>

package/src/v3/detectors/NativeDetector.tsx

@@ -6,7 +6,8 @@ import type { NativeDetectorProps } from './common';
 import { AnimatedNativeDetector, nativeDetectorStyles } from './common';
 import HostGestureDetector from './HostGestureDetector';
 import { ReanimatedNativeDetector } from './ReanimatedNativeDetector';
-import { configureRelations, ensureNativeDetectorComponent } from './utils';
+import { useGestureRelationsUpdater } from './useGestureRelationsUpdater';
+import { ensureNativeDetectorComponent } from './utils';
 
 export function NativeDetector<
   TConfig,
@@ -26,7 +27,7 @@ export function NativeDetector<
       : HostGestureDetector;
 
   ensureNativeDetectorComponent(NativeDetectorComponent);
-  configureRelations(gesture);
+  useGestureRelationsUpdater(gesture);
 
   const handlerTags = useMemo(() => {
     return isComposedGesture(gesture)

package/src/v3/detectors/VirtualDetector/InterceptingGestureDetector.tsx

@@ -18,7 +18,8 @@ import { AnimatedNativeDetector, nativeDetectorStyles } from '../common';
 import HostGestureDetector from '../HostGestureDetector';
 import { ReanimatedNativeDetector } from '../ReanimatedNativeDetector';
 import { useEnsureGestureHandlerRootView } from '../useEnsureGestureHandlerRootView';
-import { configureRelations, ensureNativeDetectorComponent } from '../utils';
+import { useGestureRelationsUpdater } from '../useGestureRelationsUpdater';
+import { ensureNativeDetectorComponent } from '../utils';
 import type { InterceptingDetectorContextValue } from './useInterceptingDetectorContext';
 import {
   InterceptingDetectorContext,
@@ -221,9 +222,7 @@ export function InterceptingGestureDetector<
 
   ensureNativeDetectorComponent(NativeDetectorComponent);
 
-  if (gesture) {
-    configureRelations(gesture);
-  }
+  useGestureRelationsUpdater(gesture);
 
   const handlerTags = useMemo(() => {
     if (gesture) {

package/src/v3/detectors/VirtualDetector/VirtualDetector.tsx

@@ -6,8 +6,8 @@ import { tagMessage } from '../../../utils';
 import { isComposedGesture } from '../../hooks/utils/relationUtils';
 import type { DetectorCallbacks, VirtualChild } from '../../types';
 import type { VirtualDetectorProps } from '../common';
+import { useGestureRelationsUpdater } from '../useGestureRelationsUpdater';
 import { useNativeGestureRole } from '../useNativeGestureRole';
-import { configureRelations } from '../utils';
 import {
   InterceptingDetectorMode,
   useInterceptingDetectorContext,
@@ -104,7 +104,7 @@ export function VirtualDetector<
     setMode,
   ]);
 
-  configureRelations(props.gesture);
+  useGestureRelationsUpdater(props.gesture);
 
   return <Wrap ref={handleRef}>{props.children}</Wrap>;
 }

package/src/v3/detectors/useGestureRelationsUpdater.ts

@@ -0,0 +1,30 @@
+import { useEffect, useMemo } from 'react';
+
+import { NativeProxy } from '../NativeProxy';
+import type { Gesture } from '../types';
+import { configureRelations } from './utils';
+
+export function useGestureRelationsUpdater<TConfig, THandlerData>(
+  gesture?: Gesture<TConfig, THandlerData>
+) {
+  const relations = useMemo(
+    () => (gesture ? configureRelations(gesture) : null),
+    [gesture]
+  );
+
+  useEffect(() => {
+    if (!relations) {
+      return;
+    }
+
+    // React runs effects bottom-up, we need to ensure that relations are applied after all effects
+    // in the tree have run, so we defer to the next frame.
+    const frame = requestAnimationFrame(() => {
+      relations.forEach((rel, handlerTag) => {
+        NativeProxy.configureRelations(handlerTag, rel);
+      });
+    });
+
+    return () => cancelAnimationFrame(frame);
+  }, [relations]);
+}

package/src/v3/detectors/utils.ts

@@ -9,25 +9,26 @@ import {
   isComposedGesture,
   prepareRelations,
 } from '../hooks/utils/relationUtils';
-import { NativeProxy } from '../NativeProxy';
-import type { Gesture } from '../types';
+import type { Gesture, GestureRelations } from '../types';
 import { ComposedGestureName } from '../types';
 
 // The tree consists of ComposedGestures and NativeGestures. NativeGestures are always leaf nodes.
 export const traverseAndConfigureRelations = (
   node: Gesture,
+  relationsByTag: Map<number, GestureRelations>,
   simultaneousHandlers: Set<number>,
   waitFor: number[] = []
 ) => {
   // If we are in the leaf node, we want to fill gesture relations arrays with current
-  // waitFor and simultaneousHandlers. We also want to configure relations on the native side.
+  // waitFor and simultaneousHandlers. We also want to record the resulting relations for
+  // this handler so the caller can push them to the native side.
   if (!isComposedGesture(node)) {
     node.gestureRelations = prepareRelations(node.config, node.handlerTag);
 
     node.gestureRelations.simultaneousHandlers.push(...simultaneousHandlers);
     node.gestureRelations.waitFor.push(...waitFor);
 
-    NativeProxy.configureRelations(node.handlerTag, {
+    relationsByTag.set(node.handlerTag, {
       waitFor: node.gestureRelations.waitFor,
       simultaneousHandlers: node.gestureRelations.simultaneousHandlers,
       blocksHandlers: node.gestureRelations.blocksHandlers,
@@ -73,7 +74,12 @@ export const traverseAndConfigureRelations = (
       const length = waitFor.length;
 
       // We traverse the child, passing the current `waitFor` and `simultaneousHandlers`.
-      traverseAndConfigureRelations(child, simultaneousHandlers, waitFor);
+      traverseAndConfigureRelations(
+        child,
+        relationsByTag,
+        simultaneousHandlers,
+        waitFor
+      );
 
       // After traversing the child, we need to update `waitFor` and `simultaneousHandlers`
 
@@ -122,7 +128,12 @@ export const traverseAndConfigureRelations = (
       // We don't want to mark gesture as simultaneous with itself, so we remove its tag from the set.
       const hasRemovedTag = simultaneousHandlers.delete(child.handlerTag);
 
-      traverseAndConfigureRelations(child, simultaneousHandlers, waitFor);
+      traverseAndConfigureRelations(
+        child,
+        relationsByTag,
+        simultaneousHandlers,
+        waitFor
+      );
 
       if (hasRemovedTag) {
         simultaneousHandlers.add(child.handlerTag);
@@ -138,7 +149,9 @@ export const traverseAndConfigureRelations = (
 
 export function configureRelations<TConfig, THandlerData>(
   gesture: Gesture<TConfig, THandlerData>
-) {
+): Map<number, GestureRelations> {
+  const relationsByTag = new Map<number, GestureRelations>();
+
   if (isComposedGesture(gesture)) {
     const simultaneousHandlers = new Set<number>(
       gesture.externalSimultaneousHandlers
@@ -151,13 +164,16 @@ export function configureRelations<TConfig, THandlerData>(
       );
     }
 
-    traverseAndConfigureRelations(gesture, simultaneousHandlers);
-  } else {
-    NativeProxy.configureRelations(
-      gesture.handlerTag,
-      gesture.gestureRelations
+    traverseAndConfigureRelations(
+      gesture,
+      relationsByTag,
+      simultaneousHandlers
     );
+  } else {
+    relationsByTag.set(gesture.handlerTag, gesture.gestureRelations);
   }
+
+  return relationsByTag;
 }
 
 export function ensureNativeDetectorComponent(

package/src/v3/hooks/useGesture.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useMemo } from 'react';
 
 import { getNextHandlerTag } from '../../handlers/getNextHandlerTag';
 import {
@@ -61,15 +61,6 @@ export function useGesture<
     [handlerTag, config.simultaneousWith, config.requireToFail, config.block]
   );
 
-  const currentGestureRef = useRef({ type: '', handlerTag: -1 });
-  if (
-    currentGestureRef.current.handlerTag !== handlerTag ||
-    currentGestureRef.current.type !== (type as string)
-  ) {
-    currentGestureRef.current = { type, handlerTag };
-    NativeProxy.createGestureHandler(type, handlerTag, {});
-  }
-
   const gesture = useMemo(
     () => ({
       handlerTag,
@@ -94,11 +85,10 @@ export function useGesture<
   );
 
   useEffect(() => {
-    return () => {
-      if (currentGestureRef.current.handlerTag === handlerTag) {
-        currentGestureRef.current = { type: '', handlerTag: -1 };
-      }
+    NativeProxy.createGestureHandler(type, handlerTag, {});
+    scheduleFlushOperations();
 
+    return () => {
       NativeProxy.dropGestureHandler(handlerTag);
       scheduleFlushOperations();
     };

package/src/v3/hooks/utils/configUtils.ts

@@ -87,9 +87,8 @@ export function prepareConfigForNativeSide<
   for (const [key, value] of Object.entries(config)) {
     // @ts-ignore That's the point, we want to see if key exists in the whitelists
     if (allowedNativeProps.has(key) || handlerPropsWhiteList.has(key)) {
-      Object.assign(filteredConfig, {
-        [key]: Reanimated?.isSharedValue(value) ? value.value : value,
-      });
+      (filteredConfig as Record<string, unknown>)[key] =
+        Reanimated?.isSharedValue(value) ? value.value : value;
     } else if (PropsToFilter.has(key)) {
       continue;
     } else {