react-native-reanimated-carousel 2.0.0 → 2.2.1

package/src/ScrollViewGesture.tsx

@@ -12,8 +12,9 @@ import Animated, {
     useDerivedValue,
     useSharedValue,
     withDecay,
-    withSpring,
+    withTiming,
 } from 'react-native-reanimated';
+import { Easing } from './constants';
 import { CTX } from './store';
 
 type GestureContext = {
@@ -40,6 +41,7 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
             enableSnap,
             panGestureHandlerProps,
             loop: infinite,
+            scrollAnimationDuration,
         },
     } = React.useContext(CTX);
 
@@ -54,10 +56,11 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
     const _withSpring = React.useCallback(
         (toValue: number, onFinished?: () => void) => {
             'worklet';
-            return withSpring(
+            return withTiming(
                 toValue,
                 {
-                    damping: 100,
+                    duration: scrollAnimationDuration,
+                    easing: Easing.easeOutQuart,
                 },
                 (isFinished) => {
                     if (isFinished) {
@@ -66,7 +69,7 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
                 }
             );
         },
-        []
+        [scrollAnimationDuration]
     );
 
     const endWithSpring = React.useCallback(
@@ -199,7 +202,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;

package/src/constants/index.ts

@@ -1,4 +1,10 @@
+import { Easing as _Easing } from 'react-native-reanimated';
+
 export enum DATA_LENGTH {
     SINGLE_ITEM = 1,
     DOUBLE_ITEM = 2,
 }
+
+export const Easing = {
+    easeOutQuart: _Easing.bezier(0.25, 1, 0.5, 1),
+};

package/src/hooks/useAutoPlay.ts

@@ -15,44 +15,41 @@ 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();
-        }
-
-        if (!autoPlay) {
+    const play = React.useCallback(() => {
+        if (stopped.current) {
             return;
         }
 
-        timer.current = setInterval(() => {
+        timer.current = setTimeout(() => {
             autoPlayReverse
-                ? carouselController.prev()
-                : carouselController.next();
+                ? carouselController.prev({ onFinished: play })
+                : carouselController.next({ onFinished: play });
         }, autoPlayInterval);
-    }, [
-        pause,
-        autoPlay,
-        autoPlayReverse,
-        autoPlayInterval,
-        carouselController,
-    ]);
+    }, [autoPlayReverse, autoPlayInterval, carouselController]);
+
+    const pause = React.useCallback(() => {
+        timer.current && clearInterval(timer.current);
+        stopped.current = true;
+    }, []);
+
+    const start = React.useCallback(() => {
+        stopped.current = false;
+        play();
+    }, [play]);
 
     React.useEffect(() => {
         if (autoPlay) {
-            run();
+            start();
         } else {
             pause();
         }
         return pause;
-    }, [run, pause, autoPlay]);
+    }, [pause, start, autoPlay]);
 
     return {
-        run,
         pause,
+        start,
     };
 }

package/src/hooks/useCarouselController.tsx

@@ -1,17 +1,20 @@
 import React from 'react';
 import type Animated from 'react-native-reanimated';
-import { runOnJS, useSharedValue, withSpring } from 'react-native-reanimated';
+import { Easing } from '../constants';
+import { runOnJS, useSharedValue, withTiming } from 'react-native-reanimated';
+import type { TCarouselActionOptions } from '../types';
 
 interface IOpts {
     loop: boolean;
     size: number;
     handlerOffsetX: Animated.SharedValue<number>;
     disable?: boolean;
+    duration?: number;
+    originalLength: number;
+    length: number;
     onScrollBegin?: () => void;
     onScrollEnd?: () => void;
     // the length before fill data
-    originalLength: number;
-    length: number;
     onChange: (index: number) => void;
 }
 
