react-native-reanimated-carousel 2.3.7 → 2.3.10

package/lib/module/utils/computedWithAutoFillData.js.map

@@ -1 +1 @@
-{"version":3,"sources":["computedWithAutoFillData.ts"],"names":["DATA_LENGTH","SINGLE_ITEM","DOUBLE_ITEM","isAutoFillData","params","loop","autoFillData","computedOffsetXValueWithAutoFillData","rawDataLength","value","size","computedRealIndexWithAutoFillData","index","dataLength","computedFillDataWithAutoFillData","data"],"mappings":"AAAA,SAASA,WAAT,QAA4B,eAA5B;AAEA,MAAM;AAAEC,EAAAA,WAAF;AAAeC,EAAAA;AAAf,IAA+BF,WAArC;;AAEA,SAASG,cAAT,CAAwBC,MAAxB,EAA0E;AACtE;;AACA,SAAO,CAAC,CAACA,MAAM,CAACC,IAAT,IAAiB,CAAC,CAACD,MAAM,CAACE,YAAjC;AACH;;AAOD,OAAO,SAASC,oCAAT,CACHH,MADG,EAML;AACE;;AAEA,QAAM;AAAEI,IAAAA,aAAF;AAAiBC,IAAAA,KAAjB;AAAwBC,IAAAA,IAAxB;AAA8BL,IAAAA,IAA9B;AAAoCC,IAAAA;AAApC,MAAqDF,MAA3D;;AAEA,MAAID,cAAc,CAAC;AAAEE,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAD,CAAlB,EAA4C;AACxC,YAAQE,aAAR;AACI,WAAKP,WAAL;AACI,eAAOQ,KAAK,GAAGC,IAAf;;AACJ,WAAKR,WAAL;AACI,eAAOO,KAAK,IAAIC,IAAI,GAAG,CAAX,CAAZ;AAJR;AAMH;;AAED,SAAOD,KAAP;AACH;AAED,OAAO,SAASE,iCAAT,CACHP,MADG,EAKL;AACE,QAAM;AAAEQ,IAAAA,KAAF;AAASC,IAAAA,UAAT;AAAqBR,IAAAA,IAArB;AAA2BC,IAAAA;AAA3B,MAA4CF,MAAlD;;AAEA,MAAID,cAAc,CAAC;AAAEE,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAD,CAAlB,EAA4C;AACxC,YAAQO,UAAR;AACI,WAAKZ,WAAL;AACI,eAAOW,KAAK,GAAG,CAAf;;AACJ,WAAKV,WAAL;AACI,eAAOU,KAAK,GAAG,CAAf;AAJR;AAMH;;AAED,SAAOA,KAAP;AACH;AAED,OAAO,SAASE,gCAAT,CACHV,MADG,EAKA;AACH,QAAM;AAAEW,IAAAA,IAAF;AAAQV,IAAAA,IAAR;AAAcC,IAAAA,YAAd;AAA4BO,IAAAA;AAA5B,MAA2CT,MAAjD;;AAEA,MAAID,cAAc,CAAC;AAAEE,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAD,CAAlB,EAA4C;AACxC,YAAQO,UAAR;AACI,WAAKZ,WAAL;AACI,eAAO,CAACc,IAAI,CAAC,CAAD,CAAL,EAAUA,IAAI,CAAC,CAAD,CAAd,EAAmBA,IAAI,CAAC,CAAD,CAAvB,CAAP;;AACJ,WAAKb,WAAL;AACI,eAAO,CAACa,IAAI,CAAC,CAAD,CAAL,EAAUA,IAAI,CAAC,CAAD,CAAd,EAAmBA,IAAI,CAAC,CAAD,CAAvB,EAA4BA,IAAI,CAAC,CAAD,CAAhC,CAAP;AAJR;AAMH;;AAED,SAAOA,IAAP;AACH","sourcesContent":["import { DATA_LENGTH } from 'src/constants';\n\nconst { SINGLE_ITEM, DOUBLE_ITEM } = DATA_LENGTH;\n\nfunction isAutoFillData(params: { autoFillData: boolean; loop: boolean }) {\n    'worklet';\n    return !!params.loop && !!params.autoFillData;\n}\n\ntype BaseParams<T extends object = {}> = {\n    autoFillData: boolean;\n    loop: boolean;\n} & T;\n\nexport function computedOffsetXValueWithAutoFillData(\n    params: BaseParams<{\n        rawDataLength: number;\n        value: number;\n        size: number;\n    }>\n) {\n    'worklet';\n\n    const { rawDataLength, value, size, loop, autoFillData } = params;\n\n    if (isAutoFillData({ loop, autoFillData })) {\n        switch (rawDataLength) {\n            case SINGLE_ITEM:\n                return value % size;\n            case DOUBLE_ITEM:\n                return value % (size * 2);\n        }\n    }\n\n    return value;\n}\n\nexport function computedRealIndexWithAutoFillData(\n    params: BaseParams<{\n        index: number;\n        dataLength: number;\n    }>\n) {\n    const { index, dataLength, loop, autoFillData } = params;\n\n    if (isAutoFillData({ loop, autoFillData })) {\n        switch (dataLength) {\n            case SINGLE_ITEM:\n                return index % 1;\n            case DOUBLE_ITEM:\n                return index % 2;\n        }\n    }\n\n    return index;\n}\n\nexport function computedFillDataWithAutoFillData<T>(\n    params: BaseParams<{\n        data: T[];\n        dataLength: number;\n    }>\n): T[] {\n    const { data, loop, autoFillData, dataLength } = params;\n\n    if (isAutoFillData({ loop, autoFillData })) {\n        switch (dataLength) {\n            case SINGLE_ITEM:\n                return [data[0], data[0], data[0]];\n            case DOUBLE_ITEM:\n                return [data[0], data[1], data[0], data[1]];\n        }\n    }\n\n    return data;\n}\n"]}
+{"version":3,"sources":["computedWithAutoFillData.ts"],"names":["DATA_LENGTH","SINGLE_ITEM","DOUBLE_ITEM","isAutoFillData","params","loop","autoFillData","convertToSharedIndex","rawDataLength","index","computedOffsetXValueWithAutoFillData","value","size","computedRealIndexWithAutoFillData","dataLength","computedFillDataWithAutoFillData","data"],"mappings":"AAAA,SAASA,WAAT,QAA4B,eAA5B;AAEA,MAAM;AAAEC,EAAAA,WAAF;AAAeC,EAAAA;AAAf,IAA+BF,WAArC;;AAEA,SAASG,cAAT,CAAwBC,MAAxB,EAA0E;AACtE;;AACA,SAAO,CAAC,CAACA,MAAM,CAACC,IAAT,IAAiB,CAAC,CAACD,MAAM,CAACE,YAAjC;AACH;;AAOD,OAAO,SAASC,oBAAT,CACHH,MADG,EAEL;AACE;;AACA,QAAM;AAAEC,IAAAA,IAAF;AAAQG,IAAAA,aAAR;AAAuBC,IAAAA,KAAvB;AAA8BH,IAAAA;AAA9B,MAA+CF,MAArD;;AAEA,MAAID,cAAc,CAAC;AAAEE,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAD,CAAlB,EAA4C;AACxC,YAAQE,aAAR;AACI,WAAKP,WAAL;AACI,eAAO,CAAP;;AACJ,WAAKC,WAAL;AACI,eAAOO,KAAK,GAAG,CAAf;AAJR;AAMH;;AAED,SAAOA,KAAP;AACH;AAED,OAAO,SAASC,oCAAT,CACHN,MADG,EAML;AACE;;AAEA,QAAM;AAAEI,IAAAA,aAAF;AAAiBG,IAAAA,KAAjB;AAAwBC,IAAAA,IAAxB;AAA8BP,IAAAA,IAA9B;AAAoCC,IAAAA;AAApC,MAAqDF,MAA3D;;AAEA,MAAID,cAAc,CAAC;AAAEE,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAD,CAAlB,EAA4C;AACxC,YAAQE,aAAR;AACI,WAAKP,WAAL;AACI,eAAOU,KAAK,GAAGC,IAAf;;AACJ,WAAKV,WAAL;AACI,eAAOS,KAAK,IAAIC,IAAI,GAAG,CAAX,CAAZ;AAJR;AAMH;;AAED,SAAOD,KAAP;AACH;AAED,OAAO,SAASE,iCAAT,CACHT,MADG,EAKL;AACE,QAAM;AAAEK,IAAAA,KAAF;AAASK,IAAAA,UAAT;AAAqBT,IAAAA,IAArB;AAA2BC,IAAAA;AAA3B,MAA4CF,MAAlD;;AAEA,MAAID,cAAc,CAAC;AAAEE,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAD,CAAlB,EAA4C;AACxC,YAAQQ,UAAR;AACI,WAAKb,WAAL;AACI,eAAOQ,KAAK,GAAG,CAAf;;AACJ,WAAKP,WAAL;AACI,eAAOO,KAAK,GAAG,CAAf;AAJR;AAMH;;AAED,SAAOA,KAAP;AACH;AAED,OAAO,SAASM,gCAAT,CACHX,MADG,EAKA;AACH,QAAM;AAAEY,IAAAA,IAAF;AAAQX,IAAAA,IAAR;AAAcC,IAAAA,YAAd;AAA4BQ,IAAAA;AAA5B,MAA2CV,MAAjD;;AAEA,MAAID,cAAc,CAAC;AAAEE,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAD,CAAlB,EAA4C;AACxC,YAAQQ,UAAR;AACI,WAAKb,WAAL;AACI,eAAO,CAACe,IAAI,CAAC,CAAD,CAAL,EAAUA,IAAI,CAAC,CAAD,CAAd,EAAmBA,IAAI,CAAC,CAAD,CAAvB,CAAP;;AACJ,WAAKd,WAAL;AACI,eAAO,CAACc,IAAI,CAAC,CAAD,CAAL,EAAUA,IAAI,CAAC,CAAD,CAAd,EAAmBA,IAAI,CAAC,CAAD,CAAvB,EAA4BA,IAAI,CAAC,CAAD,CAAhC,CAAP;AAJR;AAMH;;AAED,SAAOA,IAAP;AACH","sourcesContent":["import { DATA_LENGTH } from 'src/constants';\n\nconst { SINGLE_ITEM, DOUBLE_ITEM } = DATA_LENGTH;\n\nfunction isAutoFillData(params: { autoFillData: boolean; loop: boolean }) {\n    'worklet';\n    return !!params.loop && !!params.autoFillData;\n}\n\ntype BaseParams<T extends object = {}> = {\n    autoFillData: boolean;\n    loop: boolean;\n} & T;\n\nexport function convertToSharedIndex(\n    params: BaseParams<{ index: number; rawDataLength: number }>\n) {\n    'worklet';\n    const { loop, rawDataLength, index, autoFillData } = params;\n\n    if (isAutoFillData({ loop, autoFillData })) {\n        switch (rawDataLength) {\n            case SINGLE_ITEM:\n                return 0;\n            case DOUBLE_ITEM:\n                return index % 2;\n        }\n    }\n\n    return index;\n}\n\nexport function computedOffsetXValueWithAutoFillData(\n    params: BaseParams<{\n        rawDataLength: number;\n        value: number;\n        size: number;\n    }>\n) {\n    'worklet';\n\n    const { rawDataLength, value, size, loop, autoFillData } = params;\n\n    if (isAutoFillData({ loop, autoFillData })) {\n        switch (rawDataLength) {\n            case SINGLE_ITEM:\n                return value % size;\n            case DOUBLE_ITEM:\n                return value % (size * 2);\n        }\n    }\n\n    return value;\n}\n\nexport function computedRealIndexWithAutoFillData(\n    params: BaseParams<{\n        index: number;\n        dataLength: number;\n    }>\n) {\n    const { index, dataLength, loop, autoFillData } = params;\n\n    if (isAutoFillData({ loop, autoFillData })) {\n        switch (dataLength) {\n            case SINGLE_ITEM:\n                return index % 1;\n            case DOUBLE_ITEM:\n                return index % 2;\n        }\n    }\n\n    return index;\n}\n\nexport function computedFillDataWithAutoFillData<T>(\n    params: BaseParams<{\n        data: T[];\n        dataLength: number;\n    }>\n): T[] {\n    const { data, loop, autoFillData, dataLength } = params;\n\n    if (isAutoFillData({ loop, autoFillData })) {\n        switch (dataLength) {\n            case SINGLE_ITEM:\n                return [data[0], data[0], data[0]];\n            case DOUBLE_ITEM:\n                return [data[0], data[1], data[0], data[1]];\n        }\n    }\n\n    return data;\n}\n"]}

