From d82d39bfa1abd9060bad6756b0feccd894d22cbe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E6=9D=B1=E6=BE=94?= <zhaodonghao586@outlook.com>
Date: Sun, 15 May 2022 11:23:00 +0800
Subject: [PATCH] fix: focused index is not persisted when carousel component
 is re-rendered

fix #181
---
 src/hooks/useCarouselController.tsx | 46 +++++++++++++++--------------
 src/hooks/useCommonVariables.ts     |  4 +--
 2 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/src/hooks/useCarouselController.tsx b/src/hooks/useCarouselController.tsx
index 95aa4bbb..3ddf6e68 100644
--- 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
index c13395de..2de1a20a 100644
--- a/src/hooks/useCommonVariables.ts
+++ b/src/hooks/useCommonVariables.ts
@@ -11,7 +11,7 @@ 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);
@@ -19,7 +19,7 @@ export function useCommonVariables(
 
     React.useEffect(() => {
         handlerOffsetX.value = defaultHandlerOffsetX;
-    }, [vertical, handlerOffsetX, defaultHandlerOffsetX, rawData]);
+    }, [vertical, handlerOffsetX, defaultHandlerOffsetX]);
 
     return {
         size,