react-native-reanimated-carousel 2.0.0 → 2.1.0

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/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/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>;
     /**
@@ -110,10 +91,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
      */
@@ -151,4 +141,9 @@ export interface ICarouselInstance {
      */
     goToIndex: (index: number, animated?: boolean) => void;
 }
-export {};
+export interface CarouselRenderItemInfo<ItemT> {
+    item: ItemT;
+    index: number;
+    animationValue: Animated.SharedValue<number>;
+}
+export declare type CarouselRenderItem<ItemT> = (info: CarouselRenderItemInfo<ItemT>) => React.ReactElement;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-native-reanimated-carousel",
-    "version": "2.0.0",
+    "version": "2.1.0",
     "description": "Simple carousel component.fully implemented using Reanimated 2.Infinitely scrolling, very smooth.",
     "main": "lib/commonjs/index",
     "module": "lib/module/index",
@@ -22,12 +22,16 @@
         "!**/__mocks__"
     ],
     "scripts": {
+        "git": "node scripts/makegif.js ",
         "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",
+        "android": "yarn --cwd example android",
+        "android:pretty": "yarn --cwd example android:pretty",
         "pods": "cd example && pod-install --quiet",
         "bootstrap": "yarn example && yarn && yarn pods"
     },

package/src/Carousel.tsx

@@ -38,6 +38,7 @@ function Carousel<T>(
         onSnapToItem,
         onScrollBegin,
         onProgressChange,
+        customAnimation,
     } = props;
 
     const commonVariables = useCommonVariables(props);
@@ -143,13 +144,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 (

package/src/hooks/useInitProps.ts

@@ -49,7 +49,6 @@ export function useInitProps<T>(
         props.modeConfig.showLength =
             props.modeConfig?.showLength ?? data.length - 1;
     }
-
     return {
         ...props,
         defaultIndex,

package/src/layouts/BaseLayout.tsx

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

package/src/layouts/parallax.ts

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

package/src/layouts/stack.ts

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