react-native-reanimated-carousel 2.1.1 → 2.2.3

package/lib/module/layouts/normal.js

@@ -1,4 +1,4 @@
-import { Extrapolate, interpolate } from 'react-native-reanimated';
+import { interpolate } from 'react-native-reanimated';
 export function normalLayout(opts) {
   const {
     size,
@@ -7,7 +7,7 @@ export function normalLayout(opts) {
   return value => {
     'worklet';
 
-    const translate = interpolate(value, [-1, 0, 1], [-size, 0, size], Extrapolate.CLAMP);
+    const translate = interpolate(value, [-1, 0, 1], [-size, 0, size]);
     return {
       transform: [vertical ? {
         translateY: translate

package/lib/module/layouts/normal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["normal.ts"],"names":["Extrapolate","interpolate","normalLayout","opts","size","vertical","value","translate","CLAMP","transform","translateY","translateX"],"mappings":"AAAA,SAASA,WAAT,EAAsBC,WAAtB,QAAyC,yBAAzC;AAEA,OAAO,SAASC,YAAT,CAAsBC,IAAtB,EAAiE;AACpE,QAAM;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,MAAqBF,IAA3B;AAEA,SAAQG,KAAD,IAAmB;AACtB;;AACA,UAAMC,SAAS,GAAGN,WAAW,CACzBK,KADyB,EAEzB,CAAC,CAAC,CAAF,EAAK,CAAL,EAAQ,CAAR,CAFyB,EAGzB,CAAC,CAACF,IAAF,EAAQ,CAAR,EAAWA,IAAX,CAHyB,EAIzBJ,WAAW,CAACQ,KAJa,CAA7B;AAOA,WAAO;AACHC,MAAAA,SAAS,EAAE,CACPJ,QAAQ,GACF;AACIK,QAAAA,UAAU,EAAEH;AADhB,OADE,GAIF;AACII,QAAAA,UAAU,EAAEJ;AADhB,OALC;AADR,KAAP;AAWH,GApBD;AAqBH","sourcesContent":["import { Extrapolate, interpolate } from 'react-native-reanimated';\n\nexport function normalLayout(opts: { size: number; vertical: boolean }) {\n    const { size, vertical } = opts;\n\n    return (value: number) => {\n        'worklet';\n        const translate = interpolate(\n            value,\n            [-1, 0, 1],\n            [-size, 0, size],\n            Extrapolate.CLAMP\n        );\n\n        return {\n            transform: [\n                vertical\n                    ? {\n                          translateY: translate,\n                      }\n                    : {\n                          translateX: translate,\n                      },\n            ],\n        };\n    };\n}\n"]}
+{"version":3,"sources":["normal.ts"],"names":["interpolate","normalLayout","opts","size","vertical","value","translate","transform","translateY","translateX"],"mappings":"AAAA,SAASA,WAAT,QAA4B,yBAA5B;AAEA,OAAO,SAASC,YAAT,CAAsBC,IAAtB,EAAiE;AACpE,QAAM;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,MAAqBF,IAA3B;AAEA,SAAQG,KAAD,IAAmB;AACtB;;AACA,UAAMC,SAAS,GAAGN,WAAW,CAACK,KAAD,EAAQ,CAAC,CAAC,CAAF,EAAK,CAAL,EAAQ,CAAR,CAAR,EAAoB,CAAC,CAACF,IAAF,EAAQ,CAAR,EAAWA,IAAX,CAApB,CAA7B;AAEA,WAAO;AACHI,MAAAA,SAAS,EAAE,CACPH,QAAQ,GACF;AACII,QAAAA,UAAU,EAAEF;AADhB,OADE,GAIF;AACIG,QAAAA,UAAU,EAAEH;AADhB,OALC;AADR,KAAP;AAWH,GAfD;AAgBH","sourcesContent":["import { interpolate } from 'react-native-reanimated';\n\nexport function normalLayout(opts: { size: number; vertical: boolean }) {\n    const { size, vertical } = opts;\n\n    return (value: number) => {\n        'worklet';\n        const translate = interpolate(value, [-1, 0, 1], [-size, 0, size]);\n\n        return {\n            transform: [\n                vertical\n                    ? {\n                          translateY: translate,\n                      }\n                    : {\n                          translateX: translate,\n                      },\n            ],\n        };\n    };\n}\n"]}

package/lib/typescript/ScrollViewGesture.d.ts

@@ -4,8 +4,10 @@ import Animated from 'react-native-reanimated';
 interface Props {
     size: number;
     infinite?: boolean;
-    onScrollEnd?: () => void;
     onScrollBegin?: () => void;
+    onScrollEnd?: () => void;
+    onTouchBegin?: () => void;
+    onTouchEnd?: () => void;
     style?: StyleProp<ViewStyle>;
     translation: Animated.SharedValue<number>;
 }

package/lib/typescript/hooks/useAutoPlay.d.ts

@@ -5,6 +5,6 @@ export declare function useAutoPlay(opts: {
     autoPlayReverse?: boolean;
     carouselController: ICarouselController;
 }): {
-    run: () => void;
     pause: () => void;
+    start: () => void;
 };

package/lib/typescript/hooks/useCarouselController.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type Animated from 'react-native-reanimated';
+import type { TCarouselActionOptions } from '../types';
 interface IOpts {
     loop: boolean;
     size: number;
@@ -17,11 +18,12 @@ export interface ICarouselController {
     index: Animated.SharedValue<number>;
     sharedIndex: React.MutableRefObject<number>;
     sharedPreIndex: React.MutableRefObject<number>;
-    prev: () => void;
-    next: () => void;
+    prev: (opts?: TCarouselActionOptions) => void;
+    next: (opts?: TCarouselActionOptions) => void;
     computedIndex: () => void;
     getCurrentIndex: () => number;
     to: (index: number, animated?: boolean) => void;
+    scrollTo: (opts?: TCarouselActionOptions) => void;
 }
-export declare function useCarouselController(opts: IOpts): ICarouselController;
+export declare function useCarouselController(options: IOpts): ICarouselController;
 export {};

package/lib/typescript/hooks/useInitProps.d.ts

@@ -1,8 +1,7 @@
 import type { TCarouselProps } from '../types';
-export declare type TInitializeCarouselProps<T> = TCarouselProps<T> & {
-    defaultIndex: Required<TCarouselProps>['defaultIndex'];
-    loop: Required<TCarouselProps>['loop'];
-    width: Required<TCarouselProps>['width'];
-    height: Required<TCarouselProps>['height'];
+declare type TGetRequiredProps<P extends keyof TCarouselProps> = Record<P, Required<TCarouselProps>[P]>;
+export declare type TInitializeCarouselProps<T> = TCarouselProps<T> & TGetRequiredProps<'defaultIndex' | 'loop' | 'width' | 'height' | 'scrollAnimationDuration' | 'autoPlayInterval'> & {
+    rawData: T[];
 };
 export declare function useInitProps<T>(props: TCarouselProps<T>): TInitializeCarouselProps<T>;
+export {};

package/lib/typescript/hooks/useOnProgressChange.d.ts

@@ -3,4 +3,5 @@ import type { TCarouselProps } from '../types';
 export declare function useOnProgressChange(opts: {
     size: number;
     offsetX: Animated.SharedValue<number>;
-} & Pick<TCarouselProps, 'data' | 'onProgressChange'>): void;
+    rawData: TCarouselProps['data'];
+} & Pick<TCarouselProps, 'onProgressChange'>): void;

package/lib/typescript/types.d.ts

@@ -65,6 +65,11 @@ export declare type TCarouselProps<T = any> = {
      * @description playback interval
      */
     autoPlayInterval?: number;
+    /**
+     * Time a scroll animation takes to finish
+     * @default 500 (ms)
+     */
+    scrollAnimationDuration?: number;
     /**
      * Carousel container style
      */
@@ -125,21 +130,29 @@ export declare type TCarouselProps<T = any> = {
 } & (TParallaxModeProps | TStackModeProps);
 export interface ICarouselInstance {
     /**
-     * Play the last one
+     * Scroll to previous item, it takes one optional argument (count),
+     * which allows you to specify how many items to cross
      */
-    prev: () => void;
+    prev: (opts?: TCarouselActionOptions) => void;
     /**
-     * Play the next one
+     * Scroll to next item, it takes one optional argument (count),
+     * which allows you to specify how many items to cross
      */
-    next: () => void;
+    next: (opts?: TCarouselActionOptions) => 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)
+     */
+    scrollTo: (opts?: TCarouselActionOptions) => void;
 }
 export interface CarouselRenderItemInfo<ItemT> {
     item: ItemT;
@@ -147,3 +160,8 @@ export interface CarouselRenderItemInfo<ItemT> {
     animationValue: Animated.SharedValue<number>;
 }
 export declare type CarouselRenderItem<ItemT> = (info: CarouselRenderItemInfo<ItemT>) => React.ReactElement;
+export interface TCarouselActionOptions {
+    count?: number;
+    animated?: boolean;
+    onFinished?: () => void;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-native-reanimated-carousel",
-    "version": "2.1.1",
+    "version": "2.2.3",
     "description": "Simple carousel component.fully implemented using Reanimated 2.Infinitely scrolling, very smooth.",
     "main": "lib/commonjs/index",
     "module": "lib/module/index",
@@ -30,10 +30,13 @@
         "release": "release-it --no-git.requireUpstream",
         "ios": "yarn --cwd example ios",
         "ios:pretty": "yarn --cwd example ios:pretty",
+        "web": "yarn --cwd example web",
+        "web:pretty": "yarn --cwd example web:pretty",
         "android": "yarn --cwd example android",
         "android:pretty": "yarn --cwd example android:pretty",
         "pods": "cd example && pod-install --quiet",
-        "bootstrap": "yarn example && yarn && yarn pods"
+        "bootstrap": "yarn && yarn pods",
+        "deploy": "cd example && yarn deploy"
     },
     "keywords": [
         "react-native",

package/src/Carousel.tsx

@@ -1,10 +1,12 @@
 import React, { PropsWithChildren } 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';
@@ -23,6 +25,7 @@ function Carousel<T>(
 
     const {
         data,
+        rawData,
         loop,
         mode,
         style,
@@ -33,6 +36,7 @@ function Carousel<T>(
         windowSize,
         autoPlayReverse,
         autoPlayInterval,
+        scrollAnimationDuration,
         renderItem,
         onScrollEnd,
         onSnapToItem,
@@ -55,7 +59,7 @@ function Carousel<T>(
     }, [loop, size, data]);
 
     usePropsErrorBoundary(props);
-    useOnProgressChange({ size, offsetX, data, onProgressChange });
+    useOnProgressChange({ size, offsetX, rawData, onProgressChange });
 
     const carouselController = useCarouselController({
         loop,
@@ -66,8 +70,8 @@ function Carousel<T>(
         originalLength: data.length,
         onScrollEnd: () => runOnJS(_onScrollEnd)(),
         onScrollBegin: () => !!onScrollBegin && runOnJS(onScrollBegin)(),
-        onChange: (i) => onSnapToItem && runOnJS(onSnapToItem)(i),
-        duration: autoPlayInterval,
+        onChange: (i) => !!onSnapToItem && runOnJS(onSnapToItem)(i),
+        duration: scrollAnimationDuration,
     });
 
     const {
@@ -79,27 +83,31 @@ function Carousel<T>(
         getCurrentIndex,
     } = carouselController;
 
-    const { run, pause } = useAutoPlay({
+    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 scrollViewGestureOnScrollBegin = React.useCallback(() => {
+        pause();
+        onScrollBegin?.();
+    }, [onScrollBegin, pause]);
+
     const scrollViewGestureOnScrollEnd = React.useCallback(() => {
-        run();
+        start();
         _onScrollEnd();
-    }, [_onScrollEnd, run]);
+    }, [_onScrollEnd, start]);
+
+    const scrollViewGestureOnTouchBegin = React.useCallback(pause, [pause]);
+
+    const scrollViewGestureOnTouchEnd = React.useCallback(start, [start]);
 
     const goToIndex = React.useCallback(
         (i: number, animated?: boolean) => {
@@ -115,8 +123,9 @@ function Carousel<T>(
             prev,
             getCurrentIndex,
             goToIndex,
+            scrollTo: carouselController.scrollTo,
         }),
-        [getCurrentIndex, goToIndex, next, prev]
+        [getCurrentIndex, goToIndex, next, prev, carouselController.scrollTo]
     );
 
     const visibleRanges = useVisibleRanges({
@@ -131,11 +140,11 @@ function Carousel<T>(
     const renderLayout = React.useCallback(
         (item: T, i: number) => {
             let realIndex = i;
-            if (data.length === DATA_LENGTH.SINGLE_ITEM) {
+            if (rawData.length === DATA_LENGTH.SINGLE_ITEM) {
                 realIndex = i % 1;
             }
 
-            if (data.length === DATA_LENGTH.DOUBLE_ITEM) {
+            if (rawData.length === DATA_LENGTH.DOUBLE_ITEM) {
                 realIndex = i % 2;
             }
 
@@ -158,7 +167,7 @@ function Carousel<T>(
             );
         },
         [
-            data,
+            rawData,
             offsetX,
             visibleRanges,
             renderItem,
@@ -181,6 +190,8 @@ function Carousel<T>(
                     translation={handlerOffsetX}
                     onScrollBegin={scrollViewGestureOnScrollBegin}
                     onScrollEnd={scrollViewGestureOnScrollEnd}
+                    onTouchBegin={scrollViewGestureOnTouchBegin}
+                    onTouchEnd={scrollViewGestureOnTouchEnd}
                 >
                     <Animated.View
                         key={mode}

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<
@@ -202,7 +216,11 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
                     !infinite &&
                     (translation.value > 0 || translation.value < -ctx.max)
                 ) {
-                    panTranslation = panTranslation * 0.5;
+                    const boundary = translation.value > 0 ? 0 : -ctx.max;
+                    const fixed = boundary - ctx.panOffset;
+                    const dynamic = panTranslation - fixed;
+                    translation.value = boundary + dynamic * 0.5;
+                    return;
                 }
 
                 translation.value = ctx.panOffset + panTranslation;
@@ -223,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(() => {
@@ -231,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,
     };
 }