feat: fix reanimated console warnings

patches/react-native-draggable-flatlist+4.0.1.patch

@@ -0,0 +1,94 @@
+diff --git a/node_modules/react-native-draggable-flatlist/src/components/DraggableFlatList.tsx b/node_modules/react-native-draggable-flatlist/src/components/DraggableFlatList.tsx
+index d7d98c2..2f59c7a 100644
+--- a/node_modules/react-native-draggable-flatlist/src/components/DraggableFlatList.tsx
++++ b/node_modules/react-native-draggable-flatlist/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,
+diff --git a/node_modules/react-native-draggable-flatlist/src/context/refContext.tsx b/node_modules/react-native-draggable-flatlist/src/context/refContext.tsx
+index ea21575..66c5eed 100644
+--- a/node_modules/react-native-draggable-flatlist/src/context/refContext.tsx
++++ b/node_modules/react-native-draggable-flatlist/src/context/refContext.tsx
+@@ -1,14 +1,14 @@
+ import React, { useContext } 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>;
+@@ -54,8 +54,8 @@ function useSetupRefs<T>({
+     ...DEFAULT_PROPS.animationConfig,
+     ...animationConfig,
+   } as WithSpringConfig;
+-  const animationConfigRef = useRef(animConfig);
+-  animationConfigRef.current = animConfig;
++  const animationConfigRef = useSharedValue(animConfig);
++  animationConfigRef.value = animConfig;
+
+   const cellDataRef = useRef(new Map<string, CellData>());
+   const keyToIndexRef = useRef(new Map<string, number>());
+diff --git a/node_modules/react-native-draggable-flatlist/src/hooks/useCellTranslate.tsx b/node_modules/react-native-draggable-flatlist/src/hooks/useCellTranslate.tsx
+index ce4ab68..efea240 100644
+--- a/node_modules/react-native-draggable-flatlist/src/hooks/useCellTranslate.tsx
++++ b/node_modules/react-native-draggable-flatlist/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;
+diff --git a/node_modules/react-native-draggable-flatlist/src/hooks/useOnCellActiveAnimation.ts b/node_modules/react-native-draggable-flatlist/src/hooks/useOnCellActiveAnimation.ts
+index 7c20587..857c7d0 100644
+--- a/node_modules/react-native-draggable-flatlist/src/hooks/useOnCellActiveAnimation.ts
++++ b/node_modules/react-native-draggable-flatlist/src/hooks/useOnCellActiveAnimation.ts
+@@ -1,8 +1,9 @@
+-import { useRef } from "react";
+-import Animated, {
++
++import {
+   useDerivedValue,
+   withSpring,
+   WithSpringConfig,
++  useSharedValue,
+ } from "react-native-reanimated";
+ import { DEFAULT_ANIMATION_CONFIG } from "../constants";
+ import { useAnimatedValues } from "../context/animatedValueContext";
+@@ -15,8 +16,8 @@ type Params = {
+ export function useOnCellActiveAnimation(
+   { animationConfig }: Params = { animationConfig: {} }
+ ) {
+-  const animationConfigRef = useRef(animationConfig);
+-  animationConfigRef.current = animationConfig;
++  const animationConfigRef = useSharedValue(animationConfig);
++  animationConfigRef.value = animationConfig;
+
+   const isActive = useIsActive();
+
+@@ -26,7 +27,7 @@ export function useOnCellActiveAnimation(
+     const toVal = isActive && isTouchActiveNative.value ? 1 : 0;
+     return withSpring(toVal, {
+       ...DEFAULT_ANIMATION_CONFIG,
+-      ...animationConfigRef.current,
++      ...animationConfigRef.value,
+     });
+   }, [isActive]);
+

src/App.tsx

@@ -50,9 +50,6 @@ LogBox.ignoreLogs([
     // the timer is lost. Currently Expensify is using a 30 minutes interval to refresh personal details.
     // More details here: https://git.io/JJYeb
     'Setting a timer for a long period of time',
-    // We silence this warning for now and will address all the places where it happens separately.
-    // Then we can remove this line so the problem does not occur in the future.
-    '[Reanimated] Tried to modify key `current`',
 ]);
 
 const fill = {flex: 1};