react-native-reanimated-carousel 1.1.0 → 1.2.0-beta.0

package/lib/commonjs/layouts/ParallaxLayout.js

@@ -7,8 +7,6 @@ exports.ParallaxLayout = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactNative = require("react-native");
-
 var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
 
 var _useOffsetX = require("../hooks/useOffsetX");
@@ -40,13 +38,6 @@ const ParallaxLayout = props => {
 
   const size = _react.default.useMemo(() => vertical ? height : width, [vertical, width, height]);
 
-  const layoutStyle = _react.default.useMemo(() => {
-    return {
-      width: !vertical ? width * parallaxScrollingScale : `${100 * parallaxScrollingScale}%`,
-      height: vertical ? height * parallaxScrollingScale : `${100 * parallaxScrollingScale}%`
-    };
-  }, [vertical, parallaxScrollingScale, width, height]);
-
   const x = (0, _useOffsetX.useOffsetX)({
     handlerOffsetX,
     index,
@@ -55,27 +46,15 @@ const ParallaxLayout = props => {
     loop
   }, visibleRanges);
   const offsetXStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
-    const baseTranslateX = x.value - index * size;
-    const padding = (1 - parallaxScrollingScale) * size;
-    const extraOffset = index * padding + padding / 2;
-    const zIndex = (0, _reactNativeReanimated.interpolate)(x.value, [-size, 0, size], [0, size, 0], _reactNativeReanimated.Extrapolate.CLAMP);
-    const scale = (0, _reactNativeReanimated.interpolate)(x.value, [-size, 0, size], [parallaxScrollingScale, 1, parallaxScrollingScale], _reactNativeReanimated.Extrapolate.CLAMP);
-    const relatedTranslateX = (0, _reactNativeReanimated.interpolate)(x.value, [-size, 0, size], [parallaxScrollingOffset, 0, -parallaxScrollingOffset], _reactNativeReanimated.Extrapolate.CLAMP);
-
-    if (vertical) {
-      return {
-        transform: [{
-          translateY: baseTranslateX + extraOffset + relatedTranslateX
-        }, {
-          scale
-        }],
-        zIndex
-      };
-    }
-
+    const value = x.value / size;
+    const translate = (0, _reactNativeReanimated.interpolate)(value, [-1, 0, 1], [-size + parallaxScrollingOffset, 0, size - parallaxScrollingOffset], _reactNativeReanimated.Extrapolate.CLAMP);
+    const zIndex = (0, _reactNativeReanimated.interpolate)(value, [-1, 0, 1], [0, size, 0], _reactNativeReanimated.Extrapolate.CLAMP);
+    const scale = (0, _reactNativeReanimated.interpolate)(value, [-1, 0, 1], [Math.pow(parallaxScrollingScale, 2), parallaxScrollingScale, Math.pow(parallaxScrollingScale, 2)], _reactNativeReanimated.Extrapolate.CLAMP);
     return {
-      transform: [{
-        translateX: baseTranslateX + extraOffset + relatedTranslateX
+      transform: [vertical ? {
+        translateY: translate
+      } : {
+        translateX: translate
       }, {
         scale
       }],
@@ -91,17 +70,16 @@ const ParallaxLayout = props => {
     (0, _reactNativeReanimated.runOnJS)(updateView)(visibleRanges.value.negativeRange, visibleRanges.value.positiveRange);
   }, [visibleRanges.value]);
   return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
-    style: [layoutStyle, styles.container, offsetXStyle]
+    style: [{
+      width,
+      height,
+      position: 'absolute',
+      alignSelf: 'center'
+    }, offsetXStyle]
   }, /*#__PURE__*/_react.default.createElement(_LazyView.LazyView, {
     shouldUpdate: shouldUpdate
   }, children));
 };
 
 exports.ParallaxLayout = ParallaxLayout;
-
-const styles = _reactNative.StyleSheet.create({
-  container: {
-    alignSelf: 'center'
-  }
-});
 //# sourceMappingURL=ParallaxLayout.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["ParallaxLayout.tsx"],"names":["ParallaxLayout","props","handlerOffsetX","parallaxScrollingOffset","parallaxScrollingScale","index","width","height","loop","data","children","visibleRanges","vertical","shouldUpdate","setShouldUpdate","React","useState","size","useMemo","layoutStyle","x","offsetXStyle","baseTranslateX","value","padding","extraOffset","zIndex","Extrapolate","CLAMP","scale","relatedTranslateX","transform","translateY","translateX","updateView","useCallback","negativeRange","positiveRange","styles","container","StyleSheet","create","alignSelf"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { StyleSheet } from 'react-native';\nimport Animated, {\n    Extrapolate,\n    interpolate,\n    runOnJS,\n    useAnimatedReaction,\n    useAnimatedStyle,\n} from 'react-native-reanimated';\nimport { useOffsetX } from '../hooks/useOffsetX';\nimport type { IVisibleRanges } from '../hooks/useVisibleRanges';\nimport { LazyView } from '../LazyView';\n\nexport const ParallaxLayout: React.FC<{\n    loop?: boolean;\n    parallaxScrollingOffset?: number;\n    parallaxScrollingScale?: number;\n    handlerOffsetX: Animated.SharedValue<number>;\n    index: number;\n    width: number;\n    height: number;\n    data: unknown[];\n    visibleRanges: IVisibleRanges;\n    vertical?: boolean;\n}> = (props) => {\n    const {\n        handlerOffsetX,\n        parallaxScrollingOffset = 100,\n        parallaxScrollingScale = 0.8,\n        index,\n        width,\n        height,\n        loop,\n        data,\n        children,\n        visibleRanges,\n        vertical,\n    } = props;\n\n    const [shouldUpdate, setShouldUpdate] = React.useState(false);\n\n    const size = React.useMemo(\n        () => (vertical ? height : width),\n        [vertical, width, height]\n    );\n\n    const layoutStyle = React.useMemo(() => {\n        return {\n            width: !vertical\n                ? width * parallaxScrollingScale\n                : `${100 * parallaxScrollingScale}%`,\n            height: vertical\n                ? height * parallaxScrollingScale\n                : `${100 * parallaxScrollingScale}%`,\n        };\n    }, [vertical, parallaxScrollingScale, width, height]);\n\n    const x = useOffsetX(\n        {\n            handlerOffsetX,\n            index,\n            size,\n            data,\n            loop,\n        },\n        visibleRanges\n    );\n\n    const offsetXStyle = useAnimatedStyle(() => {\n        const baseTranslateX = x.value - index * size;\n        const padding = (1 - parallaxScrollingScale) * size;\n        const extraOffset = index * padding + padding / 2;\n\n        const zIndex = interpolate(\n            x.value,\n            [-size, 0, size],\n            [0, size, 0],\n            Extrapolate.CLAMP\n        );\n        const scale = interpolate(\n            x.value,\n            [-size, 0, size],\n            [parallaxScrollingScale, 1, parallaxScrollingScale],\n            Extrapolate.CLAMP\n        );\n        const relatedTranslateX = interpolate(\n            x.value,\n            [-size, 0, size],\n            [parallaxScrollingOffset, 0, -parallaxScrollingOffset],\n            Extrapolate.CLAMP\n        );\n\n        if (vertical) {\n            return {\n                transform: [\n                    {\n                        translateY:\n                            baseTranslateX + extraOffset + relatedTranslateX,\n                    },\n                    { scale },\n                ],\n                zIndex,\n            };\n        }\n\n        return {\n            transform: [\n                {\n                    translateX:\n                        baseTranslateX + extraOffset + relatedTranslateX,\n                },\n                { scale },\n            ],\n            zIndex,\n        };\n    }, [loop, vertical, parallaxScrollingOffset]);\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 style={[layoutStyle, styles.container, offsetXStyle]}>\n            <LazyView shouldUpdate={shouldUpdate}>{children}</LazyView>\n        </Animated.View>\n    );\n};\n\nconst styles = StyleSheet.create({\n    container: {\n        alignSelf: 'center',\n    },\n});\n"]}
+{"version":3,"sources":["ParallaxLayout.tsx"],"names":["ParallaxLayout","props","handlerOffsetX","parallaxScrollingOffset","parallaxScrollingScale","index","width","height","loop","data","children","visibleRanges","vertical","shouldUpdate","setShouldUpdate","React","useState","size","useMemo","x","offsetXStyle","value","translate","Extrapolate","CLAMP","zIndex","scale","Math","pow","transform","translateY","translateX","updateView","useCallback","negativeRange","positiveRange","position","alignSelf"],"mappings":"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","sourcesContent":["import React from 'react';\nimport Animated, {\n    Extrapolate,\n    interpolate,\n    runOnJS,\n    useAnimatedReaction,\n    useAnimatedStyle,\n} from 'react-native-reanimated';\nimport { useOffsetX } from '../hooks/useOffsetX';\nimport type { IVisibleRanges } from '../hooks/useVisibleRanges';\nimport { LazyView } from '../LazyView';\n\nexport const ParallaxLayout: React.FC<{\n    loop?: boolean;\n    parallaxScrollingOffset?: number;\n    parallaxScrollingScale?: number;\n    handlerOffsetX: Animated.SharedValue<number>;\n    index: number;\n    width: number;\n    height: number;\n    data: unknown[];\n    visibleRanges: IVisibleRanges;\n    vertical?: boolean;\n}> = (props) => {\n    const {\n        handlerOffsetX,\n        parallaxScrollingOffset = 100,\n        parallaxScrollingScale = 0.8,\n        index,\n        width,\n        height,\n        loop,\n        data,\n        children,\n        visibleRanges,\n        vertical,\n    } = props;\n\n    const [shouldUpdate, setShouldUpdate] = React.useState(false);\n\n    const size = React.useMemo(\n        () => (vertical ? height : width),\n        [vertical, width, height]\n    );\n\n    const x = useOffsetX(\n        {\n            handlerOffsetX,\n            index,\n            size,\n            data,\n            loop,\n        },\n        visibleRanges\n    );\n\n    const offsetXStyle = useAnimatedStyle(() => {\n        const value = x.value / size;\n\n        const translate = interpolate(\n            value,\n            [-1, 0, 1],\n            [\n                -size + parallaxScrollingOffset,\n                0,\n                size - parallaxScrollingOffset,\n            ],\n            Extrapolate.CLAMP\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    }, [loop, vertical, parallaxScrollingOffset]);\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,\n                    height,\n                    position: 'absolute',\n                    alignSelf: 'center',\n                },\n                offsetXStyle,\n            ]}\n        >\n            <LazyView shouldUpdate={shouldUpdate}>{children}</LazyView>\n        </Animated.View>\n    );\n};\n"]}

package/lib/commonjs/layouts/StackLayout.js

@@ -178,18 +178,13 @@ const StackLayout = props => {
     style: [{
       width,
       height,
-      position: 'absolute'
-    }, offsetXStyle, styles.container]
+      position: 'absolute',
+      alignSelf: 'center'
+    }, offsetXStyle]
   }, /*#__PURE__*/_react.default.createElement(_LazyView.LazyView, {
     shouldUpdate: shouldUpdate
   }, children));
 };
 
 exports.StackLayout = StackLayout;
