react-native-reanimated-carousel 2.3.10 → 2.5.0

package/src/hooks/useCarouselController.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import type Animated from 'react-native-reanimated';
 import { Easing } from '../constants';
 import {
@@ -13,6 +13,7 @@ import type {
 } from '../types';
 import { dealWithAnimation } from '@/utils/dealWithAnimation';
 import { convertToSharedIndex } from '@/utils/computedWithAutoFillData';
+import { round } from '@/utils/log';
 
 interface IOpts {
     loop: boolean;
@@ -28,12 +29,10 @@ interface IOpts {
 }
 
 export interface ICarouselController {
-    sharedIndex: Animated.SharedValue<number>;
-    sharedPreIndex: Animated.SharedValue<number>;
+    getSharedIndex: () => number;
     prev: (opts?: TCarouselActionOptions) => void;
     next: (opts?: TCarouselActionOptions) => void;
     getCurrentIndex: () => number;
-    to: (index: number, animated?: boolean) => void;
     scrollTo: (opts?: TCarouselActionOptions) => void;
 }
 
@@ -60,8 +59,8 @@ export function useCarouselController(options: IOpts): ICarouselController {
 
     const index = useSharedValue<number>(defaultIndex);
     // The Index displayed to the user
-    const sharedIndex = useSharedValue<number>(defaultIndex);
-    const sharedPreIndex = useSharedValue<number>(defaultIndex);
+    const sharedIndex = useRef<number>(defaultIndex);
+    const sharedPreIndex = useRef<number>(defaultIndex);
 
     const currentFixedPage = React.useCallback(() => {
         if (loop) {
@@ -76,30 +75,47 @@ 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;
+    function setSharedIndex(newSharedIndex: number) {
+        sharedIndex.current = newSharedIndex;
+    }
+
+    useAnimatedReaction(
+        () => {
+            const handlerOffsetXValue = handlerOffsetX.value;
+            const toInt = round(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({
+
+            const newSharedIndexValue = convertToSharedIndex({
                 loop,
                 rawDataLength: dataInfo.originalLength,
                 autoFillData: autoFillData!,
                 index: i,
             });
+
+            return {
+                i,
+                newSharedIndexValue,
+            };
         },
-        [sharedPreIndex, sharedIndex, size, dataInfo, index, loop, autoFillData]
+        ({ i, newSharedIndexValue }) => {
+            index.value = i;
+            runOnJS(setSharedIndex)(newSharedIndexValue);
+        },
+        [
+            sharedPreIndex,
+            sharedIndex,
+            size,
+            dataInfo,
+            index,
+            loop,
+            autoFillData,
+            handlerOffsetX,
+        ]
     );
 
-    useAnimatedReaction(() => handlerOffsetX.value, computedIndex, [
-        handlerOffsetX,
-    ]);
-
     const getCurrentIndex = React.useCallback(() => {
         return index.value;
     }, [index]);
@@ -208,21 +224,22 @@ export function useCarouselController(options: IOpts): ICarouselController {
     );
 
     const to = React.useCallback(
-        (idx: number, animated: boolean = false) => {
-            if (idx === index.value) return;
+        (opts: { i: number; animated: boolean; onFinished?: () => void }) => {
+            const { i, animated = false, onFinished } = opts;
+            if (i === index.value) return;
             if (!canSliding()) return;
 
             onScrollBegin?.();
 
-            const offset = handlerOffsetX.value + (index.value - idx) * size;
+            const offset = handlerOffsetX.value + (index.value - i) * size;
 
             if (animated) {
-                index.value = idx;
-                handlerOffsetX.value = scrollWithTiming(offset);
+                index.value = i;
+                handlerOffsetX.value = scrollWithTiming(offset, onFinished);
             } else {
                 handlerOffsetX.value = offset;
-                index.value = idx;
-                runOnJS(onScrollEnd)();
+                index.value = i;
+                onFinished?.();
             }
         },
         [
@@ -232,33 +249,38 @@ export function useCarouselController(options: IOpts): ICarouselController {
             handlerOffsetX,
             size,
             scrollWithTiming,
-            onScrollEnd,
         ]
     );
 
     const scrollTo = React.useCallback(
         (opts: TCarouselActionOptions = {}) => {
-            const { count, animated = false, onFinished } = opts;
+            const { index: i, count, animated = false, onFinished } = opts;
+
+            if (i) {
+                to({ i, animated, onFinished });
+                return;
+            }
+
             if (!count) {
                 return;
             }
+
             const n = Math.round(count);
+
             if (n < 0) {
                 prev({ count: Math.abs(n), animated, onFinished });
             } else {
                 next({ count: n, animated, onFinished });
             }
         },
-        [prev, next]
+        [prev, next, to]
     );
 
     return {
-        sharedIndex,
-        sharedPreIndex,
-        to,
         next,
         prev,
         scrollTo,
         getCurrentIndex,
+        getSharedIndex: () => sharedIndex.current,
     };
 }

package/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,

package/src/types.ts

@@ -1,4 +1,4 @@
-import type { ViewStyle } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
 import type { PanGestureHandlerProps } from 'react-native-gesture-handler';
 import type {
     AnimatedStyleProp,
@@ -104,7 +104,7 @@ export type TCarouselProps<T = any> = {
     /**
      * Carousel container style
      */
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
     /**
      * PanGestureHandler props
      */
@@ -172,7 +172,7 @@ export type TCarouselProps<T = any> = {
     /**
      * On scroll end
      */
-    onScrollEnd?: (previous: number, current: number) => void;
+    onScrollEnd?: (index: number) => void;
     /**
      * On progress change
      * @param offsetProgress Total of offset distance (0 390 780 ...)
@@ -189,21 +189,16 @@ export interface ICarouselInstance {
      * Scroll to previous item, it takes one optional argument (count),
      * which allows you to specify how many items to cross
      */
-    prev: (opts?: TCarouselActionOptions) => void;
+    prev: (opts?: Omit<TCarouselActionOptions, 'index'>) => void;
     /**
      * Scroll to next item, it takes one optional argument (count),
      * which allows you to specify how many items to cross
      */
-    next: (opts?: TCarouselActionOptions) => void;
+    next: (opts?: Omit<TCarouselActionOptions, 'index'>) => void;
     /**
      * Get current item index
      */
     getCurrentIndex: () => number;
-    /**
-     * Go to index
-     * @deprecated use scrollTo instead
-     */
-    goToIndex: (index: number, animated?: boolean) => void;
     /**
      * Use value to scroll to a position where relative to the current position,
      * scrollTo(-2) is equivalent to prev(2), scrollTo(2) is equivalent to next(2)
@@ -222,6 +217,7 @@ export type CarouselRenderItem<ItemT> = (
 ) => React.ReactElement;
 
 export interface TCarouselActionOptions {
+    index?: number;
     count?: number;
     animated?: boolean;
     onFinished?: () => void;

package/src/utils/log.ts

@@ -5,3 +5,8 @@
 export function log(...msg: any) {
     console.log(...msg);
 }
+
+export function round(number: number) {
+    'worklet';
+    return Math.round(number);
+}