react-native-reanimated-carousel 2.3.9 → 2.3.10

package/lib/typescript/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/types.d.ts

@@ -129,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/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.9",
+    "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]

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;