react-native-reanimated-carousel 2.0.0 → 2.2.1

package/lib/module/layouts/BaseLayout.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Animated, { runOnJS, useAnimatedReaction, useAnimatedStyle } from 'react-native-reanimated';
+import Animated, { runOnJS, useAnimatedReaction, useAnimatedStyle, useDerivedValue } from 'react-native-reanimated';
 import { useOffsetX } from '../hooks/useOffsetX';
 import { LazyView } from '../LazyView';
 import { CTX } from '../store';
@@ -11,25 +11,28 @@ export const BaseLayout = props => {
     visibleRanges,
     animationStyle
   } = props;
+  const context = React.useContext(CTX);
   const {
     props: {
-      mode,
       loop,
       data,
       width,
       height,
       vertical,
+      customConfig,
+      mode,
       modeConfig
     }
-  } = React.useContext(CTX);
-  const [shouldUpdate, setShouldUpdate] = React.useState(false);
+  } = context;
   const size = vertical ? height : width;
+  const [shouldUpdate, setShouldUpdate] = React.useState(false);
   let offsetXConfig = {
     handlerOffsetX,
     index,
     size,
     data,
-    loop
+    loop,
+    ...(typeof customConfig === 'function' ? customConfig() : {})
   };
 
   if (mode === 'horizontal-stack') {
@@ -49,9 +52,8 @@ export const BaseLayout = props => {
   }
 
   const x = useOffsetX(offsetXConfig, visibleRanges);
-
-  const _animatedStyle = useAnimatedStyle(() => animationStyle(x.value / size), [animationStyle]);
-
+  const animationValue = useDerivedValue(() => x.value / size, [x, size]);
+  const animatedStyle = useAnimatedStyle(() => animationStyle(x.value / size), [animationStyle]);
   const updateView = React.useCallback((negativeRange, positiveRange) => {
     setShouldUpdate(index >= negativeRange[0] && index <= negativeRange[1] || index >= positiveRange[0] && index <= positiveRange[1]);
   }, [index]);
@@ -63,9 +65,11 @@ export const BaseLayout = props => {
       width: width || '100%',
       height: height || '100%',
       position: 'absolute'
-    }, _animatedStyle]
+    }, animatedStyle]
   }, /*#__PURE__*/React.createElement(LazyView, {
     shouldUpdate: shouldUpdate
-  }, children));
+  }, children({
+    animationValue
+  })));
 };
 //# sourceMappingURL=BaseLayout.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["BaseLayout.tsx"],"names":["React","Animated","runOnJS","useAnimatedReaction","useAnimatedStyle","useOffsetX","LazyView","CTX","BaseLayout","props","handlerOffsetX","index","children","visibleRanges","animationStyle","mode","loop","data","width","height","vertical","modeConfig","useContext","shouldUpdate","setShouldUpdate","useState","size","offsetXConfig","snapDirection","showLength","type","viewCount","x","_animatedStyle","value","updateView","useCallback","negativeRange","positiveRange","position"],"mappings":"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","sourcesContent":["import React from 'react';\nimport type { ViewStyle } from 'react-native';\nimport Animated, {\n    runOnJS,\n    useAnimatedReaction,\n    useAnimatedStyle,\n} from 'react-native-reanimated';\nimport { IOpts, useOffsetX } from '../hooks/useOffsetX';\nimport type { IVisibleRanges } from '../hooks/useVisibleRanges';\nimport { LazyView } from '../LazyView';\nimport type { ILayoutConfig as IStackLayoutConfig } from './stack';\nimport { CTX } from '../store';\n\nexport type TAnimationStyle = (\n    value: number\n) => Animated.AnimatedStyleProp<ViewStyle>;\n\nexport const BaseLayout: React.FC<{\n    index: number;\n    handlerOffsetX: Animated.SharedValue<number>;\n    visibleRanges: IVisibleRanges;\n    animationStyle: TAnimationStyle;\n}> = (props) => {\n    const { handlerOffsetX, index, children, visibleRanges, animationStyle } =\n        props;\n\n    const {\n        props: { mode, loop, data, width, height, vertical, modeConfig },\n    } = React.useContext(CTX);\n\n    const [shouldUpdate, setShouldUpdate] = React.useState(false);\n\n    const size = vertical ? height : width;\n\n    let offsetXConfig: IOpts = {\n        handlerOffsetX,\n        index,\n        size,\n        data,\n        loop,\n    };\n\n    if (mode === 'horizontal-stack') {\n        const { snapDirection, showLength } = modeConfig as IStackLayoutConfig;\n\n        offsetXConfig = {\n            handlerOffsetX,\n            index,\n            size,\n            data,\n            loop,\n            type: snapDirection === 'right' ? 'negative' : 'positive',\n            viewCount: showLength,\n        };\n    }\n\n    const x = useOffsetX(offsetXConfig, visibleRanges);\n\n    const _animatedStyle = useAnimatedStyle(\n        () => animationStyle(x.value / size),\n        [animationStyle]\n    );\n\n    const updateView = React.useCallback(\n        (negativeRange: number[], positiveRange: number[]) => {\n            setShouldUpdate(\n                (index >= negativeRange[0] && index <= negativeRange[1]) ||\n                    (index >= positiveRange[0] && index <= positiveRange[1])\n            );\n        },\n        [index]\n    );\n\n    useAnimatedReaction(\n        () => visibleRanges.value,\n        () => {\n            runOnJS(updateView)(\n                visibleRanges.value.negativeRange,\n                visibleRanges.value.positiveRange\n            );\n        },\n        [visibleRanges.value]\n    );\n\n    return (\n        <Animated.View\n            style={[\n                {\n                    width: width || '100%',\n                    height: height || '100%',\n                    position: 'absolute',\n                },\n                _animatedStyle,\n            ]}\n        >\n            <LazyView shouldUpdate={shouldUpdate}>{children}</LazyView>\n        </Animated.View>\n    );\n};\n"]}