-
-const styles = _reactNative.StyleSheet.create({
-  container: {
-    alignSelf: 'center'
-  }
-});
 //# sourceMappingURL=StackLayout.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["StackLayout.tsx"],"names":["window","Dimensions","get","StackLayout","props","index","width","height","loop","data","children","visibleRanges","vertical","handlerOffsetX","showLength","length","shouldUpdate","setShouldUpdate","React","useState","size","animationConfig","mode","snapDirection","moveSize","stackInterval","scaleInterval","opacityInterval","rotateZDeg","x","type","viewCount","Error","offsetXStyle","easeInOutCubic","v","Math","pow","value","page","floor","abs","diff","VALID_LENGTH","transform","zIndex","inputRange","opacity","Number","MIN_VALUE","styles","translateX","scale","rotateZ","translateY","Extrapolate","CLAMP","push","updateView","useCallback","negativeRange","positiveRange","position","container","StyleSheet","create","alignSelf"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n    Dimensions,\n    StyleSheet,\n    TransformsStyle,\n    ViewStyle,\n} from 'react-native';\nimport Animated, {\n    Extrapolate,\n    interpolate,\n    runOnJS,\n    useAnimatedReaction,\n    useAnimatedStyle,\n} from 'react-native-reanimated';\nimport { useOffsetX } from '../hooks/useOffsetX';\nimport type { IVisibleRanges } from '../hooks/useVisibleRanges';\nimport { LazyView } from '../LazyView';\n\nconst window = Dimensions.get('window');\n\nexport type StackAnimationConfig = {\n    mode: 'vertical' | 'horizontal';\n    moveSize?: number;\n    stackInterval?: number;\n    scaleInterval?: number;\n    opacityInterval?: number;\n    rotateZDeg?: number;\n    snapDirection?: 'left' | 'right';\n};\n\nexport const StackLayout: React.FC<{\n    loop?: boolean;\n    handlerOffsetX: Animated.SharedValue<number>;\n    index: number;\n    width: number;\n    height: number;\n    showLength?: number;\n    data: unknown[];\n    visibleRanges: IVisibleRanges;\n    vertical?: boolean;\n    animationConfig?: StackAnimationConfig;\n}> = (props) => {\n    const {\n        index,\n        width,\n        height,\n        loop,\n        data,\n        children,\n        visibleRanges,\n        vertical,\n        handlerOffsetX,\n        showLength = data.length - 1,\n    } = props;\n\n    const [shouldUpdate, setShouldUpdate] = React.useState(false);\n\n    const size = vertical ? height : width;\n\n    const animationConfig: Required<StackAnimationConfig> = {\n        mode: 'vertical',\n        snapDirection: 'left',\n        moveSize: window.width,\n        stackInterval: 18,\n        scaleInterval: 0.04,\n        opacityInterval: 0.1,\n        rotateZDeg: 30,\n        ...props.animationConfig,\n    };\n\n    const x = useOffsetX(\n        {\n            handlerOffsetX,\n            index,\n            size,\n            data,\n            loop,\n            type:\n                animationConfig.snapDirection === 'left'\n                    ? 'negative'\n                    : 'positive',\n            viewCount: 1,\n        },\n        visibleRanges\n    );\n\n    if (showLength < 0 || showLength > data.length - 1) {\n        throw Error(\n            'The number of presentations should be 0 - (data.length - 1)'\n        );\n    }\n\n    const offsetXStyle = useAnimatedStyle(() => {\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        let value = x.value / size;\n        const page = Math.floor(Math.abs(value));\n        const diff = Math.abs(value) % 1;\n        value =\n            value < 0\n                ? -(page + easeInOutCubic(diff))\n                : page + easeInOutCubic(diff);\n\n        const VALID_LENGTH = showLength - 1;\n        const transform: TransformsStyle['transform'] = [];\n\n        let zIndex: number;\n        let inputRange: [number, number, number];\n        let opacity: number;\n\n        if (animationConfig.snapDirection === 'left') {\n            inputRange = [-1, 0, VALID_LENGTH];\n\n            zIndex =\n                Math.floor(\n                    interpolate(\n                        value,\n                        [-1.5, -1, -1 + Number.MIN_VALUE, 0, VALID_LENGTH],\n                        [\n                            Number.MIN_VALUE,\n                            VALID_LENGTH,\n                            VALID_LENGTH,\n                            VALID_LENGTH - 1,\n                            -1,\n                        ]\n                    ) * 10000\n                ) / 100;\n\n            opacity = interpolate(\n                value,\n                [-1, 0, VALID_LENGTH - 1, VALID_LENGTH],\n                [\n                    0.25,\n                    1,\n                    1 - (VALID_LENGTH - 1) * animationConfig.opacityInterval,\n                    0.25,\n                ]\n            );\n        } else if (animationConfig.snapDirection === 'right') {\n            inputRange = [-VALID_LENGTH, 0, 1];\n\n            zIndex =\n                Math.floor(\n                    interpolate(\n                        value,\n                        [-VALID_LENGTH, 0, 1 - Number.MIN_VALUE, 1, 1.5],\n                        [\n                            1,\n                            VALID_LENGTH - 1,\n                            VALID_LENGTH,\n                            VALID_LENGTH,\n                            Number.MIN_VALUE,\n                        ]\n                    ) * 10000\n                ) / 100;\n            opacity = interpolate(\n                value,\n                [-VALID_LENGTH, 1 - VALID_LENGTH, 0, 1],\n                [\n                    0.25,\n                    1 - (VALID_LENGTH - 1) * animationConfig.opacityInterval,\n                    1,\n                    0.25,\n                ]\n            );\n        } else {\n            throw Error(\n                'snapDirection snapDirection must be set to either left or right'\n            );\n        }\n\n        const styles: ViewStyle = {\n            transform,\n            zIndex,\n            opacity,\n        };\n\n        if (animationConfig.mode === 'vertical') {\n            const {\n                snapDirection,\n                moveSize,\n                rotateZDeg,\n                stackInterval,\n                scaleInterval,\n            } = animationConfig;\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 - VALID_LENGTH * 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, VALID_LENGTH * 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 - VALID_LENGTH * 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                    [VALID_LENGTH * 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\n        if (animationConfig.mode === 'horizontal') {\n            const {\n                snapDirection,\n                moveSize,\n                rotateZDeg,\n                stackInterval,\n                scaleInterval,\n            } = animationConfig;\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, VALID_LENGTH * stackInterval],\n                    Extrapolate.CLAMP\n                );\n                scale = interpolate(\n                    value,\n                    inputRange,\n                    [1, 1, 1 - VALID_LENGTH * 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                    [-VALID_LENGTH * stackInterval, 0, moveSize],\n                    Extrapolate.CLAMP\n                );\n                scale = interpolate(\n                    value,\n                    inputRange,\n                    [1 - VALID_LENGTH * 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\n        return styles;\n    }, [loop, vertical, showLength, animationConfig]);\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,\n                    height,\n                    position: 'absolute',\n                },\n                offsetXStyle,\n                styles.container,\n            ]}\n        >\n            <LazyView shouldUpdate={shouldUpdate}>{children}</LazyView>\n        </Animated.View>\n    );\n};\n\nconst styles = StyleSheet.create({\n    container: {\n        alignSelf: 'center',\n    },\n});\n"]}
