react-native-reanimated-carousel 2.1.2 → 2.2.4

package/src/Carousel.tsx

@@ -1,10 +1,12 @@
-import React, { PropsWithChildren } from 'react';
+import React from 'react';
 import Animated, { runOnJS, useDerivedValue } from 'react-native-reanimated';
+
 import { useCarouselController } from './hooks/useCarouselController';
 import { useAutoPlay } from './hooks/useAutoPlay';
 import { usePropsErrorBoundary } from './hooks/usePropsErrorBoundary';
 import { ScrollViewGesture } from './ScrollViewGesture';
 import { useVisibleRanges } from './hooks/useVisibleRanges';
+
 import type { ICarouselInstance, TCarouselProps } from './types';
 import { StyleSheet, View } from 'react-native';
 import { DATA_LENGTH } from './constants';
@@ -15,196 +17,212 @@ 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,
-        loop,
-        mode,
-        style,
-        width,
-        height,
-        vertical,
-        autoPlay,
-        windowSize,
-        autoPlayReverse,
-        autoPlayInterval,
-        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, data, 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: autoPlayInterval,
-    });
-
-    const {
-        next,
-        prev,
-        sharedPreIndex,
-        sharedIndex,
-        computedIndex,
-        getCurrentIndex,
-    } = carouselController;
-
-    const { run, 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(() => {
-        run();
-        _onScrollEnd();
-    }, [_onScrollEnd, run]);
-
-    const goToIndex = React.useCallback(
-        (i: number, animated?: boolean) => {
-            carouselController.to(i, animated);
-        },
-        [carouselController]
-    );
-
-    React.useImperativeHandle(
-        ref,
-        () => ({
-            next,
-            prev,
-            getCurrentIndex,
-            goToIndex,
-        }),
-        [getCurrentIndex, goToIndex, next, prev]
-    );
-
-    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 (data.length === DATA_LENGTH.SINGLE_ITEM) {
-                realIndex = i % 1;
-            }
-
-            if (data.length === DATA_LENGTH.DOUBLE_ITEM) {
-                realIndex = i % 2;
-            }
+const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
+    (_props, ref) => {
+        const props = useInitProps(_props);
 
-            return (
-                <BaseLayout
-                    key={i}
-                    index={i}
-                    handlerOffsetX={offsetX}
-                    visibleRanges={visibleRanges}
-                    animationStyle={customAnimation || layoutConfig}
-                >
-                    {({ animationValue }) =>
-                        renderItem({
-                            item,
-                            index: realIndex,
-                            animationValue,
-                        })
-                    }
-                </BaseLayout>
-            );
-        },
-        [
+        const {
             data,
-            offsetX,
-            visibleRanges,
+            rawData,
+            loop,
+            mode,
+            style,
+            width,
+            height,
+            vertical,
+            autoPlay,
+            windowSize,
+            autoPlayReverse,
+            autoPlayInterval,
+            scrollAnimationDuration,
             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,
+            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

@@ -25,8 +25,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>;
 }
@@ -41,11 +43,18 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
             enableSnap,
             panGestureHandlerProps,
             loop: infinite,
-            autoPlayInterval,
+            scrollAnimationDuration,
         },
     } = 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]);
@@ -59,7 +68,7 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
             return withTiming(
                 toValue,
                 {
-                    duration: autoPlayInterval,
+                    duration: scrollAnimationDuration,
                     easing: Easing.easeOutQuart,
                 },
                 (isFinished) => {
@@ -69,7 +78,7 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
                 }
             );
         },
-        [autoPlayInterval]
+        [scrollAnimationDuration]
     );
 
     const endWithSpring = React.useCallback(
@@ -116,22 +125,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 },
+            onFinish
+        );
+    }, [onFinish, scrollEndVelocity.value, touching, translation]);
 
+    const resetBoundary = React.useCallback(() => {
+        'worklet';
         if (touching.value) {
             return;
         }
@@ -158,15 +173,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 +190,7 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
                 resetBoundary();
             }
         },
-        [pagingEnabled]
+        [pagingEnabled, resetBoundary]
     );
 
     const panGestureEventHandler = useAnimatedGestureHandler<
@@ -227,7 +241,16 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
                 }
             },
         },
-        [pagingEnabled, isHorizontal.value, infinite, maxPage, size, enableSnap]
+        [
+            pagingEnabled,
+            isHorizontal.value,
+            infinite,
+            maxPage,
+            size,
+            enableSnap,
+            onScrollBegin,
+            onScrollEnd,
+        ]
     );
 
     const directionStyle = React.useMemo(() => {
@@ -235,7 +258,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

@@ -15,44 +15,47 @@ export function useAutoPlay(opts: {
     } = opts;
 
     const timer = React.useRef<NodeJS.Timer>();
+    const stopped = React.useRef<boolean>(!autoPlay);
 
-    const pause = React.useCallback(() => {
-        timer.current && clearInterval(timer.current);
-    }, []);
-
-    const run = React.useCallback(() => {
-        if (timer.current) {
-            pause();
+    const play = React.useCallback(() => {
+        if (stopped.current) {
+            return;
         }
 
+        timer.current = setTimeout(() => {
+            autoPlayReverse
+                ? carouselController.prev({ onFinished: play })
+                : carouselController.next({ onFinished: play });
+        }, autoPlayInterval);
+    }, [autoPlayReverse, autoPlayInterval, carouselController]);
+
+    const pause = React.useCallback(() => {
         if (!autoPlay) {
             return;
         }
+        timer.current && clearInterval(timer.current);
+        stopped.current = true;
+    }, [autoPlay]);
 
-        timer.current = setInterval(() => {
-            autoPlayReverse
-                ? carouselController.prev()
-                : carouselController.next();
-        }, autoPlayInterval);
-    }, [
-        pause,
-        autoPlay,
-        autoPlayReverse,
-        autoPlayInterval,
-        carouselController,
-    ]);
+    const start = React.useCallback(() => {
+        if (!autoPlay) {
+            return;
+        }
+        stopped.current = false;
+        play();
+    }, [play, autoPlay]);
 
     React.useEffect(() => {
         if (autoPlay) {
-            run();
+            start();
         } else {
             pause();
         }
         return pause;
-    }, [run, pause, autoPlay]);
+    }, [pause, start, autoPlay]);
 
     return {
-        run,
         pause,
+        start,
     };
 }