+{"version":3,"sources":["BaseLayout.tsx"],"names":["React","Animated","runOnJS","useAnimatedReaction","useAnimatedStyle","useDerivedValue","useOffsetX","LazyView","CTX","BaseLayout","props","handlerOffsetX","index","children","visibleRanges","animationStyle","context","useContext","loop","data","width","height","vertical","customConfig","mode","modeConfig","size","shouldUpdate","setShouldUpdate","useState","offsetXConfig","snapDirection","showLength","type","viewCount","x","animationValue","value","animatedStyle","updateView","useCallback","negativeRange","positiveRange","position"],"mappings":"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","sourcesContent":["import React from 'react';\nimport type { ViewStyle } from 'react-native';\nimport Animated, {\n    runOnJS,\n    useAnimatedReaction,\n    useAnimatedStyle,\n    useDerivedValue,\n} from 'react-native-reanimated';\nimport { IOpts, useOffsetX } from '../hooks/useOffsetX';\nimport type { IVisibleRanges } from '../hooks/useVisibleRanges';\nimport { LazyView } from '../LazyView';\nimport { CTX } from '../store';\nimport type { ILayoutConfig } from './stack';\n\nexport type TAnimationStyle = (\n    value: number\n) => Animated.AnimatedStyleProp<ViewStyle>;\n\nexport const BaseLayout: React.FC<{\n    index: number;\n    handlerOffsetX: Animated.SharedValue<number>;\n    visibleRanges: IVisibleRanges;\n    animationStyle: TAnimationStyle;\n    children: (ctx: {\n        animationValue: Animated.SharedValue<number>;\n    }) => React.ReactElement;\n}> = (props) => {\n    const { handlerOffsetX, index, children, visibleRanges, animationStyle } =\n        props;\n\n    const context = React.useContext(CTX);\n    const {\n        props: {\n            loop,\n            data,\n            width,\n            height,\n            vertical,\n            customConfig,\n            mode,\n            modeConfig,\n        },\n    } = context;\n    const size = vertical ? height : width;\n    const [shouldUpdate, setShouldUpdate] = React.useState(false);\n    let offsetXConfig: IOpts = {\n        handlerOffsetX,\n        index,\n        size,\n        data,\n        loop,\n        ...(typeof customConfig === 'function' ? customConfig() : {}),\n    };\n\n    if (mode === 'horizontal-stack') {\n        const { snapDirection, showLength } = modeConfig as ILayoutConfig;\n\n        offsetXConfig = {\n            handlerOffsetX,\n            index,\n            size,\n            data,\n            loop,\n            type: snapDirection === 'right' ? 'negative' : 'positive',\n            viewCount: showLength,\n        };\n    }\n\n    const x = useOffsetX(offsetXConfig, visibleRanges);\n    const animationValue = useDerivedValue(() => x.value / size, [x, size]);\n    const animatedStyle = useAnimatedStyle(\n        () => animationStyle(x.value / size),\n        [animationStyle]\n    );\n\n    const updateView = React.useCallback(\n        (negativeRange: number[], positiveRange: number[]) => {\n            setShouldUpdate(\n                (index >= negativeRange[0] && index <= negativeRange[1]) ||\n                    (index >= positiveRange[0] && index <= positiveRange[1])\n            );\n        },\n        [index]\n    );\n\n    useAnimatedReaction(\n        () => visibleRanges.value,\n        () => {\n            runOnJS(updateView)(\n                visibleRanges.value.negativeRange,\n                visibleRanges.value.positiveRange\n            );\n        },\n        [visibleRanges.value]\n    );\n\n    return (\n        <Animated.View\n            style={[\n                {\n                    width: width || '100%',\n                    height: height || '100%',\n                    position: 'absolute',\n                },\n                animatedStyle,\n            ]}\n        >\n            <LazyView shouldUpdate={shouldUpdate}>\n                {children({ animationValue })}\n            </LazyView>\n        </Animated.View>\n    );\n};\n"]}

