Tried to modify key current of an object which has been already passed to a worklet (#551)

* Apply patches from #539

* Incorporate changes from https://github.com/computerjazz/react-native-draggable-flatlist/issues/539\#issuecomment-2507728809

Author: elliottkember

src/components/DraggableFlatList.tsx

@@ -295,7 +295,7 @@ function DraggableFlatListInner<T>(props: DraggableFlatListProps<T>) {
       const springTo = placeholderOffset.value - activeCellOffset.value;
       touchTranslate.value = withSpring(
         springTo,
-        animationConfigRef.current,
+        animationConfigRef.value,
         () => {
           runOnJS(onDragEnd)({
             from: activeIndexAnim.value,

src/context/refContext.tsx

@@ -1,14 +1,14 @@
-import React, { useContext } from "react";
+import React, { useContext, useEffect } from "react";
 import { useMemo, useRef } from "react";
 import { FlatList } from "react-native-gesture-handler";
-import Animated, { WithSpringConfig } from "react-native-reanimated";
+import Animated, { type SharedValue, useSharedValue, WithSpringConfig } from "react-native-reanimated";
 import { DEFAULT_PROPS } from "../constants";
 import { useProps } from "./propsContext";
 import { CellData, DraggableFlatListProps } from "../types";
 
 type RefContextValue<T> = {
   propsRef: React.MutableRefObject<DraggableFlatListProps<T>>;
-  animationConfigRef: React.MutableRefObject<WithSpringConfig>;
+  animationConfigRef: SharedValue<WithSpringConfig>;
   cellDataRef: React.MutableRefObject<Map<string, CellData>>;
   keyToIndexRef: React.MutableRefObject<Map<string, number>>;
   containerRef: React.RefObject<Animated.View>;
@@ -50,12 +50,18 @@ function useSetupRefs<T>({
 
   const propsRef = useRef(props);
   propsRef.current = props;
-  const animConfig = {
-    ...DEFAULT_PROPS.animationConfig,
-    ...animationConfig,
-  } as WithSpringConfig;
-  const animationConfigRef = useRef(animConfig);
-  animationConfigRef.current = animConfig;
+  const animConfig = useMemo(
+    () => ({
+      ...DEFAULT_PROPS.animationConfig,
+      ...animationConfig,
+    } as WithSpringConfig),
+    [animationConfig]
+  );
+
+  const animationConfigRef = useSharedValue(animConfig);
+  useEffect(() => {
+    animationConfigRef.value = animConfig;
+  }, [animConfig]);
 
   const cellDataRef = useRef(new Map<string, CellData>());
   const keyToIndexRef = useRef(new Map<string, number>());

src/hooks/useCellTranslate.tsx

@@ -101,7 +101,7 @@ export function useCellTranslate({ cellIndex, cellSize, cellOffset }: Params) {
       ? activeCellSize.value * (isAfterActive ? -1 : 1)
       : 0;
 
-    return withSpring(translationAmt, animationConfigRef.current);
+    return withSpring(translationAmt, animationConfigRef.value);
   }, [activeKey, cellIndex]);
 
   return translate;

src/hooks/useOnCellActiveAnimation.ts

@@ -1,6 +1,7 @@
-import { useRef } from "react";
+import { useEffect } from "react";
 import Animated, {
   useDerivedValue,
+  useSharedValue,
   withSpring,
   WithSpringConfig,
 } from "react-native-reanimated";
@@ -15,8 +16,11 @@ type Params = {
 export function useOnCellActiveAnimation(
   { animationConfig }: Params = { animationConfig: {} }
 ) {
-  const animationConfigRef = useRef(animationConfig);
-  animationConfigRef.current = animationConfig;
+  const animationConfigRef = useSharedValue(animationConfig);
+
+  useEffect(() => {
+    animationConfigRef.value = animationConfig;
+  }, [animationConfig]);
 
   const isActive = useIsActive();
 
@@ -26,8 +30,8 @@ export function useOnCellActiveAnimation(
     const toVal = isActive && isTouchActiveNative.value ? 1 : 0;
     return withSpring(toVal, {
       ...DEFAULT_ANIMATION_CONFIG,
-      ...animationConfigRef.current,
-    });
+      ...animationConfigRef.value,
+    } as WithSpringConfig);
   }, [isActive]);
 
   return {