fix: refactoring some code on data prop

src/Carousel.tsx

@@ -23,10 +23,16 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
 
     const {
       testID,
-      data,
-      rawData,
       loop,
       autoFillData,
+      // Fill data with autoFillData
+      data,
+      // Length of fill data
+      dataLength,
+      // Raw data that has not been processed
+      rawData,
+      // Length of raw data
+      rawDataLength,
       mode,
       style,
       width,
@@ -49,7 +55,6 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
 
     const commonVariables = useCommonVariables(props);
     const { size, handlerOffset } = commonVariables;
-    const dataLength = data.length;
 
     const offsetX = useDerivedValue(() => {
       const totalSize = size * dataLength;
@@ -61,20 +66,20 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
       return isNaN(x) ? 0 : x;
     }, [loop, size, dataLength]);
 
-    usePropsErrorBoundary(props);
+    usePropsErrorBoundary({ ...props, dataLength });
     useOnProgressChange({
       autoFillData,
       loop,
       size,
       offsetX,
-      rawData,
+      rawDataLength,
       onProgressChange,
     });
 
     const carouselController = useCarouselController({
       loop,
       size,
-      data,
+      dataLength,
       autoFillData,
       handlerOffset,
       withAnimation,
@@ -99,7 +104,7 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
 
       const realIndex = computedRealIndexWithAutoFillData({
         index: _sharedIndex,
-        dataLength: rawData.length,
+        dataLength: rawDataLength,
         loop,
         autoFillData,
       });
@@ -112,7 +117,7 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
     }, [
       loop,
       autoFillData,
-      rawData.length,
+      rawDataLength,
       getSharedIndex,
       onSnapToItem,
       onScrollEnd,
@@ -148,7 +153,7 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
     );
 
     const visibleRanges = useVisibleRanges({
-      total: data.length,
+      total: dataLength,
       viewSize: size,
       translation: handlerOffset,
       windowSize,
@@ -160,7 +165,7 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
       (item: any, i: number) => {
         const realIndex = computedRealIndexWithAutoFillData({
           index: i,
-          dataLength: rawData.length,
+          dataLength: rawDataLength,
           loop,
           autoFillData,
         });

src/ScrollViewGesture.tsx

@@ -41,14 +41,14 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
   const {
     props: {
       vertical,
-      data,
       pagingEnabled,
       snapEnabled,
       panGestureHandlerProps,
       loop: infinite,
       scrollAnimationDuration,
       withAnimation,
       enabled,
+      dataLength,
     },
   } = React.useContext(CTX);
 
@@ -63,7 +63,7 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
     onTouchEnd,
   } = props;
 
-  const maxPage = data.length;
+  const maxPage = dataLength;
   const isHorizontal = useDerivedValue(() => !vertical, [vertical]);
   const touching = useSharedValue(false);
   const scrollEndTranslation = useSharedValue(0);

src/hooks/useCarouselController.tsx

@@ -20,7 +20,7 @@ import { round } from "../utils/log";
 interface IOpts {
   loop: boolean
   size: number
-  data: TCarouselProps["data"]
+  dataLength: number
   autoFillData: TCarouselProps["autoFillData"]
   handlerOffset: Animated.SharedValue<number>
   withAnimation?: TCarouselProps["withAnimation"]
@@ -41,8 +41,8 @@ export interface ICarouselController {
 export function useCarouselController(options: IOpts): ICarouselController {
   const {
     size,
-    data,
     loop,
+    dataLength,
     handlerOffset,
     withAnimation,
     defaultIndex = 0,
@@ -52,11 +52,11 @@ export function useCarouselController(options: IOpts): ICarouselController {
 
   const dataInfo = React.useMemo(
     () => ({
-      length: data.length,
-      disable: !data.length,
-      originalLength: data.length,
+      length: dataLength,
+      disable: !dataLength,
+      originalLength: dataLength,
     }),
-    [data],
+    [dataLength],
   );
 
   const index = useSharedValue<number>(defaultIndex);

src/hooks/useCommonVariables.ts

@@ -20,30 +20,30 @@ export function useCommonVariables(
     vertical,
     height,
     width,
-    data,
+    dataLength,
     defaultIndex,
     defaultScrollOffsetValue,
     loop,
   } = props;
   const size = vertical ? height : width;
-  const validLength = data.length - 1;
+  const validLength = dataLength - 1;
   const defaultHandlerOffsetValue = -Math.abs(defaultIndex * size);
   const _handlerOffset = useSharedValue<number>(defaultHandlerOffsetValue);
   const handlerOffset = defaultScrollOffsetValue ?? _handlerOffset;
-  const prevDataLength = useSharedValue(data.length);
+  const prevDataLength = useSharedValue(dataLength);
 
   React.useEffect(() => {
     handlerOffset.value = defaultHandlerOffsetValue;
   }, [vertical, handlerOffset, defaultHandlerOffsetValue]);
 
   useAnimatedReaction(() => {
     const previousLength = prevDataLength.value;
-    const currentLength = data.length;
+    const currentLength = dataLength;
     const isLengthChanged = previousLength !== currentLength;
     const shouldComputed = isLengthChanged && loop;
 
     if (shouldComputed)
-      prevDataLength.value = data.length;
+      prevDataLength.value = dataLength;
 
     return {
       shouldComputed,
@@ -63,7 +63,7 @@ export function useCommonVariables(
         handlerOffset: handlerOffset.value,
       });
     }
-  }, [data, loop]);
+  }, [dataLength, loop]);
 
   return {
     size,

src/hooks/useInitProps.ts

@@ -20,6 +20,8 @@ TGetRequiredProps<
 > & {
   // Raw data that has not been processed
   rawData: T[]
+  dataLength: number
+  rawDataLength: number
 };
 
 export function useInitProps<T>(
@@ -47,31 +49,38 @@ export function useInitProps<T>(
 
   const data = React.useMemo<T[]>(
     () => {
-      const computedData = computedFillDataWithAutoFillData<T>({
+      return computedFillDataWithAutoFillData<T>({
         loop,
         autoFillData,
         data: rawData,
         dataLength: rawData.length,
       });
-
-      return Array.from({ length: computedData.length });
     },
     [rawData, loop, autoFillData],
   );
 
+  const dataLength = data.length;
+  const rawDataLength = rawData.length;
+
   if (props.mode === "vertical-stack" || props.mode === "horizontal-stack") {
     if (!props.modeConfig)
       props.modeConfig = {};
 
-    props.modeConfig.showLength = props.modeConfig?.showLength ?? data.length - 1;
+    props.modeConfig.showLength = props.modeConfig?.showLength ?? dataLength - 1;
   }
 
   return {
     ...props,
     defaultIndex,
     autoFillData,
+    // Fill data with autoFillData
     data,
+    // Length of fill data
+    dataLength,
+    // Raw data that has not been processed
     rawData,
+    // Length of raw data
+    rawDataLength,
     loop,
     enabled,
     autoPlayInterval,

src/hooks/useOffsetX.ts

@@ -11,7 +11,7 @@ export interface IOpts {
   index: number
   size: number
   handlerOffset: Animated.SharedValue<number>
-  data: unknown[]
+  dataLength: number
   type?: "positive" | "negative"
   viewCount?: number
   loop?: boolean
@@ -23,16 +23,17 @@ export const useOffsetX = (opts: IOpts, visibleRanges: IVisibleRanges) => {
     index,
     size,
     loop,
-    data,
+    dataLength,
     type = "positive",
-    viewCount = Math.round((data.length - 1) / 2),
+    viewCount: _viewCount,
   } = opts;
 
-  const ITEM_LENGTH = data.length;
+  const ITEM_LENGTH = dataLength;
   const VALID_LENGTH = ITEM_LENGTH - 1;
   const TOTAL_WIDTH = size * ITEM_LENGTH;
   const HALF_WIDTH = 0.5 * size;
 
+  const viewCount = _viewCount ?? Math.round((ITEM_LENGTH - 1) / 2);
   const positiveCount
         = type === "positive" ? viewCount : VALID_LENGTH - viewCount;
 
@@ -81,7 +82,7 @@ export const useOffsetX = (opts: IOpts, visibleRanges: IVisibleRanges) => {
     }
 
     return handlerOffset.value + size * index;
-  }, [loop, data, viewCount, type, size, visibleRanges]);
+  }, [loop, dataLength, viewCount, type, size, visibleRanges]);
 
   return x;
 };

src/hooks/useOnProgressChange.ts

@@ -13,14 +13,12 @@ export function useOnProgressChange(
     autoFillData: boolean
     loop: boolean
     offsetX: Animated.SharedValue<number>
-    rawData: TCarouselProps["data"]
+    rawDataLength: number
   } & Pick<TCarouselProps, "onProgressChange">,
 ) {
-  const { autoFillData, loop, offsetX, rawData, size, onProgressChange }
+  const { autoFillData, loop, offsetX, size, rawDataLength, onProgressChange }
         = opts;
 
-  const rawDataLength = rawData.length;
-
   useAnimatedReaction(
     () => offsetX.value,
     (_value) => {

src/hooks/usePropsErrorBoundary.ts

@@ -2,11 +2,10 @@ import React from "react";
 
 import type { TCarouselProps } from "../types";
 
-export function usePropsErrorBoundary(props: TCarouselProps) {
+export function usePropsErrorBoundary(props: TCarouselProps & { dataLength: number }) {
   React.useEffect(() => {
-    const { defaultIndex, data } = props;
+    const { defaultIndex, dataLength: viewCount } = props;
 
-    const viewCount = data.length;
     if (typeof defaultIndex === "number" && viewCount > 0) {
       if (defaultIndex < 0 || defaultIndex >= viewCount) {
         throw new Error(

src/layouts/BaseLayout.tsx

@@ -36,7 +36,7 @@ export const BaseLayout: React.FC<{
   const {
     props: {
       loop,
-      data,
+      dataLength,
       width,
       height,
       vertical,
@@ -51,7 +51,7 @@ export const BaseLayout: React.FC<{
     handlerOffset,
     index,
     size,
-    data,
+    dataLength,
     loop,
     ...(typeof customConfig === "function" ? customConfig() : {}),
   };
@@ -63,7 +63,7 @@ export const BaseLayout: React.FC<{
       handlerOffset,
       index,
       size,
-      data,
+      dataLength,
       loop,
       type: snapDirection === "right" ? "negative" : "positive",
       viewCount: showLength,

src/layouts/ParallaxLayout.tsx

@@ -20,7 +20,7 @@ IComputedDirectionTypes<
   loop?: boolean
   handlerOffset: Animated.SharedValue<number>
   index: number
-  data: unknown[]
+  dataLength: number
   visibleRanges: IVisibleRanges
 } & ILayoutConfig
 >
@@ -34,7 +34,7 @@ IComputedDirectionTypes<
     width,
     height,
     loop,
-    data,
+    dataLength,
     children,
     visibleRanges,
     vertical,
@@ -49,7 +49,7 @@ IComputedDirectionTypes<
       handlerOffset,
       index,
       size,
-      data,
+      dataLength,
       loop,
     },
     visibleRanges,