From 28736f74d7293cf9673fcd0445a0f99abca1b6b2 Mon Sep 17 00:00:00 2001 From: Elliott Kember Date: Fri, 6 Sep 2024 18:03:11 +1200 Subject: [PATCH 1/2] Apply patches from https://github.com/computerjazz/react-native-draggable-flatlist/issues/539 --- src/components/DraggableFlatList.tsx | 2 +- src/context/refContext.tsx | 8 ++++---- src/hooks/useCellTranslate.tsx | 2 +- src/hooks/useOnCellActiveAnimation.ts | 11 ++++++----- 4 files changed, 12 insertions(+), 11 deletions(-) diff --git a/src/components/DraggableFlatList.tsx b/src/components/DraggableFlatList.tsx index d7d98c27..2f59c7a2 100644 --- a/src/components/DraggableFlatList.tsx +++ b/src/components/DraggableFlatList.tsx @@ -295,7 +295,7 @@ function DraggableFlatListInner(props: DraggableFlatListProps) { const springTo = placeholderOffset.value - activeCellOffset.value; touchTranslate.value = withSpring( springTo, - animationConfigRef.current, + animationConfigRef.value, () => { runOnJS(onDragEnd)({ from: activeIndexAnim.value, diff --git a/src/context/refContext.tsx b/src/context/refContext.tsx index ea21575c..66c5eed6 100644 --- a/src/context/refContext.tsx +++ b/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 = { propsRef: React.MutableRefObject>; - animationConfigRef: React.MutableRefObject; + animationConfigRef: SharedValue; cellDataRef: React.MutableRefObject>; keyToIndexRef: React.MutableRefObject>; containerRef: React.RefObject; @@ -54,8 +54,8 @@ function useSetupRefs({ ...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()); const keyToIndexRef = useRef(new Map()); diff --git a/src/hooks/useCellTranslate.tsx b/src/hooks/useCellTranslate.tsx index ce4ab68a..efea2403 100644 --- a/src/hooks/useCellTranslate.tsx +++ b/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/src/hooks/useOnCellActiveAnimation.ts b/src/hooks/useOnCellActiveAnimation.ts index 7c205876..857c7d04 100644 --- a/src/hooks/useOnCellActiveAnimation.ts +++ b/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]); From 6f0ad23cb259b8a904993d7c2f91c42edd53f1c9 Mon Sep 17 00:00:00 2001 From: Elliott Kember Date: Mon, 2 Dec 2024 11:39:11 -0800 Subject: [PATCH 2/2] Incorporate changes from https://github.com/computerjazz/react-native-draggable-flatlist/issues/539\#issuecomment-2507728809 --- src/context/refContext.tsx | 18 ++++++++++++------ src/hooks/useOnCellActiveAnimation.ts | 13 ++++++++----- 2 files changed, 20 insertions(+), 11 deletions(-) diff --git a/src/context/refContext.tsx b/src/context/refContext.tsx index 66c5eed6..49bee062 100644 --- a/src/context/refContext.tsx +++ b/src/context/refContext.tsx @@ -1,4 +1,4 @@ -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, { type SharedValue, useSharedValue, WithSpringConfig } from "react-native-reanimated"; @@ -50,12 +50,18 @@ function useSetupRefs({ const propsRef = useRef(props); propsRef.current = props; - const animConfig = { - ...DEFAULT_PROPS.animationConfig, - ...animationConfig, - } as WithSpringConfig; + const animConfig = useMemo( + () => ({ + ...DEFAULT_PROPS.animationConfig, + ...animationConfig, + } as WithSpringConfig), + [animationConfig] + ); + const animationConfigRef = useSharedValue(animConfig); - animationConfigRef.value = animConfig; + useEffect(() => { + animationConfigRef.value = animConfig; + }, [animConfig]); const cellDataRef = useRef(new Map()); const keyToIndexRef = useRef(new Map()); diff --git a/src/hooks/useOnCellActiveAnimation.ts b/src/hooks/useOnCellActiveAnimation.ts index 857c7d04..e4cb3043 100644 --- a/src/hooks/useOnCellActiveAnimation.ts +++ b/src/hooks/useOnCellActiveAnimation.ts @@ -1,9 +1,9 @@ - -import { +import { useEffect } from "react"; +import Animated, { useDerivedValue, + useSharedValue, withSpring, WithSpringConfig, - useSharedValue, } from "react-native-reanimated"; import { DEFAULT_ANIMATION_CONFIG } from "../constants"; import { useAnimatedValues } from "../context/animatedValueContext"; @@ -17,7 +17,10 @@ export function useOnCellActiveAnimation( { animationConfig }: Params = { animationConfig: {} } ) { const animationConfigRef = useSharedValue(animationConfig); - animationConfigRef.value = animationConfig; + + useEffect(() => { + animationConfigRef.value = animationConfig; + }, [animationConfig]); const isActive = useIsActive(); @@ -28,7 +31,7 @@ export function useOnCellActiveAnimation( return withSpring(toVal, { ...DEFAULT_ANIMATION_CONFIG, ...animationConfigRef.value, - }); + } as WithSpringConfig); }, [isActive]); return {