react-native-reanimated-carousel 2.2.2 → 2.2.5-beta.1

package/src/Carousel.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react';
+import React from 'react';
 import Animated, { runOnJS, useDerivedValue } from 'react-native-reanimated';
 
 import { useCarouselController } from './hooks/useCarouselController';
@@ -17,199 +17,214 @@ import { CTX } from './store';
 import { useCommonVariables } from './hooks/useCommonVariables';
 import { useOnProgressChange } from './hooks/useOnProgressChange';
 
-function Carousel<T>(
-    _props: PropsWithChildren<TCarouselProps<T>>,
-    ref: React.Ref<ICarouselInstance>
-) {
-    const props = useInitProps(_props);
-
-    const {
-        data,
-        rawData,
-        loop,
-        mode,
-        style,
-        width,
-        height,
-        vertical,
-        autoPlay,
-        windowSize,
-        autoPlayReverse,
-        autoPlayInterval,
-        scrollAnimationDuration,
-        renderItem,
-        onScrollEnd,
-        onSnapToItem,
-        onScrollBegin,
-        onProgressChange,
-        customAnimation,
-    } = props;
-
-    const commonVariables = useCommonVariables(props);
-    const { size, handlerOffsetX } = commonVariables;
-
-    const offsetX = useDerivedValue(() => {
-        const totalSize = size * data.length;
-        const x = handlerOffsetX.value % totalSize;
-
-        if (!loop) {
-            return handlerOffsetX.value;
-        }
-        return isNaN(x) ? 0 : x;
-    }, [loop, size, data]);
-
-    usePropsErrorBoundary(props);
-    useOnProgressChange({ size, offsetX, rawData, onProgressChange });
-
-    const carouselController = useCarouselController({
-        loop,
-        size,
-        handlerOffsetX,
-        length: data.length,
-        disable: !data.length,
-        originalLength: data.length,
-        onScrollEnd: () => runOnJS(_onScrollEnd)(),
-        onScrollBegin: () => !!onScrollBegin && runOnJS(onScrollBegin)(),
-        onChange: (i) => !!onSnapToItem && runOnJS(onSnapToItem)(i),
-        duration: scrollAnimationDuration,
-    });
-
-    const {
-        next,
-        prev,
-        sharedPreIndex,
-        sharedIndex,
-        computedIndex,
-        getCurrentIndex,
-    } = carouselController;
-
-    const { start, pause } = useAutoPlay({
-        autoPlay,
-        autoPlayInterval,
-        autoPlayReverse,
-        carouselController,
-    });
-
-    const scrollViewGestureOnScrollBegin = React.useCallback(() => {
-        pause();
-        onScrollBegin?.();
-    }, [onScrollBegin, pause]);
-
-    const _onScrollEnd = React.useCallback(() => {
-        computedIndex();
-        onScrollEnd?.(sharedPreIndex.current, sharedIndex.current);
-    }, [sharedPreIndex, sharedIndex, computedIndex, onScrollEnd]);
-
-    const scrollViewGestureOnScrollEnd = React.useCallback(() => {
-        start();
-        _onScrollEnd();
-    }, [_onScrollEnd, start]);
-
-    const goToIndex = React.useCallback(
-        (i: number, animated?: boolean) => {
-            carouselController.to(i, animated);
-        },
-        [carouselController]
-    );
-
-    React.useImperativeHandle(
-        ref,
-        () => ({
-            next,
-            prev,
-            getCurrentIndex,
-            goToIndex,
-            scrollTo: carouselController.scrollTo,
-        }),
-        [getCurrentIndex, goToIndex, next, prev, carouselController.scrollTo]
-    );
-
-    const visibleRanges = useVisibleRanges({
-        total: data.length,
-        viewSize: size,
-        translation: handlerOffsetX,
-        windowSize,
-    });
-
-    const layoutConfig = useLayoutConfig<T>({ ...props, size });
-
-    const renderLayout = React.useCallback(
-        (item: T, i: number) => {
-            let realIndex = i;
-            if (rawData.length === DATA_LENGTH.SINGLE_ITEM) {
-                realIndex = i % 1;
-            }
+const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
+    (_props, ref) => {
+        const props = useInitProps(_props);
 
-            if (rawData.length === DATA_LENGTH.DOUBLE_ITEM) {
-                realIndex = i % 2;
-            }
-
-            return (
-                <BaseLayout
-                    key={i}
-                    index={i}
-                    handlerOffsetX={offsetX}
-                    visibleRanges={visibleRanges}
-                    animationStyle={customAnimation || layoutConfig}
-                >
-                    {({ animationValue }) =>
-                        renderItem({
-                            item,
-                            index: realIndex,
-                            animationValue,
-                        })
-                    }
-                </BaseLayout>
-            );
-        },
-        [
+        const {
+            data,
             rawData,
-            offsetX,
-            visibleRanges,
+            loop,
+            mode,
+            style,
+            width,
+            height,
+            vertical,
+            autoPlay,
+            windowSize,
+            autoPlayReverse,
+            autoPlayInterval,
+            scrollAnimationDuration,
+            withAnimation,
             renderItem,
-            layoutConfig,
+            onScrollEnd,
+            onSnapToItem,
+            onScrollBegin,
+            onProgressChange,
             customAnimation,
-        ]
-    );
-
-    return (
-        <CTX.Provider value={{ props, common: commonVariables }}>
-            <View
-                style={[
-                    styles.container,
-                    { width: width || '100%', height: height || '100%' },
-                    style,
-                ]}
-            >
-                <ScrollViewGesture
-                    size={size}
-                    translation={handlerOffsetX}
-                    onScrollBegin={scrollViewGestureOnScrollBegin}
-                    onScrollEnd={scrollViewGestureOnScrollEnd}
+        } = props;
+
+        const commonVariables = useCommonVariables(props);
+        const { size, handlerOffsetX } = commonVariables;
+
+        const offsetX = useDerivedValue(() => {
+            const totalSize = size * data.length;
+            const x = handlerOffsetX.value % totalSize;
+
+            if (!loop) {
+                return handlerOffsetX.value;
+            }
+            return isNaN(x) ? 0 : x;
+        }, [loop, size, data]);
+
+        usePropsErrorBoundary(props);
+        useOnProgressChange({ size, offsetX, rawData, onProgressChange });
+
+        const carouselController = useCarouselController({
+            loop,
+            size,
+            handlerOffsetX,
+            length: data.length,
+            disable: !data.length,
+            withAnimation,
+            originalLength: data.length,
+            onScrollEnd: () => runOnJS(_onScrollEnd)(),
+            onScrollBegin: () => !!onScrollBegin && runOnJS(onScrollBegin)(),
+            onChange: (i) => !!onSnapToItem && runOnJS(onSnapToItem)(i),
+            duration: scrollAnimationDuration,
+        });
+
+        const {
+            next,
+            prev,
+            sharedPreIndex,
+            sharedIndex,
+            computedIndex,
+            getCurrentIndex,
+        } = carouselController;
+
+        const { start, pause } = useAutoPlay({
+            autoPlay,
+            autoPlayInterval,
+            autoPlayReverse,
+            carouselController,
+        });
+
+        const _onScrollEnd = React.useCallback(() => {
+            computedIndex();
+            onScrollEnd?.(sharedPreIndex.current, sharedIndex.current);
+        }, [sharedPreIndex, sharedIndex, computedIndex, onScrollEnd]);
+
+        const scrollViewGestureOnScrollBegin = React.useCallback(() => {
+            pause();
+            onScrollBegin?.();
+        }, [onScrollBegin, pause]);
+
+        const scrollViewGestureOnScrollEnd = React.useCallback(() => {
+            start();
+            _onScrollEnd();
+        }, [_onScrollEnd, start]);
+
+        const scrollViewGestureOnTouchBegin = React.useCallback(pause, [pause]);
+
+        const scrollViewGestureOnTouchEnd = React.useCallback(start, [start]);
+
+        const goToIndex = React.useCallback(
+            (i: number, animated?: boolean) => {
+                carouselController.to(i, animated);
+            },
+            [carouselController]
+        );
+
+        React.useImperativeHandle(
+            ref,
+            () => ({
+                next,
+                prev,
+                getCurrentIndex,
+                goToIndex,
+                scrollTo: carouselController.scrollTo,
+            }),
+            [
+                getCurrentIndex,
+                goToIndex,
+                next,
+                prev,
+                carouselController.scrollTo,
+            ]
+        );
+
+        const visibleRanges = useVisibleRanges({
+            total: data.length,
+            viewSize: size,
+            translation: handlerOffsetX,
+            windowSize,
+        });
+
+        const layoutConfig = useLayoutConfig({ ...props, size });
+
+        const renderLayout = React.useCallback(
+            (item: any, i: number) => {
+                let realIndex = i;
+                if (rawData.length === DATA_LENGTH.SINGLE_ITEM) {
+                    realIndex = i % 1;
+                }
+
+                if (rawData.length === DATA_LENGTH.DOUBLE_ITEM) {
+                    realIndex = i % 2;
+                }
+
+                return (
+                    <BaseLayout
+                        key={i}
+                        index={i}
+                        handlerOffsetX={offsetX}
+                        visibleRanges={visibleRanges}
+                        animationStyle={customAnimation || layoutConfig}
+                    >
+                        {({ animationValue }) =>
+                            renderItem({
+                                item,
+                                index: realIndex,
+                                animationValue,
+                            })
+                        }
+                    </BaseLayout>
+                );
+            },
+            [
+                rawData,
+                offsetX,
+                visibleRanges,
+                renderItem,
+                layoutConfig,
+                customAnimation,
+            ]
+        );
+
+        return (
+            <CTX.Provider value={{ props, common: commonVariables }}>
+                <View
+                    style={[
+                        styles.container,
+                        { width: width || '100%', height: height || '100%' },
+                        style,
+                    ]}
                 >
-                    <Animated.View
-                        key={mode}
-                        style={[
-                            styles.container,
-                            {
-                                width: width || '100%',
-                                height: height || '100%',
-                            },
-                            style,
-                            vertical
-                                ? styles.itemsVertical
-                                : styles.itemsHorizontal,
-                        ]}
+                    <ScrollViewGesture
+                        size={size}
+                        translation={handlerOffsetX}
+                        onScrollBegin={scrollViewGestureOnScrollBegin}
+                        onScrollEnd={scrollViewGestureOnScrollEnd}
+                        onTouchBegin={scrollViewGestureOnTouchBegin}
+                        onTouchEnd={scrollViewGestureOnTouchEnd}
                     >
-                        {data.map(renderLayout)}
-                    </Animated.View>
-                </ScrollViewGesture>
-            </View>
-        </CTX.Provider>
-    );
-}
-
-export default React.forwardRef(Carousel) as typeof Carousel;
+                        <Animated.View
+                            key={mode}
+                            style={[
+                                styles.container,
+                                {
+                                    width: width || '100%',
+                                    height: height || '100%',
+                                },
+                                style,
+                                vertical
+                                    ? styles.itemsVertical
+                                    : styles.itemsHorizontal,
+                            ]}
+                        >
+                            {data.map(renderLayout)}
+                        </Animated.View>
+                    </ScrollViewGesture>
+                </View>
+            </CTX.Provider>
+        );
+    }
+);
+
+export default Carousel as <T extends any>(
+    props: React.PropsWithChildren<TCarouselProps<T>>
+) => React.ReactElement;
 
 const styles = StyleSheet.create({
     container: {

package/src/ScrollViewGesture.tsx

@@ -12,10 +12,11 @@ import Animated, {
     useDerivedValue,
     useSharedValue,
     withDecay,
-    withTiming,
 } from 'react-native-reanimated';
 import { Easing } from './constants';
 import { CTX } from './store';
+import type { WithAnimation } from './types';
+import { dealWithAnimation } from './utils/dealWithAnimation';
 
 type GestureContext = {
     panOffset: number;
@@ -25,8 +26,10 @@ type GestureContext = {
 interface Props {
     size: number;
     infinite?: boolean;
-    onScrollEnd?: () => void;
     onScrollBegin?: () => void;
+    onScrollEnd?: () => void;
+    onTouchBegin?: () => void;
+    onTouchEnd?: () => void;
     style?: StyleProp<ViewStyle>;
     translation: Animated.SharedValue<number>;
 }
@@ -42,10 +45,18 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
             panGestureHandlerProps,
             loop: infinite,
             scrollAnimationDuration,
+            withAnimation,
         },
     } = React.useContext(CTX);
 
-    const { translation, onScrollBegin, onScrollEnd, size } = props;
+    const {
+        translation,
+        size,
+        onScrollBegin,
+        onScrollEnd,
+        onTouchBegin,
+        onTouchEnd,
+    } = props;
 
     const maxPage = data.length;
     const isHorizontal = useDerivedValue(() => !vertical, [vertical]);
@@ -56,20 +67,27 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
     const _withSpring = React.useCallback(
         (toValue: number, onFinished?: () => void) => {
             'worklet';
-            return withTiming(
-                toValue,
-                {
+            const callback = (isFinished: boolean) => {
+                'worklet';
+                if (isFinished) {
+                    onFinished && runOnJS(onFinished)();
+                }
+            };
+
+            const defaultWithAnimation: WithAnimation = {
+                type: 'timing',
+                config: {
                     duration: scrollAnimationDuration,
                     easing: Easing.easeOutQuart,
                 },
-                (isFinished) => {
-                    if (isFinished) {
-                        onFinished?.();
-                    }
-                }
+            };
+
+            return dealWithAnimation(withAnimation ?? defaultWithAnimation)(
+                toValue,
+                callback
             );
         },
-        [scrollAnimationDuration]
+        [scrollAnimationDuration, withAnimation]
     );
 
     const endWithSpring = React.useCallback(
@@ -116,22 +134,28 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
         ]
     );
 
-    const resetBoundary = React.useCallback(() => {
-        'worklet';
-        const onFinish = (isFinished: boolean) => {
+    const onFinish = React.useCallback(
+        (isFinished: boolean) => {
+            'worklet';
             if (isFinished) {
                 touching.value = false;
                 onScrollEnd && runOnJS(onScrollEnd)();
             }
-        };
-        const activeDecay = () => {
-            touching.value = true;
-            translation.value = withDecay(
-                { velocity: scrollEndVelocity.value },
-                onFinish
-            );
-        };
+        },
+        [onScrollEnd, touching]
+    );
+
+    const activeDecay = React.useCallback(() => {
+        'worklet';
+        touching.value = true;
+        translation.value = withDecay(
+            { velocity: scrollEndVelocity.value },
+            (isFinished) => onFinish(isFinished as boolean)
+        );
+    }, [onFinish, scrollEndVelocity.value, touching, translation]);
 
+    const resetBoundary = React.useCallback(() => {
+        'worklet';
         if (touching.value) {
             return;
         }
@@ -158,15 +182,14 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
             }
         }
     }, [
-        infinite,
-        touching,
-        _withSpring,
+        touching.value,
         translation,
-        scrollEndTranslation,
-        scrollEndVelocity,
-        onScrollEnd,
         maxPage,
         size,
+        scrollEndTranslation.value,
+        infinite,
+        activeDecay,
+        _withSpring,
     ]);
 
     useAnimatedReaction(
@@ -176,7 +199,7 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
                 resetBoundary();
             }
         },
-        [pagingEnabled]
+        [pagingEnabled, resetBoundary]
     );
 
     const panGestureEventHandler = useAnimatedGestureHandler<
@@ -220,14 +243,24 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
                     ? translationX
                     : translationY;
 
-                endWithSpring(() => onScrollEnd && runOnJS(onScrollEnd)());
+                // endWithSpring(() => onScrollEnd && runOnJS(onScrollEnd)());
+                endWithSpring(onScrollEnd);
 
                 if (!infinite) {
                     touching.value = false;
                 }
             },
         },