package/lib/module/layouts/normal.js

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

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["parallax.ts"],"names":["Extrapolate","interpolate","parallaxLayout","baseConfig","modeConfig","size","vertical","parallaxScrollingOffset","parallaxScrollingScale","value","translate","zIndex","CLAMP","scale","Math","pow","transform","translateY","translateX"],"mappings":"AAAA,SAASA,WAAT,EAAsBC,WAAtB,QAAyC,yBAAzC;AAoBA,OAAO,SAASC,cAAT,CACHC,UADG,EAEHC,UAAyB,GAAG,EAFzB,EAGL;AACE,QAAM;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,MAAqBH,UAA3B;AACA,QAAM;AAAEI,IAAAA,uBAAuB,GAAG,GAA5B;AAAiCC,IAAAA,sBAAsB,GAAG;AAA1D,MACFJ,UADJ;AAGA,SAAQK,KAAD,IAAmB;AACtB;;AACA,UAAMC,SAAS,GAAGT,WAAW,CACzBQ,KADyB,EAEzB,CAAC,CAAC,CAAF,EAAK,CAAL,EAAQ,CAAR,CAFyB,EAGzB,CAAC,CAACJ,IAAD,GAAQE,uBAAT,EAAkC,CAAlC,EAAqCF,IAAI,GAAGE,uBAA5C,CAHyB,CAA7B;AAMA,UAAMI,MAAM,GAAGV,WAAW,CACtBQ,KADsB,EAEtB,CAAC,CAAC,CAAF,EAAK,CAAL,EAAQ,CAAR,CAFsB,EAGtB,CAAC,CAAD,EAAIJ,IAAJ,EAAU,CAAV,CAHsB,EAItBL,WAAW,CAACY,KAJU,CAA1B;AAOA,UAAMC,KAAK,GAAGZ,WAAW,CACrBQ,KADqB,EAErB,CAAC,CAAC,CAAF,EAAK,CAAL,EAAQ,CAAR,CAFqB,EAGrB,CACIK,IAAI,CAACC,GAAL,CAASP,sBAAT,EAAiC,CAAjC,CADJ,EAEIA,sBAFJ,EAGIM,IAAI,CAACC,GAAL,CAASP,sBAAT,EAAiC,CAAjC,CAHJ,CAHqB,EAQrBR,WAAW,CAACY,KARS,CAAzB;AAWA,WAAO;AACHI,MAAAA,SAAS,EAAE,CACPV,QAAQ,GACF;AACIW,QAAAA,UAAU,EAAEP;AADhB,OADE,GAIF;AACIQ,QAAAA,UAAU,EAAER;AADhB,OALC,EAQP;AACIG,QAAAA;AADJ,OARO,CADR;AAaHF,MAAAA;AAbG,KAAP;AAeH,GAzCD;AA0CH","sourcesContent":["import { Extrapolate, interpolate } from 'react-native-reanimated';\n\ntype TBaseConfig = {\n    size: number;\n    vertical: boolean;\n};\n\nexport interface ILayoutConfig {\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\nexport function parallaxLayout(\n    baseConfig: TBaseConfig,\n    modeConfig: ILayoutConfig = {}\n) {\n    const { size, vertical } = baseConfig;\n    const { parallaxScrollingOffset = 100, parallaxScrollingScale = 0.8 } =\n        modeConfig;\n\n    return (value: number) => {\n        'worklet';\n        const translate = interpolate(\n            value,\n            [-1, 0, 1],\n            [-size + parallaxScrollingOffset, 0, size - parallaxScrollingOffset]\n        );\n\n        const zIndex = interpolate(\n            value,\n            [-1, 0, 1],\n            [0, size, 0],\n            Extrapolate.CLAMP\n        );\n\n        const scale = interpolate(\n            value,\n            [-1, 0, 1],\n            [\n                Math.pow(parallaxScrollingScale, 2),\n                parallaxScrollingScale,\n                Math.pow(parallaxScrollingScale, 2),\n            ],\n            Extrapolate.CLAMP\n        );\n\n        return {\n            transform: [\n                vertical\n                    ? {\n                          translateY: translate,\n                      }\n                    : {\n                          translateX: translate,\n                      },\n                {\n                    scale,\n                },\n            ],\n            zIndex,\n        };\n    };\n}\n"]}
+{"version":3,"sources":["parallax.ts"],"names":["Extrapolate","interpolate","parallaxLayout","baseConfig","modeConfig","size","vertical","parallaxScrollingOffset","parallaxScrollingScale","value","translate","zIndex","CLAMP","scale","Math","pow","transform","translateY","translateX"],"mappings":"AAAA,SAASA,WAAT,EAAsBC,WAAtB,QAAyC,yBAAzC;AA6BA,OAAO,SAASC,cAAT,CACHC,UADG,EAEHC,UAAyB,GAAG,EAFzB,EAGL;AACE,QAAM;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,MAAqBH,UAA3B;AACA,QAAM;AAAEI,IAAAA,uBAAuB,GAAG,GAA5B;AAAiCC,IAAAA,sBAAsB,GAAG;AAA1D,MACFJ,UADJ;AAGA,SAAQK,KAAD,IAAmB;AACtB;;AACA,UAAMC,SAAS,GAAGT,WAAW,CACzBQ,KADyB,EAEzB,CAAC,CAAC,CAAF,EAAK,CAAL,EAAQ,CAAR,CAFyB,EAGzB,CAAC,CAACJ,IAAD,GAAQE,uBAAT,EAAkC,CAAlC,EAAqCF,IAAI,GAAGE,uBAA5C,CAHyB,CAA7B;AAMA,UAAMI,MAAM,GAAGV,WAAW,CACtBQ,KADsB,EAEtB,CAAC,CAAC,CAAF,EAAK,CAAL,EAAQ,CAAR,CAFsB,EAGtB,CAAC,CAAD,EAAIJ,IAAJ,EAAU,CAAV,CAHsB,EAItBL,WAAW,CAACY,KAJU,CAA1B;AAOA,UAAMC,KAAK,GAAGZ,WAAW,CACrBQ,KADqB,EAErB,CAAC,CAAC,CAAF,EAAK,CAAL,EAAQ,CAAR,CAFqB,EAGrB,CACIK,IAAI,CAACC,GAAL,CAASP,sBAAT,EAAiC,CAAjC,CADJ,EAEIA,sBAFJ,EAGIM,IAAI,CAACC,GAAL,CAASP,sBAAT,EAAiC,CAAjC,CAHJ,CAHqB,EAQrBR,WAAW,CAACY,KARS,CAAzB;AAWA,WAAO;AACHI,MAAAA,SAAS,EAAE,CACPV,QAAQ,GACF;AACIW,QAAAA,UAAU,EAAEP;AADhB,OADE,GAIF;AACIQ,QAAAA,UAAU,EAAER;AADhB,OALC,EAQP;AACIG,QAAAA;AADJ,OARO,CADR;AAaHF,MAAAA;AAbG,KAAP;AAeH,GAzCD;AA0CH","sourcesContent":["import { Extrapolate, interpolate } from 'react-native-reanimated';\nimport type { ComputedDirectionTypes } from '../types';\n\ntype TBaseConfig = {\n    size: number;\n    vertical: boolean;\n};\n\ninterface ILayoutConfig {\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\nexport type TParallaxModeProps = ComputedDirectionTypes<{\n    /**\n     * Carousel Animated transitions.\n     */\n    mode?: 'parallax';\n    modeConfig?: ILayoutConfig;\n}>;\n\nexport function parallaxLayout(\n    baseConfig: TBaseConfig,\n    modeConfig: ILayoutConfig = {}\n) {\n    const { size, vertical } = baseConfig;\n    const { parallaxScrollingOffset = 100, parallaxScrollingScale = 0.8 } =\n        modeConfig;\n\n    return (value: number) => {\n        'worklet';\n        const translate = interpolate(\n            value,\n            [-1, 0, 1],\n            [-size + parallaxScrollingOffset, 0, size - parallaxScrollingOffset]\n        );\n\n        const zIndex = interpolate(\n            value,\n            [-1, 0, 1],\n            [0, size, 0],\n            Extrapolate.CLAMP\n        );\n\n        const scale = interpolate(\n            value,\n            [-1, 0, 1],\n            [\n                Math.pow(parallaxScrollingScale, 2),\n                parallaxScrollingScale,\n                Math.pow(parallaxScrollingScale, 2),\n            ],\n            Extrapolate.CLAMP\n        );\n\n        return {\n            transform: [\n                vertical\n                    ? {\n                          translateY: translate,\n                      }\n                    : {\n                          translateX: translate,\n                      },\n                {\n                    scale,\n                },\n            ],\n            zIndex,\n        };\n    };\n}\n"]}

