Merge pull request #113 from dohooo/fix/rawDataRawCalculationError

fix: onProgressChange & onSnapToItem bug when only 2 image

Author: dohooo

src/Carousel.tsx

@@ -25,6 +25,7 @@ function Carousel<T>(
 
     const {
         data,
+        rawData,
         loop,
         mode,
         style,
@@ -58,7 +59,7 @@ function Carousel<T>(
     }, [loop, size, data]);
 
     usePropsErrorBoundary(props);
-    useOnProgressChange({ size, offsetX, data, onProgressChange });
+    useOnProgressChange({ size, offsetX, rawData, onProgressChange });
 
     const carouselController = useCarouselController({
         loop,
@@ -135,11 +136,11 @@ function Carousel<T>(
     const renderLayout = React.useCallback(
         (item: T, i: number) => {
             let realIndex = i;
-            if (data.length === DATA_LENGTH.SINGLE_ITEM) {
+            if (rawData.length === DATA_LENGTH.SINGLE_ITEM) {
                 realIndex = i % 1;
             }
 
-            if (data.length === DATA_LENGTH.DOUBLE_ITEM) {
+            if (rawData.length === DATA_LENGTH.DOUBLE_ITEM) {
                 realIndex = i % 2;
             }
 
@@ -162,7 +163,7 @@ function Carousel<T>(
             );
         },
         [
-            data,
+            rawData,
             offsetX,
             visibleRanges,
             renderItem,

src/hooks/useInitProps.ts

@@ -15,14 +15,17 @@ export type TInitializeCarouselProps<T> = TCarouselProps<T> &
         | 'height'
         | 'scrollAnimationDuration'
         | 'autoPlayInterval'
-    >;
+    > & {
+        // Raw data that has not been processed
+        rawData: T[];
+    };
 
 export function useInitProps<T>(
     props: TCarouselProps<T>
 ): TInitializeCarouselProps<T> {
     const {
         defaultIndex = 0,
-        data: _data = [],
+        data: rawData = [],
         loop = true,
         autoPlayInterval: _autoPlayInterval = 1000,
         scrollAnimationDuration = 500,
@@ -39,18 +42,18 @@ export function useInitProps<T>(
     const autoPlayInterval = Math.max(_autoPlayInterval, 0);
 
     const data = React.useMemo<T[]>(() => {
-        if (!loop) return _data;
+        if (!loop) return rawData;
 
-        if (_data.length === DATA_LENGTH.SINGLE_ITEM) {
-            return [_data[0], _data[0], _data[0]];
+        if (rawData.length === DATA_LENGTH.SINGLE_ITEM) {
+            return [rawData[0], rawData[0], rawData[0]];
         }
 
-        if (_data.length === DATA_LENGTH.DOUBLE_ITEM) {
-            return [_data[0], _data[1], _data[0], _data[1]];
+        if (rawData.length === DATA_LENGTH.DOUBLE_ITEM) {
+            return [rawData[0], rawData[1], rawData[0], rawData[1]];
         }
 
-        return _data;
-    }, [_data, loop]);
+        return rawData;
+    }, [rawData, loop]);
 
     if (props.mode === 'vertical-stack' || props.mode === 'horizontal-stack') {
         if (!props.modeConfig) {
@@ -63,6 +66,7 @@ export function useInitProps<T>(
         ...props,
         defaultIndex,
         data,
+        rawData,
         loop,
         autoPlayInterval,
         scrollAnimationDuration,

src/hooks/useOnProgressChange.ts

@@ -9,31 +9,32 @@ export function useOnProgressChange(
     opts: {
         size: number;
         offsetX: Animated.SharedValue<number>;
-    } & Pick<TCarouselProps, 'data' | 'onProgressChange'>
+        rawData: TCarouselProps['data'];
+    } & Pick<TCarouselProps, 'onProgressChange'>
 ) {
-    const { offsetX, data, size, onProgressChange } = opts;
+    const { offsetX, rawData, size, onProgressChange } = opts;
     useAnimatedReaction(
         () => offsetX.value,
         (_value) => {
             let value = _value;
 
-            if (data.length === DATA_LENGTH.SINGLE_ITEM) {
+            if (rawData.length === DATA_LENGTH.SINGLE_ITEM) {
                 value = value % size;
             }
 
-            if (data.length === DATA_LENGTH.DOUBLE_ITEM) {
+            if (rawData.length === DATA_LENGTH.DOUBLE_ITEM) {
                 value = value % (size * 2);
             }
 
             let absoluteProgress = Math.abs(value / size);
 
             if (value > 0) {
-                absoluteProgress = data.length - absoluteProgress;
+                absoluteProgress = rawData.length - absoluteProgress;
             }
 
             !!onProgressChange &&
                 runOnJS(onProgressChange)(value, absoluteProgress);
         },
-        [onProgressChange, data]
+        [onProgressChange, rawData]
     );
 }