-        [pagingEnabled, isHorizontal.value, infinite, maxPage, size, enableSnap]
+        [
+            pagingEnabled,
+            isHorizontal.value,
+            infinite,
+            maxPage,
+            size,
+            enableSnap,
+            onScrollBegin,
+            onScrollEnd,
+        ]
     );
 
     const directionStyle = React.useMemo(() => {
@@ -235,7 +268,11 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
     }, [vertical]);
 
     return (
-        <Animated.View style={[styles.container, directionStyle, style]}>
+        <Animated.View
+            style={[styles.container, directionStyle, style]}
+            onTouchStart={onTouchBegin}
+            onTouchEnd={onTouchEnd}
+        >
             <PanGestureHandler
                 {...panGestureHandlerProps}
                 onGestureEvent={panGestureEventHandler}

package/src/hooks/useAutoPlay.ts

@@ -30,9 +30,12 @@ export function useAutoPlay(opts: {
     }, [autoPlayReverse, autoPlayInterval, carouselController]);
 
     const pause = React.useCallback(() => {
+        if (!autoPlay) {
+            return;
+        }
         timer.current && clearInterval(timer.current);
         stopped.current = true;
-    }, []);
+    }, [autoPlay]);
 
     const start = React.useCallback(() => {
         if (!autoPlay) {

package/src/hooks/useCarouselController.tsx

@@ -1,13 +1,19 @@
 import React from 'react';
 import type Animated from 'react-native-reanimated';
 import { Easing } from '../constants';
-import { runOnJS, useSharedValue, withTiming } from 'react-native-reanimated';
-import type { TCarouselActionOptions } from '../types';
+import { runOnJS, useSharedValue } from 'react-native-reanimated';
+import type {
+    TCarouselActionOptions,
+    TCarouselProps,
+    WithAnimation,
+} from '../types';
+import { dealWithAnimation } from '@/utils/dealWithAnimation';
 
 interface IOpts {
     loop: boolean;
     size: number;
     handlerOffsetX: Animated.SharedValue<number>;
+    withAnimation?: TCarouselProps['withAnimation'];
     disable?: boolean;
     duration?: number;
     originalLength: number;
@@ -36,6 +42,7 @@ export function useCarouselController(options: IOpts): ICarouselController {
         size,
         loop,
         handlerOffsetX,
+        withAnimation,
         disable = false,
         originalLength,
         length,
@@ -116,22 +123,31 @@ export function useCarouselController(options: IOpts): ICarouselController {
 
     const scrollWithTiming = React.useCallback(
         (toValue: number, onFinished?: () => void) => {
-            return withTiming(
-                toValue,
-                { duration, easing: Easing.easeOutQuart },
-                (isFinished: boolean) => {
-                    if (isFinished) {
-                        runOnJS(onScrollEnd)();
-                        onFinished && runOnJS(onFinished)();
-                    }
+            'worklet';
+            const callback = (isFinished: boolean) => {
+                'worklet';
+                if (isFinished) {
+                    runOnJS(onScrollEnd)();
+                    onFinished && runOnJS(onFinished)();
                 }
+            };
+
+            const defaultWithAnimation: WithAnimation = {
+                type: 'timing',
+                config: { duration, easing: Easing.easeOutQuart },
+            };
+
+            return dealWithAnimation(withAnimation ?? defaultWithAnimation)(
+                toValue,
+                callback
             );
         },
-        [onScrollEnd, duration]
+        [duration, withAnimation, onScrollEnd]
     );
 
     const next = React.useCallback(
         (opts: TCarouselActionOptions = {}) => {
+            'worklet';
             const { count = 1, animated = true, onFinished } = opts;
             if (!canSliding() || (!loop && index.value >= length - 1)) return;
 
@@ -144,7 +160,7 @@ export function useCarouselController(options: IOpts): ICarouselController {
                 handlerOffsetX.value = scrollWithTiming(
                     -nextPage * size,
                     onFinished
-                );
+                ) as any;
             } else {
                 handlerOffsetX.value = -nextPage * size;
                 onFinished?.();