+{"version":3,"sources":["StackLayout.tsx"],"names":["window","Dimensions","get","StackLayout","props","index","width","height","loop","data","children","visibleRanges","vertical","handlerOffsetX","showLength","length","shouldUpdate","setShouldUpdate","React","useState","size","animationConfig","mode","snapDirection","moveSize","stackInterval","scaleInterval","opacityInterval","rotateZDeg","x","type","viewCount","Error","offsetXStyle","easeInOutCubic","v","Math","pow","value","page","floor","abs","diff","VALID_LENGTH","transform","zIndex","inputRange","opacity","Number","MIN_VALUE","styles","translateX","scale","rotateZ","translateY","Extrapolate","CLAMP","push","updateView","useCallback","negativeRange","positiveRange","position","alignSelf"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Dimensions, TransformsStyle, ViewStyle } from 'react-native';\nimport Animated, {\n    Extrapolate,\n    interpolate,\n    runOnJS,\n    useAnimatedReaction,\n    useAnimatedStyle,\n} from 'react-native-reanimated';\nimport { useOffsetX } from '../hooks/useOffsetX';\nimport type { IVisibleRanges } from '../hooks/useVisibleRanges';\nimport { LazyView } from '../LazyView';\n\nconst window = Dimensions.get('window');\n\nexport type StackAnimationConfig = {\n    mode: 'vertical' | 'horizontal';\n    moveSize?: number;\n    stackInterval?: number;\n    scaleInterval?: number;\n    opacityInterval?: number;\n    rotateZDeg?: number;\n    snapDirection?: 'left' | 'right';\n};\n\nexport const StackLayout: React.FC<{\n    loop?: boolean;\n    handlerOffsetX: Animated.SharedValue<number>;\n    index: number;\n    width: number;\n    height: number;\n    showLength?: number;\n    data: unknown[];\n    visibleRanges: IVisibleRanges;\n    vertical?: boolean;\n    animationConfig?: StackAnimationConfig;\n}> = (props) => {\n    const {\n        index,\n        width,\n        height,\n        loop,\n        data,\n        children,\n        visibleRanges,\n        vertical,\n        handlerOffsetX,\n        showLength = data.length - 1,\n    } = props;\n\n    const [shouldUpdate, setShouldUpdate] = React.useState(false);\n\n    const size = vertical ? height : width;\n\n    const animationConfig: Required<StackAnimationConfig> = {\n        mode: 'vertical',\n        snapDirection: 'left',\n        moveSize: window.width,\n        stackInterval: 18,\n        scaleInterval: 0.04,\n        opacityInterval: 0.1,\n        rotateZDeg: 30,\n        ...props.animationConfig,\n    };\n\n    const x = useOffsetX(\n        {\n            handlerOffsetX,\n            index,\n            size,\n            data,\n            loop,\n            type:\n                animationConfig.snapDirection === 'left'\n                    ? 'negative'\n                    : 'positive',\n            viewCount: 1,\n        },\n        visibleRanges\n    );\n\n    if (showLength < 0 || showLength > data.length - 1) {\n        throw Error(\n            'The number of presentations should be 0 - (data.length - 1)'\n        );\n    }\n\n    const offsetXStyle = useAnimatedStyle(() => {\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        let value = x.value / size;\n        const page = Math.floor(Math.abs(value));\n        const diff = Math.abs(value) % 1;\n        value =\n            value < 0\n                ? -(page + easeInOutCubic(diff))\n                : page + easeInOutCubic(diff);\n\n        const VALID_LENGTH = showLength - 1;\n        const transform: TransformsStyle['transform'] = [];\n\n        let zIndex: number;\n        let inputRange: [number, number, number];\n        let opacity: number;\n\n        if (animationConfig.snapDirection === 'left') {\n            inputRange = [-1, 0, VALID_LENGTH];\n\n            zIndex =\n                Math.floor(\n                    interpolate(\n                        value,\n                        [-1.5, -1, -1 + Number.MIN_VALUE, 0, VALID_LENGTH],\n                        [\n                            Number.MIN_VALUE,\n                            VALID_LENGTH,\n                            VALID_LENGTH,\n                            VALID_LENGTH - 1,\n                            -1,\n                        ]\n                    ) * 10000\n                ) / 100;\n\n            opacity = interpolate(\n                value,\n                [-1, 0, VALID_LENGTH - 1, VALID_LENGTH],\n                [\n                    0.25,\n                    1,\n                    1 - (VALID_LENGTH - 1) * animationConfig.opacityInterval,\n                    0.25,\n                ]\n            );\n        } else if (animationConfig.snapDirection === 'right') {\n            inputRange = [-VALID_LENGTH, 0, 1];\n\n            zIndex =\n                Math.floor(\n                    interpolate(\n                        value,\n                        [-VALID_LENGTH, 0, 1 - Number.MIN_VALUE, 1, 1.5],\n                        [\n                            1,\n                            VALID_LENGTH - 1,\n                            VALID_LENGTH,\n                            VALID_LENGTH,\n                            Number.MIN_VALUE,\n                        ]\n                    ) * 10000\n                ) / 100;\n            opacity = interpolate(\n                value,\n                [-VALID_LENGTH, 1 - VALID_LENGTH, 0, 1],\n                [\n                    0.25,\n                    1 - (VALID_LENGTH - 1) * animationConfig.opacityInterval,\n                    1,\n                    0.25,\n                ]\n            );\n        } else {\n            throw Error(\n                'snapDirection snapDirection must be set to either left or right'\n            );\n        }\n\n        const styles: ViewStyle = {\n            transform,\n            zIndex,\n            opacity,\n        };\n\n        if (animationConfig.mode === 'vertical') {\n            const {\n                snapDirection,\n                moveSize,\n                rotateZDeg,\n                stackInterval,\n                scaleInterval,\n            } = animationConfig;\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 - VALID_LENGTH * 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, VALID_LENGTH * 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 - VALID_LENGTH * 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                    [VALID_LENGTH * 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\n        if (animationConfig.mode === 'horizontal') {\n            const {\n                snapDirection,\n                moveSize,\n                rotateZDeg,\n                stackInterval,\n                scaleInterval,\n            } = animationConfig;\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, VALID_LENGTH * stackInterval],\n                    Extrapolate.CLAMP\n                );\n                scale = interpolate(\n                    value,\n                    inputRange,\n                    [1, 1, 1 - VALID_LENGTH * 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                    [-VALID_LENGTH * stackInterval, 0, moveSize],\n                    Extrapolate.CLAMP\n                );\n                scale = interpolate(\n                    value,\n                    inputRange,\n                    [1 - VALID_LENGTH * 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\n        return styles;\n    }, [loop, vertical, showLength, animationConfig]);\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,\n                    height,\n                    position: 'absolute',\n                    alignSelf: 'center',\n                },\n                offsetXStyle,\n            ]}\n        >\n            <LazyView shouldUpdate={shouldUpdate}>{children}</LazyView>\n        </Animated.View>\n    );\n};\n"]}

package/lib/module/layouts/ParallaxLayout.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { StyleSheet } from 'react-native';
 import Animated, { Extrapolate, interpolate, runOnJS, useAnimatedReaction, useAnimatedStyle } from 'react-native-reanimated';
 import { useOffsetX } from '../hooks/useOffsetX';
 import { LazyView } from '../LazyView';
@@ -19,12 +18,6 @@ export const ParallaxLayout = props => {
   } = props;
   const [shouldUpdate, setShouldUpdate] = React.useState(false);
   const size = React.useMemo(() => vertical ? height : width, [vertical, width, height]);
-  const layoutStyle = React.useMemo(() => {
-    return {
-      width: !vertical ? width * parallaxScrollingScale : `${100 * parallaxScrollingScale}%`,
-      height: vertical ? height * parallaxScrollingScale : `${100 * parallaxScrollingScale}%`
-    };
-  }, [vertical, parallaxScrollingScale, width, height]);
   const x = useOffsetX({
     handlerOffsetX,
     index,
@@ -33,27 +26,15 @@ export const ParallaxLayout = props => {
     loop
   }, visibleRanges);
   const offsetXStyle = useAnimatedStyle(() => {
-    const baseTranslateX = x.value - index * size;
-    const padding = (1 - parallaxScrollingScale) * size;
-    const extraOffset = index * padding + padding / 2;
-    const zIndex = interpolate(x.value, [-size, 0, size], [0, size, 0], Extrapolate.CLAMP);
-    const scale = interpolate(x.value, [-size, 0, size], [parallaxScrollingScale, 1, parallaxScrollingScale], Extrapolate.CLAMP);
-    const relatedTranslateX = interpolate(x.value, [-size, 0, size], [parallaxScrollingOffset, 0, -parallaxScrollingOffset], Extrapolate.CLAMP);
-
-    if (vertical) {
-      return {
-        transform: [{
-          translateY: baseTranslateX + extraOffset + relatedTranslateX
-        }, {
-          scale
-        }],
-        zIndex
-      };
-    }
-
+    const value = x.value / size;
+    const translate = interpolate(value, [-1, 0, 1], [-size + parallaxScrollingOffset, 0, size - parallaxScrollingOffset], Extrapolate.CLAMP);
+    const zIndex = interpolate(value, [-1, 0, 1], [0, size, 0], Extrapolate.CLAMP);
+    const scale = interpolate(value, [-1, 0, 1], [Math.pow(parallaxScrollingScale, 2), parallaxScrollingScale, Math.pow(parallaxScrollingScale, 2)], Extrapolate.CLAMP);
     return {
-      transform: [{
-        translateX: baseTranslateX + extraOffset + relatedTranslateX
+      transform: [vertical ? {
+        translateY: translate
+      } : {
+        translateX: translate
       }, {
         scale
       }],
@@ -67,14 +48,14 @@ export const ParallaxLayout = props => {
     runOnJS(updateView)(visibleRanges.value.negativeRange, visibleRanges.value.positiveRange);
   }, [visibleRanges.value]);
   return /*#__PURE__*/React.createElement(Animated.View, {
-    style: [layoutStyle, styles.container, offsetXStyle]
+    style: [{
+      width,
+      height,
+      position: 'absolute',
+      alignSelf: 'center'
+    }, offsetXStyle]
   }, /*#__PURE__*/React.createElement(LazyView, {
     shouldUpdate: shouldUpdate
   }, children));
 };
-const styles = StyleSheet.create({
-  container: {
-    alignSelf: 'center'
-  }
-});
 //# sourceMappingURL=ParallaxLayout.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["ParallaxLayout.tsx"],"names":["React","StyleSheet","Animated","Extrapolate","interpolate","runOnJS","useAnimatedReaction","useAnimatedStyle","useOffsetX","LazyView","ParallaxLayout","props","handlerOffsetX","parallaxScrollingOffset","parallaxScrollingScale","index","width","height","loop","data","children","visibleRanges","vertical","shouldUpdate","setShouldUpdate","useState","size","useMemo","layoutStyle","x","offsetXStyle","baseTranslateX","value","padding","extraOffset","zIndex","CLAMP","scale","relatedTranslateX","transform","translateY","translateX","updateView","useCallback","negativeRange","positiveRange","styles","container","create","alignSelf"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { StyleSheet } from 'react-native';\nimport Animated, {\n    Extrapolate,\n    interpolate,\n    runOnJS,\n    useAnimatedReaction,\n    useAnimatedStyle,\n} from 'react-native-reanimated';\nimport { useOffsetX } from '../hooks/useOffsetX';\nimport type { IVisibleRanges } from '../hooks/useVisibleRanges';\nimport { LazyView } from '../LazyView';\n\nexport const ParallaxLayout: React.FC<{\n    loop?: boolean;\n    parallaxScrollingOffset?: number;\n    parallaxScrollingScale?: number;\n    handlerOffsetX: Animated.SharedValue<number>;\n    index: number;\n    width: number;\n    height: number;\n    data: unknown[];\n    visibleRanges: IVisibleRanges;\n    vertical?: boolean;\n}> = (props) => {\n    const {\n        handlerOffsetX,\n        parallaxScrollingOffset = 100,\n        parallaxScrollingScale = 0.8,\n        index,\n        width,\n        height,\n        loop,\n        data,\n        children,\n        visibleRanges,\n        vertical,\n    } = props;\n\n    const [shouldUpdate, setShouldUpdate] = React.useState(false);\n\n    const size = React.useMemo(\n        () => (vertical ? height : width),\n        [vertical, width, height]\n    );\n\n    const layoutStyle = React.useMemo(() => {\n        return {\n            width: !vertical\n                ? width * parallaxScrollingScale\n                : `${100 * parallaxScrollingScale}%`,\n            height: vertical\n                ? height * parallaxScrollingScale\n                : `${100 * parallaxScrollingScale}%`,\n        };\n    }, [vertical, parallaxScrollingScale, width, height]);\n\n    const x = useOffsetX(\n        {\n            handlerOffsetX,\n            index,\n            size,\n            data,\n            loop,\n        },\n        visibleRanges\n    );\n\n    const offsetXStyle = useAnimatedStyle(() => {\n        const baseTranslateX = x.value - index * size;\n        const padding = (1 - parallaxScrollingScale) * size;\n        const extraOffset = index * padding + padding / 2;\n\n        const zIndex = interpolate(\n            x.value,\n            [-size, 0, size],\n            [0, size, 0],\n            Extrapolate.CLAMP\n        );\n        const scale = interpolate(\n            x.value,\n            [-size, 0, size],\n            [parallaxScrollingScale, 1, parallaxScrollingScale],\n            Extrapolate.CLAMP\n        );\n        const relatedTranslateX = interpolate(\n            x.value,\n            [-size, 0, size],\n            [parallaxScrollingOffset, 0, -parallaxScrollingOffset],\n            Extrapolate.CLAMP\n        );\n\n        if (vertical) {\n            return {\n                transform: [\n                    {\n                        translateY:\n                            baseTranslateX + extraOffset + relatedTranslateX,\n                    },\n                    { scale },\n                ],\n                zIndex,\n            };\n        }\n\n        return {\n            transform: [\n                {\n                    translateX:\n                        baseTranslateX + extraOffset + relatedTranslateX,\n                },\n                { scale },\n            ],\n            zIndex,\n        };\n    }, [loop, vertical, parallaxScrollingOffset]);\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 style={[layoutStyle, styles.container, offsetXStyle]}>\n            <LazyView shouldUpdate={shouldUpdate}>{children}</LazyView>\n        </Animated.View>\n    );\n};\n\nconst styles = StyleSheet.create({\n    container: {\n        alignSelf: 'center',\n    },\n});\n"]}
+{"version":3,"sources":["ParallaxLayout.tsx"],"names":["React","Animated","Extrapolate","interpolate","runOnJS","useAnimatedReaction","useAnimatedStyle","useOffsetX","LazyView","ParallaxLayout","props","handlerOffsetX","parallaxScrollingOffset","parallaxScrollingScale","index","width","height","loop","data","children","visibleRanges","vertical","shouldUpdate","setShouldUpdate","useState","size","useMemo","x","offsetXStyle","value","translate","CLAMP","zIndex","scale","Math","pow","transform","translateY","translateX","updateView","useCallback","negativeRange","positiveRange","position","alignSelf"],"mappings":"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","sourcesContent":["import React from 'react';\nimport Animated, {\n    Extrapolate,\n    interpolate,\n    runOnJS,\n    useAnimatedReaction,\n    useAnimatedStyle,\n} from 'react-native-reanimated';\nimport { useOffsetX } from '../hooks/useOffsetX';\nimport type { IVisibleRanges } from '../hooks/useVisibleRanges';\nimport { LazyView } from '../LazyView';\n\nexport const ParallaxLayout: React.FC<{\n    loop?: boolean;\n    parallaxScrollingOffset?: number;\n    parallaxScrollingScale?: number;\n    handlerOffsetX: Animated.SharedValue<number>;\n    index: number;\n    width: number;\n    height: number;\n    data: unknown[];\n    visibleRanges: IVisibleRanges;\n    vertical?: boolean;\n}> = (props) => {\n    const {\n        handlerOffsetX,\n        parallaxScrollingOffset = 100,\n        parallaxScrollingScale = 0.8,\n        index,\n        width,\n        height,\n        loop,\n        data,\n        children,\n        visibleRanges,\n        vertical,\n    } = props;\n\n    const [shouldUpdate, setShouldUpdate] = React.useState(false);\n\n    const size = React.useMemo(\n        () => (vertical ? height : width),\n        [vertical, width, height]\n    );\n\n    const x = useOffsetX(\n        {\n            handlerOffsetX,\n            index,\n            size,\n            data,\n            loop,\n        },\n        visibleRanges\n    );\n\n    const offsetXStyle = useAnimatedStyle(() => {\n        const value = x.value / size;\n\n        const translate = interpolate(\n            value,\n            [-1, 0, 1],\n            [\n                -size + parallaxScrollingOffset,\n                0,\n                size - parallaxScrollingOffset,\n            ],\n            Extrapolate.CLAMP\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    }, [loop, vertical, parallaxScrollingOffset]);\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,\n                    height,\n                    position: 'absolute',\n                    alignSelf: 'center',\n                },\n                offsetXStyle,\n            ]}\n        >\n            <LazyView shouldUpdate={shouldUpdate}>{children}</LazyView>\n        </Animated.View>\n    );\n};\n"]}

package/lib/module/layouts/StackLayout.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Dimensions, StyleSheet } from 'react-native';
+import { Dimensions } from 'react-native';
 import Animated, { Extrapolate, interpolate, runOnJS, useAnimatedReaction, useAnimatedStyle } from 'react-native-reanimated';
 import { useOffsetX } from '../hooks/useOffsetX';
 import { LazyView } from '../LazyView';
@@ -155,15 +155,11 @@ export const StackLayout = props => {
     style: [{
       width,
       height,
-      position: 'absolute'
-    }, offsetXStyle, styles.container]
+      position: 'absolute',
+      alignSelf: 'center'
+    }, offsetXStyle]
   }, /*#__PURE__*/React.createElement(LazyView, {
     shouldUpdate: shouldUpdate
   }, children));
 };
