fix: focused index is not persisted when carousel component is re-ren…

…dered fix #181
dohooo · May 15, 2022 · d82d39b · d82d39b
1 parent 59fb446
commit d82d39b
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 24 deletions.
diff --git a/src/hooks/useCarouselController.tsx b/src/hooks/useCarouselController.tsx
@@ -3,7 +3,7 @@ import type Animated from 'react-native-reanimated';
 import { Easing } from '../constants';
 import {
     runOnJS,
-    useAnimatedReaction,
+    useDerivedValue,
     useSharedValue,
 } from 'react-native-reanimated';
 import type {
@@ -76,27 +76,29 @@ export function useCarouselController(options: IOpts): ICarouselController {
         );
     }, [handlerOffsetX, dataInfo, size, loop]);
 
-    const computedIndex = React.useCallback(
-        (handlerOffsetXValue: number) => {
-            'worklet';
-            sharedPreIndex.value = sharedIndex.value;
-            const toInt = (handlerOffsetXValue / size) % dataInfo.length;
-            const isPositive = handlerOffsetXValue <= 0;
-            const i = isPositive
-                ? Math.abs(toInt)
-                : Math.abs(toInt > 0 ? dataInfo.length - toInt : 0);
-            index.value = i;
-            sharedIndex.value = convertToSharedIndex({
-                loop,
-                rawDataLength: dataInfo.originalLength,
-                autoFillData: autoFillData!,
-                index: i,
-            });
-        },
-        [sharedPreIndex, sharedIndex, size, dataInfo, index, loop, autoFillData]
-    );
-
-    useAnimatedReaction(() => handlerOffsetX.value, computedIndex, [
+    useDerivedValue(() => {
+        const handlerOffsetXValue = handlerOffsetX.value;
+        sharedPreIndex.value = sharedIndex.value;
+        const toInt = (handlerOffsetXValue / size) % dataInfo.length;
+        const isPositive = handlerOffsetXValue <= 0;
+        const i = isPositive
+            ? Math.abs(toInt)
+            : Math.abs(toInt > 0 ? dataInfo.length - toInt : 0);
+        index.value = i;
+        sharedIndex.value = convertToSharedIndex({
+            loop,
+            rawDataLength: dataInfo.originalLength,
+            autoFillData: autoFillData!,
+            index: i,
+        });
+    }, [
+        sharedPreIndex,
+        sharedIndex,
+        size,
+        dataInfo,
+        index,
+        loop,
+        autoFillData,
         handlerOffsetX,
     ]);
 

diff --git a/src/hooks/useCommonVariables.ts b/src/hooks/useCommonVariables.ts
@@ -11,15 +11,15 @@ interface ICommonVariables {
 export function useCommonVariables(
     props: TInitializeCarouselProps<any>
 ): ICommonVariables {
-    const { vertical, height, width, data, defaultIndex, rawData } = props;
+    const { vertical, height, width, data, defaultIndex } = props;
     const size = vertical ? height : width;
     const validLength = data.length - 1;
     const defaultHandlerOffsetX = -Math.abs(defaultIndex * size);
     const handlerOffsetX = useSharedValue<number>(defaultHandlerOffsetX);
 
     React.useEffect(() => {
         handlerOffsetX.value = defaultHandlerOffsetX;
-    }, [vertical, handlerOffsetX, defaultHandlerOffsetX, rawData]);
+    }, [vertical, handlerOffsetX, defaultHandlerOffsetX]);
 
     return {
         size,