package/lib/typescript/{src/hooks → hooks}/useCarouselController.d.ts

@@ -1,28 +1,22 @@
-import React from 'react';
 import type Animated from 'react-native-reanimated';
 import type { TCarouselActionOptions, TCarouselProps } from '../types';
 interface IOpts {
     loop: boolean;
     size: number;
+    data: TCarouselProps['data'];
+    autoFillData: TCarouselProps['autoFillData'];
     handlerOffsetX: Animated.SharedValue<number>;
     withAnimation?: TCarouselProps['withAnimation'];
-    disable?: boolean;
     duration?: number;
-    originalLength: number;
-    length: number;
     defaultIndex?: number;
     onScrollBegin?: () => void;
     onScrollEnd?: () => void;
-    onChange: (index: number) => void;
 }
 export interface ICarouselController {
-    length: number;
-    index: Animated.SharedValue<number>;
-    sharedIndex: React.MutableRefObject<number>;
-    sharedPreIndex: React.MutableRefObject<number>;
+    sharedIndex: Animated.SharedValue<number>;
+    sharedPreIndex: Animated.SharedValue<number>;
     prev: (opts?: TCarouselActionOptions) => void;
     next: (opts?: TCarouselActionOptions) => void;
-    computedIndex: () => void;
     getCurrentIndex: () => number;
     to: (index: number, animated?: boolean) => void;
     scrollTo: (opts?: TCarouselActionOptions) => void;

package/lib/typescript/{src/types.d.ts → types.d.ts}

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { ViewStyle } from 'react-native';
 import type { PanGestureHandlerProps } from 'react-native-gesture-handler';
 import type { AnimatedStyleProp, WithSpringConfig, WithTimingConfig } from 'react-native-reanimated';
@@ -128,6 +129,10 @@ export declare type TCarouselProps<T = any> = {
      * Specifies the scrolling animation effect.
      */
     withAnimation?: WithAnimation;
+    /**
+     * Used to locate this view in end-to-end tests.
+     */
+    testID?: string;
     /**
      * Custom carousel config.
      */

package/lib/typescript/{src/utils → utils}/computedWithAutoFillData.d.ts

@@ -2,6 +2,10 @@ declare type BaseParams<T extends object = {}> = {
     autoFillData: boolean;
     loop: boolean;
 } & T;
+export declare function convertToSharedIndex(params: BaseParams<{
+    index: number;
+    rawDataLength: number;
+}>): number;
 export declare function computedOffsetXValueWithAutoFillData(params: BaseParams<{
     rawDataLength: number;
     value: number;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-native-reanimated-carousel",
-    "version": "2.3.7",
+    "version": "2.3.10",
     "description": "Simple carousel component.fully implemented using Reanimated 2.Infinitely scrolling, very smooth.",
     "main": "lib/commonjs/index",
     "types": "lib/typescript/index.d.ts",
@@ -26,8 +26,8 @@
         "lint": "eslint \"src/**/*.{js,ts,tsx}\"",
         "dev": "yarn watch 'yarn prepare' ./src",
         "prepare": "bob build",
-        "release": "release-it --no-git.requireUpstream",
-        "preRelease": "release-it --no-git.requireUpstream --preRelease=beta",
+        "release": "yarn prepare && release-it --no-git.requireUpstream",
+        "preRelease": "yarn prepare && release-it --no-git.requireUpstream --preRelease=beta",
         "ios": "yarn --cwd example ios",
         "ios:pretty": "yarn --cwd example ios:pretty",
         "web": "yarn --cwd example web",

package/src/Carousel.tsx

@@ -1,5 +1,9 @@
 import React from 'react';
-import Animated, { runOnJS, useDerivedValue } from 'react-native-reanimated';
+import Animated, {
+    runOnJS,
+    runOnUI,
+    useDerivedValue,
+} from 'react-native-reanimated';
 
 import { useCarouselController } from './hooks/useCarouselController';
 import { useAutoPlay } from './hooks/useAutoPlay';
@@ -22,6 +26,7 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
         const props = useInitProps(_props);
 
         const {
+            testID,
             data,
             rawData,
             loop,
@@ -73,28 +78,27 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
         const carouselController = useCarouselController({
             loop,
             size,
+            data,
+            autoFillData,
             handlerOffsetX,
-            length: data.length,
-            disable: !data.length,
             withAnimation,
-            originalLength: data.length,
             defaultIndex,
             onScrollEnd: () => runOnJS(_onScrollEnd)(),
             onScrollBegin: () => !!onScrollBegin && runOnJS(onScrollBegin)(),
-            onChange: (i) => !!onSnapToItem && runOnJS(onSnapToItem)(i),
             duration: scrollAnimationDuration,
         });
 
         const {
+            sharedIndex,
+            sharedPreIndex,
+            to,
             next,
             prev,
-            sharedPreIndex,
-            sharedIndex,
-            computedIndex,
+            scrollTo,
             getCurrentIndex,
         } = carouselController;
 
-        const { start, pause } = useAutoPlay({
+        const { start: startAutoPlay, pause: pauseAutoPlay } = useAutoPlay({
             autoPlay,
             autoPlayInterval,
             autoPlayReverse,
@@ -102,29 +106,44 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
         });
 
         const _onScrollEnd = React.useCallback(() => {
-            computedIndex();
-            onScrollEnd?.(sharedPreIndex.current, sharedIndex.current);
-        }, [sharedPreIndex, sharedIndex, computedIndex, onScrollEnd]);
+            'worklet';
+            const _sharedIndex = Math.round(sharedIndex.value);
+            const _sharedPreIndex = Math.round(sharedPreIndex.value);
+
+            if (onSnapToItem) {
+                runOnJS(onSnapToItem)(_sharedIndex);
+            }
+            if (onScrollEnd) {
+                runOnJS(onScrollEnd)(_sharedPreIndex, _sharedIndex);
+            }
+        }, [onSnapToItem, onScrollEnd, sharedIndex, sharedPreIndex]);
 
         const scrollViewGestureOnScrollBegin = React.useCallback(() => {
-            pause();
+            pauseAutoPlay();
             onScrollBegin?.();
-        }, [onScrollBegin, pause]);
+        }, [onScrollBegin, pauseAutoPlay]);
 
         const scrollViewGestureOnScrollEnd = React.useCallback(() => {
-            start();
-            _onScrollEnd();
-        }, [_onScrollEnd, start]);
+            startAutoPlay();
+            /**
+             * TODO magic
+             */
+            runOnUI(_onScrollEnd)();
+        }, [_onScrollEnd, startAutoPlay]);
 
-        const scrollViewGestureOnTouchBegin = React.useCallback(pause, [pause]);
+        const scrollViewGestureOnTouchBegin = React.useCallback(pauseAutoPlay, [
+            pauseAutoPlay,
+        ]);
 
-        const scrollViewGestureOnTouchEnd = React.useCallback(start, [start]);
+        const scrollViewGestureOnTouchEnd = React.useCallback(startAutoPlay, [
+            startAutoPlay,
+        ]);
 
         const goToIndex = React.useCallback(
             (i: number, animated?: boolean) => {
-                carouselController.to(i, animated);
+                to(i, animated);
             },
-            [carouselController]
+            [to]
         );
 
         React.useImperativeHandle(
@@ -134,15 +153,9 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
                 prev,
                 getCurrentIndex,
                 goToIndex,
-                scrollTo: carouselController.scrollTo,
+                scrollTo,
             }),
