react-native-reanimated-carousel 1.0.4 → 1.0.8

package/README.md

@@ -28,7 +28,7 @@ Updates：
 
 ## Reason
 
-🎉 **Simple、Infinitely scrolling very smooth、Fully implemented using Reanimated 2!**
+🎉 **It completely solves [this problem](https://github.com/meliorence/react-native-snap-carousel/issues/632) for `react-native-snap-carousel`! Simple、Infinitely scrolling very smooth、Fully implemented using Reanimated 2!**
 
 > The common RN infinite scroll component. It's common to get stuck on a fast slide. Wait for the next element to appear. This component will not have similar problems. That's why this library was created.
 

package/README.zh-CN.md

@@ -28,7 +28,7 @@
 
 ## 原因
 
-🎉 **易用、无限滚动、完全使用 Reanimated2 实现**
+🎉 **完全解决了`react-native-snap-carousel`的[这个问题](https://github.com/meliorence/react-native-snap-carousel/issues/632)! 易用、无限滚动、完全使用 Reanimated2 实现**
 
 > 常见的无限滚动轮播图，在快速滑动时会出现卡住的情况，这是因为实现方式而导致的问题。这个组件用了不同的方式来实现，解决了这个问题，这就是创建这个库的原因。
 

package/lib/commonjs/Carousel.js

@@ -17,8 +17,6 @@ var _index = require("./layouts/index");
 
 var _useCarouselController = require("./hooks/useCarouselController");
 
-var _useComputedAnim = require("./hooks/useComputedAnim");
-
 var _useAutoPlay = require("./hooks/useAutoPlay");
 
 var _useIndexController = require("./hooks/useIndexController");
@@ -77,7 +75,8 @@ function Carousel(props, ref) {
     ...props.springConfig
   };
   const width = Math.round(props.width);
-  const handlerOffsetX = (0, _reactNativeReanimated.useSharedValue)(defaultIndex * width);
+  const defaultHandlerOffsetX = -Math.abs(defaultIndex * width);
+  const handlerOffsetX = (0, _reactNativeReanimated.useSharedValue)(defaultHandlerOffsetX);
 
   const data = _react.default.useMemo(() => {
     if (!loop) return _data;
@@ -93,7 +92,6 @@ function Carousel(props, ref) {
     return _data;
   }, [_data, loop]);
 
-  const computedAnimResult = (0, _useComputedAnim.useComputedAnim)(width, data.length);
   const indexController = (0, _useIndexController.useIndexController)({
     originalLength: _data.length,
     length: data.length,
@@ -143,9 +141,15 @@ function Carousel(props, ref) {
   }, [sharedPreIndex, sharedIndex, computedIndex, props, run]);
 
   const offsetX = (0, _reactNativeReanimated.useDerivedValue)(() => {
-    const x = handlerOffsetX.value % computedAnimResult.TOTAL_WIDTH;
+    const totalWidth = width * data.length;
+    const x = handlerOffsetX.value % totalWidth;
+
+    if (!loop) {
+      return handlerOffsetX.value;
+    }
+
     return isNaN(x) ? 0 : x;
-  }, [computedAnimResult]);
+  }, [loop, width, data]);
   (0, _reactNativeReanimated.useAnimatedReaction)(() => offsetX.value, value => {
     let absoluteProgress = Math.abs(value / width);
 
@@ -205,7 +209,11 @@ function Carousel(props, ref) {
 
       const page = Math.round(handlerOffsetX.value / width);
       const velocityPage = Math.round((handlerOffsetX.value + e.velocityX) / width);
-      const pageWithVelocity = Math.min(page + 1, Math.max(page - 1, velocityPage));
+      let pageWithVelocity = Math.min(page + 1, Math.max(page - 1, velocityPage));
+
+      if (!loop) {
+        pageWithVelocity = Math.max(-(data.length - 1), Math.min(0, pageWithVelocity));
+      }
 
       if (loop) {
         handlerOffsetX.value = _withAnimationCallback(pageWithVelocity * width);
@@ -233,41 +241,35 @@ function Carousel(props, ref) {
     goToIndex
   }), [getCurrentIndex, goToIndex, next, prev]);
 
-  const Layouts = _react.default.useMemo(() => {
+  const renderLayout = _react.default.useCallback((item, i) => {
     switch (mode) {
       case 'parallax':
-        return ({
-          index: i,
-          children
-        }) => /*#__PURE__*/_react.default.createElement(_index.ParallaxLayout, {
+        return /*#__PURE__*/_react.default.createElement(_index.ParallaxLayout, {
           parallaxScrollingOffset: parallaxScrollingOffset,
           parallaxScrollingScale: parallaxScrollingScale,
-          computedAnimResult: computedAnimResult,
+          data: data,
           width: width,
           handlerOffsetX: offsetX,
           index: i,
           key: i,
           loop: loop
-        }, children);
+        }, renderItem(item, i));
 
       default:
-        return ({
-          index: i,
-          children
-        }) => /*#__PURE__*/_react.default.createElement(_CarouselItem.CarouselItem, {
-          computedAnimResult: computedAnimResult,
+        return /*#__PURE__*/_react.default.createElement(_CarouselItem.CarouselItem, {
+          data: data,
           width: width,
           height: height,
           handlerOffsetX: offsetX,
           index: i,
           key: i,
           loop: loop
-        }, children);
+        }, renderItem(item, i));
     }
-  }, [loop, mode, computedAnimResult, height, offsetX, parallaxScrollingOffset, parallaxScrollingScale, width]);
+  }, [loop, mode, data, height, offsetX, parallaxScrollingOffset, parallaxScrollingScale, width, renderItem]);
 
   return /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.PanGestureHandler, _extends({}, panGestureHandlerProps, {
-    onHandlerStateChange: animatedListScrollHandler
+    onGestureEvent: animatedListScrollHandler
   }), /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
     // eslint-disable-next-line react-native/no-inline-styles
     style: { ...style,
@@ -276,12 +278,7 @@ function Carousel(props, ref) {
       flexDirection: 'row',
       position: 'relative'
     }
-  }, data.map((item, i) => {
-    return /*#__PURE__*/_react.default.createElement(Layouts, {
-      index: i,
-      key: i
-    }, renderItem(item, i));
-  })));
+  }, data.map(renderLayout)));
 }
 
 var _default = /*#__PURE__*/_react.default.forwardRef(Carousel);