-const styles = StyleSheet.create({
-  container: {
-    alignSelf: 'center'
-  }
-});
 //# sourceMappingURL=StackLayout.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["StackLayout.tsx"],"names":["React","Dimensions","StyleSheet","Animated","Extrapolate","interpolate","runOnJS","useAnimatedReaction","useAnimatedStyle","useOffsetX","LazyView","window","get","StackLayout","props","index","width","height","loop","data","children","visibleRanges","vertical","handlerOffsetX","showLength","length","shouldUpdate","setShouldUpdate","useState","size","animationConfig","mode","snapDirection","moveSize","stackInterval","scaleInterval","opacityInterval","rotateZDeg","x","type","viewCount","Error","offsetXStyle","easeInOutCubic","v","Math","pow","value","page","floor","abs","diff","VALID_LENGTH","transform","zIndex","inputRange","opacity","Number","MIN_VALUE","styles","translateX","scale","rotateZ","translateY","CLAMP","push","updateView","useCallback","negativeRange","positiveRange","position","container","create","alignSelf"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n    Dimensions,\n    StyleSheet,\n    TransformsStyle,\n    ViewStyle,\n} from 'react-native';\nimport Animated, {\n    Extrapolate,\n    interpolate,\n    runOnJS,\n    useAnimatedReaction,\n    useAnimatedStyle,\n} from 'react-native-reanimated';\nimport { useOffsetX } from '../hooks/useOffsetX';\nimport type { IVisibleRanges } from '../hooks/useVisibleRanges';\nimport { LazyView } from '../LazyView';\n\nconst window = Dimensions.get('window');\n\nexport type StackAnimationConfig = {\n    mode: 'vertical' | 'horizontal';\n    moveSize?: number;\n    stackInterval?: number;\n    scaleInterval?: number;\n    opacityInterval?: number;\n    rotateZDeg?: number;\n    snapDirection?: 'left' | 'right';\n};\n\nexport const StackLayout: React.FC<{\n    loop?: boolean;\n    handlerOffsetX: Animated.SharedValue<number>;\n    index: number;\n    width: number;\n    height: number;\n    showLength?: number;\n    data: unknown[];\n    visibleRanges: IVisibleRanges;\n    vertical?: boolean;\n    animationConfig?: StackAnimationConfig;\n}> = (props) => {\n    const {\n        index,\n        width,\n        height,\n        loop,\n        data,\n        children,\n        visibleRanges,\n        vertical,\n        handlerOffsetX,\n        showLength = data.length - 1,\n    } = props;\n\n    const [shouldUpdate, setShouldUpdate] = React.useState(false);\n\n    const size = vertical ? height : width;\n\n    const animationConfig: Required<StackAnimationConfig> = {\n        mode: 'vertical',\n        snapDirection: 'left',\n        moveSize: window.width,\n        stackInterval: 18,\n        scaleInterval: 0.04,\n        opacityInterval: 0.1,\n        rotateZDeg: 30,\n        ...props.animationConfig,\n    };\n\n    const x = useOffsetX(\n        {\n            handlerOffsetX,\n            index,\n            size,\n            data,\n            loop,\n            type:\n                animationConfig.snapDirection === 'left'\n                    ? 'negative'\n                    : 'positive',\n            viewCount: 1,\n        },\n        visibleRanges\n    );\n\n    if (showLength < 0 || showLength > data.length - 1) {\n        throw Error(\n            'The number of presentations should be 0 - (data.length - 1)'\n        );\n    }\n\n    const offsetXStyle = useAnimatedStyle(() => {\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        let value = x.value / size;\n        const page = Math.floor(Math.abs(value));\n        const diff = Math.abs(value) % 1;\n        value =\n            value < 0\n                ? -(page + easeInOutCubic(diff))\n                : page + easeInOutCubic(diff);\n\n        const VALID_LENGTH = showLength - 1;\n        const transform: TransformsStyle['transform'] = [];\n\n        let zIndex: number;\n        let inputRange: [number, number, number];\n        let opacity: number;\n\n        if (animationConfig.snapDirection === 'left') {\n            inputRange = [-1, 0, VALID_LENGTH];\n\n            zIndex =\n                Math.floor(\n                    interpolate(\n                        value,\n                        [-1.5, -1, -1 + Number.MIN_VALUE, 0, VALID_LENGTH],\n                        [\n                            Number.MIN_VALUE,\n                            VALID_LENGTH,\n                            VALID_LENGTH,\n                            VALID_LENGTH - 1,\n                            -1,\n                        ]\n                    ) * 10000\n                ) / 100;\n\n            opacity = interpolate(\n                value,\n                [-1, 0, VALID_LENGTH - 1, VALID_LENGTH],\n                [\n                    0.25,\n                    1,\n                    1 - (VALID_LENGTH - 1) * animationConfig.opacityInterval,\n                    0.25,\n                ]\n            );\n        } else if (animationConfig.snapDirection === 'right') {\n            inputRange = [-VALID_LENGTH, 0, 1];\n\n            zIndex =\n                Math.floor(\n                    interpolate(\n                        value,\n                        [-VALID_LENGTH, 0, 1 - Number.MIN_VALUE, 1, 1.5],\n                        [\n                            1,\n                            VALID_LENGTH - 1,\n                            VALID_LENGTH,\n                            VALID_LENGTH,\n                            Number.MIN_VALUE,\n                        ]\n                    ) * 10000\n                ) / 100;\n            opacity = interpolate(\n                value,\n                [-VALID_LENGTH, 1 - VALID_LENGTH, 0, 1],\n                [\n                    0.25,\n                    1 - (VALID_LENGTH - 1) * animationConfig.opacityInterval,\n                    1,\n                    0.25,\n                ]\n            );\n        } else {\n            throw Error(\n                'snapDirection snapDirection must be set to either left or right'\n            );\n        }\n\n        const styles: ViewStyle = {\n            transform,\n            zIndex,\n            opacity,\n        };\n\n        if (animationConfig.mode === 'vertical') {\n            const {\n                snapDirection,\n                moveSize,\n                rotateZDeg,\n                stackInterval,\n                scaleInterval,\n            } = animationConfig;\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 - VALID_LENGTH * 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, VALID_LENGTH * 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 - VALID_LENGTH * 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                    [VALID_LENGTH * 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\n        if (animationConfig.mode === 'horizontal') {\n            const {\n                snapDirection,\n                moveSize,\n                rotateZDeg,\n                stackInterval,\n                scaleInterval,\n            } = animationConfig;\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, VALID_LENGTH * stackInterval],\n                    Extrapolate.CLAMP\n                );\n                scale = interpolate(\n                    value,\n                    inputRange,\n                    [1, 1, 1 - VALID_LENGTH * 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                    [-VALID_LENGTH * stackInterval, 0, moveSize],\n                    Extrapolate.CLAMP\n                );\n                scale = interpolate(\n                    value,\n                    inputRange,\n                    [1 - VALID_LENGTH * 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\n        return styles;\n    }, [loop, vertical, showLength, animationConfig]);\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,\n                    height,\n                    position: 'absolute',\n                },\n                offsetXStyle,\n                styles.container,\n            ]}\n        >\n            <LazyView shouldUpdate={shouldUpdate}>{children}</LazyView>\n        </Animated.View>\n    );\n};\n\nconst styles = StyleSheet.create({\n    container: {\n        alignSelf: 'center',\n    },\n});\n"]}