@@ -20,14 +23,15 @@ 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 function useCarouselController(opts: IOpts): ICarouselController {
+export function useCarouselController(options: IOpts): ICarouselController {
     const {
         size,
         loop,
@@ -36,13 +40,27 @@ export function useCarouselController(opts: IOpts): ICarouselController {
         originalLength,
         length,
         onChange,
-    } = opts;
+        duration,
+    } = options;
 
     const index = useSharedValue<number>(0);
     // The Index displayed to the user
     const sharedIndex = React.useRef<number>(0);
     const sharedPreIndex = React.useRef<number>(0);
 
+    const currentFixedPage = React.useCallback(() => {
+        if (loop) {
+            return -Math.round(handlerOffsetX.value / size);
+        }
+
+        const fixed = (handlerOffsetX.value / size) % length;
+        return Math.round(
+            handlerOffsetX.value <= 0
+                ? Math.abs(fixed)
+                : Math.abs(fixed > 0 ? length - fixed : 0)
+        );
+    }, [handlerOffsetX, length, size, loop]);
+
     const convertToSharedIndex = React.useCallback(
         (i: number) => {
             if (loop) {
@@ -89,65 +107,93 @@ export function useCarouselController(opts: IOpts): ICarouselController {
     }, [disable]);
 
     const onScrollEnd = React.useCallback(() => {
-        opts.onScrollEnd?.();
-    }, [opts]);
+        options.onScrollEnd?.();
+    }, [options]);
 
     const onScrollBegin = React.useCallback(() => {
-        opts.onScrollBegin?.();
-    }, [opts]);
+        options.onScrollBegin?.();
+    }, [options]);
 
