From 15acd10149feeb8321e08b583fc4774027750268 Mon Sep 17 00:00:00 2001
From: Bartosz Grajdek <bartosz.grajdek@swmansion.com>
Date: Mon, 23 Sep 2024 10:36:15 +0200
Subject: [PATCH] feat: fix reanimated console warnings

---
 ...eact-native-draggable-flatlist+4.0.1.patch | 94 +++++++++++++++++++
 src/App.tsx                                   |  3 -
 2 files changed, 94 insertions(+), 3 deletions(-)
 create mode 100644 patches/react-native-draggable-flatlist+4.0.1.patch

diff --git a/patches/react-native-draggable-flatlist+4.0.1.patch b/patches/react-native-draggable-flatlist+4.0.1.patch
new file mode 100644
index 00000000000..348f1aa5de8
--- /dev/null
+++ b/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]);
+ 
diff --git a/src/App.tsx b/src/App.tsx
index 35254fa29b2..177cc00c7de 100644
--- a/src/App.tsx
+++ b/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};