package/lib/commonjs/Carousel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Carousel.tsx"],"names":["defaultSpringConfig","damping","Carousel","props","ref","defaultIndex","height","data","_data","loop","mode","autoPlay","autoPlayReverse","autoPlayInterval","parallaxScrollingOffset","parallaxScrollingScale","style","panGestureHandlerProps","renderItem","onSnapToItem","onProgressChange","timingConfig","springConfig","width","Math","round","handlerOffsetX","React","useMemo","length","computedAnimResult","indexController","originalLength","onChange","i","carouselController","disable","onScrollBegin","onScrollEnd","run","pause","index","sharedPreIndex","sharedIndex","computedIndex","useCallback","current","offsetX","x","value","TOTAL_WIDTH","isNaN","absoluteProgress","abs","next","prev","getCurrentIndex","goToIndex","animated","to","animatedListScrollHandler","onStart","_","ctx","currentContentOffsetX","start","onActive","e","translationX","onEnd","_withAnimationCallback","num","Object","assign","velocity","velocityX","isFinished","page","velocityPage","pageWithVelocity","min","max","useImperativeHandle","Layouts","children","flexDirection","position","map","item","forwardRef"],"mappings":"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","sourcesContent":["import React from 'react';\nimport type { FlexStyle, ViewStyle } from 'react-native';\nimport {\n    PanGestureHandler,\n    PanGestureHandlerProps,\n    PanGestureHandlerGestureEvent,\n} from 'react-native-gesture-handler';\nimport Animated, {\n    cancelAnimation,\n    runOnJS,\n    useAnimatedGestureHandler,\n    useAnimatedReaction,\n    useDerivedValue,\n    useSharedValue,\n    withSpring,\n} from 'react-native-reanimated';\nimport { CarouselItem } from './CarouselItem';\nimport type { TMode } from './layouts';\nimport { ParallaxLayout } from './layouts/index';\nimport { useCarouselController } from './hooks/useCarouselController';\nimport { useComputedAnim } from './hooks/useComputedAnim';\nimport { useAutoPlay } from './hooks/useAutoPlay';\nimport { useIndexController } from './hooks/useIndexController';\nimport { usePropsErrorBoundary } from './hooks/usePropsErrorBoundary';\n\nconst defaultSpringConfig: Animated.WithSpringConfig = {\n    damping: 100,\n};\nexport interface ICarouselProps<T extends unknown> {\n    ref?: React.Ref<ICarouselInstance>;\n    /**\n     * Carousel loop playback.\n     * @default true\n     */\n    loop?: boolean;\n    /**\n     * Carousel Animated transitions.\n     * @default 'default'\n     */\n    mode?: TMode;\n    /**\n     * Specified carousel container width.\n     */\n    width: number;\n    /**\n     * Specified carousel container height.\n     * @default '100%'\n     */\n    height?: FlexStyle['height'];\n    /**\n     * Carousel items data set.\n     */\n    data: T[];\n    /**\n     * Default index\n     * @default 0\n     */\n    defaultIndex?: number;\n    /**\n     * Auto play\n     */\n    autoPlay?: boolean;\n    /**\n     * Auto play\n     * @description reverse playback\n     */\n    autoPlayReverse?: boolean;\n    /**\n     * Auto play\n     * @description playback interval\n     */\n    autoPlayInterval?: number;\n    /**\n     * Carousel container style\n     */\n    style?: ViewStyle;\n    /**\n     * When use 'default' Layout props,this prop can be control prev/next item offset.\n     * @default 100\n     */\n    parallaxScrollingOffset?: number;\n    /**\n     * When use 'default' Layout props,this prop can be control prev/next item offset.\n     * @default 0.8\n     */\n    parallaxScrollingScale?: number;\n    /**\n     * Sping config of translation animated\n     */\n    springConfig?: Animated.WithSpringConfig;\n    /**\n     * PanGestureHandler props\n     */\n    panGestureHandlerProps?: Omit<\n        Partial<PanGestureHandlerProps>,\n        'onHandlerStateChange'\n    >;\n    /**\n     * Render carousel item.\n     */\n    renderItem: (data: T, index: number) => React.ReactNode;\n    /**\n     * Callback fired when navigating to an item\n     */\n    onSnapToItem?: (index: number) => void;\n    /**\n     * On scroll begin\n     */\n    onScrollBegin?: () => void;\n    /**\n     * On scroll end\n     */\n    onScrollEnd?: (previous: number, current: number) => void;\n    /**\n     * On progress change\n     * @param offsetProgress Total of offset distance (0 390 780 ...)\n     * @param absoluteProgress Convert to index (0 1 2 ...)\n     */\n    onProgressChange?: (\n        offsetProgress: number,\n        absoluteProgress: number\n    ) => void;\n}\n\nexport interface ICarouselInstance {\n    /**\n     * Play the last one\n     */\n    prev: () => void;\n    /**\n     * Play the next one\n     */\n    next: () => void;\n    /**\n     * Get current item index\n     */\n    getCurrentIndex: () => number;\n    /**\n     * Go to index\n     */\n    goToIndex: (index: number, animated?: boolean) => void;\n}\n\nfunction Carousel<T extends unknown = any>(\n    props: ICarouselProps<T>,\n    ref: React.Ref<ICarouselInstance>\n) {\n    const {\n        defaultIndex = 0,\n        height = '100%',\n        data: _data = [],\n        loop = true,\n        mode = 'default',\n        autoPlay,\n        autoPlayReverse,\n        autoPlayInterval = 1000,\n        parallaxScrollingOffset,\n        parallaxScrollingScale,\n        style,\n        panGestureHandlerProps = {},\n        renderItem,\n        onSnapToItem,\n        onProgressChange,\n    } = props;\n\n    usePropsErrorBoundary({\n        ...props,\n        defaultIndex,\n        height,\n        data: _data,\n        loop,\n        mode,\n        autoPlay,\n        autoPlayReverse,\n        autoPlayInterval,\n        parallaxScrollingOffset,\n        parallaxScrollingScale,\n        style,\n        panGestureHandlerProps,\n        // @ts-ignore\n        renderItem,\n        onSnapToItem,\n        onProgressChange,\n    });\n\n    const timingConfig = {\n        ...defaultSpringConfig,\n        ...props.springConfig,\n    };\n    const width = Math.round(props.width);\n    const handlerOffsetX = useSharedValue<number>(defaultIndex * width);\n    const data = React.useMemo<T[]>(() => {\n        if (!loop) return _data;\n\n        if (_data.length === 1) {\n            return [_data[0], _data[0], _data[0]];\n        }\n\n        if (_data.length === 2) {\n            return [_data[0], _data[1], _data[0], _data[1]];\n        }\n\n        return _data;\n    }, [_data, loop]);\n\n    const computedAnimResult = useComputedAnim(width, data.length);\n\n    const indexController = useIndexController({\n        originalLength: _data.length,\n        length: data.length,\n        handlerOffsetX,\n        width,\n        loop,\n        onChange: (i) => onSnapToItem && runOnJS(onSnapToItem)(i),\n    });\n\n    const carouselController = useCarouselController({\n        loop,\n        width,\n        handlerOffsetX,\n        indexController,\n        disable: !data.length,\n        onScrollBegin: () => runOnJS(onScrollBegin)(),\n        onScrollEnd: () => runOnJS(onScrollEnd)(),\n    });\n\n    const { run, pause } = useAutoPlay({\n        autoPlay,\n        autoPlayInterval,\n        autoPlayReverse,\n        carouselController,\n    });\n\n    const { index, sharedPreIndex, sharedIndex, computedIndex } =\n        indexController;\n\n    const onScrollBegin = React.useCallback(() => {\n        pause();\n        props.onScrollBegin?.();\n    }, [pause, props]);\n\n    const onScrollEnd = React.useCallback(() => {\n        run();\n        computedIndex();\n        props.onScrollEnd?.(sharedPreIndex.current, sharedIndex.current);\n    }, [sharedPreIndex, sharedIndex, computedIndex, props, run]);\n\n    const offsetX = useDerivedValue(() => {\n        const x = handlerOffsetX.value % computedAnimResult.TOTAL_WIDTH;\n        return isNaN(x) ? 0 : x;\n    }, [computedAnimResult]);\n\n    useAnimatedReaction(\n        () => offsetX.value,\n        (value) => {\n            let absoluteProgress = Math.abs(value / width);\n            if (value > 0) {\n                absoluteProgress = data.length - absoluteProgress;\n            }\n            !!onProgressChange &&\n                runOnJS(onProgressChange)(value, absoluteProgress);\n        },\n        [onProgressChange, data]\n    );\n\n    const next = React.useCallback(() => {\n        return carouselController.next();\n    }, [carouselController]);\n\n    const prev = React.useCallback(() => {\n        return carouselController.prev();\n    }, [carouselController]);\n\n    const getCurrentIndex = React.useCallback(() => {\n        return index.value;\n    }, [index]);\n\n    const goToIndex = React.useCallback(\n        (i: number, animated?: boolean) => {\n            carouselController.to(i, animated);\n        },\n        [carouselController]\n    );\n\n    const animatedListScrollHandler =\n        useAnimatedGestureHandler<PanGestureHandlerGestureEvent>(\n            {\n                onStart: (_, ctx: any) => {\n                    runOnJS(pause)();\n                    runOnJS(onScrollBegin)();\n                    cancelAnimation(handlerOffsetX);\n                    ctx.currentContentOffsetX = handlerOffsetX.value;\n                    ctx.start = true;\n                },\n                onActive: (e, ctx: any) => {\n                    const { translationX } = e;\n                    if (\n                        !loop &&\n                        (handlerOffsetX.value >= 0 ||\n                            handlerOffsetX.value <= -(data.length - 1) * width)\n                    ) {\n                        handlerOffsetX.value =\n                            ctx.currentContentOffsetX + translationX / 2;\n                        return;\n                    }\n                    handlerOffsetX.value =\n                        ctx.currentContentOffsetX + translationX;\n                },\n                onEnd: (e) => {\n                    function _withAnimationCallback(num: number) {\n                        return withSpring(\n                            num,\n                            Object.assign({}, timingConfig, {\n                                velocity: e.velocityX,\n                            }),\n                            (isFinished) => {\n                                if (isFinished) {\n                                    runOnJS(onScrollEnd)();\n                                }\n                            }\n                        );\n                    }\n\n                    const page = Math.round(handlerOffsetX.value / width);\n                    const velocityPage = Math.round(\n                        (handlerOffsetX.value + e.velocityX) / width\n                    );\n                    const pageWithVelocity = Math.min(\n                        page + 1,\n                        Math.max(page - 1, velocityPage)\n                    );\n\n                    if (loop) {\n                        handlerOffsetX.value = _withAnimationCallback(\n                            pageWithVelocity * width\n                        );\n                        return;\n                    }\n                    if (handlerOffsetX.value >= 0) {\n                        handlerOffsetX.value = _withAnimationCallback(0);\n                        return;\n                    }\n\n                    if (handlerOffsetX.value <= -(data.length - 1) * width) {\n                        handlerOffsetX.value = _withAnimationCallback(\n                            -(data.length - 1) * width\n                        );\n                        return;\n                    }\n\n                    handlerOffsetX.value = _withAnimationCallback(\n                        pageWithVelocity * width\n                    );\n                },\n            },\n            [loop, data, onScrollBegin, onScrollEnd]\n        );\n\n    React.useImperativeHandle(\n        ref,\n        () => ({\n            next,\n            prev,\n            getCurrentIndex,\n            goToIndex,\n        }),\n        [getCurrentIndex, goToIndex, next, prev]\n    );\n\n    const Layouts = React.useMemo<React.FC<{ index: number }>>(() => {\n        switch (mode) {\n            case 'parallax':\n                return ({ index: i, children }) => (\n                    <ParallaxLayout\n                        parallaxScrollingOffset={parallaxScrollingOffset}\n                        parallaxScrollingScale={parallaxScrollingScale}\n                        computedAnimResult={computedAnimResult}\n                        width={width}\n                        handlerOffsetX={offsetX}\n                        index={i}\n                        key={i}\n                        loop={loop}\n                    >\n                        {children}\n                    </ParallaxLayout>\n                );\n            default:\n                return ({ index: i, children }) => (\n                    <CarouselItem\n                        computedAnimResult={computedAnimResult}\n                        width={width}\n                        height={height}\n                        handlerOffsetX={offsetX}\n                        index={i}\n                        key={i}\n                        loop={loop}\n                    >\n                        {children}\n                    </CarouselItem>\n                );\n        }\n    }, [\n        loop,\n        mode,\n        computedAnimResult,\n        height,\n        offsetX,\n        parallaxScrollingOffset,\n        parallaxScrollingScale,\n        width,\n    ]);\n\n    return (\n        <PanGestureHandler\n            {...panGestureHandlerProps}\n            onHandlerStateChange={animatedListScrollHandler}\n        >\n            <Animated.View\n                // eslint-disable-next-line react-native/no-inline-styles\n                style={{\n                    ...style,\n                    width,\n                    height,\n                    flexDirection: 'row',\n                    position: 'relative',\n                }}\n            >\n                {data.map((item, i) => {\n                    return (\n                        <Layouts index={i} key={i}>\n                            {renderItem(item, i)}\n                        </Layouts>\n                    );\n                })}\n            </Animated.View>\n        </PanGestureHandler>\n    );\n}\n\nexport default React.forwardRef(Carousel) as typeof Carousel;\n"]}
+{"version":3,"sources":["Carousel.tsx"],"names":["defaultSpringConfig","damping","Carousel","props","ref","defaultIndex","height","data","_data","loop","mode","autoPlay","autoPlayReverse","autoPlayInterval","parallaxScrollingOffset","parallaxScrollingScale","style","panGestureHandlerProps","renderItem","onSnapToItem","onProgressChange","timingConfig","springConfig","width","Math","round","defaultHandlerOffsetX","abs","handlerOffsetX","React","useMemo","length","indexController","originalLength","onChange","i","carouselController","disable","onScrollBegin","onScrollEnd","run","pause","index","sharedPreIndex","sharedIndex","computedIndex","useCallback","current","offsetX","totalWidth","x","value","isNaN","absoluteProgress","next","prev","getCurrentIndex","goToIndex","animated","to","animatedListScrollHandler","onStart","_","ctx","currentContentOffsetX","start","onActive","e","translationX","onEnd","_withAnimationCallback","num","Object","assign","velocity","velocityX","isFinished","page","velocityPage","pageWithVelocity","min","max","useImperativeHandle","renderLayout","item","flexDirection","position","map","forwardRef"],"mappings":"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","sourcesContent":["import React from 'react';\nimport type { FlexStyle, ViewStyle } from 'react-native';\nimport {\n    PanGestureHandler,\n    PanGestureHandlerProps,\n    PanGestureHandlerGestureEvent,\n} from 'react-native-gesture-handler';\nimport Animated, {\n    cancelAnimation,\n    runOnJS,\n    useAnimatedGestureHandler,\n    useAnimatedReaction,\n    useDerivedValue,\n    useSharedValue,\n    withSpring,\n} from 'react-native-reanimated';\nimport { CarouselItem } from './CarouselItem';\nimport type { TMode } from './layouts';\nimport { ParallaxLayout } from './layouts/index';\nimport { useCarouselController } from './hooks/useCarouselController';\nimport { useAutoPlay } from './hooks/useAutoPlay';\nimport { useIndexController } from './hooks/useIndexController';\nimport { usePropsErrorBoundary } from './hooks/usePropsErrorBoundary';\n\nconst defaultSpringConfig: Animated.WithSpringConfig = {\n    damping: 100,\n};\nexport interface ICarouselProps<T extends unknown> {\n    ref?: React.Ref<ICarouselInstance>;\n    /**\n     * Carousel loop playback.\n     * @default true\n     */\n    loop?: boolean;\n    /**\n     * Carousel Animated transitions.\n     * @default 'default'\n     */\n    mode?: TMode;\n    /**\n     * Specified carousel container width.\n     */\n    width: number;\n    /**\n     * Specified carousel container height.\n     * @default '100%'\n     */\n    height?: FlexStyle['height'];\n    /**\n     * Carousel items data set.\n     */\n    data: T[];\n    /**\n     * Default index\n     * @default 0\n     */\n    defaultIndex?: number;\n    /**\n     * Auto play\n     */\n    autoPlay?: boolean;\n    /**\n     * Auto play\n     * @description reverse playback\n     */\n    autoPlayReverse?: boolean;\n    /**\n     * Auto play\n     * @description playback interval\n     */\n    autoPlayInterval?: number;\n    /**\n     * Carousel container style\n     */\n    style?: ViewStyle;\n    /**\n     * When use 'default' Layout props,this prop can be control prev/next item offset.\n     * @default 100\n     */\n    parallaxScrollingOffset?: number;\n    /**\n     * When use 'default' Layout props,this prop can be control prev/next item offset.\n     * @default 0.8\n     */\n    parallaxScrollingScale?: number;\n    /**\n     * Sping config of translation animated\n     */\n    springConfig?: Animated.WithSpringConfig;\n    /**\n     * PanGestureHandler props\n     */\n    panGestureHandlerProps?: Omit<\n        Partial<PanGestureHandlerProps>,\n        'onHandlerStateChange'\n    >;\n    /**\n     * Render carousel item.\n     */\n    renderItem: (data: T, index: number) => React.ReactNode;\n    /**\n     * Callback fired when navigating to an item\n     */\n    onSnapToItem?: (index: number) => void;\n    /**\n     * On scroll begin\n     */\n    onScrollBegin?: () => void;\n    /**\n     * On scroll end\n     */\n    onScrollEnd?: (previous: number, current: number) => void;\n    /**\n     * On progress change\n     * @param offsetProgress Total of offset distance (0 390 780 ...)\n     * @param absoluteProgress Convert to index (0 1 2 ...)\n     */\n    onProgressChange?: (\n        offsetProgress: number,\n        absoluteProgress: number\n    ) => void;\n}\n\nexport interface ICarouselInstance {\n    /**\n     * Play the last one\n     */\n    prev: () => void;\n    /**\n     * Play the next one\n     */\n    next: () => void;\n    /**\n     * Get current item index\n     */\n    getCurrentIndex: () => number;\n    /**\n     * Go to index\n     */\n    goToIndex: (index: number, animated?: boolean) => void;\n}\n\nfunction Carousel<T extends unknown = any>(\n    props: ICarouselProps<T>,\n    ref: React.Ref<ICarouselInstance>\n) {\n    const {\n        defaultIndex = 0,\n        height = '100%',\n        data: _data = [],\n        loop = true,\n        mode = 'default',\n        autoPlay,\n        autoPlayReverse,\n        autoPlayInterval = 1000,\n        parallaxScrollingOffset,\n        parallaxScrollingScale,\n        style,\n        panGestureHandlerProps = {},\n        renderItem,\n        onSnapToItem,\n        onProgressChange,\n    } = props;\n\n    usePropsErrorBoundary({\n        ...props,\n        defaultIndex,\n        height,\n        data: _data,\n        loop,\n        mode,\n        autoPlay,\n        autoPlayReverse,\n        autoPlayInterval,\n        parallaxScrollingOffset,\n        parallaxScrollingScale,\n        style,\n        panGestureHandlerProps,\n        // @ts-ignore\n        renderItem,\n        onSnapToItem,\n        onProgressChange,\n    });\n\n    const timingConfig = {\n        ...defaultSpringConfig,\n        ...props.springConfig,\n    };\n    const width = Math.round(props.width);\n    const defaultHandlerOffsetX = -Math.abs(defaultIndex * width);\n    const handlerOffsetX = useSharedValue<number>(defaultHandlerOffsetX);\n    const data = React.useMemo<T[]>(() => {\n        if (!loop) return _data;\n\n        if (_data.length === 1) {\n            return [_data[0], _data[0], _data[0]];\n        }\n\n        if (_data.length === 2) {\n            return [_data[0], _data[1], _data[0], _data[1]];\n        }\n\n        return _data;\n    }, [_data, loop]);\n\n    const indexController = useIndexController({\n        originalLength: _data.length,\n        length: data.length,\n        handlerOffsetX,\n        width,\n        loop,\n        onChange: (i) => onSnapToItem && runOnJS(onSnapToItem)(i),\n    });\n\n    const carouselController = useCarouselController({\n        loop,\n        width,\n        handlerOffsetX,\n        indexController,\n        disable: !data.length,\n        onScrollBegin: () => runOnJS(onScrollBegin)(),\n        onScrollEnd: () => runOnJS(onScrollEnd)(),\n    });\n\n    const { run, pause } = useAutoPlay({\n        autoPlay,\n        autoPlayInterval,\n        autoPlayReverse,\n        carouselController,\n    });\n\n    const { index, sharedPreIndex, sharedIndex, computedIndex } =\n        indexController;\n\n    const onScrollBegin = React.useCallback(() => {\n        pause();\n        props.onScrollBegin?.();\n    }, [pause, props]);\n\n    const onScrollEnd = React.useCallback(() => {\n        run();\n        computedIndex();\n        props.onScrollEnd?.(sharedPreIndex.current, sharedIndex.current);\n    }, [sharedPreIndex, sharedIndex, computedIndex, props, run]);\n\n    const offsetX = useDerivedValue(() => {\n        const totalWidth = width * data.length;\n        const x = handlerOffsetX.value % totalWidth;\n\n        if (!loop) {\n            return handlerOffsetX.value;\n        }\n        return isNaN(x) ? 0 : x;\n    }, [loop, width, data]);\n\n    useAnimatedReaction(\n        () => offsetX.value,\n        (value) => {\n            let absoluteProgress = Math.abs(value / width);\n            if (value > 0) {\n                absoluteProgress = data.length - absoluteProgress;\n            }\n            !!onProgressChange &&\n                runOnJS(onProgressChange)(value, absoluteProgress);\n        },\n        [onProgressChange, data]\n    );\n\n    const next = React.useCallback(() => {\n        return carouselController.next();\n    }, [carouselController]);\n\n    const prev = React.useCallback(() => {\n        return carouselController.prev();\n    }, [carouselController]);\n\n    const getCurrentIndex = React.useCallback(() => {\n        return index.value;\n    }, [index]);\n\n    const goToIndex = React.useCallback(\n        (i: number, animated?: boolean) => {\n            carouselController.to(i, animated);\n        },\n        [carouselController]\n    );\n\n    const animatedListScrollHandler =\n        useAnimatedGestureHandler<PanGestureHandlerGestureEvent>(\n            {\n                onStart: (_, ctx: any) => {\n                    runOnJS(pause)();\n                    runOnJS(onScrollBegin)();\n                    cancelAnimation(handlerOffsetX);\n                    ctx.currentContentOffsetX = handlerOffsetX.value;\n                    ctx.start = true;\n                },\n                onActive: (e, ctx: any) => {\n                    const { translationX } = e;\n                    if (\n                        !loop &&\n                        (handlerOffsetX.value >= 0 ||\n                            handlerOffsetX.value <= -(data.length - 1) * width)\n                    ) {\n                        handlerOffsetX.value =\n                            ctx.currentContentOffsetX + translationX / 2;\n                        return;\n                    }\n                    handlerOffsetX.value =\n                        ctx.currentContentOffsetX + translationX;\n                },\n                onEnd: (e) => {\n                    function _withAnimationCallback(num: number) {\n                        return withSpring(\n                            num,\n                            Object.assign({}, timingConfig, {\n                                velocity: e.velocityX,\n                            }),\n                            (isFinished) => {\n                                if (isFinished) {\n                                    runOnJS(onScrollEnd)();\n                                }\n                            }\n                        );\n                    }\n\n                    const page = Math.round(handlerOffsetX.value / width);\n\n                    const velocityPage = Math.round(\n                        (handlerOffsetX.value + e.velocityX) / width\n                    );\n\n                    let pageWithVelocity = Math.min(\n                        page + 1,\n                        Math.max(page - 1, velocityPage)\n                    );\n\n                    if (!loop) {\n                        pageWithVelocity = Math.max(\n                            -(data.length - 1),\n                            Math.min(0, pageWithVelocity)\n                        );\n                    }\n\n                    if (loop) {\n                        handlerOffsetX.value = _withAnimationCallback(\n                            pageWithVelocity * width\n                        );\n                        return;\n                    }\n                    if (handlerOffsetX.value >= 0) {\n                        handlerOffsetX.value = _withAnimationCallback(0);\n                        return;\n                    }\n\n                    if (handlerOffsetX.value <= -(data.length - 1) * width) {\n                        handlerOffsetX.value = _withAnimationCallback(\n                            -(data.length - 1) * width\n                        );\n                        return;\n                    }\n\n                    handlerOffsetX.value = _withAnimationCallback(\n                        pageWithVelocity * width\n                    );\n                },\n            },\n            [loop, data, onScrollBegin, onScrollEnd]\n        );\n\n    React.useImperativeHandle(\n        ref,\n        () => ({\n            next,\n            prev,\n            getCurrentIndex,\n            goToIndex,\n        }),\n        [getCurrentIndex, goToIndex, next, prev]\n    );\n\n    const renderLayout = React.useCallback(\n        (item: T, i: number) => {\n            switch (mode) {\n                case 'parallax':\n                    return (\n                        <ParallaxLayout\n                            parallaxScrollingOffset={parallaxScrollingOffset}\n                            parallaxScrollingScale={parallaxScrollingScale}\n                            data={data}\n                            width={width}\n                            handlerOffsetX={offsetX}\n                            index={i}\n                            key={i}\n                            loop={loop}\n                        >\n                            {renderItem(item, i)}\n                        </ParallaxLayout>\n                    );\n                default:\n                    return (\n                        <CarouselItem\n                            data={data}\n                            width={width}\n                            height={height}\n                            handlerOffsetX={offsetX}\n                            index={i}\n                            key={i}\n                            loop={loop}\n                        >\n                            {renderItem(item, i)}\n                        </CarouselItem>\n                    );\n            }\n        },\n        [\n            loop,\n            mode,\n            data,\n            height,\n            offsetX,\n            parallaxScrollingOffset,\n            parallaxScrollingScale,\n            width,\n            renderItem,\n        ]\n    );\n\n    return (\n        <PanGestureHandler\n            {...panGestureHandlerProps}\n            onGestureEvent={animatedListScrollHandler}\n        >\n            <Animated.View\n                // eslint-disable-next-line react-native/no-inline-styles\n                style={{\n                    ...style,\n                    width,\n                    height,\n                    flexDirection: 'row',\n                    position: 'relative',\n                }}\n            >\n                {data.map(renderLayout)}\n            </Animated.View>\n        </PanGestureHandler>\n    );\n}\n\nexport default React.forwardRef(Carousel) as typeof Carousel;\n"]}

package/lib/commonjs/CarouselItem.js

@@ -26,14 +26,14 @@ const CarouselItem = props => {
     children,
     width,
     height = '100%',
-    computedAnimResult,
-    loop
+    loop,
+    data
   } = props;
   const x = (0, _useOffsetX.useOffsetX)({
     handlerOffsetX,
     index,
     width,
-    computedAnimResult,
+    data,
     loop
   });
   const offsetXStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {

package/lib/commonjs/CarouselItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CarouselItem.tsx"],"names":["CarouselItem","props","handlerOffsetX","index","children","width","height","computedAnimResult","loop","x","offsetXStyle","transform","translateX","value"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;;;;;;;AAEO,MAAMA,YAOX,GAAIC,KAAD,IAAW;AACZ,QAAM;AACFC,IAAAA,cADE;AAEFC,IAAAA,KAFE;AAGFC,IAAAA,QAHE;AAIFC,IAAAA,KAJE;AAKFC,IAAAA,MAAM,GAAG,MALP;AAMFC,IAAAA,kBANE;AAOFC,IAAAA;AAPE,MAQFP,KARJ;AASA,QAAMQ,CAAC,GAAG,4BAAW;AACjBP,IAAAA,cADiB;AAEjBC,IAAAA,KAFiB;AAGjBE,IAAAA,KAHiB;AAIjBE,IAAAA,kBAJiB;AAKjBC,IAAAA;AALiB,GAAX,CAAV;AAOA,QAAME,YAAY,GAAG,6CAAiB,MAAM;AACxC,WAAO;AACHC,MAAAA,SAAS,EAAE,CAAC;AAAEC,QAAAA,UAAU,EAAEH,CAAC,CAACI,KAAF,GAAUV,KAAK,GAAGE;AAAhC,OAAD;AADR,KAAP;AAGH,GAJoB,EAIlB,EAJkB,CAArB;AAMA,sBACI,6BAAC,8BAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAEK;AAAtB,kBACI,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAE;AAAEL,MAAAA,KAAF;AAASC,MAAAA;AAAT;AAAb,KAAiCF,QAAjC,CADJ,CADJ;AAKH,CAnCM","sourcesContent":["import React from 'react';\nimport { FlexStyle, View } from 'react-native';\nimport Animated, { useAnimatedStyle } from 'react-native-reanimated';\nimport type { IComputedAnimResult } from './hooks/useComputedAnim';\nimport { useOffsetX } from './hooks/useOffsetX';\n\nexport const CarouselItem: React.FC<{\n    loop?: boolean;\n    index: number;\n    handlerOffsetX: Animated.SharedValue<number>;\n    width: number;\n    height?: FlexStyle['height'];\n    computedAnimResult: IComputedAnimResult;\n}> = (props) => {\n    const {\n        handlerOffsetX,\n        index,\n        children,\n        width,\n        height = '100%',\n        computedAnimResult,\n        loop,\n    } = props;\n    const x = useOffsetX({\n        handlerOffsetX,\n        index,\n        width,\n        computedAnimResult,\n        loop,\n    });\n    const offsetXStyle = useAnimatedStyle(() => {\n        return {\n            transform: [{ translateX: x.value - index * width }],\n        };\n    }, []);\n\n    return (\n        <Animated.View style={offsetXStyle}>\n            <View style={{ width, height }}>{children}</View>\n        </Animated.View>\n    );\n};\n"]}
+{"version":3,"sources":["CarouselItem.tsx"],"names":["CarouselItem","props","handlerOffsetX","index","children","width","height","loop","data","x","offsetXStyle","transform","translateX","value"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;AAEO,MAAMA,YAOX,GAAIC,KAAD,IAAW;AACZ,QAAM;AACFC,IAAAA,cADE;AAEFC,IAAAA,KAFE;AAGFC,IAAAA,QAHE;AAIFC,IAAAA,KAJE;AAKFC,IAAAA,MAAM,GAAG,MALP;AAMFC,IAAAA,IANE;AAOFC,IAAAA;AAPE,MAQFP,KARJ;AAUA,QAAMQ,CAAC,GAAG,4BAAW;AACjBP,IAAAA,cADiB;AAEjBC,IAAAA,KAFiB;AAGjBE,IAAAA,KAHiB;AAIjBG,IAAAA,IAJiB;AAKjBD,IAAAA;AALiB,GAAX,CAAV;AAQA,QAAMG,YAAY,GAAG,6CAAiB,MAAM;AACxC,WAAO;AACHC,MAAAA,SAAS,EAAE,CAAC;AAAEC,QAAAA,UAAU,EAAEH,CAAC,CAACI,KAAF,GAAUV,KAAK,GAAGE;AAAhC,OAAD;AADR,KAAP;AAGH,GAJoB,EAIlB,EAJkB,CAArB;AAMA,sBACI,6BAAC,8BAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAEK;AAAtB,kBACI,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAE;AAAEL,MAAAA,KAAF;AAASC,MAAAA;AAAT;AAAb,KAAiCF,QAAjC,CADJ,CADJ;AAKH,CArCM","sourcesContent":["import React from 'react';\nimport { FlexStyle, View } from 'react-native';\nimport Animated, { useAnimatedStyle } from 'react-native-reanimated';\nimport { useOffsetX } from './hooks/useOffsetX';\n\nexport const CarouselItem: React.FC<{\n    loop?: boolean;\n    index: number;\n    handlerOffsetX: Animated.SharedValue<number>;\n    width: number;\n    data: unknown[];\n    height?: FlexStyle['height'];\n}> = (props) => {\n    const {\n        handlerOffsetX,\n        index,\n        children,\n        width,\n        height = '100%',\n        loop,\n        data,\n    } = props;\n\n    const x = useOffsetX({\n        handlerOffsetX,\n        index,\n        width,\n        data,\n        loop,\n    });\n\n    const offsetXStyle = useAnimatedStyle(() => {\n        return {\n            transform: [{ translateX: x.value - index * width }],\n        };\n    }, []);\n\n    return (\n        <Animated.View style={offsetXStyle}>\n            <View style={{ width, height }}>{children}</View>\n        </Animated.View>\n    );\n};\n"]}

package/lib/commonjs/hooks/useCarouselController.js

@@ -43,7 +43,8 @@ function useCarouselController(opts) {
   const next = _react.default.useCallback(() => {
     if (!canSliding() || !loop && indexController.index.value === indexController.length - 1) return;
     onScrollBegin === null || onScrollBegin === void 0 ? void 0 : onScrollBegin();
-    handlerOffsetX.value = (0, _reactNativeReanimated.withTiming)(handlerOffsetX.value - width, defaultTimingConfig, isFinished => {
+    const currentPage = Math.round(handlerOffsetX.value / width);
+    handlerOffsetX.value = (0, _reactNativeReanimated.withTiming)((currentPage - 1) * width, defaultTimingConfig, isFinished => {
       if (isFinished) {
         (0, _reactNativeReanimated.runOnJS)(onScrollEnd)();
       }
@@ -53,7 +54,8 @@ function useCarouselController(opts) {
   const prev = _react.default.useCallback(() => {
     if (!canSliding() || !loop && indexController.index.value === 0) return;
     onScrollBegin === null || onScrollBegin === void 0 ? void 0 : onScrollBegin();
-    handlerOffsetX.value = (0, _reactNativeReanimated.withTiming)(handlerOffsetX.value + width, defaultTimingConfig, isFinished => {
+    const currentPage = Math.round(handlerOffsetX.value / width);
+    handlerOffsetX.value = (0, _reactNativeReanimated.withTiming)((currentPage + 1) * width, defaultTimingConfig, isFinished => {
       if (isFinished) {
         (0, _reactNativeReanimated.runOnJS)(onScrollEnd)();
       }

package/lib/commonjs/hooks/useCarouselController.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCarouselController.tsx"],"names":["defaultTimingConfig","duration","useCarouselController","opts","width","loop","handlerOffsetX","indexController","disable","canSliding","React","useCallback","onScrollEnd","onScrollBegin","next","index","value","length","isFinished","prev","to","animated","offset"],"mappings":"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","sourcesContent":["import React from 'react';\nimport type Animated from 'react-native-reanimated';\nimport { runOnJS, withTiming } from 'react-native-reanimated';\nimport type { IIndexController } from './useIndexController';\n\nconst defaultTimingConfig: Animated.WithTimingConfig = {\n    duration: 250,\n};\n\ninterface IOpts {\n    loop: boolean;\n    width: number;\n    handlerOffsetX: Animated.SharedValue<number>;\n    indexController: IIndexController;\n    disable?: boolean;\n    onScrollBegin?: () => void;\n    onScrollEnd?: () => void;\n}\n\nexport interface ICarouselController {\n    prev: () => void;\n    next: () => void;\n    to: (index: number, animated?: boolean) => void;\n}\n\nexport function useCarouselController(opts: IOpts): ICarouselController {\n    const {\n        width,\n        loop,\n        handlerOffsetX,\n        indexController,\n        disable = false,\n    } = opts;\n\n    const canSliding = React.useCallback(() => {\n        return !disable;\n    }, [disable]);\n\n    const onScrollEnd = React.useCallback(() => {\n        opts.onScrollEnd?.();\n    }, [opts]);\n\n    const onScrollBegin = React.useCallback(() => {\n        opts.onScrollBegin?.();\n    }, [opts]);\n\n    const next = React.useCallback(() => {\n        if (\n            !canSliding() ||\n            (!loop &&\n                indexController.index.value === indexController.length - 1)\n        )\n            return;\n\n        onScrollBegin?.();\n\n        handlerOffsetX.value = withTiming(\n            handlerOffsetX.value - width,\n            defaultTimingConfig,\n            (isFinished: boolean) => {\n                if (isFinished) {\n                    runOnJS(onScrollEnd)();\n                }\n            }\n        );\n    }, [\n        onScrollEnd,\n        canSliding,\n        onScrollBegin,\n        width,\n        handlerOffsetX,\n        indexController,\n        loop,\n    ]);\n\n    const prev = React.useCallback(() => {\n        if (!canSliding() || (!loop && indexController.index.value === 0))\n            return;\n\n        onScrollBegin?.();\n\n        handlerOffsetX.value = withTiming(\n            handlerOffsetX.value + width,\n            defaultTimingConfig,\n            (isFinished: boolean) => {\n                if (isFinished) {\n                    runOnJS(onScrollEnd)();\n                }\n            }\n        );\n    }, [\n        onScrollEnd,\n        canSliding,\n        onScrollBegin,\n        width,\n        handlerOffsetX,\n        indexController,\n        loop,\n    ]);\n\n    const to = React.useCallback(\n        (index: number, animated: boolean = false) => {\n            if (index === indexController.index.value) return;\n            if (!canSliding()) return;\n\n            onScrollBegin?.();\n\n            const offset =\n                handlerOffsetX.value +\n                (indexController.index.value - index) * width;\n\n            if (animated) {\n                handlerOffsetX.value = withTiming(\n                    offset,\n                    defaultTimingConfig,\n                    (isFinished: boolean) => {\n                        indexController.index.value = index;\n                        if (isFinished) {\n                            runOnJS(onScrollEnd)();\n                        }\n                    }\n                );\n            } else {\n                handlerOffsetX.value = offset;\n                indexController.index.value = index;\n                runOnJS(onScrollEnd)();\n            }\n        },\n        [\n            canSliding,\n            onScrollBegin,\n            onScrollEnd,\n            width,\n            indexController,\n            handlerOffsetX,\n        ]\n    );\n\n    return {\n        next,\n        prev,\n        to,\n    };\n}\n"]}
+{"version":3,"sources":["useCarouselController.tsx"],"names":["defaultTimingConfig","duration","useCarouselController","opts","width","loop","handlerOffsetX","indexController","disable","canSliding","React","useCallback","onScrollEnd","onScrollBegin","next","index","value","length","currentPage","Math","round","isFinished","prev","to","animated","offset"],"mappings":"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","sourcesContent":["import React from 'react';\nimport type Animated from 'react-native-reanimated';\nimport { runOnJS, withTiming } from 'react-native-reanimated';\nimport type { IIndexController } from './useIndexController';\n\nconst defaultTimingConfig: Animated.WithTimingConfig = {\n    duration: 250,\n};\n\ninterface IOpts {\n    loop: boolean;\n    width: number;\n    handlerOffsetX: Animated.SharedValue<number>;\n    indexController: IIndexController;\n    disable?: boolean;\n    onScrollBegin?: () => void;\n    onScrollEnd?: () => void;\n}\n\nexport interface ICarouselController {\n    prev: () => void;\n    next: () => void;\n    to: (index: number, animated?: boolean) => void;\n}\n\nexport function useCarouselController(opts: IOpts): ICarouselController {\n    const {\n        width,\n        loop,\n        handlerOffsetX,\n        indexController,\n        disable = false,\n    } = opts;\n\n    const canSliding = React.useCallback(() => {\n        return !disable;\n    }, [disable]);\n\n    const onScrollEnd = React.useCallback(() => {\n        opts.onScrollEnd?.();\n    }, [opts]);\n\n    const onScrollBegin = React.useCallback(() => {\n        opts.onScrollBegin?.();\n    }, [opts]);\n\n    const next = React.useCallback(() => {\n        if (\n            !canSliding() ||\n            (!loop &&\n                indexController.index.value === indexController.length - 1)\n        )\n            return;\n\n        onScrollBegin?.();\n\n        const currentPage = Math.round(handlerOffsetX.value / width);\n\n        handlerOffsetX.value = withTiming(\n            (currentPage - 1) * width,\n            defaultTimingConfig,\n            (isFinished: boolean) => {\n                if (isFinished) {\n                    runOnJS(onScrollEnd)();\n                }\n            }\n        );\n    }, [\n        onScrollEnd,\n        canSliding,\n        onScrollBegin,\n        width,\n        handlerOffsetX,\n        indexController,\n        loop,\n    ]);\n\n    const prev = React.useCallback(() => {\n        if (!canSliding() || (!loop && indexController.index.value === 0))\n            return;\n\n        onScrollBegin?.();\n\n        const currentPage = Math.round(handlerOffsetX.value / width);\n\n        handlerOffsetX.value = withTiming(\n            (currentPage + 1) * width,\n            defaultTimingConfig,\n            (isFinished: boolean) => {\n                if (isFinished) {\n                    runOnJS(onScrollEnd)();\n                }\n            }\n        );\n    }, [\n        onScrollEnd,\n        canSliding,\n        onScrollBegin,\n        width,\n        handlerOffsetX,\n        indexController,\n        loop,\n    ]);\n\n    const to = React.useCallback(\n        (index: number, animated: boolean = false) => {\n            if (index === indexController.index.value) return;\n            if (!canSliding()) return;\n\n            onScrollBegin?.();\n\n            const offset =\n                handlerOffsetX.value +\n                (indexController.index.value - index) * width;\n\n            if (animated) {\n                handlerOffsetX.value = withTiming(\n                    offset,\n                    defaultTimingConfig,\n                    (isFinished: boolean) => {\n                        indexController.index.value = index;\n                        if (isFinished) {\n                            runOnJS(onScrollEnd)();\n                        }\n                    }\n                );\n            } else {\n                handlerOffsetX.value = offset;\n                indexController.index.value = index;\n                runOnJS(onScrollEnd)();\n            }\n        },\n        [\n            canSliding,\n            onScrollBegin,\n            onScrollEnd,\n            width,\n            indexController,\n            handlerOffsetX,\n        ]\n    );\n\n    return {\n        next,\n        prev,\n        to,\n    };\n}\n"]}

package/lib/commonjs/hooks/useOffsetX.js

@@ -12,28 +12,33 @@ const useOffsetX = opts => {
     handlerOffsetX,
     index,
     width,
-    computedAnimResult,
-    loop
+    loop,
+    data,
+    type = 'positive',
+    viewCount = Math.round((data.length - 1) / 2)
   } = opts;
+  const ITEM_LENGTH = data.length;
+  const VALID_LENGTH = ITEM_LENGTH - 1;
+  const TOTAL_WIDTH = width * ITEM_LENGTH;
+  const HALF_WIDTH = 0.5 * width;
   const x = (0, _reactNativeReanimated.useDerivedValue)(() => {
-    const {
-      MAX,
-      MIN,
-      TOTAL_WIDTH,
-      HALF_WIDTH
-    } = computedAnimResult;
-
     if (loop) {
-      const defaultPos = width * index;
-      const startPos = defaultPos > MAX ? MAX - defaultPos : defaultPos < MIN ? MIN - defaultPos : defaultPos;
-      const inputRange = [-TOTAL_WIDTH, -(MAX + HALF_WIDTH) - startPos - 1, -(MAX + HALF_WIDTH) - startPos, 0, MAX + HALF_WIDTH - startPos, MAX + HALF_WIDTH - startPos + 1, TOTAL_WIDTH];
-      const outputRange = [startPos, 1.5 * width - 1, -(MAX + HALF_WIDTH), startPos, MAX + HALF_WIDTH, -(1.5 * width - 1), startPos];
+      const positiveCount = type === 'positive' ? viewCount : VALID_LENGTH - viewCount;
+      let startPos = width * index;
+
+      if (index > positiveCount) {
+        startPos = (index - ITEM_LENGTH) * width;
+      }
+
+      const MAX = positiveCount * width;
+      const MIN = -((VALID_LENGTH - positiveCount) * width);
+      const inputRange = [-TOTAL_WIDTH, MIN - HALF_WIDTH - startPos - 1, MIN - HALF_WIDTH - startPos, 0, MAX + HALF_WIDTH - startPos, MAX + HALF_WIDTH - startPos + 1, TOTAL_WIDTH];
+      const outputRange = [startPos, MAX + HALF_WIDTH - 1, MIN - HALF_WIDTH, startPos, MAX + HALF_WIDTH, MIN - HALF_WIDTH + 1, startPos];
       return (0, _reactNativeReanimated.interpolate)(Math.round(handlerOffsetX.value), inputRange.map(Math.round), outputRange.map(Math.round), _reactNativeReanimated.Extrapolate.CLAMP);
     }
 
-    const startPos = width * index;
-    return handlerOffsetX.value + startPos;
-  }, [loop, computedAnimResult]);
+    return handlerOffsetX.value + width * index;
+  }, [loop, data, viewCount, type]);
   return x;
 };
 

package/lib/commonjs/hooks/useOffsetX.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useOffsetX.ts"],"names":["useOffsetX","opts","handlerOffsetX","index","width","computedAnimResult","loop","x","MAX","MIN","TOTAL_WIDTH","HALF_WIDTH","defaultPos","startPos","inputRange","outputRange","Math","round","value","map","Extrapolate","CLAMP"],"mappings":";;;;;;;AAAA;;AAeO,MAAMA,UAAU,GAAIC,IAAD,IAAiB;AACvC,QAAM;AAAEC,IAAAA,cAAF;AAAkBC,IAAAA,KAAlB;AAAyBC,IAAAA,KAAzB;AAAgCC,IAAAA,kBAAhC;AAAoDC,IAAAA;AAApD,MAA6DL,IAAnE;AACA,QAAMM,CAAC,GAAG,4CAAgB,MAAM;AAC5B,UAAM;AAAEC,MAAAA,GAAF;AAAOC,MAAAA,GAAP;AAAYC,MAAAA,WAAZ;AAAyBC,MAAAA;AAAzB,QAAwCN,kBAA9C;;AACA,QAAIC,IAAJ,EAAU;AACN,YAAMM,UAAU,GAAGR,KAAK,GAAGD,KAA3B;AACA,YAAMU,QAAQ,GACVD,UAAU,GAAGJ,GAAb,GACMA,GAAG,GAAGI,UADZ,GAEMA,UAAU,GAAGH,GAAb,GACAA,GAAG,GAAGG,UADN,GAEAA,UALV;AAOA,YAAME,UAAU,GAAG,CACf,CAACJ,WADc,EAEf,EAAEF,GAAG,GAAGG,UAAR,IAAsBE,QAAtB,GAAiC,CAFlB,EAGf,EAAEL,GAAG,GAAGG,UAAR,IAAsBE,QAHP,EAIf,CAJe,EAKfL,GAAG,GAAGG,UAAN,GAAmBE,QALJ,EAMfL,GAAG,GAAGG,UAAN,GAAmBE,QAAnB,GAA8B,CANf,EAOfH,WAPe,CAAnB;AAUA,YAAMK,WAAW,GAAG,CAChBF,QADgB,EAEhB,MAAMT,KAAN,GAAc,CAFE,EAGhB,EAAEI,GAAG,GAAGG,UAAR,CAHgB,EAIhBE,QAJgB,EAKhBL,GAAG,GAAGG,UALU,EAMhB,EAAE,MAAMP,KAAN,GAAc,CAAhB,CANgB,EAOhBS,QAPgB,CAApB;AAUA,aAAO,wCACHG,IAAI,CAACC,KAAL,CAAWf,cAAc,CAACgB,KAA1B,CADG,EAEHJ,UAAU,CAACK,GAAX,CAAeH,IAAI,CAACC,KAApB,CAFG,EAGHF,WAAW,CAACI,GAAZ,CAAgBH,IAAI,CAACC,KAArB,CAHG,EAIHG,mCAAYC,KAJT,CAAP;AAMH;;AAED,UAAMR,QAAQ,GAAGT,KAAK,GAAGD,KAAzB;AACA,WAAOD,cAAc,CAACgB,KAAf,GAAuBL,QAA9B;AACH,GAzCS,EAyCP,CAACP,IAAD,EAAOD,kBAAP,CAzCO,CAAV;AA0CA,SAAOE,CAAP;AACH,CA7CM","sourcesContent":["import Animated, {\n    Extrapolate,\n    interpolate,\n    useDerivedValue,\n} from 'react-native-reanimated';\nimport type { IComputedAnimResult } from './useComputedAnim';\n\ninterface IOpts {\n    index: number;\n    width: number;\n    computedAnimResult: IComputedAnimResult;\n    handlerOffsetX: Animated.SharedValue<number>;\n    loop?: boolean;\n}\n\nexport const useOffsetX = (opts: IOpts) => {\n    const { handlerOffsetX, index, width, computedAnimResult, loop } = opts;\n    const x = useDerivedValue(() => {\n        const { MAX, MIN, TOTAL_WIDTH, HALF_WIDTH } = computedAnimResult;\n        if (loop) {\n            const defaultPos = width * index;\n            const startPos =\n                defaultPos > MAX\n                    ? MAX - defaultPos\n                    : defaultPos < MIN\n                    ? MIN - defaultPos\n                    : defaultPos;\n\n            const inputRange = [\n                -TOTAL_WIDTH,\n                -(MAX + HALF_WIDTH) - startPos - 1,\n                -(MAX + HALF_WIDTH) - startPos,\n                0,\n                MAX + HALF_WIDTH - startPos,\n                MAX + HALF_WIDTH - startPos + 1,\n                TOTAL_WIDTH,\n            ];\n\n            const outputRange = [\n                startPos,\n                1.5 * width - 1,\n                -(MAX + HALF_WIDTH),\n                startPos,\n                MAX + HALF_WIDTH,\n                -(1.5 * width - 1),\n                startPos,\n            ];\n\n            return interpolate(\n                Math.round(handlerOffsetX.value),\n                inputRange.map(Math.round),\n                outputRange.map(Math.round),\n                Extrapolate.CLAMP\n            );\n        }\n\n        const startPos = width * index;\n        return handlerOffsetX.value + startPos;\n    }, [loop, computedAnimResult]);\n    return x;\n};\n"]}
+{"version":3,"sources":["useOffsetX.ts"],"names":["useOffsetX","opts","handlerOffsetX","index","width","loop","data","type","viewCount","Math","round","length","ITEM_LENGTH","VALID_LENGTH","TOTAL_WIDTH","HALF_WIDTH","x","positiveCount","startPos","MAX","MIN","inputRange","outputRange","value","map","Extrapolate","CLAMP"],"mappings":";;;;;;;AAAA;;AAgBO,MAAMA,UAAU,GAAIC,IAAD,IAAiB;AACvC,QAAM;AACFC,IAAAA,cADE;AAEFC,IAAAA,KAFE;AAGFC,IAAAA,KAHE;AAIFC,IAAAA,IAJE;AAKFC,IAAAA,IALE;AAMFC,IAAAA,IAAI,GAAG,UANL;AAOFC,IAAAA,SAAS,GAAGC,IAAI,CAACC,KAAL,CAAW,CAACJ,IAAI,CAACK,MAAL,GAAc,CAAf,IAAoB,CAA/B;AAPV,MAQFV,IARJ;AASA,QAAMW,WAAW,GAAGN,IAAI,CAACK,MAAzB;AACA,QAAME,YAAY,GAAGD,WAAW,GAAG,CAAnC;AACA,QAAME,WAAW,GAAGV,KAAK,GAAGQ,WAA5B;AACA,QAAMG,UAAU,GAAG,MAAMX,KAAzB;AAEA,QAAMY,CAAC,GAAG,4CAAgB,MAAM;AAC5B,QAAIX,IAAJ,EAAU;AACN,YAAMY,aAAa,GACfV,IAAI,KAAK,UAAT,GAAsBC,SAAtB,GAAkCK,YAAY,GAAGL,SADrD;AAGA,UAAIU,QAAQ,GAAGd,KAAK,GAAGD,KAAvB;;AACA,UAAIA,KAAK,GAAGc,aAAZ,EAA2B;AACvBC,QAAAA,QAAQ,GAAG,CAACf,KAAK,GAAGS,WAAT,IAAwBR,KAAnC;AACH;;AAED,YAAMe,GAAG,GAAGF,aAAa,GAAGb,KAA5B;AACA,YAAMgB,GAAG,GAAG,EAAE,CAACP,YAAY,GAAGI,aAAhB,IAAiCb,KAAnC,CAAZ;AAEA,YAAMiB,UAAU,GAAG,CACf,CAACP,WADc,EAEfM,GAAG,GAAGL,UAAN,GAAmBG,QAAnB,GAA8B,CAFf,EAGfE,GAAG,GAAGL,UAAN,GAAmBG,QAHJ,EAIf,CAJe,EAKfC,GAAG,GAAGJ,UAAN,GAAmBG,QALJ,EAMfC,GAAG,GAAGJ,UAAN,GAAmBG,QAAnB,GAA8B,CANf,EAOfJ,WAPe,CAAnB;AAUA,YAAMQ,WAAW,GAAG,CAChBJ,QADgB,EAEhBC,GAAG,GAAGJ,UAAN,GAAmB,CAFH,EAGhBK,GAAG,GAAGL,UAHU,EAIhBG,QAJgB,EAKhBC,GAAG,GAAGJ,UALU,EAMhBK,GAAG,GAAGL,UAAN,GAAmB,CANH,EAOhBG,QAPgB,CAApB;AAUA,aAAO,wCACHT,IAAI,CAACC,KAAL,CAAWR,cAAc,CAACqB,KAA1B,CADG,EAEHF,UAAU,CAACG,GAAX,CAAef,IAAI,CAACC,KAApB,CAFG,EAGHY,WAAW,CAACE,GAAZ,CAAgBf,IAAI,CAACC,KAArB,CAHG,EAIHe,mCAAYC,KAJT,CAAP;AAMH;;AAED,WAAOxB,cAAc,CAACqB,KAAf,GAAuBnB,KAAK,GAAGD,KAAtC;AACH,GA1CS,EA0CP,CAACE,IAAD,EAAOC,IAAP,EAAaE,SAAb,EAAwBD,IAAxB,CA1CO,CAAV;AA4CA,SAAOS,CAAP;AACH,CA5DM","sourcesContent":["import Animated, {\n    Extrapolate,\n    interpolate,\n    useDerivedValue,\n} from 'react-native-reanimated';\n\ninterface IOpts {\n    index: number;\n    width: number;\n    handlerOffsetX: Animated.SharedValue<number>;\n    data: unknown[];\n    type?: 'positive' | 'negative';\n    viewCount?: number;\n    loop?: boolean;\n}\n\nexport const useOffsetX = (opts: IOpts) => {\n    const {\n        handlerOffsetX,\n        index,\n        width,\n        loop,\n        data,\n        type = 'positive',\n        viewCount = Math.round((data.length - 1) / 2),\n    } = opts;\n    const ITEM_LENGTH = data.length;\n    const VALID_LENGTH = ITEM_LENGTH - 1;\n    const TOTAL_WIDTH = width * ITEM_LENGTH;\n    const HALF_WIDTH = 0.5 * width;\n\n    const x = useDerivedValue(() => {\n        if (loop) {\n            const positiveCount =\n                type === 'positive' ? viewCount : VALID_LENGTH - viewCount;\n\n            let startPos = width * index;\n            if (index > positiveCount) {\n                startPos = (index - ITEM_LENGTH) * width;\n            }\n\n            const MAX = positiveCount * width;\n            const MIN = -((VALID_LENGTH - positiveCount) * width);\n\n            const inputRange = [\n                -TOTAL_WIDTH,\n                MIN - HALF_WIDTH - startPos - 1,\n                MIN - HALF_WIDTH - startPos,\n                0,\n                MAX + HALF_WIDTH - startPos,\n                MAX + HALF_WIDTH - startPos + 1,\n                TOTAL_WIDTH,\n            ];\n\n            const outputRange = [\n                startPos,\n                MAX + HALF_WIDTH - 1,\n                MIN - HALF_WIDTH,\n                startPos,\n                MAX + HALF_WIDTH,\n                MIN - HALF_WIDTH + 1,\n                startPos,\n            ];\n\n            return interpolate(\n                Math.round(handlerOffsetX.value),\n                inputRange.map(Math.round),\n                outputRange.map(Math.round),\n                Extrapolate.CLAMP\n            );\n        }\n\n        return handlerOffsetX.value + width * index;\n    }, [loop, data, viewCount, type]);\n\n    return x;\n};\n"]}

package/lib/commonjs/layouts/ParallaxLayout.js

@@ -28,14 +28,14 @@ const ParallaxLayout = props => {
     index,
     width,
     loop,
-    children,
-    computedAnimResult
+    data,
+    children
   } = props;
   const x = (0, _useOffsetX.useOffsetX)({
     handlerOffsetX,
     index,
     width,
-    computedAnimResult,
+    data,
     loop
   });
   const offsetXStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {

package/lib/commonjs/layouts/ParallaxLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ParallaxLayout.tsx"],"names":["ParallaxLayout","props","handlerOffsetX","parallaxScrollingOffset","parallaxScrollingScale","index","width","loop","children","computedAnimResult","x","offsetXStyle","baseTranslateX","value","padding","extraOffset","zIndex","Extrapolate","CLAMP","scale","relatedTranslateX","transform","translateX","height","alignSelf","flex"],"mappings":";;;;;;;AACA;;AACA;;AACA;;AAMA;;;;;;;;AATA;AAWO,MAAMA,cAQX,GAAIC,KAAD,IAAW;AACZ,QAAM;AACFC,IAAAA,cADE;AAEFC,IAAAA,uBAAuB,GAAG,GAFxB;AAGFC,IAAAA,sBAAsB,GAAG,GAHvB;AAIFC,IAAAA,KAJE;AAKFC,IAAAA,KALE;AAMFC,IAAAA,IANE;AAOFC,IAAAA,QAPE;AAQFC,IAAAA;AARE,MASFR,KATJ;AAWA,QAAMS,CAAC,GAAG,4BAAW;AACjBR,IAAAA,cADiB;AAEjBG,IAAAA,KAFiB;AAGjBC,IAAAA,KAHiB;AAIjBG,IAAAA,kBAJiB;AAKjBF,IAAAA;AALiB,GAAX,CAAV;AAQA,QAAMI,YAAY,GAAG,6CAAiB,MAAM;AACxC,UAAMC,cAAc,GAAGF,CAAC,CAACG,KAAF,GAAUR,KAAK,GAAGC,KAAzC;AACA,UAAMQ,OAAO,GAAG,CAAC,IAAIV,sBAAL,IAA+BE,KAA/C;AACA,UAAMS,WAAW,GAAGV,KAAK,GAAGS,OAAR,GAAkBA,OAAO,GAAG,CAAhD;AAEA,UAAME,MAAM,GAAG,wCACXN,CAAC,CAACG,KADS,EAEX,CAAC,CAACP,KAAF,EAAS,CAAT,EAAYA,KAAZ,CAFW,EAGX,CAAC,CAAD,EAAIA,KAAJ,EAAW,CAAX,CAHW,EAIXW,mCAAYC,KAJD,CAAf;AAMA,UAAMC,KAAK,GAAG,wCACVT,CAAC,CAACG,KADQ,EAEV,CAAC,CAACP,KAAF,EAAS,CAAT,EAAYA,KAAZ,CAFU,EAGV,CAACF,sBAAD,EAAyB,CAAzB,EAA4BA,sBAA5B,CAHU,EAIVa,mCAAYC,KAJF,CAAd;AAMA,UAAME,iBAAiB,GAAG,wCACtBV,CAAC,CAACG,KADoB,EAEtB,CAAC,CAACP,KAAF,EAAS,CAAT,EAAYA,KAAZ,CAFsB,EAGtB,CAACH,uBAAD,EAA0B,CAA1B,EAA6B,CAACA,uBAA9B,CAHsB,EAItBc,mCAAYC,KAJU,CAA1B;AAMA,WAAO;AACHG,MAAAA,SAAS,EAAE,CACP;AACIC,QAAAA,UAAU,EACNV,cAAc,GAAGG,WAAjB,GAA+BK;AAFvC,OADO,EAKP;AAAED,QAAAA;AAAF,OALO,CADR;AAQHH,MAAAA;AARG,KAAP;AAUH,GAjCoB,EAiClB,CAACT,IAAD,CAjCkB,CAArB;AAmCA,sBACI,6BAAC,8BAAD,CAAU,IAAV;AACI,IAAA,KAAK,EAAE,CACH;AACID,MAAAA,KAAK,EAAG,GAAEF,sBAAsB,GAAG,GAAI,GAD3C;AAEImB,MAAAA,MAAM,EAAG,GAAEnB,sBAAsB,GAAG,GAAI,GAF5C;AAGIoB,MAAAA,SAAS,EAAE;AAHf,KADG,EAMHb,YANG;AADX,kBAUI,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAE;AAAEc,MAAAA,IAAI,EAAE;AAAR;AAAb,KAA2BjB,QAA3B,CAVJ,CADJ;AAcH,CA7EM","sourcesContent":["/* eslint-disable react-native/no-inline-styles */\nimport React from 'react';\nimport { View } from 'react-native';\nimport Animated, {\n    Extrapolate,\n    interpolate,\n    useAnimatedStyle,\n} from 'react-native-reanimated';\nimport type { IComputedAnimResult } from 'src/hooks/useComputedAnim';\nimport { useOffsetX } from '../hooks/useOffsetX';\n\nexport const ParallaxLayout: React.FC<{\n    loop?: boolean;\n    parallaxScrollingOffset?: number;\n    parallaxScrollingScale?: number;\n    handlerOffsetX: Animated.SharedValue<number>;\n    index: number;\n    width: number;\n    computedAnimResult: IComputedAnimResult;\n}> = (props) => {\n    const {\n        handlerOffsetX,\n        parallaxScrollingOffset = 100,\n        parallaxScrollingScale = 0.8,\n        index,\n        width,\n        loop,\n        children,\n        computedAnimResult,\n    } = props;\n\n    const x = useOffsetX({\n        handlerOffsetX,\n        index,\n        width,\n        computedAnimResult,\n        loop,\n    });\n\n    const offsetXStyle = useAnimatedStyle(() => {\n        const baseTranslateX = x.value - index * width;\n        const padding = (1 - parallaxScrollingScale) * width;\n        const extraOffset = index * padding + padding / 2;\n\n        const zIndex = interpolate(\n            x.value,\n            [-width, 0, width],\n            [0, width, 0],\n            Extrapolate.CLAMP\n        );\n        const scale = interpolate(\n            x.value,\n            [-width, 0, width],\n            [parallaxScrollingScale, 1, parallaxScrollingScale],\n            Extrapolate.CLAMP\n        );\n        const relatedTranslateX = interpolate(\n            x.value,\n            [-width, 0, width],\n            [parallaxScrollingOffset, 0, -parallaxScrollingOffset],\n            Extrapolate.CLAMP\n        );\n        return {\n            transform: [\n                {\n                    translateX:\n                        baseTranslateX + extraOffset + relatedTranslateX,\n                },\n                { scale },\n            ],\n            zIndex,\n        };\n    }, [loop]);\n\n    return (\n        <Animated.View\n            style={[\n                {\n                    width: `${parallaxScrollingScale * 100}%`,\n                    height: `${parallaxScrollingScale * 100}%`,\n                    alignSelf: 'center',\n                },\n                offsetXStyle,\n            ]}\n        >\n            <View style={{ flex: 1 }}>{children}</View>\n        </Animated.View>\n    );\n};\n"]}
+{"version":3,"sources":["ParallaxLayout.tsx"],"names":["ParallaxLayout","props","handlerOffsetX","parallaxScrollingOffset","parallaxScrollingScale","index","width","loop","data","children","x","offsetXStyle","baseTranslateX","value","padding","extraOffset","zIndex","Extrapolate","CLAMP","scale","relatedTranslateX","transform","translateX","height","alignSelf","flex"],"mappings":";;;;;;;AACA;;AACA;;AACA;;AAKA;;;;;;;;AARA;AAUO,MAAMA,cAQX,GAAIC,KAAD,IAAW;AACZ,QAAM;AACFC,IAAAA,cADE;AAEFC,IAAAA,uBAAuB,GAAG,GAFxB;AAGFC,IAAAA,sBAAsB,GAAG,GAHvB;AAIFC,IAAAA,KAJE;AAKFC,IAAAA,KALE;AAMFC,IAAAA,IANE;AAOFC,IAAAA,IAPE;AAQFC,IAAAA;AARE,MASFR,KATJ;AAWA,QAAMS,CAAC,GAAG,4BAAW;AACjBR,IAAAA,cADiB;AAEjBG,IAAAA,KAFiB;AAGjBC,IAAAA,KAHiB;AAIjBE,IAAAA,IAJiB;AAKjBD,IAAAA;AALiB,GAAX,CAAV;AAQA,QAAMI,YAAY,GAAG,6CAAiB,MAAM;AACxC,UAAMC,cAAc,GAAGF,CAAC,CAACG,KAAF,GAAUR,KAAK,GAAGC,KAAzC;AACA,UAAMQ,OAAO,GAAG,CAAC,IAAIV,sBAAL,IAA+BE,KAA/C;AACA,UAAMS,WAAW,GAAGV,KAAK,GAAGS,OAAR,GAAkBA,OAAO,GAAG,CAAhD;AAEA,UAAME,MAAM,GAAG,wCACXN,CAAC,CAACG,KADS,EAEX,CAAC,CAACP,KAAF,EAAS,CAAT,EAAYA,KAAZ,CAFW,EAGX,CAAC,CAAD,EAAIA,KAAJ,EAAW,CAAX,CAHW,EAIXW,mCAAYC,KAJD,CAAf;AAMA,UAAMC,KAAK,GAAG,wCACVT,CAAC,CAACG,KADQ,EAEV,CAAC,CAACP,KAAF,EAAS,CAAT,EAAYA,KAAZ,CAFU,EAGV,CAACF,sBAAD,EAAyB,CAAzB,EAA4BA,sBAA5B,CAHU,EAIVa,mCAAYC,KAJF,CAAd;AAMA,UAAME,iBAAiB,GAAG,wCACtBV,CAAC,CAACG,KADoB,EAEtB,CAAC,CAACP,KAAF,EAAS,CAAT,EAAYA,KAAZ,CAFsB,EAGtB,CAACH,uBAAD,EAA0B,CAA1B,EAA6B,CAACA,uBAA9B,CAHsB,EAItBc,mCAAYC,KAJU,CAA1B;AAMA,WAAO;AACHG,MAAAA,SAAS,EAAE,CACP;AACIC,QAAAA,UAAU,EACNV,cAAc,GAAGG,WAAjB,GAA+BK;AAFvC,OADO,EAKP;AAAED,QAAAA;AAAF,OALO,CADR;AAQHH,MAAAA;AARG,KAAP;AAUH,GAjCoB,EAiClB,CAACT,IAAD,CAjCkB,CAArB;AAmCA,sBACI,6BAAC,8BAAD,CAAU,IAAV;AACI,IAAA,KAAK,EAAE,CACH;AACID,MAAAA,KAAK,EAAG,GAAEF,sBAAsB,GAAG,GAAI,GAD3C;AAEImB,MAAAA,MAAM,EAAG,GAAEnB,sBAAsB,GAAG,GAAI,GAF5C;AAGIoB,MAAAA,SAAS,EAAE;AAHf,KADG,EAMHb,YANG;AADX,kBAUI,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAE;AAAEc,MAAAA,IAAI,EAAE;AAAR;AAAb,KAA2BhB,QAA3B,CAVJ,CADJ;AAcH,CA7EM","sourcesContent":["/* eslint-disable react-native/no-inline-styles */\nimport React from 'react';\nimport { View } from 'react-native';\nimport Animated, {\n    Extrapolate,\n    interpolate,\n    useAnimatedStyle,\n} from 'react-native-reanimated';\nimport { useOffsetX } from '../hooks/useOffsetX';\n\nexport const ParallaxLayout: React.FC<{\n    loop?: boolean;\n    parallaxScrollingOffset?: number;\n    parallaxScrollingScale?: number;\n    handlerOffsetX: Animated.SharedValue<number>;\n    index: number;\n    width: number;\n    data: unknown[];\n}> = (props) => {\n    const {\n        handlerOffsetX,\n        parallaxScrollingOffset = 100,\n        parallaxScrollingScale = 0.8,\n        index,\n        width,\n        loop,\n        data,\n        children,\n    } = props;\n\n    const x = useOffsetX({\n        handlerOffsetX,\n        index,\n        width,\n        data,\n        loop,\n    });\n\n    const offsetXStyle = useAnimatedStyle(() => {\n        const baseTranslateX = x.value - index * width;\n        const padding = (1 - parallaxScrollingScale) * width;\n        const extraOffset = index * padding + padding / 2;\n\n        const zIndex = interpolate(\n            x.value,\n            [-width, 0, width],\n            [0, width, 0],\n            Extrapolate.CLAMP\n        );\n        const scale = interpolate(\n            x.value,\n            [-width, 0, width],\n            [parallaxScrollingScale, 1, parallaxScrollingScale],\n            Extrapolate.CLAMP\n        );\n        const relatedTranslateX = interpolate(\n            x.value,\n            [-width, 0, width],\n            [parallaxScrollingOffset, 0, -parallaxScrollingOffset],\n            Extrapolate.CLAMP\n        );\n        return {\n            transform: [\n                {\n                    translateX:\n                        baseTranslateX + extraOffset + relatedTranslateX,\n                },\n                { scale },\n            ],\n            zIndex,\n        };\n    }, [loop]);\n\n    return (\n        <Animated.View\n            style={[\n                {\n                    width: `${parallaxScrollingScale * 100}%`,\n                    height: `${parallaxScrollingScale * 100}%`,\n                    alignSelf: 'center',\n                },\n                offsetXStyle,\n            ]}\n        >\n            <View style={{ flex: 1 }}>{children}</View>\n        </Animated.View>\n    );\n};\n"]}

package/lib/commonjs/utils/log.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.log = log;
+
+/**
+ * In worklet
+ * e.g. runOnJS(lop)(...);
+ */
+function log(msg) {
+  console.log(msg);
+}
+//# sourceMappingURL=log.js.map

package/lib/commonjs/utils/log.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["log.ts"],"names":["log","msg","console"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACO,SAASA,GAAT,CAAaC,GAAb,EAAuB;AAC1BC,EAAAA,OAAO,CAACF,GAAR,CAAYC,GAAZ;AACH","sourcesContent":["/**\n * In worklet\n * e.g. runOnJS(lop)(...);\n */\nexport function log(msg: any) {\n    console.log(msg);\n}\n"]}

package/lib/module/Carousel.js

@@ -6,7 +6,6 @@ import Animated, { cancelAnimation, runOnJS, useAnimatedGestureHandler, useAnima
 import { CarouselItem } from './CarouselItem';
 import { ParallaxLayout } from './layouts/index';
 import { useCarouselController } from './hooks/useCarouselController';
-import { useComputedAnim } from './hooks/useComputedAnim';
 import { useAutoPlay } from './hooks/useAutoPlay';
 import { useIndexController } from './hooks/useIndexController';
 import { usePropsErrorBoundary } from './hooks/usePropsErrorBoundary';
@@ -54,7 +53,8 @@ function Carousel(props, ref) {
     ...props.springConfig
   };
   const width = Math.round(props.width);
-  const handlerOffsetX = useSharedValue(defaultIndex * width);
+  const defaultHandlerOffsetX = -Math.abs(defaultIndex * width);
+  const handlerOffsetX = useSharedValue(defaultHandlerOffsetX);
   const data = React.useMemo(() => {
     if (!loop) return _data;
 
@@ -68,7 +68,6 @@ function Carousel(props, ref) {
 
     return _data;
   }, [_data, loop]);
-  const computedAnimResult = useComputedAnim(width, data.length);
   const indexController = useIndexController({
     originalLength: _data.length,
     length: data.length,
@@ -115,9 +114,15 @@ function Carousel(props, ref) {
     (_props$onScrollEnd = props.onScrollEnd) === null || _props$onScrollEnd === void 0 ? void 0 : _props$onScrollEnd.call(props, sharedPreIndex.current, sharedIndex.current);
   }, [sharedPreIndex, sharedIndex, computedIndex, props, run]);
   const offsetX = useDerivedValue(() => {
-    const x = handlerOffsetX.value % computedAnimResult.TOTAL_WIDTH;
+    const totalWidth = width * data.length;
+    const x = handlerOffsetX.value % totalWidth;
+
+    if (!loop) {
+      return handlerOffsetX.value;
+    }
+
     return isNaN(x) ? 0 : x;
-  }, [computedAnimResult]);
+  }, [loop, width, data]);
   useAnimatedReaction(() => offsetX.value, value => {
     let absoluteProgress = Math.abs(value / width);
 
@@ -172,7 +177,11 @@ function Carousel(props, ref) {
 
       const page = Math.round(handlerOffsetX.value / width);
       const velocityPage = Math.round((handlerOffsetX.value + e.velocityX) / width);
-      const pageWithVelocity = Math.min(page + 1, Math.max(page - 1, velocityPage));
+      let pageWithVelocity = Math.min(page + 1, Math.max(page - 1, velocityPage));
+
+      if (!loop) {
+        pageWithVelocity = Math.max(-(data.length - 1), Math.min(0, pageWithVelocity));
+      }
 
       if (loop) {
         handlerOffsetX.value = _withAnimationCallback(pageWithVelocity * width);
@@ -198,40 +207,34 @@ function Carousel(props, ref) {
     getCurrentIndex,
     goToIndex
   }), [getCurrentIndex, goToIndex, next, prev]);
-  const Layouts = React.useMemo(() => {
+  const renderLayout = React.useCallback((item, i) => {
     switch (mode) {
       case 'parallax':
-        return ({
-          index: i,
-          children
-        }) => /*#__PURE__*/React.createElement(ParallaxLayout, {
+        return /*#__PURE__*/React.createElement(ParallaxLayout, {
           parallaxScrollingOffset: parallaxScrollingOffset,
           parallaxScrollingScale: parallaxScrollingScale,
-          computedAnimResult: computedAnimResult,
+          data: data,
           width: width,
           handlerOffsetX: offsetX,
           index: i,
           key: i,
           loop: loop
-        }, children);
+        }, renderItem(item, i));
 
       default:
-        return ({
-          index: i,
-          children
-        }) => /*#__PURE__*/React.createElement(CarouselItem, {
-          computedAnimResult: computedAnimResult,
+        return /*#__PURE__*/React.createElement(CarouselItem, {
+          data: data,
           width: width,
           height: height,
           handlerOffsetX: offsetX,
           index: i,
           key: i,
           loop: loop
-        }, children);
+        }, renderItem(item, i));
     }
-  }, [loop, mode, computedAnimResult, height, offsetX, parallaxScrollingOffset, parallaxScrollingScale, width]);
+  }, [loop, mode, data, height, offsetX, parallaxScrollingOffset, parallaxScrollingScale, width, renderItem]);
   return /*#__PURE__*/React.createElement(PanGestureHandler, _extends({}, panGestureHandlerProps, {
-    onHandlerStateChange: animatedListScrollHandler
+    onGestureEvent: animatedListScrollHandler
   }), /*#__PURE__*/React.createElement(Animated.View, {
     // eslint-disable-next-line react-native/no-inline-styles
     style: { ...style,
@@ -240,12 +243,7 @@ function Carousel(props, ref) {
       flexDirection: 'row',
       position: 'relative'
     }
-  }, data.map((item, i) => {
-    return /*#__PURE__*/React.createElement(Layouts, {
-      index: i,
-      key: i
-    }, renderItem(item, i));
-  })));
+  }, data.map(renderLayout)));
 }
 
 export default /*#__PURE__*/React.forwardRef(Carousel);