+{"version":3,"sources":["StackLayout.tsx"],"names":["React","Dimensions","Animated","Extrapolate","interpolate","runOnJS","useAnimatedReaction","useAnimatedStyle","useOffsetX","LazyView","window","get","StackLayout","props","index","width","height","loop","data","children","visibleRanges","vertical","handlerOffsetX","showLength","length","shouldUpdate","setShouldUpdate","useState","size","animationConfig","mode","snapDirection","moveSize","stackInterval","scaleInterval","opacityInterval","rotateZDeg","x","type","viewCount","Error","offsetXStyle","easeInOutCubic","v","Math","pow","value","page","floor","abs","diff","VALID_LENGTH","transform","zIndex","inputRange","opacity","Number","MIN_VALUE","styles","translateX","scale","rotateZ","translateY","CLAMP","push","updateView","useCallback","negativeRange","positiveRange","position","alignSelf"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Dimensions, TransformsStyle, ViewStyle } from 'react-native';\nimport Animated, {\n    Extrapolate,\n    interpolate,\n    runOnJS,\n    useAnimatedReaction,\n    useAnimatedStyle,\n} from 'react-native-reanimated';\nimport { useOffsetX } from '../hooks/useOffsetX';\nimport type { IVisibleRanges } from '../hooks/useVisibleRanges';\nimport { LazyView } from '../LazyView';\n\nconst window = Dimensions.get('window');\n\nexport type StackAnimationConfig = {\n    mode: 'vertical' | 'horizontal';\n    moveSize?: number;\n    stackInterval?: number;\n    scaleInterval?: number;\n    opacityInterval?: number;\n    rotateZDeg?: number;\n    snapDirection?: 'left' | 'right';\n};\n\nexport const StackLayout: React.FC<{\n    loop?: boolean;\n    handlerOffsetX: Animated.SharedValue<number>;\n    index: number;\n    width: number;\n    height: number;\n    showLength?: number;\n    data: unknown[];\n    visibleRanges: IVisibleRanges;\n    vertical?: boolean;\n    animationConfig?: StackAnimationConfig;\n}> = (props) => {\n    const {\n        index,\n        width,\n        height,\n        loop,\n        data,\n        children,\n        visibleRanges,\n        vertical,\n        handlerOffsetX,\n        showLength = data.length - 1,\n    } = props;\n\n    const [shouldUpdate, setShouldUpdate] = React.useState(false);\n\n    const size = vertical ? height : width;\n\n    const animationConfig: Required<StackAnimationConfig> = {\n        mode: 'vertical',\n        snapDirection: 'left',\n        moveSize: window.width,\n        stackInterval: 18,\n        scaleInterval: 0.04,\n        opacityInterval: 0.1,\n        rotateZDeg: 30,\n        ...props.animationConfig,\n    };\n\n    const x = useOffsetX(\n        {\n            handlerOffsetX,\n            index,\n            size,\n            data,\n            loop,\n            type:\n                animationConfig.snapDirection === 'left'\n                    ? 'negative'\n                    : 'positive',\n            viewCount: 1,\n        },\n        visibleRanges\n    );\n\n    if (showLength < 0 || showLength > data.length - 1) {\n        throw Error(\n            'The number of presentations should be 0 - (data.length - 1)'\n        );\n    }\n\n    const offsetXStyle = useAnimatedStyle(() => {\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        let value = x.value / size;\n        const page = Math.floor(Math.abs(value));\n        const diff = Math.abs(value) % 1;\n        value =\n            value < 0\n                ? -(page + easeInOutCubic(diff))\n                : page + easeInOutCubic(diff);\n\n        const VALID_LENGTH = showLength - 1;\n        const transform: TransformsStyle['transform'] = [];\n\n        let zIndex: number;\n        let inputRange: [number, number, number];\n        let opacity: number;\n\n        if (animationConfig.snapDirection === 'left') {\n            inputRange = [-1, 0, VALID_LENGTH];\n\n            zIndex =\n                Math.floor(\n                    interpolate(\n                        value,\n                        [-1.5, -1, -1 + Number.MIN_VALUE, 0, VALID_LENGTH],\n                        [\n                            Number.MIN_VALUE,\n                            VALID_LENGTH,\n                            VALID_LENGTH,\n                            VALID_LENGTH - 1,\n                            -1,\n                        ]\n                    ) * 10000\n                ) / 100;\n\n            opacity = interpolate(\n                value,\n                [-1, 0, VALID_LENGTH - 1, VALID_LENGTH],\n                [\n                    0.25,\n                    1,\n                    1 - (VALID_LENGTH - 1) * animationConfig.opacityInterval,\n                    0.25,\n                ]\n            );\n        } else if (animationConfig.snapDirection === 'right') {\n            inputRange = [-VALID_LENGTH, 0, 1];\n\n            zIndex =\n                Math.floor(\n                    interpolate(\n                        value,\n                        [-VALID_LENGTH, 0, 1 - Number.MIN_VALUE, 1, 1.5],\n                        [\n                            1,\n                            VALID_LENGTH - 1,\n                            VALID_LENGTH,\n                            VALID_LENGTH,\n                            Number.MIN_VALUE,\n                        ]\n                    ) * 10000\n                ) / 100;\n            opacity = interpolate(\n                value,\n                [-VALID_LENGTH, 1 - VALID_LENGTH, 0, 1],\n                [\n                    0.25,\n                    1 - (VALID_LENGTH - 1) * animationConfig.opacityInterval,\n                    1,\n                    0.25,\n                ]\n            );\n        } else {\n            throw Error(\n                'snapDirection snapDirection must be set to either left or right'\n            );\n        }\n\n        const styles: ViewStyle = {\n            transform,\n            zIndex,\n            opacity,\n        };\n\n        if (animationConfig.mode === 'vertical') {\n            const {\n                snapDirection,\n                moveSize,\n                rotateZDeg,\n                stackInterval,\n                scaleInterval,\n            } = animationConfig;\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 - VALID_LENGTH * 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, VALID_LENGTH * 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 - VALID_LENGTH * 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                    [VALID_LENGTH * 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\n        if (animationConfig.mode === 'horizontal') {\n            const {\n                snapDirection,\n                moveSize,\n                rotateZDeg,\n                stackInterval,\n                scaleInterval,\n            } = animationConfig;\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, VALID_LENGTH * stackInterval],\n                    Extrapolate.CLAMP\n                );\n                scale = interpolate(\n                    value,\n                    inputRange,\n                    [1, 1, 1 - VALID_LENGTH * 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                    [-VALID_LENGTH * stackInterval, 0, moveSize],\n                    Extrapolate.CLAMP\n                );\n                scale = interpolate(\n                    value,\n                    inputRange,\n                    [1 - VALID_LENGTH * 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\n        return styles;\n    }, [loop, vertical, showLength, animationConfig]);\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,\n                    height,\n                    position: 'absolute',\n                    alignSelf: 'center',\n                },\n                offsetXStyle,\n            ]}\n        >\n            <LazyView shouldUpdate={shouldUpdate}>{children}</LazyView>\n        </Animated.View>\n    );\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-reanimated-carousel",
-  "version": "1.1.0",
+  "version": "1.2.0-beta.0",
   "description": "Simple carousel component.fully implemented using Reanimated 2.Infinitely scrolling, very smooth.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/layouts/ParallaxLayout.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { StyleSheet } from 'react-native';
 import Animated, {
     Extrapolate,
     interpolate,
@@ -44,17 +43,6 @@ export const ParallaxLayout: React.FC<{
         [vertical, width, height]
     );
 
-    const layoutStyle = React.useMemo(() => {
-        return {
-            width: !vertical
-                ? width * parallaxScrollingScale
-                : `${100 * parallaxScrollingScale}%`,
-            height: vertical
-                ? height * parallaxScrollingScale
-                : `${100 * parallaxScrollingScale}%`,
-        };
-    }, [vertical, parallaxScrollingScale, width, height]);
-
     const x = useOffsetX(
         {
             handlerOffsetX,
@@ -67,49 +55,49 @@ export const ParallaxLayout: React.FC<{
     );
 
     const offsetXStyle = useAnimatedStyle(() => {
-        const baseTranslateX = x.value - index * size;
-        const padding = (1 - parallaxScrollingScale) * size;
-        const extraOffset = index * padding + padding / 2;
+        const value = x.value / size;
+
+        const translate = interpolate(
+            value,
+            [-1, 0, 1],
+            [
+                -size + parallaxScrollingOffset,
+                0,
+                size - parallaxScrollingOffset,
+            ],
+            Extrapolate.CLAMP
+        );
 
         const zIndex = interpolate(
-            x.value,
-            [-size, 0, size],
+            value,
+            [-1, 0, 1],
             [0, size, 0],
             Extrapolate.CLAMP
         );
+
         const scale = interpolate(
-            x.value,
-            [-size, 0, size],
-            [parallaxScrollingScale, 1, parallaxScrollingScale],
-            Extrapolate.CLAMP
-        );
-        const relatedTranslateX = interpolate(
-            x.value,
-            [-size, 0, size],
-            [parallaxScrollingOffset, 0, -parallaxScrollingOffset],
+            value,
+            [-1, 0, 1],
+            [
+                Math.pow(parallaxScrollingScale, 2),
+                parallaxScrollingScale,
+                Math.pow(parallaxScrollingScale, 2),
+            ],
             Extrapolate.CLAMP
         );
 
-        if (vertical) {
-            return {
-                transform: [
-                    {
-                        translateY:
-                            baseTranslateX + extraOffset + relatedTranslateX,
-                    },
-                    { scale },
-                ],
-                zIndex,
-            };
-        }
-
         return {
             transform: [
+                vertical
+                    ? {
+                          translateY: translate,
+                      }
+                    : {
+                          translateX: translate,
+                      },
                 {
-                    translateX:
-                        baseTranslateX + extraOffset + relatedTranslateX,
+                    scale,
                 },
-                { scale },
             ],
             zIndex,
         };
@@ -137,14 +125,18 @@ export const ParallaxLayout: React.FC<{
     );
 
     return (
-        <Animated.View style={[layoutStyle, styles.container, offsetXStyle]}>
+        <Animated.View
+            style={[
+                {
+                    width,
+                    height,
+                    position: 'absolute',
+                    alignSelf: 'center',
+                },
+                offsetXStyle,
+            ]}
+        >
             <LazyView shouldUpdate={shouldUpdate}>{children}</LazyView>
         </Animated.View>
     );
 };
-
-const styles = StyleSheet.create({
-    container: {
-        alignSelf: 'center',
-    },
-});

package/src/layouts/StackLayout.tsx

@@ -1,10 +1,5 @@
 import React from 'react';
-import {
-    Dimensions,
-    StyleSheet,
-    TransformsStyle,
-    ViewStyle,
-} from 'react-native';
+import { Dimensions, TransformsStyle, ViewStyle } from 'react-native';
 import Animated, {
     Extrapolate,
     interpolate,
@@ -355,18 +350,12 @@ export const StackLayout: React.FC<{
                     width,
                     height,
                     position: 'absolute',
+                    alignSelf: 'center',
                 },
                 offsetXStyle,
-                styles.container,
             ]}
         >
             <LazyView shouldUpdate={shouldUpdate}>{children}</LazyView>
         </Animated.View>
     );
 };
-
-const styles = StyleSheet.create({
-    container: {
-        alignSelf: 'center',
-    },
-});