package/lib/module/layouts/stack.js

@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import { Dimensions } from 'react-native';
 import { Extrapolate, interpolate } from 'react-native-reanimated';
 const screen = Dimensions.get('window');
@@ -62,6 +63,17 @@ export function horizontalStackLayout(modeConfig = {}) {
     return styles;
   };
 }
+export function useHorizontalStackLayout(customAnimationConfig = {}, 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 = {}) {
   return _value => {
     'worklet';

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

@@ -1 +1 @@
-{"version":3,"sources":["stack.ts"],"names":["Dimensions","Extrapolate","interpolate","screen","get","horizontalStackLayout","modeConfig","_value","showLength","snapDirection","moveSize","width","stackInterval","scaleInterval","opacityInterval","rotateZDeg","transform","validLength","value","inputRange","getCommonVariables","zIndex","opacity","getCommonStyles","styles","translateX","scale","rotateZ","CLAMP","push","verticalStackLayout","translateY","opts","easeInOutCubic","v","Math","pow","page","floor","abs","diff","Error","Number","MIN_VALUE"],"mappings":"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","sourcesContent":["import { Dimensions, TransformsStyle, ViewStyle } from 'react-native';\nimport { Extrapolate, interpolate } from 'react-native-reanimated';\n\nconst screen = Dimensions.get('window');\n\nexport interface ILayoutConfig {\n    showLength?: number;\n    moveSize?: number;\n    stackInterval?: number;\n    scaleInterval?: number;\n    opacityInterval?: number;\n    rotateZDeg?: number;\n    snapDirection?: 'left' | 'right';\n}\n\nexport function horizontalStackLayout(modeConfig: ILayoutConfig = {}) {\n    return (_value: number) => {\n        'worklet';\n\n        const {\n            showLength,\n            snapDirection = 'left',\n            moveSize = screen.width,\n            stackInterval = 18,\n            scaleInterval = 0.04,\n            opacityInterval = 0.1,\n            rotateZDeg = 30,\n        } = modeConfig;\n\n        const transform: TransformsStyle['transform'] = [];\n        const { validLength, value, inputRange } = getCommonVariables({\n            showLength: showLength!,\n            value: _value,\n            snapDirection,\n        });\n        const { zIndex, opacity } = getCommonStyles({\n            validLength,\n            value,\n            opacityInterval,\n            snapDirection,\n        });\n\n        const styles: ViewStyle = {\n            transform,\n            zIndex,\n            opacity,\n        };\n\n        let translateX: number;\n        let scale: number;\n        let rotateZ: string;\n\n        if (snapDirection === 'left') {\n            translateX = interpolate(\n                value,\n                inputRange,\n                [-moveSize, 0, validLength * stackInterval],\n                Extrapolate.CLAMP\n            );\n            scale = interpolate(\n                value,\n                inputRange,\n                [1, 1, 1 - validLength * scaleInterval],\n                Extrapolate.CLAMP\n            );\n            rotateZ = `${interpolate(\n                value,\n                inputRange,\n                [-rotateZDeg, 0, 0],\n                Extrapolate.CLAMP\n            )}deg`;\n        } else if (snapDirection === 'right') {\n            translateX = interpolate(\n                value,\n                inputRange,\n                [-validLength * stackInterval, 0, moveSize],\n                Extrapolate.CLAMP\n            );\n            scale = interpolate(\n                value,\n                inputRange,\n                [1 - validLength * scaleInterval, 1, 1],\n                Extrapolate.CLAMP\n            );\n            rotateZ = `${interpolate(\n                value,\n                inputRange,\n                [0, 0, rotateZDeg],\n                Extrapolate.CLAMP\n            )}deg`;\n        }\n\n        transform.push(\n            {\n                translateX: translateX!,\n            },\n            {\n                scale: scale!,\n            },\n            {\n                rotateZ: rotateZ!,\n            }\n        );\n\n        return styles;\n    };\n}\n\nexport function verticalStackLayout(modeConfig: ILayoutConfig = {}) {\n    return (_value: number) => {\n        'worklet';\n\n        const {\n            showLength,\n            snapDirection = 'left',\n            moveSize = screen.width,\n            stackInterval = 18,\n            scaleInterval = 0.04,\n            opacityInterval = 0.1,\n            rotateZDeg = 30,\n        } = modeConfig;\n        const transform: TransformsStyle['transform'] = [];\n        const { validLength, value, inputRange } = getCommonVariables({\n            showLength: showLength!,\n            value: _value,\n            snapDirection,\n        });\n        const { zIndex, opacity } = getCommonStyles({\n            validLength,\n            value,\n            opacityInterval,\n            snapDirection,\n        });\n\n        const styles: ViewStyle = {\n            transform,\n            zIndex,\n            opacity,\n        };\n\n        let translateX: number;\n        let scale: number;\n        let rotateZ: string;\n        let translateY: number;\n\n        if (snapDirection === 'left') {\n            translateX = interpolate(\n                value,\n                inputRange,\n                [-moveSize, 0, 0],\n                Extrapolate.CLAMP\n            );\n            scale = interpolate(\n                value,\n                inputRange,\n                [1, 1, 1 - validLength * scaleInterval],\n                Extrapolate.CLAMP\n            );\n            rotateZ = `${interpolate(\n                value,\n                inputRange,\n                [-rotateZDeg, 0, 0],\n                Extrapolate.CLAMP\n            )}deg`;\n            translateY = interpolate(\n                value,\n                inputRange,\n                [0, 0, validLength * stackInterval],\n                Extrapolate.CLAMP\n            );\n        } else if (snapDirection === 'right') {\n            translateX = interpolate(\n                value,\n                inputRange,\n                [0, 0, moveSize],\n                Extrapolate.CLAMP\n            );\n            scale = interpolate(\n                value,\n                inputRange,\n                [1 - validLength * scaleInterval, 1, 1],\n                Extrapolate.CLAMP\n            );\n            rotateZ = `${interpolate(\n                value,\n                inputRange,\n                [0, 0, rotateZDeg],\n                Extrapolate.CLAMP\n            )}deg`;\n            translateY = interpolate(\n                value,\n                inputRange,\n                [validLength * stackInterval, 0, 0],\n                Extrapolate.CLAMP\n            );\n        }\n\n        transform.push(\n            {\n                translateX: translateX!,\n            },\n            {\n                scale: scale!,\n            },\n            {\n                rotateZ: rotateZ!,\n            },\n            {\n                translateY: translateY!,\n            }\n        );\n\n        return styles;\n    };\n}\n\nfunction getCommonVariables(opts: {\n    value: number;\n    showLength: number;\n    snapDirection: 'left' | 'right';\n}) {\n    'worklet';\n\n    const { showLength, value: _value, snapDirection } = opts;\n    function easeInOutCubic(v: number): number {\n        return v < 0.5 ? 4 * v * v * v : 1 - Math.pow(-2 * v + 2, 3) / 2;\n    }\n    const page = Math.floor(Math.abs(_value));\n    const diff = Math.abs(_value) % 1;\n    const value =\n        _value < 0\n            ? -(page + easeInOutCubic(diff))\n            : page + easeInOutCubic(diff);\n    const validLength = showLength! - 1;\n\n    let inputRange: [number, number, number];\n\n    if (snapDirection === 'left') {\n        inputRange = [-1, 0, validLength];\n    } else if (snapDirection === 'right') {\n        inputRange = [-validLength, 0, 1];\n    } else {\n        throw Error('snapDirection must be set to either left or right');\n    }\n\n    return {\n        inputRange,\n        validLength,\n        value,\n    };\n}\n\nfunction getCommonStyles(opts: {\n    value: number;\n    validLength: number;\n    opacityInterval: number;\n    snapDirection: 'left' | 'right';\n}) {\n    'worklet';\n\n    const { snapDirection, validLength, value, opacityInterval } = opts;\n\n    let zIndex: number;\n    let opacity: number;\n\n    if (snapDirection === 'left') {\n        zIndex =\n            Math.floor(\n                interpolate(\n                    value,\n                    [-1.5, -1, -1 + Number.MIN_VALUE, 0, validLength],\n                    [\n                        Number.MIN_VALUE,\n                        validLength,\n                        validLength,\n                        validLength - 1,\n                        -1,\n                    ]\n                ) * 10000\n            ) / 100;\n\n        opacity = interpolate(\n            value,\n            [-1, 0, validLength - 1, validLength],\n            [0.25, 1, 1 - (validLength - 1) * opacityInterval, 0.25]\n        );\n    } else if (snapDirection === 'right') {\n        zIndex =\n            Math.floor(\n                interpolate(\n                    value,\n                    [-validLength, 0, 1 - Number.MIN_VALUE, 1, 1.5],\n                    [\n                        1,\n                        validLength - 1,\n                        validLength,\n                        validLength,\n                        Number.MIN_VALUE,\n                    ]\n                ) * 10000\n            ) / 100;\n        opacity = interpolate(\n            value,\n            [-validLength, 1 - validLength, 0, 1],\n            [0.25, 1 - (validLength - 1) * opacityInterval, 1, 0.25]\n        );\n    } else {\n        throw Error('snapDirection must be set to either left or right');\n    }\n\n    return {\n        zIndex,\n        opacity,\n    };\n}\n"]}
+{"version":3,"sources":["stack.ts"],"names":["useMemo","Dimensions","Extrapolate","interpolate","screen","get","horizontalStackLayout","modeConfig","_value","showLength","snapDirection","moveSize","width","stackInterval","scaleInterval","opacityInterval","rotateZDeg","transform","validLength","value","inputRange","getCommonVariables","zIndex","opacity","getCommonStyles","styles","translateX","scale","rotateZ","CLAMP","push","useHorizontalStackLayout","customAnimationConfig","customConfig","config","type","viewCount","layout","verticalStackLayout","translateY","opts","easeInOutCubic","v","Math","pow","page","floor","abs","diff","Error","Number","MIN_VALUE"],"mappings":"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","sourcesContent":["import { useMemo } from 'react';\nimport { Dimensions, TransformsStyle, ViewStyle } from 'react-native';\nimport { Extrapolate, interpolate } from 'react-native-reanimated';\nimport type { ComputedDirectionTypes, CustomConfig } from 'src/types';\n\nconst screen = Dimensions.get('window');\n\nexport interface ILayoutConfig {\n    showLength?: number;\n    moveSize?: number;\n    stackInterval?: number;\n    scaleInterval?: number;\n    opacityInterval?: number;\n    rotateZDeg?: number;\n    snapDirection?: 'left' | 'right';\n}\n\nexport type TStackModeProps = ComputedDirectionTypes<{\n    /**\n     * Carousel Animated transitions.\n     */\n    mode?: 'horizontal-stack' | 'vertical-stack';\n    /**\n     * Stack animation style.\n     * @default\n     *     mode: 'vertical',\n     *     snapDirection: 'right',\n     *     moveSize: window.width,\n     *     stackInterval: 30,\n     *     scaleInterval: 0.08,\n     *     rotateZDeg: 135,\n     */\n    modeConfig?: ILayoutConfig;\n}>;\n\nexport function horizontalStackLayout(modeConfig: ILayoutConfig = {}) {\n    return (_value: number) => {\n        'worklet';\n\n        const {\n            showLength,\n            snapDirection = 'left',\n            moveSize = screen.width,\n            stackInterval = 18,\n            scaleInterval = 0.04,\n            opacityInterval = 0.1,\n            rotateZDeg = 30,\n        } = modeConfig;\n\n        const transform: TransformsStyle['transform'] = [];\n        const { validLength, value, inputRange } = getCommonVariables({\n            showLength: showLength!,\n            value: _value,\n            snapDirection,\n        });\n        const { zIndex, opacity } = getCommonStyles({\n            validLength,\n            value,\n            opacityInterval,\n            snapDirection,\n        });\n\n        const styles: ViewStyle = {\n            transform,\n            zIndex,\n            opacity,\n        };\n\n        let translateX: number;\n        let scale: number;\n        let rotateZ: string;\n\n        if (snapDirection === 'left') {\n            translateX = interpolate(\n                value,\n                inputRange,\n                [-moveSize, 0, validLength * stackInterval],\n                Extrapolate.CLAMP\n            );\n            scale = interpolate(\n                value,\n                inputRange,\n                [1, 1, 1 - validLength * scaleInterval],\n                Extrapolate.CLAMP\n            );\n            rotateZ = `${interpolate(\n                value,\n                inputRange,\n                [-rotateZDeg, 0, 0],\n                Extrapolate.CLAMP\n            )}deg`;\n        } else if (snapDirection === 'right') {\n            translateX = interpolate(\n                value,\n                inputRange,\n                [-validLength * stackInterval, 0, moveSize],\n                Extrapolate.CLAMP\n            );\n            scale = interpolate(\n                value,\n                inputRange,\n                [1 - validLength * scaleInterval, 1, 1],\n                Extrapolate.CLAMP\n            );\n            rotateZ = `${interpolate(\n                value,\n                inputRange,\n                [0, 0, rotateZDeg],\n                Extrapolate.CLAMP\n            )}deg`;\n        }\n\n        transform.push(\n            {\n                translateX: translateX!,\n            },\n            {\n                scale: scale!,\n            },\n            {\n                rotateZ: rotateZ!,\n            }\n        );\n\n        return styles;\n    };\n}\n\nexport function useHorizontalStackLayout(\n    customAnimationConfig: ILayoutConfig = {},\n    customConfig: CustomConfig = {}\n) {\n    const config = useMemo(\n        () => ({\n            type:\n                customAnimationConfig.snapDirection === 'right'\n                    ? 'negative'\n                    : 'positive',\n            viewCount: customAnimationConfig.showLength,\n            ...customConfig,\n        }),\n        [customAnimationConfig, customConfig]\n    );\n\n    return {\n        layout: horizontalStackLayout(customAnimationConfig),\n        config,\n    };\n}\n\nexport function verticalStackLayout(modeConfig: ILayoutConfig = {}) {\n    return (_value: number) => {\n        'worklet';\n\n        const {\n            showLength,\n            snapDirection = 'left',\n            moveSize = screen.width,\n            stackInterval = 18,\n            scaleInterval = 0.04,\n            opacityInterval = 0.1,\n            rotateZDeg = 30,\n        } = modeConfig;\n        const transform: TransformsStyle['transform'] = [];\n        const { validLength, value, inputRange } = getCommonVariables({\n            showLength: showLength!,\n            value: _value,\n            snapDirection,\n        });\n        const { zIndex, opacity } = getCommonStyles({\n            validLength,\n            value,\n            opacityInterval,\n            snapDirection,\n        });\n\n        const styles: ViewStyle = {\n            transform,\n            zIndex,\n            opacity,\n        };\n\n        let translateX: number;\n        let scale: number;\n        let rotateZ: string;\n        let translateY: number;\n\n        if (snapDirection === 'left') {\n            translateX = interpolate(\n                value,\n                inputRange,\n                [-moveSize, 0, 0],\n                Extrapolate.CLAMP\n            );\n            scale = interpolate(\n                value,\n                inputRange,\n                [1, 1, 1 - validLength * scaleInterval],\n                Extrapolate.CLAMP\n            );\n            rotateZ = `${interpolate(\n                value,\n                inputRange,\n                [-rotateZDeg, 0, 0],\n                Extrapolate.CLAMP\n            )}deg`;\n            translateY = interpolate(\n                value,\n                inputRange,\n                [0, 0, validLength * stackInterval],\n                Extrapolate.CLAMP\n            );\n        } else if (snapDirection === 'right') {\n            translateX = interpolate(\n                value,\n                inputRange,\n                [0, 0, moveSize],\n                Extrapolate.CLAMP\n            );\n            scale = interpolate(\n                value,\n                inputRange,\n                [1 - validLength * scaleInterval, 1, 1],\n                Extrapolate.CLAMP\n            );\n            rotateZ = `${interpolate(\n                value,\n                inputRange,\n                [0, 0, rotateZDeg],\n                Extrapolate.CLAMP\n            )}deg`;\n            translateY = interpolate(\n                value,\n                inputRange,\n                [validLength * stackInterval, 0, 0],\n                Extrapolate.CLAMP\n            );\n        }\n\n        transform.push(\n            {\n                translateX: translateX!,\n            },\n            {\n                scale: scale!,\n            },\n            {\n                rotateZ: rotateZ!,\n            },\n            {\n                translateY: translateY!,\n            }\n        );\n\n        return styles;\n    };\n}\n\nfunction getCommonVariables(opts: {\n    value: number;\n    showLength: number;\n    snapDirection: 'left' | 'right';\n}) {\n    'worklet';\n\n    const { showLength, value: _value, snapDirection } = opts;\n    function easeInOutCubic(v: number): number {\n        return v < 0.5 ? 4 * v * v * v : 1 - Math.pow(-2 * v + 2, 3) / 2;\n    }\n    const page = Math.floor(Math.abs(_value));\n    const diff = Math.abs(_value) % 1;\n    const value =\n        _value < 0\n            ? -(page + easeInOutCubic(diff))\n            : page + easeInOutCubic(diff);\n    const validLength = showLength! - 1;\n\n    let inputRange: [number, number, number];\n\n    if (snapDirection === 'left') {\n        inputRange = [-1, 0, validLength];\n    } else if (snapDirection === 'right') {\n        inputRange = [-validLength, 0, 1];\n    } else {\n        throw Error('snapDirection must be set to either left or right');\n    }\n\n    return {\n        inputRange,\n        validLength,\n        value,\n    };\n}\n\nfunction getCommonStyles(opts: {\n    value: number;\n    validLength: number;\n    opacityInterval: number;\n    snapDirection: 'left' | 'right';\n}) {\n    'worklet';\n\n    const { snapDirection, validLength, value, opacityInterval } = opts;\n\n    let zIndex: number;\n    let opacity: number;\n\n    if (snapDirection === 'left') {\n        zIndex =\n            Math.floor(\n                interpolate(\n                    value,\n                    [-1.5, -1, -1 + Number.MIN_VALUE, 0, validLength],\n                    [\n                        Number.MIN_VALUE,\n                        validLength,\n                        validLength,\n                        validLength - 1,\n                        -1,\n                    ]\n                ) * 10000\n            ) / 100;\n\n        opacity = interpolate(\n            value,\n            [-1, 0, validLength - 1, validLength],\n            [0.25, 1, 1 - (validLength - 1) * opacityInterval, 0.25]\n        );\n    } else if (snapDirection === 'right') {\n        zIndex =\n            Math.floor(\n                interpolate(\n                    value,\n                    [-validLength, 0, 1 - Number.MIN_VALUE, 1, 1.5],\n                    [\n                        1,\n                        validLength - 1,\n                        validLength,\n                        validLength,\n                        Number.MIN_VALUE,\n                    ]\n                ) * 10000\n            ) / 100;\n        opacity = interpolate(\n            value,\n            [-validLength, 1 - validLength, 0, 1],\n            [0.25, 1 - (validLength - 1) * opacityInterval, 1, 0.25]\n        );\n    } else {\n        throw Error('snapDirection must be set to either left or right');\n    }\n\n    return {\n        zIndex,\n        opacity,\n    };\n}\n"]}

package/lib/typescript/constants/index.d.ts

@@ -2,3 +2,6 @@ export declare enum DATA_LENGTH {
     SINGLE_ITEM = 1,
     DOUBLE_ITEM = 2
 }
+export declare const Easing: {
+    easeOutQuart: (value: number) => number;
+};

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

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

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

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

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

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

package/lib/typescript/layouts/BaseLayout.d.ts

@@ -8,4 +8,7 @@ export declare const BaseLayout: React.FC<{
     handlerOffsetX: Animated.SharedValue<number>;
     visibleRanges: IVisibleRanges;
     animationStyle: TAnimationStyle;
+    children: (ctx: {
+        animationValue: Animated.SharedValue<number>;
+    }) => React.ReactElement;
 }>;

package/lib/typescript/layouts/parallax.d.ts

@@ -1,8 +1,9 @@
+import type { ComputedDirectionTypes } from '../types';
 declare 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
@@ -14,6 +15,13 @@ export interface ILayoutConfig {
      */
     parallaxScrollingScale?: number;
 }
+export declare type TParallaxModeProps = ComputedDirectionTypes<{
+    /**
+     * Carousel Animated transitions.
+     */
+    mode?: 'parallax';
+    modeConfig?: ILayoutConfig;
+}>;
 export declare function parallaxLayout(baseConfig: TBaseConfig, modeConfig?: ILayoutConfig): (value: number) => {
     transform: ({
         translateY: number;

package/lib/typescript/layouts/stack.d.ts

@@ -1,4 +1,5 @@
 import { ViewStyle } from 'react-native';
+import type { ComputedDirectionTypes, CustomConfig } from 'src/types';
 export interface ILayoutConfig {
     showLength?: number;
     moveSize?: number;
@@ -8,5 +9,29 @@ export interface ILayoutConfig {
     rotateZDeg?: number;
     snapDirection?: 'left' | 'right';
 }
+export declare 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 declare function horizontalStackLayout(modeConfig?: ILayoutConfig): (_value: number) => ViewStyle;
+export declare function useHorizontalStackLayout(customAnimationConfig?: ILayoutConfig, customConfig?: CustomConfig): {
+    layout: (_value: number) => ViewStyle;
+    config: {
+        type: string;
+        viewCount: number | undefined;
+    };
+};
 export declare function verticalStackLayout(modeConfig?: ILayoutConfig): (_value: number) => ViewStyle;

package/lib/typescript/types.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 import type { ViewStyle } from 'react-native';
 import type { PanGestureHandlerProps } from 'react-native-gesture-handler';
-import type { ILayoutConfig as IStackLayoutConfig } from './layouts/stack';
-import type { ILayoutConfig as IParallaxLayoutConfig } from './layouts/parallax';
+import type Animated from 'react-native-reanimated';
+import type { TParallaxModeProps } from './layouts/parallax';
+import type { TStackModeProps } from './layouts/stack';
 export declare type ComputedDirectionTypes<T, VP = {}, HP = {}> = (T & VP & {
     /**
      * Layout items vertically instead of horizontally
@@ -30,30 +31,10 @@ export declare type ComputedDirectionTypes<T, VP = {}, HP = {}> = (T & VP & {
     width: number;
     height?: number;
 });
-declare type TParallaxModeProps = ComputedDirectionTypes<{
-    /**
-     * Carousel Animated transitions.
-     */
-    mode?: 'parallax';
-    modeConfig?: IParallaxLayoutConfig;
-}>;
-declare 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?: IStackLayoutConfig;
-}>;
+export declare type CustomConfig = {
+    type?: 'negative' | 'positive';
+    viewCount?: number;
+};
 export declare type TCarouselProps<T = any> = {
     ref?: React.Ref<ICarouselInstance>;
     /**
@@ -84,6 +65,11 @@ export declare type TCarouselProps<T = any> = {
      * @description playback interval
      */
     autoPlayInterval?: number;
+    /**
+     * Time a scroll animation takes to finish
+     * @default 500 (ms)
+     */
+    scrollAnimationDuration?: number;
     /**
      * Carousel container style
      */
@@ -110,10 +96,19 @@ export declare type TCarouselProps<T = any> = {
      * @default true
      */
     enableSnap?: boolean;
+    /**
+     * Custom carousel config.
+     */
+    customConfig?: () => CustomConfig;
+    /**
+     * Custom animations.
+     * Must use `worklet`, Details: https://docs.swmansion.com/react-native-reanimated/docs/2.2.0/worklets/
+     */
+    customAnimation?: (value: number) => Animated.AnimatedStyleProp<ViewStyle>;
     /**
      * Render carousel item.
      */
-    renderItem: (data: T, index: number) => React.ReactNode;
+    renderItem: CarouselRenderItem<T>;
     /**
      * Callback fired when navigating to an item
      */
@@ -135,20 +130,38 @@ export declare type TCarouselProps<T = any> = {
 } & (TParallaxModeProps | TStackModeProps);
 export interface ICarouselInstance {
     /**
-     * Play the last one
+     * Scroll to previous item, it takes one optional argument (count),
+     * which allows you to specify how many items to cross
      */
-    prev: () => void;
+    prev: (opts?: TCarouselActionOptions) => void;
     /**
-     * Play the next one
+     * Scroll to next item, it takes one optional argument (count),
+     * which allows you to specify how many items to cross
      */
-    next: () => void;
+    next: (opts?: TCarouselActionOptions) => void;
     /**
      * Get current item index
      */
     getCurrentIndex: () => number;
     /**
      * Go to index
+     * @deprecated use scrollTo instead
      */
     goToIndex: (index: number, animated?: boolean) => void;
+    /**
+     * Use value to scroll to a position where relative to the current position,
+     * scrollTo(-2) is equivalent to prev(2), scrollTo(2) is equivalent to next(2)
+     */
+    scrollTo: (opts?: TCarouselActionOptions) => void;
+}
+export interface CarouselRenderItemInfo<ItemT> {
+    item: ItemT;
+    index: number;
+    animationValue: Animated.SharedValue<number>;
+}
+export declare type CarouselRenderItem<ItemT> = (info: CarouselRenderItemInfo<ItemT>) => React.ReactElement;
+export interface TCarouselActionOptions {
+    count?: number;
+    animated?: boolean;
+    onFinished?: () => void;
 }
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-native-reanimated-carousel",
-    "version": "2.0.0",
+    "version": "2.2.1",
     "description": "Simple carousel component.fully implemented using Reanimated 2.Infinitely scrolling, very smooth.",
     "main": "lib/commonjs/index",
     "module": "lib/module/index",
@@ -22,14 +22,21 @@
         "!**/__mocks__"
     ],
     "scripts": {
+        "gif": "node scripts/makegif.js ./scripts/gif-works-directory",
         "test": "jest",
         "typescript": "tsc --noEmit",
         "lint": "eslint \"src/**/*.{js,ts,tsx}\"",
         "prepare": "bob build",
-        "release": "release-it",
-        "example": "yarn --cwd example",
+        "release": "release-it --no-git.requireUpstream",
+        "ios": "yarn --cwd example ios",
+        "ios:pretty": "yarn --cwd example ios:pretty",
+        "web": "yarn --cwd example web",
+        "web:pretty": "yarn --cwd example web:pretty",
+        "android": "yarn --cwd example android",
+        "android:pretty": "yarn --cwd example android:pretty",
         "pods": "cd example && pod-install --quiet",
-        "bootstrap": "yarn example && yarn && yarn pods"
+        "bootstrap": "yarn example && yarn && yarn pods",
+        "deploy": "cd example && yarn deploy"
     },
     "keywords": [
         "react-native",

package/src/Carousel.tsx

@@ -1,10 +1,12 @@
 import React, { PropsWithChildren } from 'react';
 import Animated, { runOnJS, useDerivedValue } from 'react-native-reanimated';
+
 import { useCarouselController } from './hooks/useCarouselController';
 import { useAutoPlay } from './hooks/useAutoPlay';
 import { usePropsErrorBoundary } from './hooks/usePropsErrorBoundary';
 import { ScrollViewGesture } from './ScrollViewGesture';
 import { useVisibleRanges } from './hooks/useVisibleRanges';
+
 import type { ICarouselInstance, TCarouselProps } from './types';
 import { StyleSheet, View } from 'react-native';
 import { DATA_LENGTH } from './constants';
@@ -33,11 +35,13 @@ function Carousel<T>(
         windowSize,
         autoPlayReverse,
         autoPlayInterval,
+        scrollAnimationDuration,
         renderItem,
         onScrollEnd,
         onSnapToItem,
         onScrollBegin,
         onProgressChange,
+        customAnimation,
     } = props;
 
     const commonVariables = useCommonVariables(props);
@@ -65,7 +69,8 @@ function Carousel<T>(
         originalLength: data.length,
         onScrollEnd: () => runOnJS(_onScrollEnd)(),
         onScrollBegin: () => !!onScrollBegin && runOnJS(onScrollBegin)(),
-        onChange: (i) => onSnapToItem && runOnJS(onSnapToItem)(i),
+        onChange: (i) => !!onSnapToItem && runOnJS(onSnapToItem)(i),
+        duration: scrollAnimationDuration,
     });
 
     const {
@@ -77,7 +82,7 @@ function Carousel<T>(
         getCurrentIndex,
     } = carouselController;
 
-    const { run, pause } = useAutoPlay({
+    const { start, pause } = useAutoPlay({
         autoPlay,
         autoPlayInterval,
         autoPlayReverse,
@@ -95,9 +100,9 @@ function Carousel<T>(
     }, [sharedPreIndex, sharedIndex, computedIndex, onScrollEnd]);
 
     const scrollViewGestureOnScrollEnd = React.useCallback(() => {
-        run();
+        start();
         _onScrollEnd();
-    }, [_onScrollEnd, run]);
+    }, [_onScrollEnd, start]);
 
     const goToIndex = React.useCallback(
         (i: number, animated?: boolean) => {
@@ -113,8 +118,9 @@ function Carousel<T>(
             prev,
             getCurrentIndex,
             goToIndex,
+            scrollTo: carouselController.scrollTo,
         }),
-        [getCurrentIndex, goToIndex, next, prev]
+        [getCurrentIndex, goToIndex, next, prev, carouselController.scrollTo]
     );
 
     const visibleRanges = useVisibleRanges({
@@ -143,13 +149,26 @@ function Carousel<T>(
                     index={i}
                     handlerOffsetX={offsetX}
                     visibleRanges={visibleRanges}
-                    animationStyle={layoutConfig}
+                    animationStyle={customAnimation || layoutConfig}
                 >
-                    {renderItem(item, realIndex)}
+                    {({ animationValue }) =>
+                        renderItem({
+                            item,
+                            index: realIndex,
+                            animationValue,
+                        })
+                    }
                 </BaseLayout>
             );
         },
-        [data, offsetX, renderItem, layoutConfig, visibleRanges]
+        [
+            data,
+            offsetX,
+            visibleRanges,
+            renderItem,
+            layoutConfig,
+            customAnimation,
+        ]
     );
 
     return (