-            [
-                getCurrentIndex,
-                goToIndex,
-                next,
-                prev,
-                carouselController.scrollTo,
-            ]
+            [getCurrentIndex, goToIndex, next, prev, scrollTo]
         );
 
         const visibleRanges = useVisibleRanges({
@@ -201,6 +214,7 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
                         { width: width || '100%', height: height || '100%' },
                         style,
                     ]}
+                    testID={testID}
                 >
                     <ScrollViewGesture
                         size={size}

package/src/ScrollViewGesture.tsx

@@ -68,24 +68,22 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
     const _withSpring = React.useCallback(
         (toValue: number, onFinished?: () => void) => {
             'worklet';
-            const callback = (isFinished: boolean) => {
-                'worklet';
-                if (isFinished) {
-                    onFinished && runOnJS(onFinished)();
-                }
-            };
-
             const defaultWithAnimation: WithTimingAnimation = {
                 type: 'timing',
                 config: {
-                    duration: scrollAnimationDuration,
+                    duration: scrollAnimationDuration + 100,
                     easing: Easing.easeOutQuart,
                 },
             };
 
             return dealWithAnimation(withAnimation ?? defaultWithAnimation)(
                 toValue,
-                callback
+                (isFinished: boolean) => {
+                    'worklet';
+                    if (isFinished) {
+                        onFinished && runOnJS(onFinished)();
+                    }
+                }
             );
         },
         [scrollAnimationDuration, withAnimation]
@@ -273,7 +271,11 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
 
     return (
         <Animated.View
-            style={[styles.container, directionStyle]}
+            style={[
+                styles.container,
+                directionStyle,
+                { width: '100%', height: '100%' },
+            ]}
             onTouchStart={onTouchBegin}
             onTouchEnd={onTouchEnd}
         >

package/src/hooks/useAutoPlay.ts

@@ -14,6 +14,7 @@ export function useAutoPlay(opts: {
         carouselController,
     } = opts;
 
+    const { prev, next } = carouselController;
     const timer = React.useRef<NodeJS.Timer>();
     const stopped = React.useRef<boolean>(!autoPlay);
 
@@ -25,10 +26,10 @@ export function useAutoPlay(opts: {
         timer.current && clearTimeout(timer.current);
         timer.current = setTimeout(() => {
             autoPlayReverse
-                ? carouselController.prev({ onFinished: play })
-                : carouselController.next({ onFinished: play });
+                ? prev({ onFinished: play })
+                : next({ onFinished: play });
         }, autoPlayInterval);
-    }, [autoPlayReverse, autoPlayInterval, carouselController]);
+    }, [autoPlayReverse, autoPlayInterval, prev, next]);
 
     const pause = React.useCallback(() => {
         if (!autoPlay) {

package/src/hooks/useCarouselController.tsx

@@ -1,38 +1,37 @@
 import React from 'react';
 import type Animated from 'react-native-reanimated';
 import { Easing } from '../constants';
-import { runOnJS, useSharedValue } from 'react-native-reanimated';
+import {
+    runOnJS,
+    useAnimatedReaction,
+    useSharedValue,
+} from 'react-native-reanimated';
 import type {
     TCarouselActionOptions,
     TCarouselProps,
     WithTimingAnimation,
 } from '../types';
 import { dealWithAnimation } from '@/utils/dealWithAnimation';
+import { convertToSharedIndex } from '@/utils/computedWithAutoFillData';
 
 interface IOpts {
     loop: boolean;
     size: number;
+    data: TCarouselProps['data'];
+    autoFillData: TCarouselProps['autoFillData'];
     handlerOffsetX: Animated.SharedValue<number>;
     withAnimation?: TCarouselProps['withAnimation'];
-    disable?: boolean;
     duration?: number;
-    originalLength: number;
-    length: number;
     defaultIndex?: number;
     onScrollBegin?: () => void;
     onScrollEnd?: () => void;
-    // the length before fill data
-    onChange: (index: number) => void;
 }
 
 export interface ICarouselController {
-    length: number;
-    index: Animated.SharedValue<number>;
-    sharedIndex: React.MutableRefObject<number>;
-    sharedPreIndex: React.MutableRefObject<number>;
+    sharedIndex: Animated.SharedValue<number>;
+    sharedPreIndex: Animated.SharedValue<number>;
     prev: (opts?: TCarouselActionOptions) => void;
     next: (opts?: TCarouselActionOptions) => void;
-    computedIndex: () => void;
     getCurrentIndex: () => number;
     to: (index: number, animated?: boolean) => void;
     scrollTo: (opts?: TCarouselActionOptions) => void;
@@ -41,70 +40,64 @@ export interface ICarouselController {
 export function useCarouselController(options: IOpts): ICarouselController {
     const {
         size,
+        data,
         loop,
         handlerOffsetX,
         withAnimation,
-        disable = false,
-        originalLength,
-        length,
-        onChange,
-        duration,
         defaultIndex = 0,
+        duration,
+        autoFillData,
     } = options;
 
+    const dataInfo = React.useMemo(
+        () => ({
+            length: data.length,
+            disable: !data.length,
+            originalLength: data.length,
+        }),
+        [data]
+    );
+
     const index = useSharedValue<number>(defaultIndex);
     // The Index displayed to the user
-    const sharedIndex = React.useRef<number>(defaultIndex);
-    const sharedPreIndex = React.useRef<number>(defaultIndex);
+    const sharedIndex = useSharedValue<number>(defaultIndex);
+    const sharedPreIndex = useSharedValue<number>(defaultIndex);
 
     const currentFixedPage = React.useCallback(() => {
         if (loop) {
             return -Math.round(handlerOffsetX.value / size);
         }
 
-        const fixed = (handlerOffsetX.value / size) % length;
+        const fixed = (handlerOffsetX.value / size) % dataInfo.length;
         return Math.round(
             handlerOffsetX.value <= 0
                 ? Math.abs(fixed)
-                : Math.abs(fixed > 0 ? length - fixed : 0)
+                : Math.abs(fixed > 0 ? dataInfo.length - fixed : 0)
         );
-    }, [handlerOffsetX, length, size, loop]);
+    }, [handlerOffsetX, dataInfo, size, loop]);
 
-    const convertToSharedIndex = React.useCallback(
-        (i: number) => {
-            if (loop) {
-                switch (originalLength) {
-                    case 1:
-                        return 0;
-                    case 2:
-                        return i % 2;
-                }
-            }
-            return i;
+    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,
+            });
         },
-        [originalLength, loop]
+        [sharedPreIndex, sharedIndex, size, dataInfo, index, loop, autoFillData]
     );
 
-    const computedIndex = React.useCallback(() => {
-        sharedPreIndex.current = sharedIndex.current;
-        const toInt = (handlerOffsetX.value / size) % length;
-        const i =
-            handlerOffsetX.value <= 0
-                ? Math.abs(toInt)
-                : Math.abs(toInt > 0 ? length - toInt : 0);
-        index.value = i;
-        const _sharedIndex = convertToSharedIndex(i);
-        sharedIndex.current = _sharedIndex;
-        onChange(_sharedIndex);
-    }, [
-        length,
+    useAnimatedReaction(() => handlerOffsetX.value, computedIndex, [
         handlerOffsetX,
-        sharedPreIndex,
-        index,
-        size,
-        sharedIndex,
-        convertToSharedIndex,
-        onChange,
     ]);
 
     const getCurrentIndex = React.useCallback(() => {
@@ -112,8 +105,8 @@ export function useCarouselController(options: IOpts): ICarouselController {
     }, [index]);
 
     const canSliding = React.useCallback(() => {
-        return !disable;
-    }, [disable]);
+        return !dataInfo.disable;
+    }, [dataInfo]);
 
     const onScrollEnd = React.useCallback(() => {
         options.onScrollEnd?.();
@@ -151,7 +144,8 @@ export function useCarouselController(options: IOpts): ICarouselController {
         (opts: TCarouselActionOptions = {}) => {
             'worklet';
             const { count = 1, animated = true, onFinished } = opts;
-            if (!canSliding() || (!loop && index.value >= length - 1)) return;
+            if (!canSliding() || (!loop && index.value >= dataInfo.length - 1))
+                return;
 
             onScrollBegin?.();
 
@@ -172,7 +166,7 @@ export function useCarouselController(options: IOpts): ICarouselController {
             canSliding,
             loop,
             index,
-            length,
+            dataInfo,
             onScrollBegin,
             handlerOffsetX,
             size,
@@ -259,15 +253,12 @@ export function useCarouselController(options: IOpts): ICarouselController {
     );
 
     return {
+        sharedIndex,
+        sharedPreIndex,
+        to,
         next,
         prev,
-        to,
         scrollTo,
-        index,
-        length,
-        sharedIndex,
-        sharedPreIndex,
-        computedIndex,
         getCurrentIndex,
     };
 }

package/src/types.ts

@@ -144,6 +144,10 @@ export type TCarouselProps<T = any> = {
      * Specifies the scrolling animation effect.
      */
     withAnimation?: WithAnimation;
+    /**
+     * Used to locate this view in end-to-end tests.
+     */
+    testID?: string;
     /**
      * Custom carousel config.
      */

package/src/utils/computedWithAutoFillData.ts

@@ -12,6 +12,24 @@ type BaseParams<T extends object = {}> = {
     loop: boolean;
 } & T;
 
+export function convertToSharedIndex(
+    params: BaseParams<{ index: number; rawDataLength: number }>
+) {
+    'worklet';
+    const { loop, rawDataLength, index, autoFillData } = params;
+
+    if (isAutoFillData({ loop, autoFillData })) {
+        switch (rawDataLength) {
+            case SINGLE_ITEM:
+                return 0;
+            case DOUBLE_ITEM:
+                return index % 2;
+        }
+    }
+
+    return index;
+}
+
 export function computedOffsetXValueWithAutoFillData(
     params: BaseParams<{
         rawDataLength: number;

package/lib/typescript/exampleBare/App.d.ts

@@ -1,2 +0,0 @@
-declare const App: () => JSX.Element;
-export default App;