-    const scrollWithSpring = React.useCallback(
-        (toValue: number, callback?: () => void) => {
-            return withSpring(
+    const scrollWithTiming = React.useCallback(
+        (toValue: number, onFinished?: () => void) => {
+            return withTiming(
                 toValue,
-                { damping: 100 },
+                { duration, easing: Easing.easeOutQuart },
                 (isFinished: boolean) => {
-                    callback?.();
                     if (isFinished) {
                         runOnJS(onScrollEnd)();
+                        onFinished && runOnJS(onFinished)();
                     }
                 }
             );
         },
-        [onScrollEnd]
+        [onScrollEnd, duration]
     );
 
-    const next = React.useCallback(() => {
-        if (!canSliding() || (!loop && index.value === length - 1)) return;
+    const next = React.useCallback(
+        (opts: TCarouselActionOptions = {}) => {
+            const { count = 1, animated = true, onFinished } = opts;
+            if (!canSliding() || (!loop && index.value >= length - 1)) return;
 
-        onScrollBegin?.();
+            onScrollBegin?.();
 
-        const currentPage = Math.round(handlerOffsetX.value / size);
+            const nextPage = currentFixedPage() + count;
+            index.value = nextPage;
 
-        handlerOffsetX.value = scrollWithSpring((currentPage - 1) * size);
-    }, [
-        canSliding,
-        loop,
-        index.value,
-        length,
-        onScrollBegin,
-        handlerOffsetX,
-        size,
-        scrollWithSpring,
-    ]);
+            if (animated) {
+                handlerOffsetX.value = scrollWithTiming(
+                    -nextPage * size,
+                    onFinished
+                );
+            } else {
+                handlerOffsetX.value = -nextPage * size;
+                onFinished?.();
+            }
+        },
+        [
+            canSliding,
+            loop,
+            index,
+            length,
+            onScrollBegin,
+            handlerOffsetX,
+            size,
+            scrollWithTiming,
+            currentFixedPage,
+        ]
+    );
 
-    const prev = React.useCallback(() => {
-        if (!canSliding() || (!loop && index.value === 0)) return;
+    const prev = React.useCallback(
+        (opts: TCarouselActionOptions = {}) => {
+            const { count = 1, animated = true, onFinished } = opts;
+            if (!canSliding() || (!loop && index.value <= 0)) return;
 
-        onScrollBegin?.();
+            onScrollBegin?.();
 
-        const currentPage = Math.round(handlerOffsetX.value / size);
+            const prevPage = currentFixedPage() - count;
+            index.value = prevPage;
 
-        handlerOffsetX.value = scrollWithSpring((currentPage + 1) * size);
-    }, [
-        canSliding,
-        loop,
-        index.value,
-        onScrollBegin,
-        handlerOffsetX,
-        size,
-        scrollWithSpring,
-    ]);
+            if (animated) {
+                handlerOffsetX.value = scrollWithTiming(
+                    -prevPage * size,
+                    onFinished
+                );
+            } else {
+                handlerOffsetX.value = -prevPage * size;
+                onFinished?.();
+            }
+        },
+        [
+            canSliding,
+            loop,
+            index,
+            onScrollBegin,
+            handlerOffsetX,
+            size,
+            scrollWithTiming,
+            currentFixedPage,
+        ]
+    );
 
     const to = React.useCallback(
         (idx: number, animated: boolean = false) => {
@@ -159,9 +205,8 @@ export function useCarouselController(opts: IOpts): ICarouselController {
             const offset = handlerOffsetX.value + (index.value - idx) * size;
 
             if (animated) {
-                handlerOffsetX.value = scrollWithSpring(offset, () => {
-                    index.value = idx;
-                });
+                index.value = idx;
+                handlerOffsetX.value = scrollWithTiming(offset);
             } else {
                 handlerOffsetX.value = offset;
                 index.value = idx;
@@ -174,15 +219,32 @@ export function useCarouselController(opts: IOpts): ICarouselController {
             onScrollBegin,
             handlerOffsetX,
             size,
-            scrollWithSpring,
+            scrollWithTiming,
             onScrollEnd,
         ]
     );
 
+    const scrollTo = React.useCallback(
+        (opts: TCarouselActionOptions = {}) => {
+            const { count, animated = false, onFinished } = opts;
+            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]
+    );
+
     return {
         next,
         prev,
         to,
+        scrollTo,
         index,
         length,
         sharedIndex,

package/src/hooks/useInitProps.ts

@@ -2,12 +2,20 @@ import React from 'react';
 import { DATA_LENGTH } from '../constants';
 import type { TCarouselProps } from '../types';
 
-export type TInitializeCarouselProps<T> = TCarouselProps<T> & {
-    defaultIndex: Required<TCarouselProps>['defaultIndex'];
-    loop: Required<TCarouselProps>['loop'];
-    width: Required<TCarouselProps>['width'];
-    height: Required<TCarouselProps>['height'];
-};
+type TGetRequiredProps<P extends keyof TCarouselProps> = Record<
+    P,
+    Required<TCarouselProps>[P]
+>;
+
+export type TInitializeCarouselProps<T> = TCarouselProps<T> &
+    TGetRequiredProps<
+        | 'defaultIndex'
+        | 'loop'
+        | 'width'
+        | 'height'
+        | 'scrollAnimationDuration'
+        | 'autoPlayInterval'
+    >;
 
 export function useInitProps<T>(
     props: TCarouselProps<T>
@@ -16,7 +24,8 @@ export function useInitProps<T>(
         defaultIndex = 0,
         data: _data = [],
         loop = true,
-        autoPlayInterval = 1000,
+        autoPlayInterval: _autoPlayInterval = 1000,
+        scrollAnimationDuration = 500,
         style = {},
         panGestureHandlerProps = {},
         pagingEnabled = true,
@@ -27,6 +36,7 @@ export function useInitProps<T>(
 
     const width = Math.round(_width || 0);
     const height = Math.round(_height || 0);
+    const autoPlayInterval = Math.max(_autoPlayInterval, 0);
 
     const data = React.useMemo<T[]>(() => {
         if (!loop) return _data;
@@ -49,13 +59,13 @@ export function useInitProps<T>(
         props.modeConfig.showLength =
             props.modeConfig?.showLength ?? data.length - 1;
     }
-
     return {
         ...props,
         defaultIndex,
         data,
         loop,
         autoPlayInterval,
+        scrollAnimationDuration,
         style,
         panGestureHandlerProps,
         pagingEnabled,

package/src/layouts/BaseLayout.tsx

@@ -4,12 +4,13 @@ import Animated, {
     runOnJS,
     useAnimatedReaction,
     useAnimatedStyle,
+    useDerivedValue,
 } from 'react-native-reanimated';
 import { IOpts, useOffsetX } from '../hooks/useOffsetX';
 import type { IVisibleRanges } from '../hooks/useVisibleRanges';
 import { LazyView } from '../LazyView';
-import type { ILayoutConfig as IStackLayoutConfig } from './stack';
 import { CTX } from '../store';
+import type { ILayoutConfig } from './stack';
 
 export type TAnimationStyle = (
     value: number
@@ -20,28 +21,39 @@ export const BaseLayout: React.FC<{
     handlerOffsetX: Animated.SharedValue<number>;
     visibleRanges: IVisibleRanges;
     animationStyle: TAnimationStyle;
+    children: (ctx: {
+        animationValue: Animated.SharedValue<number>;
+    }) => React.ReactElement;
 }> = (props) => {
     const { handlerOffsetX, index, children, visibleRanges, animationStyle } =
         props;
 
+    const context = React.useContext(CTX);
     const {
-        props: { mode, loop, data, width, height, vertical, modeConfig },
-    } = React.useContext(CTX);
-
-    const [shouldUpdate, setShouldUpdate] = React.useState(false);
-
+        props: {
+            loop,
+            data,
+            width,
+            height,
+            vertical,
+            customConfig,
+            mode,
+            modeConfig,
+        },
+    } = context;
     const size = vertical ? height : width;
-
+    const [shouldUpdate, setShouldUpdate] = React.useState(false);
     let offsetXConfig: IOpts = {
         handlerOffsetX,
         index,
         size,
         data,
         loop,
+        ...(typeof customConfig === 'function' ? customConfig() : {}),
     };
 
     if (mode === 'horizontal-stack') {
-        const { snapDirection, showLength } = modeConfig as IStackLayoutConfig;
+        const { snapDirection, showLength } = modeConfig as ILayoutConfig;
 
         offsetXConfig = {
             handlerOffsetX,
@@ -55,8 +67,8 @@ export const BaseLayout: React.FC<{
     }
 
     const x = useOffsetX(offsetXConfig, visibleRanges);
-
-    const _animatedStyle = useAnimatedStyle(
+    const animationValue = useDerivedValue(() => x.value / size, [x, size]);
+    const animatedStyle = useAnimatedStyle(
         () => animationStyle(x.value / size),
         [animationStyle]
     );
@@ -90,10 +102,12 @@ export const BaseLayout: React.FC<{
                     height: height || '100%',
                     position: 'absolute',
                 },
-                _animatedStyle,
+                animatedStyle,
             ]}
         >
-            <LazyView shouldUpdate={shouldUpdate}>{children}</LazyView>
+            <LazyView shouldUpdate={shouldUpdate}>
+                {children({ animationValue })}
+            </LazyView>
         </Animated.View>
     );
 };

package/src/layouts/normal.ts

@@ -1,16 +1,11 @@
-import { Extrapolate, interpolate } from 'react-native-reanimated';
+import { interpolate } from 'react-native-reanimated';
 
 export function normalLayout(opts: { size: number; vertical: boolean }) {
     const { size, vertical } = opts;
 
     return (value: number) => {
         '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: [

package/src/layouts/parallax.ts

@@ -1,11 +1,12 @@
 import { Extrapolate, interpolate } from 'react-native-reanimated';
+import type { ComputedDirectionTypes } from '../types';
 
 type TBaseConfig = {
     size: number;
     vertical: boolean;
 };
 
-export interface ILayoutConfig {
+interface ILayoutConfig {
     /**
      * When use default Layout props,this prop can be control prev/next item offset.
      * @default 100
@@ -18,6 +19,14 @@ export interface ILayoutConfig {
     parallaxScrollingScale?: number;
 }
 
+export type TParallaxModeProps = ComputedDirectionTypes<{
+    /**
+     * Carousel Animated transitions.
+     */
+    mode?: 'parallax';
+    modeConfig?: ILayoutConfig;
+}>;
+
 export function parallaxLayout(
     baseConfig: TBaseConfig,
     modeConfig: ILayoutConfig = {}

package/src/layouts/stack.ts

@@ -1,5 +1,7 @@
+import { useMemo } from 'react';
 import { Dimensions, TransformsStyle, ViewStyle } from 'react-native';
 import { Extrapolate, interpolate } from 'react-native-reanimated';
+import type { ComputedDirectionTypes, CustomConfig } from 'src/types';
 
 const screen = Dimensions.get('window');
 
@@ -13,6 +15,24 @@ export interface ILayoutConfig {
     snapDirection?: 'left' | 'right';
 }
 
+export type TStackModeProps = ComputedDirectionTypes<{
+    /**
+     * Carousel Animated transitions.
+     */
+    mode?: 'horizontal-stack' | 'vertical-stack';
+    /**
+     * Stack animation style.
+     * @default
+     *     mode: 'vertical',
+     *     snapDirection: 'right',
+     *     moveSize: window.width,
+     *     stackInterval: 30,
+     *     scaleInterval: 0.08,
+     *     rotateZDeg: 135,
+     */
+    modeConfig?: ILayoutConfig;
+}>;
+
 export function horizontalStackLayout(modeConfig: ILayoutConfig = {}) {
     return (_value: number) => {
         'worklet';
@@ -106,6 +126,28 @@ export function horizontalStackLayout(modeConfig: ILayoutConfig = {}) {
     };
 }
 
+export function useHorizontalStackLayout(
+    customAnimationConfig: ILayoutConfig = {},
+    customConfig: CustomConfig = {}
+) {
+    const config = useMemo(
+        () => ({
+            type:
+                customAnimationConfig.snapDirection === 'right'
+                    ? 'negative'
+                    : 'positive',
+            viewCount: customAnimationConfig.showLength,
+            ...customConfig,
+        }),
+        [customAnimationConfig, customConfig]
+    );
+
+    return {
+        layout: horizontalStackLayout(customAnimationConfig),
+        config,
+    };
+}
+
 export function verticalStackLayout(modeConfig: ILayoutConfig = {}) {
     return (_value: number) => {
         'worklet';