@fountain-ui/lab 3.0.0-alpha.11 → 3.0.0-alpha.13

package/build/commonjs/BottomSheet/BottomSheetNative.js

@@ -9,6 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactNative = require("react-native");
 
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
+
 var _bottomSheet = require("@gorhom/bottom-sheet");
 
 var _core = require("@fountain-ui/core");
@@ -29,6 +31,9 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 const NoHandle = () => null;
 
+const DEFAULT_PADDING_BOTTOM = 24;
+const DEFAULT_PADDING_TOP = 22;
+
 function BottomSheet(props) {
   const {
     backdropOpacity = 0.5,
@@ -95,6 +100,9 @@ function BottomSheet(props) {
     borderTopLeftRadius: borderRadius,
     borderTopRightRadius: borderRadius
   }, backgroundStyleProp]);
+  const {
+    bottom: bottomSafeInset
+  } = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
   const contentWrapperStyle = (0, _core.css)([{
     backgroundColor: theme.palette.surface.base,
     borderTopLeftRadius: borderRadius,
@@ -103,8 +111,8 @@ function BottomSheet(props) {
     maxHeight: maxDynamicContentSize,
     minHeight: 325,
     overflow: 'hidden',
-    paddingBottom: theme.spacing(6),
-    paddingTop: theme.spacing(5.5)
+    paddingBottom: DEFAULT_PADDING_BOTTOM + bottomSafeInset,
+    paddingTop: DEFAULT_PADDING_TOP
   }, styleProp]);
   const isBackdropTransparent = backdropOpacity <= 0;
 

package/build/commonjs/BottomSheet/BottomSheetNative.js.map

@@ -1 +1 @@
-{"version":3,"names":["NoHandle","BottomSheet","props","backdropOpacity","backgroundStyle","backgroundStyleProp","borderRadius","borderRadiusProp","children","enableDynamicSizing","topElement","index","maxHeightNormalizedRatio","onChange","snapPoints","style","styleProp","indexRef","useRef","bottomSheetRef","height","windowHeight","useWindowDimensions","topElementHeight","setTopElementHeight","useState","maxDynamicContentSize","Math","round","handleTopElementLayout","event","nativeEvent","layout","handleChange","useCallback","newIndex","current","handleDismiss","useEffect","present","dismiss","snapToIndex","theme","useTheme","shape","radius","xxl","css","backgroundColor","palette","surface","base","borderTopLeftRadius","borderTopRightRadius","contentWrapperStyle","flexShrink","maxHeight","minHeight","overflow","paddingBottom","spacing","paddingTop","isBackdropTransparent","OpacityAwareBackdrop","topElementOpacity","useAnimatedValue","topElementAnimationStyle","opacity","topElementLocationStyle","position","width","bottom","onAnimate","fromIndex","toIndex","isVisible","Animated","timing","toValue","duration","useNativeDriver","isNotAndroid12","start","animatedHandleHeight","animatedSnapPoints","animatedContentHeight","handleContentLayout","useDynamicSnapPoints","TransparentBackdrop","Boolean","undefined"],"sources":["BottomSheetNative.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { Animated, LayoutChangeEvent, useWindowDimensions, ViewStyle } from 'react-native';\nimport {\n    BottomSheetBackdrop,\n    BottomSheetBackdropProps,\n    BottomSheetModal,\n    BottomSheetModalProvider,\n    BottomSheetView,\n} from '@gorhom/bottom-sheet';\nimport { Column, css, ExtendedStyle, isNotAndroid12, useAnimatedValue } from '@fountain-ui/core';\nimport { useTheme } from '@fountain-ui/styles';\nimport type BottomSheetProps from './BottomSheetProps';\nimport TransparentBackdrop from './TransparentBackdrop';\nimport useDynamicSnapPoints from './useDynamicSnapPoints.native';\n\nconst NoHandle = () => null;\n\nexport default function BottomSheet(props: BottomSheetProps) {\n    const {\n        backdropOpacity = 0.5,\n        backgroundStyle: backgroundStyleProp,\n        borderRadius: borderRadiusProp,\n        children,\n        enableDynamicSizing = true,\n        topElement,\n        index,\n        maxHeightNormalizedRatio = 0.8,\n        onChange,\n        snapPoints = [],\n        style: styleProp,\n    } = props;\n\n    const indexRef = useRef<number>(-1);\n    const bottomSheetRef = useRef<BottomSheetModal | null>(null);\n\n    const { height: windowHeight } = useWindowDimensions();\n    const [topElementHeight, setTopElementHeight] = useState(0);\n\n    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeight;\n\n    const handleTopElementLayout = (event: LayoutChangeEvent) => {\n        const { height } = event.nativeEvent.layout;\n        setTopElementHeight(height);\n    };\n\n    const handleChange = useCallback((newIndex: number) => {\n        indexRef.current = newIndex;\n\n        if (onChange) {\n            onChange(newIndex);\n        }\n    }, [onChange]);\n\n    const handleDismiss = useCallback(() => {\n        handleChange(-1);\n    }, [handleChange]);\n\n    useEffect(() => {\n        if (index === indexRef.current) {\n            return;\n        }\n\n        if (indexRef.current < 0 && index >= 0) {\n            bottomSheetRef.current?.present();\n        } else if (indexRef.current >= 0 && index < 0) {\n            bottomSheetRef.current?.dismiss();\n        } else {\n            // @ts-ignore\n            bottomSheetRef.current?.snapToIndex(index);\n        }\n    }, [index]);\n\n    const theme = useTheme();\n\n    const borderRadius = borderRadiusProp ?? theme.shape.radius.xxl;\n    const backgroundStyle = css([\n        {\n            backgroundColor: theme.palette.surface.base,\n            borderTopLeftRadius: borderRadius,\n            borderTopRightRadius: borderRadius,\n        },\n        backgroundStyleProp,\n    ]);\n\n    const contentWrapperStyle: ViewStyle = css([\n        {\n            backgroundColor: theme.palette.surface.base,\n            borderTopLeftRadius: borderRadius,\n            borderTopRightRadius: borderRadius,\n            flexShrink: 1,\n            maxHeight: maxDynamicContentSize,\n            minHeight: 325,\n            overflow: 'hidden',\n            paddingBottom: theme.spacing(6),\n            paddingTop: theme.spacing(5.5),\n        },\n        styleProp,\n    ]);\n\n    const isBackdropTransparent = backdropOpacity <= 0;\n\n    const OpacityAwareBackdrop = (props: BottomSheetBackdropProps) => (\n        <BottomSheetBackdrop\n            {...props}\n            appearsOnIndex={0}\n            disappearsOnIndex={-1}\n            opacity={backdropOpacity}\n            pressBehavior={onChange ? 'close' : 'none'}\n        />\n    );\n\n    const topElementOpacity = useAnimatedValue(0);\n    const topElementAnimationStyle: Animated.WithAnimatedValue<ExtendedStyle> = { opacity: topElementOpacity };\n    const topElementLocationStyle: ExtendedStyle = {\n        position: 'absolute',\n        width: '100%',\n        bottom: 0,\n    };\n    const onAnimate = (fromIndex: number, toIndex: number) => {\n        const isVisible = toIndex > -1;\n\n        Animated.timing(topElementOpacity, {\n            toValue: isVisible ? 1 : 0,\n            duration: 0,\n            useNativeDriver: isNotAndroid12,\n        }).start();\n    };\n\n    const {\n        animatedHandleHeight,\n        animatedSnapPoints,\n        animatedContentHeight,\n        handleContentLayout,\n    } = useDynamicSnapPoints(snapPoints);\n\n    return (\n        <BottomSheetModalProvider>\n            <BottomSheetModal\n                backdropComponent={isBackdropTransparent ? TransparentBackdrop : OpacityAwareBackdrop}\n                // @ts-ignore\n                backgroundStyle={backgroundStyle}\n                index={index}\n                handleComponent={NoHandle}\n                onChange={handleChange}\n                onDismiss={handleDismiss}\n                ref={bottomSheetRef}\n                enablePanDownToClose={Boolean(onChange)}\n                enableDynamicSizing={enableDynamicSizing}\n                maxDynamicContentSize={maxDynamicContentSize}\n                detached={Boolean(topElement)}\n                onAnimate={topElement ? onAnimate : undefined}\n                snapPoints={animatedSnapPoints}\n                handleHeight={animatedHandleHeight}\n                contentHeight={animatedContentHeight}\n            >\n                {topElement ? (\n                    <Animated.View style={topElementAnimationStyle}>\n                        <Column\n                            onLayout={handleTopElementLayout}\n                            style={topElementLocationStyle}\n                        >\n                            {topElement}\n                        </Column>\n                    </Animated.View>\n                ) : null}\n\n                <BottomSheetView\n                    onLayout={handleContentLayout}\n                    style={contentWrapperStyle}\n                >\n                    {children}\n                </BottomSheetView>\n            </BottomSheetModal>\n        </BottomSheetModalProvider>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["NoHandle","DEFAULT_PADDING_BOTTOM","DEFAULT_PADDING_TOP","BottomSheet","props","backdropOpacity","backgroundStyle","backgroundStyleProp","borderRadius","borderRadiusProp","children","enableDynamicSizing","topElement","index","maxHeightNormalizedRatio","onChange","snapPoints","style","styleProp","indexRef","useRef","bottomSheetRef","height","windowHeight","useWindowDimensions","topElementHeight","setTopElementHeight","useState","maxDynamicContentSize","Math","round","handleTopElementLayout","event","nativeEvent","layout","handleChange","useCallback","newIndex","current","handleDismiss","useEffect","present","dismiss","snapToIndex","theme","useTheme","shape","radius","xxl","css","backgroundColor","palette","surface","base","borderTopLeftRadius","borderTopRightRadius","bottom","bottomSafeInset","useSafeAreaInsets","contentWrapperStyle","flexShrink","maxHeight","minHeight","overflow","paddingBottom","paddingTop","isBackdropTransparent","OpacityAwareBackdrop","topElementOpacity","useAnimatedValue","topElementAnimationStyle","opacity","topElementLocationStyle","position","width","onAnimate","fromIndex","toIndex","isVisible","Animated","timing","toValue","duration","useNativeDriver","isNotAndroid12","start","animatedHandleHeight","animatedSnapPoints","animatedContentHeight","handleContentLayout","useDynamicSnapPoints","TransparentBackdrop","Boolean","undefined"],"sources":["BottomSheetNative.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { Animated, LayoutChangeEvent, useWindowDimensions, ViewStyle } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport {\n    BottomSheetBackdrop,\n    BottomSheetBackdropProps,\n    BottomSheetModal,\n    BottomSheetModalProvider,\n    BottomSheetView,\n} from '@gorhom/bottom-sheet';\nimport { Column, css, ExtendedStyle, isNotAndroid12, useAnimatedValue } from '@fountain-ui/core';\nimport { useTheme } from '@fountain-ui/styles';\nimport type BottomSheetProps from './BottomSheetProps';\nimport TransparentBackdrop from './TransparentBackdrop';\nimport useDynamicSnapPoints from './useDynamicSnapPoints.native';\n\nconst NoHandle = () => null;\n\nconst DEFAULT_PADDING_BOTTOM = 24;\nconst DEFAULT_PADDING_TOP = 22;\n\nexport default function BottomSheet(props: BottomSheetProps) {\n    const {\n        backdropOpacity = 0.5,\n        backgroundStyle: backgroundStyleProp,\n        borderRadius: borderRadiusProp,\n        children,\n        enableDynamicSizing = true,\n        topElement,\n        index,\n        maxHeightNormalizedRatio = 0.8,\n        onChange,\n        snapPoints = [],\n        style: styleProp,\n    } = props;\n\n    const indexRef = useRef<number>(-1);\n    const bottomSheetRef = useRef<BottomSheetModal | null>(null);\n\n    const { height: windowHeight } = useWindowDimensions();\n    const [topElementHeight, setTopElementHeight] = useState(0);\n\n    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeight;\n\n    const handleTopElementLayout = (event: LayoutChangeEvent) => {\n        const { height } = event.nativeEvent.layout;\n        setTopElementHeight(height);\n    };\n\n    const handleChange = useCallback((newIndex: number) => {\n        indexRef.current = newIndex;\n\n        if (onChange) {\n            onChange(newIndex);\n        }\n    }, [onChange]);\n\n    const handleDismiss = useCallback(() => {\n        handleChange(-1);\n    }, [handleChange]);\n\n    useEffect(() => {\n        if (index === indexRef.current) {\n            return;\n        }\n\n        if (indexRef.current < 0 && index >= 0) {\n            bottomSheetRef.current?.present();\n        } else if (indexRef.current >= 0 && index < 0) {\n            bottomSheetRef.current?.dismiss();\n        } else {\n            // @ts-ignore\n            bottomSheetRef.current?.snapToIndex(index);\n        }\n    }, [index]);\n\n    const theme = useTheme();\n\n    const borderRadius = borderRadiusProp ?? theme.shape.radius.xxl;\n    const backgroundStyle = css([\n        {\n            backgroundColor: theme.palette.surface.base,\n            borderTopLeftRadius: borderRadius,\n            borderTopRightRadius: borderRadius,\n        },\n        backgroundStyleProp,\n    ]);\n\n    const { bottom: bottomSafeInset } = useSafeAreaInsets();\n\n    const contentWrapperStyle: ViewStyle = css([\n        {\n            backgroundColor: theme.palette.surface.base,\n            borderTopLeftRadius: borderRadius,\n            borderTopRightRadius: borderRadius,\n            flexShrink: 1,\n            maxHeight: maxDynamicContentSize,\n            minHeight: 325,\n            overflow: 'hidden',\n            paddingBottom: DEFAULT_PADDING_BOTTOM + bottomSafeInset,\n            paddingTop: DEFAULT_PADDING_TOP,\n        },\n        styleProp,\n    ]);\n\n    const isBackdropTransparent = backdropOpacity <= 0;\n\n    const OpacityAwareBackdrop = (props: BottomSheetBackdropProps) => (\n        <BottomSheetBackdrop\n            {...props}\n            appearsOnIndex={0}\n            disappearsOnIndex={-1}\n            opacity={backdropOpacity}\n            pressBehavior={onChange ? 'close' : 'none'}\n        />\n    );\n\n    const topElementOpacity = useAnimatedValue(0);\n    const topElementAnimationStyle: Animated.WithAnimatedValue<ExtendedStyle> = { opacity: topElementOpacity };\n    const topElementLocationStyle: ExtendedStyle = {\n        position: 'absolute',\n        width: '100%',\n        bottom: 0,\n    };\n    const onAnimate = (fromIndex: number, toIndex: number) => {\n        const isVisible = toIndex > -1;\n\n        Animated.timing(topElementOpacity, {\n            toValue: isVisible ? 1 : 0,\n            duration: 0,\n            useNativeDriver: isNotAndroid12,\n        }).start();\n    };\n\n    const {\n        animatedHandleHeight,\n        animatedSnapPoints,\n        animatedContentHeight,\n        handleContentLayout,\n    } = useDynamicSnapPoints(snapPoints);\n\n    return (\n        <BottomSheetModalProvider>\n            <BottomSheetModal\n                backdropComponent={isBackdropTransparent ? TransparentBackdrop : OpacityAwareBackdrop}\n                // @ts-ignore\n                backgroundStyle={backgroundStyle}\n                index={index}\n                handleComponent={NoHandle}\n                onChange={handleChange}\n                onDismiss={handleDismiss}\n                ref={bottomSheetRef}\n                enablePanDownToClose={Boolean(onChange)}\n                enableDynamicSizing={enableDynamicSizing}\n                maxDynamicContentSize={maxDynamicContentSize}\n                detached={Boolean(topElement)}\n                onAnimate={topElement ? onAnimate : undefined}\n                snapPoints={animatedSnapPoints}\n                handleHeight={animatedHandleHeight}\n                contentHeight={animatedContentHeight}\n            >\n                {topElement ? (\n                    <Animated.View style={topElementAnimationStyle}>\n                        <Column\n                            onLayout={handleTopElementLayout}\n                            style={topElementLocationStyle}\n                        >\n                            {topElement}\n                        </Column>\n                    </Animated.View>\n                ) : null}\n\n                <BottomSheetView\n                    onLayout={handleContentLayout}\n                    style={contentWrapperStyle}\n                >\n                    {children}\n                </BottomSheetView>\n            </BottomSheetModal>\n        </BottomSheetModalProvider>\n    );\n};\n"],"mappings":"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"}

package/build/commonjs/Carousel/Carousel.js

@@ -33,6 +33,7 @@ const Carousel = /*#__PURE__*/(0, _react.forwardRef)(function Carousel(props, re
     itemHeight,
     itemWidth,
     loop = false,
+    needsOffscreenAlphaCompositingOnItem = false,
     onIndexChange,
     renderItem,
     scrollEnabled = true,
@@ -91,8 +92,9 @@ const Carousel = /*#__PURE__*/(0, _react.forwardRef)(function Carousel(props, re
     itemHeight,
     itemWidth,
     itemVisibilityStore,
-    loop
-  }), [createItemStyle, data, globalInterpolation, itemHeight, itemWidth, itemVisibilityStore, loop]);
+    loop,
+    needsOffscreenAlphaCompositingOnItem
+  }), [createItemStyle, data, globalInterpolation, itemHeight, itemWidth, itemVisibilityStore, loop, needsOffscreenAlphaCompositingOnItem]);
   return /*#__PURE__*/_react.default.createElement(_components.InternalContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/_react.default.createElement(_ViewabilityTrackerView.default, {

package/build/commonjs/Carousel/Carousel.js.map

@@ -1 +1 @@
-{"version":3,"names":["Carousel","forwardRef","props","ref","autoplay","autoplayInterval","createItemStyle","createDefaultItemStyle","createScrollAnimation","createDefaultScrollAnimation","data","originalData","disableSmartAutoplay","initialIndex","itemHeight","itemWidth","loop","onIndexChange","renderItem","scrollEnabled","style","windowSize","useLoopedData","itemVisibilityStore","onPositionChange","useItemVisibilityStore","numberOfData","length","indexController","useIndexController","numberOfOriginalData","getCurrentIndex","gestureTranslationX","globalInterpolation","interruptAnimation","startPagingAnimation","usePagingAnimator","autoplayController","useAutoplayController","enabled","intervalMillis","useImperativeHandle","next","direction","prev","scrollTo","option","contextValue","useMemo","Math","max","visible","resume","pause","memo"],"sources":["Carousel.tsx"],"sourcesContent":["import React, { forwardRef, memo, useImperativeHandle, useMemo } from 'react';\nimport ViewabilityTrackerView from '../ViewabilityTrackerView';\nimport type CarouselProps from './CarouselProps';\nimport type { CarouselInstance } from './types';\nimport {\n    useAutoplayController,\n    useIndexController,\n    useItemVisibilityStore,\n    useLoopedData,\n    usePagingAnimator,\n} from './hooks';\nimport { createDefaultItemStyle, createDefaultScrollAnimation } from './animation';\nimport { InternalContext, RootView, ScrollViewGesture } from './components';\n\nconst Carousel = forwardRef<CarouselInstance, CarouselProps>(function Carousel(props, ref) {\n    const {\n        autoplay = false,\n        autoplayInterval = 3000,\n        createItemStyle = createDefaultItemStyle,\n        createScrollAnimation = createDefaultScrollAnimation,\n        data: originalData,\n        disableSmartAutoplay = false,\n        initialIndex = 0,\n        itemHeight,\n        itemWidth,\n        loop = false,\n        onIndexChange,\n        renderItem,\n        scrollEnabled = true,\n        style,\n        windowSize = 5,\n    } = props;\n\n    const data = useLoopedData(originalData, loop);\n\n    const [itemVisibilityStore, onPositionChange] = useItemVisibilityStore({\n        initialIndex,\n        numberOfData: data.length,\n        windowSize,\n    });\n\n    const indexController = useIndexController({\n        initialIndex,\n        itemWidth,\n        numberOfData: data.length,\n        numberOfOriginalData: originalData.length,\n        onIndexChange,\n        onPositionChange,\n    });\n\n    const { getCurrentIndex } = indexController;\n\n    const {\n        gestureTranslationX,\n        globalInterpolation,\n        interruptAnimation,\n        startPagingAnimation,\n    } = usePagingAnimator({\n        createScrollAnimation,\n        itemWidth,\n        indexController,\n        initialIndex,\n        loop,\n        numberOfData: data.length,\n    });\n\n    const autoplayController = useAutoplayController({\n        enabled: autoplay,\n        intervalMillis: autoplayInterval,\n        startPagingAnimation,\n    });\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            getCurrentIndex,\n            next: () => startPagingAnimation('directional', { direction: 'next' }),\n            prev: () => startPagingAnimation('directional', { direction: 'prev' }),\n            scrollTo: (option) => startPagingAnimation('index', option),\n        }),\n        [startPagingAnimation, getCurrentIndex],\n    );\n\n    const contextValue = useMemo(() => ({\n        createItemStyle,\n        data,\n        globalInterpolation,\n        itemHeight,\n        itemWidth,\n        itemVisibilityStore,\n        loop,\n    }), [\n        createItemStyle,\n        data,\n        globalInterpolation,\n        itemHeight,\n        itemWidth,\n        itemVisibilityStore,\n        loop,\n    ]);\n\n    return (\n        <InternalContext.Provider value={contextValue}>\n            <ViewabilityTrackerView\n                enabled={autoplay && !disableSmartAutoplay}\n                measurementIntervalMillis={Math.max(3000, autoplayInterval)}\n                onViewabilityChange={({ visible }) => {\n                    if (visible) {\n                        autoplayController.resume();\n                    } else {\n                        autoplayController.pause();\n                    }\n                }}\n            >\n                <ScrollViewGesture\n                    autoplayController={autoplayController}\n                    gestureTranslationX={gestureTranslationX}\n                    interruptAnimation={interruptAnimation}\n                    scrollEnabled={scrollEnabled}\n                    startPagingAnimation={startPagingAnimation}\n                >\n                    <RootView\n                        data={data}\n                        itemHeight={itemHeight}\n                        originalData={originalData}\n                        renderItem={renderItem}\n                        style={style}\n                    />\n                </ScrollViewGesture>\n            </ViewabilityTrackerView>\n        </InternalContext.Provider>\n    );\n});\n\nexport default memo(Carousel);\n"],"mappings":"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"}
+{"version":3,"names":["Carousel","forwardRef","props","ref","autoplay","autoplayInterval","createItemStyle","createDefaultItemStyle","createScrollAnimation","createDefaultScrollAnimation","data","originalData","disableSmartAutoplay","initialIndex","itemHeight","itemWidth","loop","needsOffscreenAlphaCompositingOnItem","onIndexChange","renderItem","scrollEnabled","style","windowSize","useLoopedData","itemVisibilityStore","onPositionChange","useItemVisibilityStore","numberOfData","length","indexController","useIndexController","numberOfOriginalData","getCurrentIndex","gestureTranslationX","globalInterpolation","interruptAnimation","startPagingAnimation","usePagingAnimator","autoplayController","useAutoplayController","enabled","intervalMillis","useImperativeHandle","next","direction","prev","scrollTo","option","contextValue","useMemo","Math","max","visible","resume","pause","memo"],"sources":["Carousel.tsx"],"sourcesContent":["import React, { forwardRef, memo, useImperativeHandle, useMemo } from 'react';\nimport ViewabilityTrackerView from '../ViewabilityTrackerView';\nimport type CarouselProps from './CarouselProps';\nimport type { CarouselInstance } from './types';\nimport {\n    useAutoplayController,\n    useIndexController,\n    useItemVisibilityStore,\n    useLoopedData,\n    usePagingAnimator,\n} from './hooks';\nimport { createDefaultItemStyle, createDefaultScrollAnimation } from './animation';\nimport { InternalContext, RootView, ScrollViewGesture } from './components';\n\nconst Carousel = forwardRef<CarouselInstance, CarouselProps>(function Carousel(props, ref) {\n    const {\n        autoplay = false,\n        autoplayInterval = 3000,\n        createItemStyle = createDefaultItemStyle,\n        createScrollAnimation = createDefaultScrollAnimation,\n        data: originalData,\n        disableSmartAutoplay = false,\n        initialIndex = 0,\n        itemHeight,\n        itemWidth,\n        loop = false,\n        needsOffscreenAlphaCompositingOnItem = false,\n        onIndexChange,\n        renderItem,\n        scrollEnabled = true,\n        style,\n        windowSize = 5,\n    } = props;\n\n    const data = useLoopedData(originalData, loop);\n\n    const [itemVisibilityStore, onPositionChange] = useItemVisibilityStore({\n        initialIndex,\n        numberOfData: data.length,\n        windowSize,\n    });\n\n    const indexController = useIndexController({\n        initialIndex,\n        itemWidth,\n        numberOfData: data.length,\n        numberOfOriginalData: originalData.length,\n        onIndexChange,\n        onPositionChange,\n    });\n\n    const { getCurrentIndex } = indexController;\n\n    const {\n        gestureTranslationX,\n        globalInterpolation,\n        interruptAnimation,\n        startPagingAnimation,\n    } = usePagingAnimator({\n        createScrollAnimation,\n        itemWidth,\n        indexController,\n        initialIndex,\n        loop,\n        numberOfData: data.length,\n    });\n\n    const autoplayController = useAutoplayController({\n        enabled: autoplay,\n        intervalMillis: autoplayInterval,\n        startPagingAnimation,\n    });\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            getCurrentIndex,\n            next: () => startPagingAnimation('directional', { direction: 'next' }),\n            prev: () => startPagingAnimation('directional', { direction: 'prev' }),\n            scrollTo: (option) => startPagingAnimation('index', option),\n        }),\n        [startPagingAnimation, getCurrentIndex],\n    );\n\n    const contextValue = useMemo(() => ({\n        createItemStyle,\n        data,\n        globalInterpolation,\n        itemHeight,\n        itemWidth,\n        itemVisibilityStore,\n        loop,\n        needsOffscreenAlphaCompositingOnItem,\n    }), [\n        createItemStyle,\n        data,\n        globalInterpolation,\n        itemHeight,\n        itemWidth,\n        itemVisibilityStore,\n        loop,\n        needsOffscreenAlphaCompositingOnItem,\n    ]);\n\n    return (\n        <InternalContext.Provider value={contextValue}>\n            <ViewabilityTrackerView\n                enabled={autoplay && !disableSmartAutoplay}\n                measurementIntervalMillis={Math.max(3000, autoplayInterval)}\n                onViewabilityChange={({ visible }) => {\n                    if (visible) {\n                        autoplayController.resume();\n                    } else {\n                        autoplayController.pause();\n                    }\n                }}\n            >\n                <ScrollViewGesture\n                    autoplayController={autoplayController}\n                    gestureTranslationX={gestureTranslationX}\n                    interruptAnimation={interruptAnimation}\n                    scrollEnabled={scrollEnabled}\n                    startPagingAnimation={startPagingAnimation}\n                >\n                    <RootView\n                        data={data}\n                        itemHeight={itemHeight}\n                        originalData={originalData}\n                        renderItem={renderItem}\n                        style={style}\n                    />\n                </ScrollViewGesture>\n            </ViewabilityTrackerView>\n        </InternalContext.Provider>\n    );\n});\n\nexport default memo(Carousel);\n"],"mappings":";;;;;;;AAAA;;AACA;;AAGA;;AAOA;;AACA;;;;;;;;AAEA,MAAMA,QAAQ,gBAAG,IAAAC,iBAAA,EAA4C,SAASD,QAAT,CAAkBE,KAAlB,EAAyBC,GAAzB,EAA8B;EACvF,MAAM;IACFC,QAAQ,GAAG,KADT;IAEFC,gBAAgB,GAAG,IAFjB;IAGFC,eAAe,GAAGC,iCAHhB;IAIFC,qBAAqB,GAAGC,uCAJtB;IAKFC,IAAI,EAAEC,YALJ;IAMFC,oBAAoB,GAAG,KANrB;IAOFC,YAAY,GAAG,CAPb;IAQFC,UARE;IASFC,SATE;IAUFC,IAAI,GAAG,KAVL;IAWFC,oCAAoC,GAAG,KAXrC;IAYFC,aAZE;IAaFC,UAbE;IAcFC,aAAa,GAAG,IAdd;IAeFC,KAfE;IAgBFC,UAAU,GAAG;EAhBX,IAiBFpB,KAjBJ;EAmBA,MAAMQ,IAAI,GAAG,IAAAa,oBAAA,EAAcZ,YAAd,EAA4BK,IAA5B,CAAb;EAEA,MAAM,CAACQ,mBAAD,EAAsBC,gBAAtB,IAA0C,IAAAC,6BAAA,EAAuB;IACnEb,YADmE;IAEnEc,YAAY,EAAEjB,IAAI,CAACkB,MAFgD;IAGnEN;EAHmE,CAAvB,CAAhD;EAMA,MAAMO,eAAe,GAAG,IAAAC,yBAAA,EAAmB;IACvCjB,YADuC;IAEvCE,SAFuC;IAGvCY,YAAY,EAAEjB,IAAI,CAACkB,MAHoB;IAIvCG,oBAAoB,EAAEpB,YAAY,CAACiB,MAJI;IAKvCV,aALuC;IAMvCO;EANuC,CAAnB,CAAxB;EASA,MAAM;IAAEO;EAAF,IAAsBH,eAA5B;EAEA,MAAM;IACFI,mBADE;IAEFC,mBAFE;IAGFC,kBAHE;IAIFC;EAJE,IAKF,IAAAC,wBAAA,EAAkB;IAClB7B,qBADkB;IAElBO,SAFkB;IAGlBc,eAHkB;IAIlBhB,YAJkB;IAKlBG,IALkB;IAMlBW,YAAY,EAAEjB,IAAI,CAACkB;EAND,CAAlB,CALJ;EAcA,MAAMU,kBAAkB,GAAG,IAAAC,4BAAA,EAAsB;IAC7CC,OAAO,EAAEpC,QADoC;IAE7CqC,cAAc,EAAEpC,gBAF6B;IAG7C+B;EAH6C,CAAtB,CAA3B;EAMA,IAAAM,0BAAA,EACIvC,GADJ,EAEI,OAAO;IACH6B,eADG;IAEHW,IAAI,EAAE,MAAMP,oBAAoB,CAAC,aAAD,EAAgB;MAAEQ,SAAS,EAAE;IAAb,CAAhB,CAF7B;IAGHC,IAAI,EAAE,MAAMT,oBAAoB,CAAC,aAAD,EAAgB;MAAEQ,SAAS,EAAE;IAAb,CAAhB,CAH7B;IAIHE,QAAQ,EAAGC,MAAD,IAAYX,oBAAoB,CAAC,OAAD,EAAUW,MAAV;EAJvC,CAAP,CAFJ,EAQI,CAACX,oBAAD,EAAuBJ,eAAvB,CARJ;EAWA,MAAMgB,YAAY,GAAG,IAAAC,cAAA,EAAQ,OAAO;IAChC3C,eADgC;IAEhCI,IAFgC;IAGhCwB,mBAHgC;IAIhCpB,UAJgC;IAKhCC,SALgC;IAMhCS,mBANgC;IAOhCR,IAPgC;IAQhCC;EARgC,CAAP,CAAR,EASjB,CACAX,eADA,EAEAI,IAFA,EAGAwB,mBAHA,EAIApB,UAJA,EAKAC,SALA,EAMAS,mBANA,EAOAR,IAPA,EAQAC,oCARA,CATiB,CAArB;EAoBA,oBACI,6BAAC,2BAAD,CAAiB,QAAjB;IAA0B,KAAK,EAAE+B;EAAjC,gBACI,6BAAC,+BAAD;IACI,OAAO,EAAE5C,QAAQ,IAAI,CAACQ,oBAD1B;IAEI,yBAAyB,EAAEsC,IAAI,CAACC,GAAL,CAAS,IAAT,EAAe9C,gBAAf,CAF/B;IAGI,mBAAmB,EAAE,QAAiB;MAAA,IAAhB;QAAE+C;MAAF,CAAgB;;MAClC,IAAIA,OAAJ,EAAa;QACTd,kBAAkB,CAACe,MAAnB;MACH,CAFD,MAEO;QACHf,kBAAkB,CAACgB,KAAnB;MACH;IACJ;EATL,gBAWI,6BAAC,6BAAD;IACI,kBAAkB,EAAEhB,kBADxB;IAEI,mBAAmB,EAAEL,mBAFzB;IAGI,kBAAkB,EAAEE,kBAHxB;IAII,aAAa,EAAEf,aAJnB;IAKI,oBAAoB,EAAEgB;EAL1B,gBAOI,6BAAC,oBAAD;IACI,IAAI,EAAE1B,IADV;IAEI,UAAU,EAAEI,UAFhB;IAGI,YAAY,EAAEH,YAHlB;IAII,UAAU,EAAEQ,UAJhB;IAKI,KAAK,EAAEE;EALX,EAPJ,CAXJ,CADJ,CADJ;AA+BH,CAzHgB,CAAjB;;4BA2He,IAAAkC,WAAA,EAAKvD,QAAL,C"}

package/build/commonjs/Carousel/CarouselProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["CarouselProps.ts"],"sourcesContent":["import type { RefObject } from 'react';\nimport type { ComponentProps } from '@fountain-ui/core';\nimport type {\n    CarouselInstance,\n    CreateItemStyle,\n    CreateScrollAnimation,\n    ItemHeight,\n    OnIndexChange,\n    RenderItem,\n} from './types';\n\nexport default interface CarouselProps<ItemT = any> extends ComponentProps<{\n    ref?: RefObject<CarouselInstance>;\n\n    /**\n     * If `true`, enable autoplay.\n     * @default false\n     */\n    autoplay?: boolean;\n\n    /**\n     * Delay in ms until navigating to the next item.\n     * @default 3000\n     */\n    autoplayInterval?: number;\n\n    /**\n     * The item style creator function.\n     * @default createDefaultItemStyle\n     */\n    createItemStyle?: CreateItemStyle;\n\n    /**\n     * The scroll animation creator function.\n     * @default createDefaultScrollAnimation\n     */\n    createScrollAnimation?: CreateScrollAnimation;\n\n    /**\n     * Data for render items.\n     */\n    data: ReadonlyArray<ItemT>;\n\n    /**\n     * If `true`, carousel will detect its own viewability and control autoplay automatically.\n     * @default false\n     */\n    disableSmartAutoplay?: boolean;\n\n    /**\n     * Index of initial item that should be selected.\n     * @default 0\n     */\n    initialIndex?: number;\n\n    /**\n     * The item height.\n     * For a performance reason, always consider to provide a number value.\n     */\n    itemHeight: ItemHeight;\n\n    /**\n     * The item width.\n     */\n    itemWidth: number;\n\n    /**\n     * Enable infinite loop mode.\n     * @default false\n     */\n    loop?: boolean;\n\n    /**\n     * Callback fired when an index is changed.\n     */\n    onIndexChange?: OnIndexChange;\n\n    /**\n     * Takes an item from data and renders it into the list.\n     */\n    renderItem: RenderItem<ItemT>;\n\n    /**\n     * Whether to enable scroll gesture.\n     * @default true\n     */\n    scrollEnabled?: boolean;\n\n    /**\n     * The maximum number of items that can respond to pan gesture events.\n     * Due to the nature of the `active` item, it accepts only odd number. (e.g. 1, 3, 5...)\n     * 0 means all items will respond to pan gesture events.\n     * @default 5\n     */\n    windowSize?: number;\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["CarouselProps.ts"],"sourcesContent":["import type { RefObject } from 'react';\nimport type { ComponentProps } from '@fountain-ui/core';\nimport type {\n    CarouselInstance,\n    CreateItemStyle,\n    CreateScrollAnimation,\n    ItemHeight,\n    OnIndexChange,\n    RenderItem,\n} from './types';\n\nexport default interface CarouselProps<ItemT = any> extends ComponentProps<{\n    ref?: RefObject<CarouselInstance>;\n\n    /**\n     * If `true`, enable autoplay.\n     * @default false\n     */\n    autoplay?: boolean;\n\n    /**\n     * Delay in ms until navigating to the next item.\n     * @default 3000\n     */\n    autoplayInterval?: number;\n\n    /**\n     * The item style creator function.\n     * @default createDefaultItemStyle\n     */\n    createItemStyle?: CreateItemStyle;\n\n    /**\n     * The scroll animation creator function.\n     * @default createDefaultScrollAnimation\n     */\n    createScrollAnimation?: CreateScrollAnimation;\n\n    /**\n     * Data for render items.\n     */\n    data: ReadonlyArray<ItemT>;\n\n    /**\n     * If `true`, carousel will detect its own viewability and control autoplay automatically.\n     * @default false\n     */\n    disableSmartAutoplay?: boolean;\n\n    /**\n     * Index of initial item that should be selected.\n     * @default 0\n     */\n    initialIndex?: number;\n\n    /**\n     * The item height.\n     * For a performance reason, always consider to provide a number value.\n     */\n    itemHeight: ItemHeight;\n\n    /**\n     * The item width.\n     */\n    itemWidth: number;\n\n    /**\n     * Enable infinite loop mode.\n     * @default false\n     */\n    loop?: boolean;\n\n    /**\n     * Callback fired when an index is changed.\n     */\n    onIndexChange?: OnIndexChange;\n\n    /**\n     * Takes an item from data and renders it into the list.\n     */\n    renderItem: RenderItem<ItemT>;\n\n    /**\n     * Whether to enable scroll gesture.\n     * @default true\n     */\n    scrollEnabled?: boolean;\n\n    /**\n     * The maximum number of items that can respond to pan gesture events.\n     * Due to the nature of the `active` item, it accepts only odd number. (e.g. 1, 3, 5...)\n     * 0 means all items will respond to pan gesture events.\n     * @default 5\n     */\n    windowSize?: number;\n\n    /**\n     * Whether item views need to be rendered offscreen and composited with an alpha \n     * in order to preserve 100% correct colors and blending behavior.\n     * Use this when items have opacity animations and multiple overlapping elements.\n     * @default false\n     */\n    needsOffscreenAlphaCompositingOnItem?: boolean;\n}> {}\n"],"mappings":""}

package/build/commonjs/Carousel/components/InternalContext.js

@@ -21,7 +21,8 @@ const initialValue = {
   itemHeight: 0,
   itemWidth: 0,
   itemVisibilityStore: mockItemVisibilityStore,
-  loop: false
+  loop: false,
+  needsOffscreenAlphaCompositingOnItem: false
 };
 const InternalContext = /*#__PURE__*/(0, _react.createContext)(initialValue);
 var _default = InternalContext;

package/build/commonjs/Carousel/components/InternalContext.js.map

@@ -1 +1 @@
-{"version":3,"names":["mockItemVisibilityStore","dispatch","subscribe","removeAllListeners","initialValue","createItemStyle","data","globalInterpolation","Animated","add","Value","itemHeight","itemWidth","itemVisibilityStore","loop","InternalContext","createContext"],"sources":["InternalContext.ts"],"sourcesContent":["import { createContext } from 'react';\nimport { Animated } from 'react-native';\nimport type { CreateItemStyle, ItemHeight, ItemVisibilityStore } from '../types';\n\nexport interface InternalContextValue<ItemT> {\n    createItemStyle: CreateItemStyle;\n    data: ReadonlyArray<ItemT>;\n    globalInterpolation: Animated.AnimatedInterpolation;\n    itemHeight: ItemHeight;\n    itemWidth: number;\n    itemVisibilityStore: ItemVisibilityStore;\n    loop: boolean;\n}\n\nconst mockItemVisibilityStore: ItemVisibilityStore = {\n    dispatch: () => void 0,\n    subscribe: () => () => void 0,\n    removeAllListeners: () => void 0,\n};\n\nconst initialValue: Readonly<InternalContextValue<any>> = {\n    createItemStyle: () => ({}),\n    data: [],\n    globalInterpolation: Animated.add(new Animated.Value(0), 0),\n    itemHeight: 0,\n    itemWidth: 0,\n    itemVisibilityStore: mockItemVisibilityStore,\n    loop: false,\n};\n\nconst InternalContext = createContext<InternalContextValue<any>>(initialValue);\n\nexport default InternalContext;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAaA,MAAMA,uBAA4C,GAAG;EACjDC,QAAQ,EAAE,MAAM,KAAK,CAD4B;EAEjDC,SAAS,EAAE,MAAM,MAAM,KAAK,CAFqB;EAGjDC,kBAAkB,EAAE,MAAM,KAAK;AAHkB,CAArD;AAMA,MAAMC,YAAiD,GAAG;EACtDC,eAAe,EAAE,OAAO,EAAP,CADqC;EAEtDC,IAAI,EAAE,EAFgD;EAGtDC,mBAAmB,EAAEC,qBAAA,CAASC,GAAT,CAAa,IAAID,qBAAA,CAASE,KAAb,CAAmB,CAAnB,CAAb,EAAoC,CAApC,CAHiC;EAItDC,UAAU,EAAE,CAJ0C;EAKtDC,SAAS,EAAE,CAL2C;EAMtDC,mBAAmB,EAAEb,uBANiC;EAOtDc,IAAI,EAAE;AAPgD,CAA1D;AAUA,MAAMC,eAAe,gBAAG,IAAAC,oBAAA,EAAyCZ,YAAzC,CAAxB;eAEeW,e"}
+{"version":3,"names":["mockItemVisibilityStore","dispatch","subscribe","removeAllListeners","initialValue","createItemStyle","data","globalInterpolation","Animated","add","Value","itemHeight","itemWidth","itemVisibilityStore","loop","needsOffscreenAlphaCompositingOnItem","InternalContext","createContext"],"sources":["InternalContext.ts"],"sourcesContent":["import { createContext } from 'react';\nimport { Animated } from 'react-native';\nimport type { CreateItemStyle, ItemHeight, ItemVisibilityStore } from '../types';\n\nexport interface InternalContextValue<ItemT> {\n    createItemStyle: CreateItemStyle;\n    data: ReadonlyArray<ItemT>;\n    globalInterpolation: Animated.AnimatedInterpolation;\n    itemHeight: ItemHeight;\n    itemWidth: number;\n    itemVisibilityStore: ItemVisibilityStore;\n    loop: boolean;\n    needsOffscreenAlphaCompositingOnItem: boolean;\n}\n\nconst mockItemVisibilityStore: ItemVisibilityStore = {\n    dispatch: () => void 0,\n    subscribe: () => () => void 0,\n    removeAllListeners: () => void 0,\n};\n\nconst initialValue: Readonly<InternalContextValue<any>> = {\n    createItemStyle: () => ({}),\n    data: [],\n    globalInterpolation: Animated.add(new Animated.Value(0), 0),\n    itemHeight: 0,\n    itemWidth: 0,\n    itemVisibilityStore: mockItemVisibilityStore,\n    loop: false,\n    needsOffscreenAlphaCompositingOnItem: false,\n};\n\nconst InternalContext = createContext<InternalContextValue<any>>(initialValue);\n\nexport default InternalContext;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAcA,MAAMA,uBAA4C,GAAG;EACjDC,QAAQ,EAAE,MAAM,KAAK,CAD4B;EAEjDC,SAAS,EAAE,MAAM,MAAM,KAAK,CAFqB;EAGjDC,kBAAkB,EAAE,MAAM,KAAK;AAHkB,CAArD;AAMA,MAAMC,YAAiD,GAAG;EACtDC,eAAe,EAAE,OAAO,EAAP,CADqC;EAEtDC,IAAI,EAAE,EAFgD;EAGtDC,mBAAmB,EAAEC,qBAAA,CAASC,GAAT,CAAa,IAAID,qBAAA,CAASE,KAAb,CAAmB,CAAnB,CAAb,EAAoC,CAApC,CAHiC;EAItDC,UAAU,EAAE,CAJ0C;EAKtDC,SAAS,EAAE,CAL2C;EAMtDC,mBAAmB,EAAEb,uBANiC;EAOtDc,IAAI,EAAE,KAPgD;EAQtDC,oCAAoC,EAAE;AARgB,CAA1D;AAWA,MAAMC,eAAe,gBAAG,IAAAC,oBAAA,EAAyCb,YAAzC,CAAxB;eAEeY,e"}

package/build/commonjs/Carousel/components/ItemView.js

@@ -31,7 +31,8 @@ function ItemView(props) {
     createItemStyle,
     itemHeight,
     itemWidth,
-    itemVisibilityStore
+    itemVisibilityStore,
+    needsOffscreenAlphaCompositingOnItem
   } = (0, _react.useContext)(_InternalContext.default);
   const [visible, setVisible] = (0, _react.useState)(false);
   const interpolation = (0, _useItemInterpolation.default)(index);
@@ -46,6 +47,7 @@ function ItemView(props) {
     });
   }, [index, itemVisibilityStore]);
   return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
+    needsOffscreenAlphaCompositing: needsOffscreenAlphaCompositingOnItem,
     children: visible ? children(interpolation) : null,
     onLayout: onLayout,
     style: [{

package/build/commonjs/Carousel/components/ItemView.js.map

@@ -1 +1 @@
-{"version":3,"names":["ItemView","props","children","index","onLayout","createItemStyle","itemHeight","itemWidth","itemVisibilityStore","useContext","InternalContext","visible","setVisible","useState","interpolation","useItemInterpolation","itemStyle","useMemo","useEffect","subscribe","ranges","nextVisible","some","from","to","width","height","undefined","styles","absolute","StyleSheet","create","position"],"sources":["ItemView.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React, { useContext, useEffect, useMemo, useState } from 'react';\nimport type { ViewProps } from 'react-native';\nimport { Animated } from 'react-native';\nimport { StyleSheet } from '@fountain-ui/core';\nimport useItemInterpolation from './useItemInterpolation';\nimport InternalContext from './InternalContext';\n\nexport interface ItemViewProps {\n    children: (interpolation: Animated.AnimatedInterpolation) => ReactElement | null;\n    index: number;\n    onLayout?: ViewProps['onLayout'];\n}\n\nexport default function ItemView(props: ItemViewProps) {\n    const {\n        children,\n        index,\n        onLayout,\n    } = props;\n\n    const {\n        createItemStyle,\n        itemHeight,\n        itemWidth,\n        itemVisibilityStore,\n    } = useContext(InternalContext);\n\n    const [visible, setVisible] = useState(false);\n\n    const interpolation = useItemInterpolation(index);\n\n    const itemStyle = useMemo(\n        () => createItemStyle(interpolation, itemWidth),\n        [createItemStyle, interpolation, itemWidth],\n    );\n\n    useEffect(() => {\n        return itemVisibilityStore.subscribe(ranges => {\n            const nextVisible = ranges.some(([from, to]) => index >= from && index <= to);\n            setVisible(nextVisible);\n        });\n    }, [index, itemVisibilityStore]);\n\n    return (\n        <Animated.View\n            children={visible ? children(interpolation) : null}\n            onLayout={onLayout}\n            style={[\n                {\n                    width: itemWidth,\n                    height: itemHeight !== 'auto' ? itemHeight : undefined,\n                },\n                styles.absolute,\n                // @ts-ignore\n                itemStyle,\n            ]}\n        />\n    );\n};\n\nconst styles = StyleSheet.create({\n    absolute: {\n        position: 'absolute',\n    },\n});\n"],"mappings":";;;;;;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;AAQe,SAASA,QAAT,CAAkBC,KAAlB,EAAwC;EACnD,MAAM;IACFC,QADE;IAEFC,KAFE;IAGFC;EAHE,IAIFH,KAJJ;EAMA,MAAM;IACFI,eADE;IAEFC,UAFE;IAGFC,SAHE;IAIFC;EAJE,IAKF,IAAAC,iBAAA,EAAWC,wBAAX,CALJ;EAOA,MAAM,CAACC,OAAD,EAAUC,UAAV,IAAwB,IAAAC,eAAA,EAAS,KAAT,CAA9B;EAEA,MAAMC,aAAa,GAAG,IAAAC,6BAAA,EAAqBZ,KAArB,CAAtB;EAEA,MAAMa,SAAS,GAAG,IAAAC,cAAA,EACd,MAAMZ,eAAe,CAACS,aAAD,EAAgBP,SAAhB,CADP,EAEd,CAACF,eAAD,EAAkBS,aAAlB,EAAiCP,SAAjC,CAFc,CAAlB;EAKA,IAAAW,gBAAA,EAAU,MAAM;IACZ,OAAOV,mBAAmB,CAACW,SAApB,CAA8BC,MAAM,IAAI;MAC3C,MAAMC,WAAW,GAAGD,MAAM,CAACE,IAAP,CAAY;QAAA,IAAC,CAACC,IAAD,EAAOC,EAAP,CAAD;QAAA,OAAgBrB,KAAK,IAAIoB,IAAT,IAAiBpB,KAAK,IAAIqB,EAA1C;MAAA,CAAZ,CAApB;MACAZ,UAAU,CAACS,WAAD,CAAV;IACH,CAHM,CAAP;EAIH,CALD,EAKG,CAAClB,KAAD,EAAQK,mBAAR,CALH;EAOA,oBACI,6BAAC,qBAAD,CAAU,IAAV;IACI,QAAQ,EAAEG,OAAO,GAAGT,QAAQ,CAACY,aAAD,CAAX,GAA6B,IADlD;IAEI,QAAQ,EAAEV,QAFd;IAGI,KAAK,EAAE,CACH;MACIqB,KAAK,EAAElB,SADX;MAEImB,MAAM,EAAEpB,UAAU,KAAK,MAAf,GAAwBA,UAAxB,GAAqCqB;IAFjD,CADG,EAKHC,MAAM,CAACC,QALJ,EAMH;IACAb,SAPG;EAHX,EADJ;AAeH;;AAAA;;AAED,MAAMY,MAAM,GAAGE,gBAAA,CAAWC,MAAX,CAAkB;EAC7BF,QAAQ,EAAE;IACNG,QAAQ,EAAE;EADJ;AADmB,CAAlB,CAAf"}
+{"version":3,"names":["ItemView","props","children","index","onLayout","createItemStyle","itemHeight","itemWidth","itemVisibilityStore","needsOffscreenAlphaCompositingOnItem","useContext","InternalContext","visible","setVisible","useState","interpolation","useItemInterpolation","itemStyle","useMemo","useEffect","subscribe","ranges","nextVisible","some","from","to","width","height","undefined","styles","absolute","StyleSheet","create","position"],"sources":["ItemView.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React, { useContext, useEffect, useMemo, useState } from 'react';\nimport type { ViewProps } from 'react-native';\nimport { Animated } from 'react-native';\nimport { StyleSheet } from '@fountain-ui/core';\nimport useItemInterpolation from './useItemInterpolation';\nimport InternalContext from './InternalContext';\n\nexport interface ItemViewProps {\n    children: (interpolation: Animated.AnimatedInterpolation) => ReactElement | null;\n    index: number;\n    onLayout?: ViewProps['onLayout'];\n}\n\nexport default function ItemView(props: ItemViewProps) {\n    const {\n        children,\n        index,\n        onLayout,\n    } = props;\n\n    const {\n        createItemStyle,\n        itemHeight,\n        itemWidth,\n        itemVisibilityStore,\n        needsOffscreenAlphaCompositingOnItem,\n    } = useContext(InternalContext);\n\n    const [visible, setVisible] = useState(false);\n\n    const interpolation = useItemInterpolation(index);\n\n    const itemStyle = useMemo(\n        () => createItemStyle(interpolation, itemWidth),\n        [createItemStyle, interpolation, itemWidth],\n    );\n\n    useEffect(() => {\n        return itemVisibilityStore.subscribe(ranges => {\n            const nextVisible = ranges.some(([from, to]) => index >= from && index <= to);\n            setVisible(nextVisible);\n        });\n    }, [index, itemVisibilityStore]);\n\n    return (\n        <Animated.View\n            needsOffscreenAlphaCompositing={needsOffscreenAlphaCompositingOnItem}\n            children={visible ? children(interpolation) : null}\n            onLayout={onLayout}\n            style={[\n                {\n                    width: itemWidth,\n                    height: itemHeight !== 'auto' ? itemHeight : undefined,\n                },\n                styles.absolute,\n                // @ts-ignore\n                itemStyle,\n            ]}\n        />\n    );\n};\n\nconst styles = StyleSheet.create({\n    absolute: {\n        position: 'absolute',\n    },\n});\n"],"mappings":";;;;;;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;AAQe,SAASA,QAAT,CAAkBC,KAAlB,EAAwC;EACnD,MAAM;IACFC,QADE;IAEFC,KAFE;IAGFC;EAHE,IAIFH,KAJJ;EAMA,MAAM;IACFI,eADE;IAEFC,UAFE;IAGFC,SAHE;IAIFC,mBAJE;IAKFC;EALE,IAMF,IAAAC,iBAAA,EAAWC,wBAAX,CANJ;EAQA,MAAM,CAACC,OAAD,EAAUC,UAAV,IAAwB,IAAAC,eAAA,EAAS,KAAT,CAA9B;EAEA,MAAMC,aAAa,GAAG,IAAAC,6BAAA,EAAqBb,KAArB,CAAtB;EAEA,MAAMc,SAAS,GAAG,IAAAC,cAAA,EACd,MAAMb,eAAe,CAACU,aAAD,EAAgBR,SAAhB,CADP,EAEd,CAACF,eAAD,EAAkBU,aAAlB,EAAiCR,SAAjC,CAFc,CAAlB;EAKA,IAAAY,gBAAA,EAAU,MAAM;IACZ,OAAOX,mBAAmB,CAACY,SAApB,CAA8BC,MAAM,IAAI;MAC3C,MAAMC,WAAW,GAAGD,MAAM,CAACE,IAAP,CAAY;QAAA,IAAC,CAACC,IAAD,EAAOC,EAAP,CAAD;QAAA,OAAgBtB,KAAK,IAAIqB,IAAT,IAAiBrB,KAAK,IAAIsB,EAA1C;MAAA,CAAZ,CAApB;MACAZ,UAAU,CAACS,WAAD,CAAV;IACH,CAHM,CAAP;EAIH,CALD,EAKG,CAACnB,KAAD,EAAQK,mBAAR,CALH;EAOA,oBACI,6BAAC,qBAAD,CAAU,IAAV;IACI,8BAA8B,EAAEC,oCADpC;IAEI,QAAQ,EAAEG,OAAO,GAAGV,QAAQ,CAACa,aAAD,CAAX,GAA6B,IAFlD;IAGI,QAAQ,EAAEX,QAHd;IAII,KAAK,EAAE,CACH;MACIsB,KAAK,EAAEnB,SADX;MAEIoB,MAAM,EAAErB,UAAU,KAAK,MAAf,GAAwBA,UAAxB,GAAqCsB;IAFjD,CADG,EAKHC,MAAM,CAACC,QALJ,EAMH;IACAb,SAPG;EAJX,EADJ;AAgBH;;AAAA;;AAED,MAAMY,MAAM,GAAGE,gBAAA,CAAWC,MAAX,CAAkB;EAC7BF,QAAQ,EAAE;IACNG,QAAQ,EAAE;EADJ;AADmB,CAAlB,CAAf"}

package/build/commonjs/ComicViewer/FastScroll.js

@@ -15,10 +15,12 @@ var _reactNativeGestureHandler = require("react-native-gesture-handler");
 
 var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
 
-var _icons = require("@fountain-ui/icons");
+var _v2Icons = require("@fountain-ui/icons/src/v2Icons");
 
 var _core = require("@fountain-ui/core");
 
+var _styles = require("@fountain-ui/styles");
+
 var _util = require("./util");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -31,7 +33,7 @@ const styles = _core.StyleSheet.create({
   indicator: {
     width: INDICATOR_WIDTH,
     height: 48,
-    backgroundColor: '#767676',
+    backgroundColor: _styles.baseColors.gray['650'],
     flexDirection: 'column',
     alignItems: 'center',
     justifyContent: 'center',
@@ -159,14 +161,10 @@ const FastScroll = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     gesture: pan
   }, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
     style: [animatedStyle, styles.indicator]
-  }, /*#__PURE__*/_react.default.createElement(_icons.ChevronUp, {
-    fill: '#ededed',
-    height: 20,
-    width: 20
-  }), /*#__PURE__*/_react.default.createElement(_icons.ChevronDown, {
-    fill: '#ededed',
-    height: 20,
-    width: 20
+  }, /*#__PURE__*/_react.default.createElement(_v2Icons.ChevronUp, {
+    fill: _styles.commonColors.static.strongInverse
+  }), /*#__PURE__*/_react.default.createElement(_v2Icons.ChevronDown, {
+    fill: _styles.commonColors.static.strongInverse
   }))));
 });
 

package/build/commonjs/ComicViewer/FastScroll.js.map

@@ -1 +1 @@
-{"version":3,"names":["INDICATOR_WIDTH","styles","StyleSheet","create","indicator","width","height","backgroundColor","flexDirection","alignItems","justifyContent","borderRadius","view","position","FastScroll","React","forwardRef","props","ref","absolutePosition","additionalLength","contentLength","initialScrollPercentage","movementRange","scrollContentToOffset","visibleDurations","hideMillis","showMillis","totalContentLength","contentOffset","Math","floor","contentPercentage","offsetToPercentage","initialLastIndicatorOffset","percentageToOffset","lastIndicatorOffset","useSharedValue","indicatorOffset","value","isIndicatorDragging","useRef","indicatorOpacity","visible","setVisible","useState","animatedStyle","useAnimatedStyle","transform","translateY","opacity","right","R","defaultTo","onContentScroll","useCallback","event","current","nativeEvent","y","offset","getIsIndicatorDragging","useImperativeHandle","handleUpdate","setIsIndicatorDragging","pan","Gesture","Pan","onBegin","e","runOnJS","onUpdate","translationY","onFinalize","hide","withDelay","withTiming","duration","show","useEffect"],"sources":["FastScroll.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport * as R from 'ramda';\nimport { NativeScrollEvent, NativeSyntheticEvent, View } from 'react-native';\nimport { Gesture, GestureDetector } from 'react-native-gesture-handler';\nimport Animated, { runOnJS, useAnimatedStyle, useSharedValue, withDelay, withTiming } from 'react-native-reanimated';\nimport { ChevronDown, ChevronUp } from '@fountain-ui/icons';\nimport { StyleSheet } from '@fountain-ui/core';\nimport FastScrollProps from './FastScrollProps';\nimport { offsetToPercentage, percentageToOffset } from './util';\n\nconst INDICATOR_WIDTH = 28;\n\nconst styles = StyleSheet.create({\n    indicator: {\n        width: INDICATOR_WIDTH,\n        height: 48,\n        backgroundColor: '#767676',\n        flexDirection: 'column',\n        alignItems: 'center',\n        justifyContent: 'center',\n        borderRadius: 16,\n    },\n    view: {\n        position: 'absolute',\n        width: 0,\n    },\n});\n\nconst FastScroll = React.forwardRef((props: FastScrollProps, ref) => {\n    const {\n        absolutePosition,\n        additionalLength = 0,\n        contentLength,\n        initialScrollPercentage = 0,\n        movementRange,\n        scrollContentToOffset,\n        visibleDurations = { hideMillis: 200, showMillis: 350 },\n    } = props;\n\n    const totalContentLength = contentLength + additionalLength;\n\n    const contentOffset = Math.floor((initialScrollPercentage / 100) * contentLength);\n    const contentPercentage = offsetToPercentage(contentOffset, totalContentLength);\n    const initialLastIndicatorOffset = percentageToOffset(contentPercentage, movementRange);\n\n    const lastIndicatorOffset = useSharedValue(initialLastIndicatorOffset);\n    const indicatorOffset = useSharedValue(lastIndicatorOffset.value);\n\n    const isIndicatorDragging = useRef(false);\n\n    const indicatorOpacity = useSharedValue(0);\n    const [visible, setVisible] = useState(false);\n\n    const animatedStyle = useAnimatedStyle(() => ({\n        transform: [{ translateY: indicatorOffset.value }],\n        opacity: indicatorOpacity.value,\n    }));\n\n    const position = {\n        ...absolutePosition,\n        right: R.defaultTo(0)(absolutePosition?.right) + INDICATOR_WIDTH,\n    };\n\n    const onContentScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {\n        if (!isIndicatorDragging.current) {\n            const contentPercentage = offsetToPercentage(event.nativeEvent.contentOffset.y, totalContentLength);\n            const offset = percentageToOffset(contentPercentage, movementRange);\n\n            if (offset < 0 || indicatorOffset.value < 0) {\n                lastIndicatorOffset.value = 0;\n                indicatorOffset.value = 0;\n                return;\n            }\n\n            if (offset > movementRange || indicatorOffset.value > movementRange) {\n                lastIndicatorOffset.value = movementRange;\n                indicatorOffset.value = movementRange;\n                return;\n            }\n\n            lastIndicatorOffset.value = offset;\n            indicatorOffset.value = offset;\n        } else {\n            setVisible(true);\n        }\n    }, [totalContentLength, movementRange]);\n\n    const getIsIndicatorDragging = () => isIndicatorDragging.current;\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            getIsIndicatorDragging,\n            onContentScroll,\n            setVisible,\n        }),\n        [onContentScroll],\n    );\n\n    const handleUpdate = () => {\n        const contentPercentage = offsetToPercentage(indicatorOffset.value, movementRange);\n        const offset = percentageToOffset(contentPercentage, totalContentLength);\n\n        scrollContentToOffset(offset);\n    };\n\n    const setIsIndicatorDragging = (value: boolean) => isIndicatorDragging.current = value;\n\n    const pan = Gesture.Pan()\n        .onBegin((e) => {\n            indicatorOffset.value = lastIndicatorOffset.value;\n            runOnJS(setIsIndicatorDragging)(true);\n        })\n        .onUpdate((e) => {\n            if (indicatorOffset.value <= 0 && e.translationY < 0) {\n                indicatorOffset.value = 0;\n                return;\n            }\n\n            if (indicatorOffset.value >= movementRange && e.translationY > 0) {\n                indicatorOffset.value = movementRange;\n                return;\n            }\n\n            indicatorOffset.value = lastIndicatorOffset.value + e.translationY;\n\n            runOnJS(handleUpdate)();\n        })\n        .onFinalize((e) => {\n            lastIndicatorOffset.value = indicatorOffset.value;\n            runOnJS(setIsIndicatorDragging)(false);\n        });\n\n    const hide = () => indicatorOpacity.value = withDelay(0, withTiming(0, { duration: visibleDurations.hideMillis }));\n\n    const show = () => indicatorOpacity.value = withDelay(0, withTiming(1, { duration: visibleDurations.showMillis }));\n\n    useEffect(() => {\n        if (visible) {\n            indicatorOffset.value = lastIndicatorOffset.value;\n            show();\n        } else {\n            hide();\n        }\n    }, [visible]);\n\n    return (\n        <View\n            style={[\n                { height: movementRange },\n                styles.view,\n                position,\n            ]}\n        >\n            <GestureDetector gesture={pan}>\n                <Animated.View style={[\n                    animatedStyle,\n                    styles.indicator,\n                ]}>\n                    <ChevronUp\n                        fill={'#ededed'}\n                        height={20}\n                        width={20}\n                    />\n                    <ChevronDown\n                        fill={'#ededed'}\n                        height={20}\n                        width={20}\n                    />\n                </Animated.View>\n            </GestureDetector>\n        </View>\n    );\n});\n\nexport default FastScroll;"],"mappings":"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"}
+{"version":3,"names":["INDICATOR_WIDTH","styles","StyleSheet","create","indicator","width","height","backgroundColor","baseColors","gray","flexDirection","alignItems","justifyContent","borderRadius","view","position","FastScroll","React","forwardRef","props","ref","absolutePosition","additionalLength","contentLength","initialScrollPercentage","movementRange","scrollContentToOffset","visibleDurations","hideMillis","showMillis","totalContentLength","contentOffset","Math","floor","contentPercentage","offsetToPercentage","initialLastIndicatorOffset","percentageToOffset","lastIndicatorOffset","useSharedValue","indicatorOffset","value","isIndicatorDragging","useRef","indicatorOpacity","visible","setVisible","useState","animatedStyle","useAnimatedStyle","transform","translateY","opacity","right","R","defaultTo","onContentScroll","useCallback","event","current","nativeEvent","y","offset","getIsIndicatorDragging","useImperativeHandle","handleUpdate","setIsIndicatorDragging","pan","Gesture","Pan","onBegin","e","runOnJS","onUpdate","translationY","onFinalize","hide","withDelay","withTiming","duration","show","useEffect","commonColors","static","strongInverse"],"sources":["FastScroll.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport * as R from 'ramda';\nimport { NativeScrollEvent, NativeSyntheticEvent, View } from 'react-native';\nimport { Gesture, GestureDetector } from 'react-native-gesture-handler';\nimport Animated, { runOnJS, useAnimatedStyle, useSharedValue, withDelay, withTiming } from 'react-native-reanimated';\nimport { ChevronDown, ChevronUp } from '@fountain-ui/icons/src/v2Icons';\nimport { StyleSheet } from '@fountain-ui/core';\nimport { baseColors, commonColors } from '@fountain-ui/styles';\nimport FastScrollProps from './FastScrollProps';\nimport { offsetToPercentage, percentageToOffset } from './util';\n\nconst INDICATOR_WIDTH = 28;\n\nconst styles = StyleSheet.create({\n    indicator: {\n        width: INDICATOR_WIDTH,\n        height: 48,\n        backgroundColor: baseColors.gray['650'],\n        flexDirection: 'column',\n        alignItems: 'center',\n        justifyContent: 'center',\n        borderRadius: 16,\n    },\n    view: {\n        position: 'absolute',\n        width: 0,\n    },\n});\n\nconst FastScroll = React.forwardRef((props: FastScrollProps, ref) => {\n    const {\n        absolutePosition,\n        additionalLength = 0,\n        contentLength,\n        initialScrollPercentage = 0,\n        movementRange,\n        scrollContentToOffset,\n        visibleDurations = { hideMillis: 200, showMillis: 350 },\n    } = props;\n\n    const totalContentLength = contentLength + additionalLength;\n\n    const contentOffset = Math.floor((initialScrollPercentage / 100) * contentLength);\n    const contentPercentage = offsetToPercentage(contentOffset, totalContentLength);\n    const initialLastIndicatorOffset = percentageToOffset(contentPercentage, movementRange);\n\n    const lastIndicatorOffset = useSharedValue(initialLastIndicatorOffset);\n    const indicatorOffset = useSharedValue(lastIndicatorOffset.value);\n\n    const isIndicatorDragging = useRef(false);\n\n    const indicatorOpacity = useSharedValue(0);\n    const [visible, setVisible] = useState(false);\n\n    const animatedStyle = useAnimatedStyle(() => ({\n        transform: [{ translateY: indicatorOffset.value }],\n        opacity: indicatorOpacity.value,\n    }));\n\n    const position = {\n        ...absolutePosition,\n        right: R.defaultTo(0)(absolutePosition?.right) + INDICATOR_WIDTH,\n    };\n\n    const onContentScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {\n        if (!isIndicatorDragging.current) {\n            const contentPercentage = offsetToPercentage(event.nativeEvent.contentOffset.y, totalContentLength);\n            const offset = percentageToOffset(contentPercentage, movementRange);\n\n            if (offset < 0 || indicatorOffset.value < 0) {\n                lastIndicatorOffset.value = 0;\n                indicatorOffset.value = 0;\n                return;\n            }\n\n            if (offset > movementRange || indicatorOffset.value > movementRange) {\n                lastIndicatorOffset.value = movementRange;\n                indicatorOffset.value = movementRange;\n                return;\n            }\n\n            lastIndicatorOffset.value = offset;\n            indicatorOffset.value = offset;\n        } else {\n            setVisible(true);\n        }\n    }, [totalContentLength, movementRange]);\n\n    const getIsIndicatorDragging = () => isIndicatorDragging.current;\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            getIsIndicatorDragging,\n            onContentScroll,\n            setVisible,\n        }),\n        [onContentScroll],\n    );\n\n    const handleUpdate = () => {\n        const contentPercentage = offsetToPercentage(indicatorOffset.value, movementRange);\n        const offset = percentageToOffset(contentPercentage, totalContentLength);\n\n        scrollContentToOffset(offset);\n    };\n\n    const setIsIndicatorDragging = (value: boolean) => isIndicatorDragging.current = value;\n\n    const pan = Gesture.Pan()\n        .onBegin((e) => {\n            indicatorOffset.value = lastIndicatorOffset.value;\n            runOnJS(setIsIndicatorDragging)(true);\n        })\n        .onUpdate((e) => {\n            if (indicatorOffset.value <= 0 && e.translationY < 0) {\n                indicatorOffset.value = 0;\n                return;\n            }\n\n            if (indicatorOffset.value >= movementRange && e.translationY > 0) {\n                indicatorOffset.value = movementRange;\n                return;\n            }\n\n            indicatorOffset.value = lastIndicatorOffset.value + e.translationY;\n\n            runOnJS(handleUpdate)();\n        })\n        .onFinalize((e) => {\n            lastIndicatorOffset.value = indicatorOffset.value;\n            runOnJS(setIsIndicatorDragging)(false);\n        });\n\n    const hide = () => indicatorOpacity.value = withDelay(0, withTiming(0, { duration: visibleDurations.hideMillis }));\n\n    const show = () => indicatorOpacity.value = withDelay(0, withTiming(1, { duration: visibleDurations.showMillis }));\n\n    useEffect(() => {\n        if (visible) {\n            indicatorOffset.value = lastIndicatorOffset.value;\n            show();\n        } else {\n            hide();\n        }\n    }, [visible]);\n\n    return (\n        <View\n            style={[\n                { height: movementRange },\n                styles.view,\n                position,\n            ]}\n        >\n            <GestureDetector gesture={pan}>\n                <Animated.View style={[\n                    animatedStyle,\n                    styles.indicator,\n                ]}>\n                    <ChevronUp fill={commonColors.static.strongInverse}/>\n\n                    <ChevronDown fill={commonColors.static.strongInverse}/>\n                </Animated.View>\n            </GestureDetector>\n        </View>\n    );\n});\n\nexport default FastScroll;"],"mappings":"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"}

package/build/module/BottomSheet/BottomSheetNative.js

@@ -2,6 +2,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Animated, useWindowDimensions } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { BottomSheetBackdrop, BottomSheetModal, BottomSheetModalProvider, BottomSheetView } from '@gorhom/bottom-sheet';
 import { Column, css, isNotAndroid12, useAnimatedValue } from '@fountain-ui/core';
 import { useTheme } from '@fountain-ui/styles';
@@ -10,6 +11,8 @@ import useDynamicSnapPoints from './useDynamicSnapPoints.native';
 
 const NoHandle = () => null;
 
+const DEFAULT_PADDING_BOTTOM = 24;
+const DEFAULT_PADDING_TOP = 22;
 export default function BottomSheet(props) {
   const {
     backdropOpacity = 0.5,
@@ -76,6 +79,9 @@ export default function BottomSheet(props) {
     borderTopLeftRadius: borderRadius,
     borderTopRightRadius: borderRadius
   }, backgroundStyleProp]);
+  const {
+    bottom: bottomSafeInset
+  } = useSafeAreaInsets();
   const contentWrapperStyle = css([{
     backgroundColor: theme.palette.surface.base,
     borderTopLeftRadius: borderRadius,
@@ -84,8 +90,8 @@ export default function BottomSheet(props) {
     maxHeight: maxDynamicContentSize,
     minHeight: 325,
     overflow: 'hidden',
-    paddingBottom: theme.spacing(6),
-    paddingTop: theme.spacing(5.5)
+    paddingBottom: DEFAULT_PADDING_BOTTOM + bottomSafeInset,
+    paddingTop: DEFAULT_PADDING_TOP
   }, styleProp]);
   const isBackdropTransparent = backdropOpacity <= 0;
 

package/build/module/BottomSheet/BottomSheetNative.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useRef","useState","Animated","useWindowDimensions","BottomSheetBackdrop","BottomSheetModal","BottomSheetModalProvider","BottomSheetView","Column","css","isNotAndroid12","useAnimatedValue","useTheme","TransparentBackdrop","useDynamicSnapPoints","NoHandle","BottomSheet","props","backdropOpacity","backgroundStyle","backgroundStyleProp","borderRadius","borderRadiusProp","children","enableDynamicSizing","topElement","index","maxHeightNormalizedRatio","onChange","snapPoints","style","styleProp","indexRef","bottomSheetRef","height","windowHeight","topElementHeight","setTopElementHeight","maxDynamicContentSize","Math","round","handleTopElementLayout","event","nativeEvent","layout","handleChange","newIndex","current","handleDismiss","present","dismiss","snapToIndex","theme","shape","radius","xxl","backgroundColor","palette","surface","base","borderTopLeftRadius","borderTopRightRadius","contentWrapperStyle","flexShrink","maxHeight","minHeight","overflow","paddingBottom","spacing","paddingTop","isBackdropTransparent","OpacityAwareBackdrop","topElementOpacity","topElementAnimationStyle","opacity","topElementLocationStyle","position","width","bottom","onAnimate","fromIndex","toIndex","isVisible","timing","toValue","duration","useNativeDriver","start","animatedHandleHeight","animatedSnapPoints","animatedContentHeight","handleContentLayout","Boolean","undefined"],"sources":["BottomSheetNative.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { Animated, LayoutChangeEvent, useWindowDimensions, ViewStyle } from 'react-native';\nimport {\n    BottomSheetBackdrop,\n    BottomSheetBackdropProps,\n    BottomSheetModal,\n    BottomSheetModalProvider,\n    BottomSheetView,\n} from '@gorhom/bottom-sheet';\nimport { Column, css, ExtendedStyle, isNotAndroid12, useAnimatedValue } from '@fountain-ui/core';\nimport { useTheme } from '@fountain-ui/styles';\nimport type BottomSheetProps from './BottomSheetProps';\nimport TransparentBackdrop from './TransparentBackdrop';\nimport useDynamicSnapPoints from './useDynamicSnapPoints.native';\n\nconst NoHandle = () => null;\n\nexport default function BottomSheet(props: BottomSheetProps) {\n    const {\n        backdropOpacity = 0.5,\n        backgroundStyle: backgroundStyleProp,\n        borderRadius: borderRadiusProp,\n        children,\n        enableDynamicSizing = true,\n        topElement,\n        index,\n        maxHeightNormalizedRatio = 0.8,\n        onChange,\n        snapPoints = [],\n        style: styleProp,\n    } = props;\n\n    const indexRef = useRef<number>(-1);\n    const bottomSheetRef = useRef<BottomSheetModal | null>(null);\n\n    const { height: windowHeight } = useWindowDimensions();\n    const [topElementHeight, setTopElementHeight] = useState(0);\n\n    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeight;\n\n    const handleTopElementLayout = (event: LayoutChangeEvent) => {\n        const { height } = event.nativeEvent.layout;\n        setTopElementHeight(height);\n    };\n\n    const handleChange = useCallback((newIndex: number) => {\n        indexRef.current = newIndex;\n\n        if (onChange) {\n            onChange(newIndex);\n        }\n    }, [onChange]);\n\n    const handleDismiss = useCallback(() => {\n        handleChange(-1);\n    }, [handleChange]);\n\n    useEffect(() => {\n        if (index === indexRef.current) {\n            return;\n        }\n\n        if (indexRef.current < 0 && index >= 0) {\n            bottomSheetRef.current?.present();\n        } else if (indexRef.current >= 0 && index < 0) {\n            bottomSheetRef.current?.dismiss();\n        } else {\n            // @ts-ignore\n            bottomSheetRef.current?.snapToIndex(index);\n        }\n    }, [index]);\n\n    const theme = useTheme();\n\n    const borderRadius = borderRadiusProp ?? theme.shape.radius.xxl;\n    const backgroundStyle = css([\n        {\n            backgroundColor: theme.palette.surface.base,\n            borderTopLeftRadius: borderRadius,\n            borderTopRightRadius: borderRadius,\n        },\n        backgroundStyleProp,\n    ]);\n\n    const contentWrapperStyle: ViewStyle = css([\n        {\n            backgroundColor: theme.palette.surface.base,\n            borderTopLeftRadius: borderRadius,\n            borderTopRightRadius: borderRadius,\n            flexShrink: 1,\n            maxHeight: maxDynamicContentSize,\n            minHeight: 325,\n            overflow: 'hidden',\n            paddingBottom: theme.spacing(6),\n            paddingTop: theme.spacing(5.5),\n        },\n        styleProp,\n    ]);\n\n    const isBackdropTransparent = backdropOpacity <= 0;\n\n    const OpacityAwareBackdrop = (props: BottomSheetBackdropProps) => (\n        <BottomSheetBackdrop\n            {...props}\n            appearsOnIndex={0}\n            disappearsOnIndex={-1}\n            opacity={backdropOpacity}\n            pressBehavior={onChange ? 'close' : 'none'}\n        />\n    );\n\n    const topElementOpacity = useAnimatedValue(0);\n    const topElementAnimationStyle: Animated.WithAnimatedValue<ExtendedStyle> = { opacity: topElementOpacity };\n    const topElementLocationStyle: ExtendedStyle = {\n        position: 'absolute',\n        width: '100%',\n        bottom: 0,\n    };\n    const onAnimate = (fromIndex: number, toIndex: number) => {\n        const isVisible = toIndex > -1;\n\n        Animated.timing(topElementOpacity, {\n            toValue: isVisible ? 1 : 0,\n            duration: 0,\n            useNativeDriver: isNotAndroid12,\n        }).start();\n    };\n\n    const {\n        animatedHandleHeight,\n        animatedSnapPoints,\n        animatedContentHeight,\n        handleContentLayout,\n    } = useDynamicSnapPoints(snapPoints);\n\n    return (\n        <BottomSheetModalProvider>\n            <BottomSheetModal\n                backdropComponent={isBackdropTransparent ? TransparentBackdrop : OpacityAwareBackdrop}\n                // @ts-ignore\n                backgroundStyle={backgroundStyle}\n                index={index}\n                handleComponent={NoHandle}\n                onChange={handleChange}\n                onDismiss={handleDismiss}\n                ref={bottomSheetRef}\n                enablePanDownToClose={Boolean(onChange)}\n                enableDynamicSizing={enableDynamicSizing}\n                maxDynamicContentSize={maxDynamicContentSize}\n                detached={Boolean(topElement)}\n                onAnimate={topElement ? onAnimate : undefined}\n                snapPoints={animatedSnapPoints}\n                handleHeight={animatedHandleHeight}\n                contentHeight={animatedContentHeight}\n            >\n                {topElement ? (\n                    <Animated.View style={topElementAnimationStyle}>\n                        <Column\n                            onLayout={handleTopElementLayout}\n                            style={topElementLocationStyle}\n                        >\n                            {topElement}\n                        </Column>\n                    </Animated.View>\n                ) : null}\n\n                <BottomSheetView\n                    onLayout={handleContentLayout}\n                    style={contentWrapperStyle}\n                >\n                    {children}\n                </BottomSheetView>\n            </BottomSheetModal>\n        </BottomSheetModalProvider>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","useCallback","useEffect","useRef","useState","Animated","useWindowDimensions","useSafeAreaInsets","BottomSheetBackdrop","BottomSheetModal","BottomSheetModalProvider","BottomSheetView","Column","css","isNotAndroid12","useAnimatedValue","useTheme","TransparentBackdrop","useDynamicSnapPoints","NoHandle","DEFAULT_PADDING_BOTTOM","DEFAULT_PADDING_TOP","BottomSheet","props","backdropOpacity","backgroundStyle","backgroundStyleProp","borderRadius","borderRadiusProp","children","enableDynamicSizing","topElement","index","maxHeightNormalizedRatio","onChange","snapPoints","style","styleProp","indexRef","bottomSheetRef","height","windowHeight","topElementHeight","setTopElementHeight","maxDynamicContentSize","Math","round","handleTopElementLayout","event","nativeEvent","layout","handleChange","newIndex","current","handleDismiss","present","dismiss","snapToIndex","theme","shape","radius","xxl","backgroundColor","palette","surface","base","borderTopLeftRadius","borderTopRightRadius","bottom","bottomSafeInset","contentWrapperStyle","flexShrink","maxHeight","minHeight","overflow","paddingBottom","paddingTop","isBackdropTransparent","OpacityAwareBackdrop","topElementOpacity","topElementAnimationStyle","opacity","topElementLocationStyle","position","width","onAnimate","fromIndex","toIndex","isVisible","timing","toValue","duration","useNativeDriver","start","animatedHandleHeight","animatedSnapPoints","animatedContentHeight","handleContentLayout","Boolean","undefined"],"sources":["BottomSheetNative.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { Animated, LayoutChangeEvent, useWindowDimensions, ViewStyle } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport {\n    BottomSheetBackdrop,\n    BottomSheetBackdropProps,\n    BottomSheetModal,\n    BottomSheetModalProvider,\n    BottomSheetView,\n} from '@gorhom/bottom-sheet';\nimport { Column, css, ExtendedStyle, isNotAndroid12, useAnimatedValue } from '@fountain-ui/core';\nimport { useTheme } from '@fountain-ui/styles';\nimport type BottomSheetProps from './BottomSheetProps';\nimport TransparentBackdrop from './TransparentBackdrop';\nimport useDynamicSnapPoints from './useDynamicSnapPoints.native';\n\nconst NoHandle = () => null;\n\nconst DEFAULT_PADDING_BOTTOM = 24;\nconst DEFAULT_PADDING_TOP = 22;\n\nexport default function BottomSheet(props: BottomSheetProps) {\n    const {\n        backdropOpacity = 0.5,\n        backgroundStyle: backgroundStyleProp,\n        borderRadius: borderRadiusProp,\n        children,\n        enableDynamicSizing = true,\n        topElement,\n        index,\n        maxHeightNormalizedRatio = 0.8,\n        onChange,\n        snapPoints = [],\n        style: styleProp,\n    } = props;\n\n    const indexRef = useRef<number>(-1);\n    const bottomSheetRef = useRef<BottomSheetModal | null>(null);\n\n    const { height: windowHeight } = useWindowDimensions();\n    const [topElementHeight, setTopElementHeight] = useState(0);\n\n    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeight;\n\n    const handleTopElementLayout = (event: LayoutChangeEvent) => {\n        const { height } = event.nativeEvent.layout;\n        setTopElementHeight(height);\n    };\n\n    const handleChange = useCallback((newIndex: number) => {\n        indexRef.current = newIndex;\n\n        if (onChange) {\n            onChange(newIndex);\n        }\n    }, [onChange]);\n\n    const handleDismiss = useCallback(() => {\n        handleChange(-1);\n    }, [handleChange]);\n\n    useEffect(() => {\n        if (index === indexRef.current) {\n            return;\n        }\n\n        if (indexRef.current < 0 && index >= 0) {\n            bottomSheetRef.current?.present();\n        } else if (indexRef.current >= 0 && index < 0) {\n            bottomSheetRef.current?.dismiss();\n        } else {\n            // @ts-ignore\n            bottomSheetRef.current?.snapToIndex(index);\n        }\n    }, [index]);\n\n    const theme = useTheme();\n\n    const borderRadius = borderRadiusProp ?? theme.shape.radius.xxl;\n    const backgroundStyle = css([\n        {\n            backgroundColor: theme.palette.surface.base,\n            borderTopLeftRadius: borderRadius,\n            borderTopRightRadius: borderRadius,\n        },\n        backgroundStyleProp,\n    ]);\n\n    const { bottom: bottomSafeInset } = useSafeAreaInsets();\n\n    const contentWrapperStyle: ViewStyle = css([\n        {\n            backgroundColor: theme.palette.surface.base,\n            borderTopLeftRadius: borderRadius,\n            borderTopRightRadius: borderRadius,\n            flexShrink: 1,\n            maxHeight: maxDynamicContentSize,\n            minHeight: 325,\n            overflow: 'hidden',\n            paddingBottom: DEFAULT_PADDING_BOTTOM + bottomSafeInset,\n            paddingTop: DEFAULT_PADDING_TOP,\n        },\n        styleProp,\n    ]);\n\n    const isBackdropTransparent = backdropOpacity <= 0;\n\n    const OpacityAwareBackdrop = (props: BottomSheetBackdropProps) => (\n        <BottomSheetBackdrop\n            {...props}\n            appearsOnIndex={0}\n            disappearsOnIndex={-1}\n            opacity={backdropOpacity}\n            pressBehavior={onChange ? 'close' : 'none'}\n        />\n    );\n\n    const topElementOpacity = useAnimatedValue(0);\n    const topElementAnimationStyle: Animated.WithAnimatedValue<ExtendedStyle> = { opacity: topElementOpacity };\n    const topElementLocationStyle: ExtendedStyle = {\n        position: 'absolute',\n        width: '100%',\n        bottom: 0,\n    };\n    const onAnimate = (fromIndex: number, toIndex: number) => {\n        const isVisible = toIndex > -1;\n\n        Animated.timing(topElementOpacity, {\n            toValue: isVisible ? 1 : 0,\n            duration: 0,\n            useNativeDriver: isNotAndroid12,\n        }).start();\n    };\n\n    const {\n        animatedHandleHeight,\n        animatedSnapPoints,\n        animatedContentHeight,\n        handleContentLayout,\n    } = useDynamicSnapPoints(snapPoints);\n\n    return (\n        <BottomSheetModalProvider>\n            <BottomSheetModal\n                backdropComponent={isBackdropTransparent ? TransparentBackdrop : OpacityAwareBackdrop}\n                // @ts-ignore\n                backgroundStyle={backgroundStyle}\n                index={index}\n                handleComponent={NoHandle}\n                onChange={handleChange}\n                onDismiss={handleDismiss}\n                ref={bottomSheetRef}\n                enablePanDownToClose={Boolean(onChange)}\n                enableDynamicSizing={enableDynamicSizing}\n                maxDynamicContentSize={maxDynamicContentSize}\n                detached={Boolean(topElement)}\n                onAnimate={topElement ? onAnimate : undefined}\n                snapPoints={animatedSnapPoints}\n                handleHeight={animatedHandleHeight}\n                contentHeight={animatedContentHeight}\n            >\n                {topElement ? (\n                    <Animated.View style={topElementAnimationStyle}>\n                        <Column\n                            onLayout={handleTopElementLayout}\n                            style={topElementLocationStyle}\n                        >\n                            {topElement}\n                        </Column>\n                    </Animated.View>\n                ) : null}\n\n                <BottomSheetView\n                    onLayout={handleContentLayout}\n                    style={contentWrapperStyle}\n                >\n                    {children}\n                </BottomSheetView>\n            </BottomSheetModal>\n        </BottomSheetModalProvider>\n    );\n};\n"],"mappings":"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"}

package/build/module/Carousel/Carousel.js

@@ -15,6 +15,7 @@ const Carousel = /*#__PURE__*/forwardRef(function Carousel(props, ref) {
     itemHeight,
     itemWidth,
     loop = false,
+    needsOffscreenAlphaCompositingOnItem = false,
     onIndexChange,
     renderItem,
     scrollEnabled = true,
@@ -73,8 +74,9 @@ const Carousel = /*#__PURE__*/forwardRef(function Carousel(props, ref) {
     itemHeight,
     itemWidth,
     itemVisibilityStore,
-    loop
-  }), [createItemStyle, data, globalInterpolation, itemHeight, itemWidth, itemVisibilityStore, loop]);
+    loop,
+    needsOffscreenAlphaCompositingOnItem
+  }), [createItemStyle, data, globalInterpolation, itemHeight, itemWidth, itemVisibilityStore, loop, needsOffscreenAlphaCompositingOnItem]);
   return /*#__PURE__*/React.createElement(InternalContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement(ViewabilityTrackerView, {

package/build/module/Carousel/Carousel.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","forwardRef","memo","useImperativeHandle","useMemo","ViewabilityTrackerView","useAutoplayController","useIndexController","useItemVisibilityStore","useLoopedData","usePagingAnimator","createDefaultItemStyle","createDefaultScrollAnimation","InternalContext","RootView","ScrollViewGesture","Carousel","props","ref","autoplay","autoplayInterval","createItemStyle","createScrollAnimation","data","originalData","disableSmartAutoplay","initialIndex","itemHeight","itemWidth","loop","onIndexChange","renderItem","scrollEnabled","style","windowSize","itemVisibilityStore","onPositionChange","numberOfData","length","indexController","numberOfOriginalData","getCurrentIndex","gestureTranslationX","globalInterpolation","interruptAnimation","startPagingAnimation","autoplayController","enabled","intervalMillis","next","direction","prev","scrollTo","option","contextValue","Math","max","visible","resume","pause"],"sources":["Carousel.tsx"],"sourcesContent":["import React, { forwardRef, memo, useImperativeHandle, useMemo } from 'react';\nimport ViewabilityTrackerView from '../ViewabilityTrackerView';\nimport type CarouselProps from './CarouselProps';\nimport type { CarouselInstance } from './types';\nimport {\n    useAutoplayController,\n    useIndexController,\n    useItemVisibilityStore,\n    useLoopedData,\n    usePagingAnimator,\n} from './hooks';\nimport { createDefaultItemStyle, createDefaultScrollAnimation } from './animation';\nimport { InternalContext, RootView, ScrollViewGesture } from './components';\n\nconst Carousel = forwardRef<CarouselInstance, CarouselProps>(function Carousel(props, ref) {\n    const {\n        autoplay = false,\n        autoplayInterval = 3000,\n        createItemStyle = createDefaultItemStyle,\n        createScrollAnimation = createDefaultScrollAnimation,\n        data: originalData,\n        disableSmartAutoplay = false,\n        initialIndex = 0,\n        itemHeight,\n        itemWidth,\n        loop = false,\n        onIndexChange,\n        renderItem,\n        scrollEnabled = true,\n        style,\n        windowSize = 5,\n    } = props;\n\n    const data = useLoopedData(originalData, loop);\n\n    const [itemVisibilityStore, onPositionChange] = useItemVisibilityStore({\n        initialIndex,\n        numberOfData: data.length,\n        windowSize,\n    });\n\n    const indexController = useIndexController({\n        initialIndex,\n        itemWidth,\n        numberOfData: data.length,\n        numberOfOriginalData: originalData.length,\n        onIndexChange,\n        onPositionChange,\n    });\n\n    const { getCurrentIndex } = indexController;\n\n    const {\n        gestureTranslationX,\n        globalInterpolation,\n        interruptAnimation,\n        startPagingAnimation,\n    } = usePagingAnimator({\n        createScrollAnimation,\n        itemWidth,\n        indexController,\n        initialIndex,\n        loop,\n        numberOfData: data.length,\n    });\n\n    const autoplayController = useAutoplayController({\n        enabled: autoplay,\n        intervalMillis: autoplayInterval,\n        startPagingAnimation,\n    });\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            getCurrentIndex,\n            next: () => startPagingAnimation('directional', { direction: 'next' }),\n            prev: () => startPagingAnimation('directional', { direction: 'prev' }),\n            scrollTo: (option) => startPagingAnimation('index', option),\n        }),\n        [startPagingAnimation, getCurrentIndex],\n    );\n\n    const contextValue = useMemo(() => ({\n        createItemStyle,\n        data,\n        globalInterpolation,\n        itemHeight,\n        itemWidth,\n        itemVisibilityStore,\n        loop,\n    }), [\n        createItemStyle,\n        data,\n        globalInterpolation,\n        itemHeight,\n        itemWidth,\n        itemVisibilityStore,\n        loop,\n    ]);\n\n    return (\n        <InternalContext.Provider value={contextValue}>\n            <ViewabilityTrackerView\n                enabled={autoplay && !disableSmartAutoplay}\n                measurementIntervalMillis={Math.max(3000, autoplayInterval)}\n                onViewabilityChange={({ visible }) => {\n                    if (visible) {\n                        autoplayController.resume();\n                    } else {\n                        autoplayController.pause();\n                    }\n                }}\n            >\n                <ScrollViewGesture\n                    autoplayController={autoplayController}\n                    gestureTranslationX={gestureTranslationX}\n                    interruptAnimation={interruptAnimation}\n                    scrollEnabled={scrollEnabled}\n                    startPagingAnimation={startPagingAnimation}\n                >\n                    <RootView\n                        data={data}\n                        itemHeight={itemHeight}\n                        originalData={originalData}\n                        renderItem={renderItem}\n                        style={style}\n                    />\n                </ScrollViewGesture>\n            </ViewabilityTrackerView>\n        </InternalContext.Provider>\n    );\n});\n\nexport default memo(Carousel);\n"],"mappings":"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"}
+{"version":3,"names":["React","forwardRef","memo","useImperativeHandle","useMemo","ViewabilityTrackerView","useAutoplayController","useIndexController","useItemVisibilityStore","useLoopedData","usePagingAnimator","createDefaultItemStyle","createDefaultScrollAnimation","InternalContext","RootView","ScrollViewGesture","Carousel","props","ref","autoplay","autoplayInterval","createItemStyle","createScrollAnimation","data","originalData","disableSmartAutoplay","initialIndex","itemHeight","itemWidth","loop","needsOffscreenAlphaCompositingOnItem","onIndexChange","renderItem","scrollEnabled","style","windowSize","itemVisibilityStore","onPositionChange","numberOfData","length","indexController","numberOfOriginalData","getCurrentIndex","gestureTranslationX","globalInterpolation","interruptAnimation","startPagingAnimation","autoplayController","enabled","intervalMillis","next","direction","prev","scrollTo","option","contextValue","Math","max","visible","resume","pause"],"sources":["Carousel.tsx"],"sourcesContent":["import React, { forwardRef, memo, useImperativeHandle, useMemo } from 'react';\nimport ViewabilityTrackerView from '../ViewabilityTrackerView';\nimport type CarouselProps from './CarouselProps';\nimport type { CarouselInstance } from './types';\nimport {\n    useAutoplayController,\n    useIndexController,\n    useItemVisibilityStore,\n    useLoopedData,\n    usePagingAnimator,\n} from './hooks';\nimport { createDefaultItemStyle, createDefaultScrollAnimation } from './animation';\nimport { InternalContext, RootView, ScrollViewGesture } from './components';\n\nconst Carousel = forwardRef<CarouselInstance, CarouselProps>(function Carousel(props, ref) {\n    const {\n        autoplay = false,\n        autoplayInterval = 3000,\n        createItemStyle = createDefaultItemStyle,\n        createScrollAnimation = createDefaultScrollAnimation,\n        data: originalData,\n        disableSmartAutoplay = false,\n        initialIndex = 0,\n        itemHeight,\n        itemWidth,\n        loop = false,\n        needsOffscreenAlphaCompositingOnItem = false,\n        onIndexChange,\n        renderItem,\n        scrollEnabled = true,\n        style,\n        windowSize = 5,\n    } = props;\n\n    const data = useLoopedData(originalData, loop);\n\n    const [itemVisibilityStore, onPositionChange] = useItemVisibilityStore({\n        initialIndex,\n        numberOfData: data.length,\n        windowSize,\n    });\n\n    const indexController = useIndexController({\n        initialIndex,\n        itemWidth,\n        numberOfData: data.length,\n        numberOfOriginalData: originalData.length,\n        onIndexChange,\n        onPositionChange,\n    });\n\n    const { getCurrentIndex } = indexController;\n\n    const {\n        gestureTranslationX,\n        globalInterpolation,\n        interruptAnimation,\n        startPagingAnimation,\n    } = usePagingAnimator({\n        createScrollAnimation,\n        itemWidth,\n        indexController,\n        initialIndex,\n        loop,\n        numberOfData: data.length,\n    });\n\n    const autoplayController = useAutoplayController({\n        enabled: autoplay,\n        intervalMillis: autoplayInterval,\n        startPagingAnimation,\n    });\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            getCurrentIndex,\n            next: () => startPagingAnimation('directional', { direction: 'next' }),\n            prev: () => startPagingAnimation('directional', { direction: 'prev' }),\n            scrollTo: (option) => startPagingAnimation('index', option),\n        }),\n        [startPagingAnimation, getCurrentIndex],\n    );\n\n    const contextValue = useMemo(() => ({\n        createItemStyle,\n        data,\n        globalInterpolation,\n        itemHeight,\n        itemWidth,\n        itemVisibilityStore,\n        loop,\n        needsOffscreenAlphaCompositingOnItem,\n    }), [\n        createItemStyle,\n        data,\n        globalInterpolation,\n        itemHeight,\n        itemWidth,\n        itemVisibilityStore,\n        loop,\n        needsOffscreenAlphaCompositingOnItem,\n    ]);\n\n    return (\n        <InternalContext.Provider value={contextValue}>\n            <ViewabilityTrackerView\n                enabled={autoplay && !disableSmartAutoplay}\n                measurementIntervalMillis={Math.max(3000, autoplayInterval)}\n                onViewabilityChange={({ visible }) => {\n                    if (visible) {\n                        autoplayController.resume();\n                    } else {\n                        autoplayController.pause();\n                    }\n                }}\n            >\n                <ScrollViewGesture\n                    autoplayController={autoplayController}\n                    gestureTranslationX={gestureTranslationX}\n                    interruptAnimation={interruptAnimation}\n                    scrollEnabled={scrollEnabled}\n                    startPagingAnimation={startPagingAnimation}\n                >\n                    <RootView\n                        data={data}\n                        itemHeight={itemHeight}\n                        originalData={originalData}\n                        renderItem={renderItem}\n                        style={style}\n                    />\n                </ScrollViewGesture>\n            </ViewabilityTrackerView>\n        </InternalContext.Provider>\n    );\n});\n\nexport default memo(Carousel);\n"],"mappings":"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"}

package/build/module/Carousel/CarouselProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["CarouselProps.ts"],"sourcesContent":["import type { RefObject } from 'react';\nimport type { ComponentProps } from '@fountain-ui/core';\nimport type {\n    CarouselInstance,\n    CreateItemStyle,\n    CreateScrollAnimation,\n    ItemHeight,\n    OnIndexChange,\n    RenderItem,\n} from './types';\n\nexport default interface CarouselProps<ItemT = any> extends ComponentProps<{\n    ref?: RefObject<CarouselInstance>;\n\n    /**\n     * If `true`, enable autoplay.\n     * @default false\n     */\n    autoplay?: boolean;\n\n    /**\n     * Delay in ms until navigating to the next item.\n     * @default 3000\n     */\n    autoplayInterval?: number;\n\n    /**\n     * The item style creator function.\n     * @default createDefaultItemStyle\n     */\n    createItemStyle?: CreateItemStyle;\n\n    /**\n     * The scroll animation creator function.\n     * @default createDefaultScrollAnimation\n     */\n    createScrollAnimation?: CreateScrollAnimation;\n\n    /**\n     * Data for render items.\n     */\n    data: ReadonlyArray<ItemT>;\n\n    /**\n     * If `true`, carousel will detect its own viewability and control autoplay automatically.\n     * @default false\n     */\n    disableSmartAutoplay?: boolean;\n\n    /**\n     * Index of initial item that should be selected.\n     * @default 0\n     */\n    initialIndex?: number;\n\n    /**\n     * The item height.\n     * For a performance reason, always consider to provide a number value.\n     */\n    itemHeight: ItemHeight;\n\n    /**\n     * The item width.\n     */\n    itemWidth: number;\n\n    /**\n     * Enable infinite loop mode.\n     * @default false\n     */\n    loop?: boolean;\n\n    /**\n     * Callback fired when an index is changed.\n     */\n    onIndexChange?: OnIndexChange;\n\n    /**\n     * Takes an item from data and renders it into the list.\n     */\n    renderItem: RenderItem<ItemT>;\n\n    /**\n     * Whether to enable scroll gesture.\n     * @default true\n     */\n    scrollEnabled?: boolean;\n\n    /**\n     * The maximum number of items that can respond to pan gesture events.\n     * Due to the nature of the `active` item, it accepts only odd number. (e.g. 1, 3, 5...)\n     * 0 means all items will respond to pan gesture events.\n     * @default 5\n     */\n    windowSize?: number;\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["CarouselProps.ts"],"sourcesContent":["import type { RefObject } from 'react';\nimport type { ComponentProps } from '@fountain-ui/core';\nimport type {\n    CarouselInstance,\n    CreateItemStyle,\n    CreateScrollAnimation,\n    ItemHeight,\n    OnIndexChange,\n    RenderItem,\n} from './types';\n\nexport default interface CarouselProps<ItemT = any> extends ComponentProps<{\n    ref?: RefObject<CarouselInstance>;\n\n    /**\n     * If `true`, enable autoplay.\n     * @default false\n     */\n    autoplay?: boolean;\n\n    /**\n     * Delay in ms until navigating to the next item.\n     * @default 3000\n     */\n    autoplayInterval?: number;\n\n    /**\n     * The item style creator function.\n     * @default createDefaultItemStyle\n     */\n    createItemStyle?: CreateItemStyle;\n\n    /**\n     * The scroll animation creator function.\n     * @default createDefaultScrollAnimation\n     */\n    createScrollAnimation?: CreateScrollAnimation;\n\n    /**\n     * Data for render items.\n     */\n    data: ReadonlyArray<ItemT>;\n\n    /**\n     * If `true`, carousel will detect its own viewability and control autoplay automatically.\n     * @default false\n     */\n    disableSmartAutoplay?: boolean;\n\n    /**\n     * Index of initial item that should be selected.\n     * @default 0\n     */\n    initialIndex?: number;\n\n    /**\n     * The item height.\n     * For a performance reason, always consider to provide a number value.\n     */\n    itemHeight: ItemHeight;\n\n    /**\n     * The item width.\n     */\n    itemWidth: number;\n\n    /**\n     * Enable infinite loop mode.\n     * @default false\n     */\n    loop?: boolean;\n\n    /**\n     * Callback fired when an index is changed.\n     */\n    onIndexChange?: OnIndexChange;\n\n    /**\n     * Takes an item from data and renders it into the list.\n     */\n    renderItem: RenderItem<ItemT>;\n\n    /**\n     * Whether to enable scroll gesture.\n     * @default true\n     */\n    scrollEnabled?: boolean;\n\n    /**\n     * The maximum number of items that can respond to pan gesture events.\n     * Due to the nature of the `active` item, it accepts only odd number. (e.g. 1, 3, 5...)\n     * 0 means all items will respond to pan gesture events.\n     * @default 5\n     */\n    windowSize?: number;\n\n    /**\n     * Whether item views need to be rendered offscreen and composited with an alpha \n     * in order to preserve 100% correct colors and blending behavior.\n     * Use this when items have opacity animations and multiple overlapping elements.\n     * @default false\n     */\n    needsOffscreenAlphaCompositingOnItem?: boolean;\n}> {}\n"],"mappings":""}

package/build/module/Carousel/components/InternalContext.js

@@ -12,7 +12,8 @@ const initialValue = {
   itemHeight: 0,
   itemWidth: 0,
   itemVisibilityStore: mockItemVisibilityStore,
-  loop: false
+  loop: false,
+  needsOffscreenAlphaCompositingOnItem: false
 };
 const InternalContext = /*#__PURE__*/createContext(initialValue);
 export default InternalContext;

package/build/module/Carousel/components/InternalContext.js.map

@@ -1 +1 @@
-{"version":3,"names":["createContext","Animated","mockItemVisibilityStore","dispatch","subscribe","removeAllListeners","initialValue","createItemStyle","data","globalInterpolation","add","Value","itemHeight","itemWidth","itemVisibilityStore","loop","InternalContext"],"sources":["InternalContext.ts"],"sourcesContent":["import { createContext } from 'react';\nimport { Animated } from 'react-native';\nimport type { CreateItemStyle, ItemHeight, ItemVisibilityStore } from '../types';\n\nexport interface InternalContextValue<ItemT> {\n    createItemStyle: CreateItemStyle;\n    data: ReadonlyArray<ItemT>;\n    globalInterpolation: Animated.AnimatedInterpolation;\n    itemHeight: ItemHeight;\n    itemWidth: number;\n    itemVisibilityStore: ItemVisibilityStore;\n    loop: boolean;\n}\n\nconst mockItemVisibilityStore: ItemVisibilityStore = {\n    dispatch: () => void 0,\n    subscribe: () => () => void 0,\n    removeAllListeners: () => void 0,\n};\n\nconst initialValue: Readonly<InternalContextValue<any>> = {\n    createItemStyle: () => ({}),\n    data: [],\n    globalInterpolation: Animated.add(new Animated.Value(0), 0),\n    itemHeight: 0,\n    itemWidth: 0,\n    itemVisibilityStore: mockItemVisibilityStore,\n    loop: false,\n};\n\nconst InternalContext = createContext<InternalContextValue<any>>(initialValue);\n\nexport default InternalContext;\n"],"mappings":"AAAA,SAASA,aAAT,QAA8B,OAA9B;AACA,SAASC,QAAT,QAAyB,cAAzB;AAaA,MAAMC,uBAA4C,GAAG;EACjDC,QAAQ,EAAE,MAAM,KAAK,CAD4B;EAEjDC,SAAS,EAAE,MAAM,MAAM,KAAK,CAFqB;EAGjDC,kBAAkB,EAAE,MAAM,KAAK;AAHkB,CAArD;AAMA,MAAMC,YAAiD,GAAG;EACtDC,eAAe,EAAE,OAAO,EAAP,CADqC;EAEtDC,IAAI,EAAE,EAFgD;EAGtDC,mBAAmB,EAAER,QAAQ,CAACS,GAAT,CAAa,IAAIT,QAAQ,CAACU,KAAb,CAAmB,CAAnB,CAAb,EAAoC,CAApC,CAHiC;EAItDC,UAAU,EAAE,CAJ0C;EAKtDC,SAAS,EAAE,CAL2C;EAMtDC,mBAAmB,EAAEZ,uBANiC;EAOtDa,IAAI,EAAE;AAPgD,CAA1D;AAUA,MAAMC,eAAe,gBAAGhB,aAAa,CAA4BM,YAA5B,CAArC;AAEA,eAAeU,eAAf"}
+{"version":3,"names":["createContext","Animated","mockItemVisibilityStore","dispatch","subscribe","removeAllListeners","initialValue","createItemStyle","data","globalInterpolation","add","Value","itemHeight","itemWidth","itemVisibilityStore","loop","needsOffscreenAlphaCompositingOnItem","InternalContext"],"sources":["InternalContext.ts"],"sourcesContent":["import { createContext } from 'react';\nimport { Animated } from 'react-native';\nimport type { CreateItemStyle, ItemHeight, ItemVisibilityStore } from '../types';\n\nexport interface InternalContextValue<ItemT> {\n    createItemStyle: CreateItemStyle;\n    data: ReadonlyArray<ItemT>;\n    globalInterpolation: Animated.AnimatedInterpolation;\n    itemHeight: ItemHeight;\n    itemWidth: number;\n    itemVisibilityStore: ItemVisibilityStore;\n    loop: boolean;\n    needsOffscreenAlphaCompositingOnItem: boolean;\n}\n\nconst mockItemVisibilityStore: ItemVisibilityStore = {\n    dispatch: () => void 0,\n    subscribe: () => () => void 0,\n    removeAllListeners: () => void 0,\n};\n\nconst initialValue: Readonly<InternalContextValue<any>> = {\n    createItemStyle: () => ({}),\n    data: [],\n    globalInterpolation: Animated.add(new Animated.Value(0), 0),\n    itemHeight: 0,\n    itemWidth: 0,\n    itemVisibilityStore: mockItemVisibilityStore,\n    loop: false,\n    needsOffscreenAlphaCompositingOnItem: false,\n};\n\nconst InternalContext = createContext<InternalContextValue<any>>(initialValue);\n\nexport default InternalContext;\n"],"mappings":"AAAA,SAASA,aAAT,QAA8B,OAA9B;AACA,SAASC,QAAT,QAAyB,cAAzB;AAcA,MAAMC,uBAA4C,GAAG;EACjDC,QAAQ,EAAE,MAAM,KAAK,CAD4B;EAEjDC,SAAS,EAAE,MAAM,MAAM,KAAK,CAFqB;EAGjDC,kBAAkB,EAAE,MAAM,KAAK;AAHkB,CAArD;AAMA,MAAMC,YAAiD,GAAG;EACtDC,eAAe,EAAE,OAAO,EAAP,CADqC;EAEtDC,IAAI,EAAE,EAFgD;EAGtDC,mBAAmB,EAAER,QAAQ,CAACS,GAAT,CAAa,IAAIT,QAAQ,CAACU,KAAb,CAAmB,CAAnB,CAAb,EAAoC,CAApC,CAHiC;EAItDC,UAAU,EAAE,CAJ0C;EAKtDC,SAAS,EAAE,CAL2C;EAMtDC,mBAAmB,EAAEZ,uBANiC;EAOtDa,IAAI,EAAE,KAPgD;EAQtDC,oCAAoC,EAAE;AARgB,CAA1D;AAWA,MAAMC,eAAe,gBAAGjB,aAAa,CAA4BM,YAA5B,CAArC;AAEA,eAAeW,eAAf"}

package/build/module/Carousel/components/ItemView.js

@@ -13,7 +13,8 @@ export default function ItemView(props) {
     createItemStyle,
     itemHeight,
     itemWidth,
-    itemVisibilityStore
+    itemVisibilityStore,
+    needsOffscreenAlphaCompositingOnItem
   } = useContext(InternalContext);
   const [visible, setVisible] = useState(false);
   const interpolation = useItemInterpolation(index);
@@ -28,6 +29,7 @@ export default function ItemView(props) {
     });
   }, [index, itemVisibilityStore]);
   return /*#__PURE__*/React.createElement(Animated.View, {
+    needsOffscreenAlphaCompositing: needsOffscreenAlphaCompositingOnItem,
     children: visible ? children(interpolation) : null,
     onLayout: onLayout,
     style: [{

package/build/module/Carousel/components/ItemView.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useContext","useEffect","useMemo","useState","Animated","StyleSheet","useItemInterpolation","InternalContext","ItemView","props","children","index","onLayout","createItemStyle","itemHeight","itemWidth","itemVisibilityStore","visible","setVisible","interpolation","itemStyle","subscribe","ranges","nextVisible","some","from","to","width","height","undefined","styles","absolute","create","position"],"sources":["ItemView.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React, { useContext, useEffect, useMemo, useState } from 'react';\nimport type { ViewProps } from 'react-native';\nimport { Animated } from 'react-native';\nimport { StyleSheet } from '@fountain-ui/core';\nimport useItemInterpolation from './useItemInterpolation';\nimport InternalContext from './InternalContext';\n\nexport interface ItemViewProps {\n    children: (interpolation: Animated.AnimatedInterpolation) => ReactElement | null;\n    index: number;\n    onLayout?: ViewProps['onLayout'];\n}\n\nexport default function ItemView(props: ItemViewProps) {\n    const {\n        children,\n        index,\n        onLayout,\n    } = props;\n\n    const {\n        createItemStyle,\n        itemHeight,\n        itemWidth,\n        itemVisibilityStore,\n    } = useContext(InternalContext);\n\n    const [visible, setVisible] = useState(false);\n\n    const interpolation = useItemInterpolation(index);\n\n    const itemStyle = useMemo(\n        () => createItemStyle(interpolation, itemWidth),\n        [createItemStyle, interpolation, itemWidth],\n    );\n\n    useEffect(() => {\n        return itemVisibilityStore.subscribe(ranges => {\n            const nextVisible = ranges.some(([from, to]) => index >= from && index <= to);\n            setVisible(nextVisible);\n        });\n    }, [index, itemVisibilityStore]);\n\n    return (\n        <Animated.View\n            children={visible ? children(interpolation) : null}\n            onLayout={onLayout}\n            style={[\n                {\n                    width: itemWidth,\n                    height: itemHeight !== 'auto' ? itemHeight : undefined,\n                },\n                styles.absolute,\n                // @ts-ignore\n                itemStyle,\n            ]}\n        />\n    );\n};\n\nconst styles = StyleSheet.create({\n    absolute: {\n        position: 'absolute',\n    },\n});\n"],"mappings":"AACA,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,SAA5B,EAAuCC,OAAvC,EAAgDC,QAAhD,QAAgE,OAAhE;AAEA,SAASC,QAAT,QAAyB,cAAzB;AACA,SAASC,UAAT,QAA2B,mBAA3B;AACA,OAAOC,oBAAP,MAAiC,wBAAjC;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AAQA,eAAe,SAASC,QAAT,CAAkBC,KAAlB,EAAwC;EACnD,MAAM;IACFC,QADE;IAEFC,KAFE;IAGFC;EAHE,IAIFH,KAJJ;EAMA,MAAM;IACFI,eADE;IAEFC,UAFE;IAGFC,SAHE;IAIFC;EAJE,IAKFhB,UAAU,CAACO,eAAD,CALd;EAOA,MAAM,CAACU,OAAD,EAAUC,UAAV,IAAwBf,QAAQ,CAAC,KAAD,CAAtC;EAEA,MAAMgB,aAAa,GAAGb,oBAAoB,CAACK,KAAD,CAA1C;EAEA,MAAMS,SAAS,GAAGlB,OAAO,CACrB,MAAMW,eAAe,CAACM,aAAD,EAAgBJ,SAAhB,CADA,EAErB,CAACF,eAAD,EAAkBM,aAAlB,EAAiCJ,SAAjC,CAFqB,CAAzB;EAKAd,SAAS,CAAC,MAAM;IACZ,OAAOe,mBAAmB,CAACK,SAApB,CAA8BC,MAAM,IAAI;MAC3C,MAAMC,WAAW,GAAGD,MAAM,CAACE,IAAP,CAAY;QAAA,IAAC,CAACC,IAAD,EAAOC,EAAP,CAAD;QAAA,OAAgBf,KAAK,IAAIc,IAAT,IAAiBd,KAAK,IAAIe,EAA1C;MAAA,CAAZ,CAApB;MACAR,UAAU,CAACK,WAAD,CAAV;IACH,CAHM,CAAP;EAIH,CALQ,EAKN,CAACZ,KAAD,EAAQK,mBAAR,CALM,CAAT;EAOA,oBACI,oBAAC,QAAD,CAAU,IAAV;IACI,QAAQ,EAAEC,OAAO,GAAGP,QAAQ,CAACS,aAAD,CAAX,GAA6B,IADlD;IAEI,QAAQ,EAAEP,QAFd;IAGI,KAAK,EAAE,CACH;MACIe,KAAK,EAAEZ,SADX;MAEIa,MAAM,EAAEd,UAAU,KAAK,MAAf,GAAwBA,UAAxB,GAAqCe;IAFjD,CADG,EAKHC,MAAM,CAACC,QALJ,EAMH;IACAX,SAPG;EAHX,EADJ;AAeH;AAAA;AAED,MAAMU,MAAM,GAAGzB,UAAU,CAAC2B,MAAX,CAAkB;EAC7BD,QAAQ,EAAE;IACNE,QAAQ,EAAE;EADJ;AADmB,CAAlB,CAAf"}
+{"version":3,"names":["React","useContext","useEffect","useMemo","useState","Animated","StyleSheet","useItemInterpolation","InternalContext","ItemView","props","children","index","onLayout","createItemStyle","itemHeight","itemWidth","itemVisibilityStore","needsOffscreenAlphaCompositingOnItem","visible","setVisible","interpolation","itemStyle","subscribe","ranges","nextVisible","some","from","to","width","height","undefined","styles","absolute","create","position"],"sources":["ItemView.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React, { useContext, useEffect, useMemo, useState } from 'react';\nimport type { ViewProps } from 'react-native';\nimport { Animated } from 'react-native';\nimport { StyleSheet } from '@fountain-ui/core';\nimport useItemInterpolation from './useItemInterpolation';\nimport InternalContext from './InternalContext';\n\nexport interface ItemViewProps {\n    children: (interpolation: Animated.AnimatedInterpolation) => ReactElement | null;\n    index: number;\n    onLayout?: ViewProps['onLayout'];\n}\n\nexport default function ItemView(props: ItemViewProps) {\n    const {\n        children,\n        index,\n        onLayout,\n    } = props;\n\n    const {\n        createItemStyle,\n        itemHeight,\n        itemWidth,\n        itemVisibilityStore,\n        needsOffscreenAlphaCompositingOnItem,\n    } = useContext(InternalContext);\n\n    const [visible, setVisible] = useState(false);\n\n    const interpolation = useItemInterpolation(index);\n\n    const itemStyle = useMemo(\n        () => createItemStyle(interpolation, itemWidth),\n        [createItemStyle, interpolation, itemWidth],\n    );\n\n    useEffect(() => {\n        return itemVisibilityStore.subscribe(ranges => {\n            const nextVisible = ranges.some(([from, to]) => index >= from && index <= to);\n            setVisible(nextVisible);\n        });\n    }, [index, itemVisibilityStore]);\n\n    return (\n        <Animated.View\n            needsOffscreenAlphaCompositing={needsOffscreenAlphaCompositingOnItem}\n            children={visible ? children(interpolation) : null}\n            onLayout={onLayout}\n            style={[\n                {\n                    width: itemWidth,\n                    height: itemHeight !== 'auto' ? itemHeight : undefined,\n                },\n                styles.absolute,\n                // @ts-ignore\n                itemStyle,\n            ]}\n        />\n    );\n};\n\nconst styles = StyleSheet.create({\n    absolute: {\n        position: 'absolute',\n    },\n});\n"],"mappings":"AACA,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,SAA5B,EAAuCC,OAAvC,EAAgDC,QAAhD,QAAgE,OAAhE;AAEA,SAASC,QAAT,QAAyB,cAAzB;AACA,SAASC,UAAT,QAA2B,mBAA3B;AACA,OAAOC,oBAAP,MAAiC,wBAAjC;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AAQA,eAAe,SAASC,QAAT,CAAkBC,KAAlB,EAAwC;EACnD,MAAM;IACFC,QADE;IAEFC,KAFE;IAGFC;EAHE,IAIFH,KAJJ;EAMA,MAAM;IACFI,eADE;IAEFC,UAFE;IAGFC,SAHE;IAIFC,mBAJE;IAKFC;EALE,IAMFjB,UAAU,CAACO,eAAD,CANd;EAQA,MAAM,CAACW,OAAD,EAAUC,UAAV,IAAwBhB,QAAQ,CAAC,KAAD,CAAtC;EAEA,MAAMiB,aAAa,GAAGd,oBAAoB,CAACK,KAAD,CAA1C;EAEA,MAAMU,SAAS,GAAGnB,OAAO,CACrB,MAAMW,eAAe,CAACO,aAAD,EAAgBL,SAAhB,CADA,EAErB,CAACF,eAAD,EAAkBO,aAAlB,EAAiCL,SAAjC,CAFqB,CAAzB;EAKAd,SAAS,CAAC,MAAM;IACZ,OAAOe,mBAAmB,CAACM,SAApB,CAA8BC,MAAM,IAAI;MAC3C,MAAMC,WAAW,GAAGD,MAAM,CAACE,IAAP,CAAY;QAAA,IAAC,CAACC,IAAD,EAAOC,EAAP,CAAD;QAAA,OAAgBhB,KAAK,IAAIe,IAAT,IAAiBf,KAAK,IAAIgB,EAA1C;MAAA,CAAZ,CAApB;MACAR,UAAU,CAACK,WAAD,CAAV;IACH,CAHM,CAAP;EAIH,CALQ,EAKN,CAACb,KAAD,EAAQK,mBAAR,CALM,CAAT;EAOA,oBACI,oBAAC,QAAD,CAAU,IAAV;IACI,8BAA8B,EAAEC,oCADpC;IAEI,QAAQ,EAAEC,OAAO,GAAGR,QAAQ,CAACU,aAAD,CAAX,GAA6B,IAFlD;IAGI,QAAQ,EAAER,QAHd;IAII,KAAK,EAAE,CACH;MACIgB,KAAK,EAAEb,SADX;MAEIc,MAAM,EAAEf,UAAU,KAAK,MAAf,GAAwBA,UAAxB,GAAqCgB;IAFjD,CADG,EAKHC,MAAM,CAACC,QALJ,EAMH;IACAX,SAPG;EAJX,EADJ;AAgBH;AAAA;AAED,MAAMU,MAAM,GAAG1B,UAAU,CAAC4B,MAAX,CAAkB;EAC7BD,QAAQ,EAAE;IACNE,QAAQ,EAAE;EADJ;AADmB,CAAlB,CAAf"}

package/build/module/ComicViewer/FastScroll.js

@@ -3,15 +3,16 @@ import * as R from 'ramda';
 import { View } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withDelay, withTiming } from 'react-native-reanimated';
-import { ChevronDown, ChevronUp } from '@fountain-ui/icons';
+import { ChevronDown, ChevronUp } from '@fountain-ui/icons/src/v2Icons';
 import { StyleSheet } from '@fountain-ui/core';
+import { baseColors, commonColors } from '@fountain-ui/styles';
 import { offsetToPercentage, percentageToOffset } from './util';
 const INDICATOR_WIDTH = 28;
 const styles = StyleSheet.create({
   indicator: {
     width: INDICATOR_WIDTH,
     height: 48,
-    backgroundColor: '#767676',
+    backgroundColor: baseColors.gray['650'],
     flexDirection: 'column',
     alignItems: 'center',
     justifyContent: 'center',
@@ -139,13 +140,9 @@ const FastScroll = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, /*#__PURE__*/React.createElement(Animated.View, {
     style: [animatedStyle, styles.indicator]
   }, /*#__PURE__*/React.createElement(ChevronUp, {
-    fill: '#ededed',
-    height: 20,
-    width: 20
+    fill: commonColors.static.strongInverse
   }), /*#__PURE__*/React.createElement(ChevronDown, {
-    fill: '#ededed',
-    height: 20,
-    width: 20
+    fill: commonColors.static.strongInverse
   }))));
 });
 export default FastScroll;

package/build/module/ComicViewer/FastScroll.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useImperativeHandle","useRef","useState","R","View","Gesture","GestureDetector","Animated","runOnJS","useAnimatedStyle","useSharedValue","withDelay","withTiming","ChevronDown","ChevronUp","StyleSheet","offsetToPercentage","percentageToOffset","INDICATOR_WIDTH","styles","create","indicator","width","height","backgroundColor","flexDirection","alignItems","justifyContent","borderRadius","view","position","FastScroll","forwardRef","props","ref","absolutePosition","additionalLength","contentLength","initialScrollPercentage","movementRange","scrollContentToOffset","visibleDurations","hideMillis","showMillis","totalContentLength","contentOffset","Math","floor","contentPercentage","initialLastIndicatorOffset","lastIndicatorOffset","indicatorOffset","value","isIndicatorDragging","indicatorOpacity","visible","setVisible","animatedStyle","transform","translateY","opacity","right","defaultTo","onContentScroll","event","current","nativeEvent","y","offset","getIsIndicatorDragging","handleUpdate","setIsIndicatorDragging","pan","Pan","onBegin","e","onUpdate","translationY","onFinalize","hide","duration","show"],"sources":["FastScroll.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport * as R from 'ramda';\nimport { NativeScrollEvent, NativeSyntheticEvent, View } from 'react-native';\nimport { Gesture, GestureDetector } from 'react-native-gesture-handler';\nimport Animated, { runOnJS, useAnimatedStyle, useSharedValue, withDelay, withTiming } from 'react-native-reanimated';\nimport { ChevronDown, ChevronUp } from '@fountain-ui/icons';\nimport { StyleSheet } from '@fountain-ui/core';\nimport FastScrollProps from './FastScrollProps';\nimport { offsetToPercentage, percentageToOffset } from './util';\n\nconst INDICATOR_WIDTH = 28;\n\nconst styles = StyleSheet.create({\n    indicator: {\n        width: INDICATOR_WIDTH,\n        height: 48,\n        backgroundColor: '#767676',\n        flexDirection: 'column',\n        alignItems: 'center',\n        justifyContent: 'center',\n        borderRadius: 16,\n    },\n    view: {\n        position: 'absolute',\n        width: 0,\n    },\n});\n\nconst FastScroll = React.forwardRef((props: FastScrollProps, ref) => {\n    const {\n        absolutePosition,\n        additionalLength = 0,\n        contentLength,\n        initialScrollPercentage = 0,\n        movementRange,\n        scrollContentToOffset,\n        visibleDurations = { hideMillis: 200, showMillis: 350 },\n    } = props;\n\n    const totalContentLength = contentLength + additionalLength;\n\n    const contentOffset = Math.floor((initialScrollPercentage / 100) * contentLength);\n    const contentPercentage = offsetToPercentage(contentOffset, totalContentLength);\n    const initialLastIndicatorOffset = percentageToOffset(contentPercentage, movementRange);\n\n    const lastIndicatorOffset = useSharedValue(initialLastIndicatorOffset);\n    const indicatorOffset = useSharedValue(lastIndicatorOffset.value);\n\n    const isIndicatorDragging = useRef(false);\n\n    const indicatorOpacity = useSharedValue(0);\n    const [visible, setVisible] = useState(false);\n\n    const animatedStyle = useAnimatedStyle(() => ({\n        transform: [{ translateY: indicatorOffset.value }],\n        opacity: indicatorOpacity.value,\n    }));\n\n    const position = {\n        ...absolutePosition,\n        right: R.defaultTo(0)(absolutePosition?.right) + INDICATOR_WIDTH,\n    };\n\n    const onContentScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {\n        if (!isIndicatorDragging.current) {\n            const contentPercentage = offsetToPercentage(event.nativeEvent.contentOffset.y, totalContentLength);\n            const offset = percentageToOffset(contentPercentage, movementRange);\n\n            if (offset < 0 || indicatorOffset.value < 0) {\n                lastIndicatorOffset.value = 0;\n                indicatorOffset.value = 0;\n                return;\n            }\n\n            if (offset > movementRange || indicatorOffset.value > movementRange) {\n                lastIndicatorOffset.value = movementRange;\n                indicatorOffset.value = movementRange;\n                return;\n            }\n\n            lastIndicatorOffset.value = offset;\n            indicatorOffset.value = offset;\n        } else {\n            setVisible(true);\n        }\n    }, [totalContentLength, movementRange]);\n\n    const getIsIndicatorDragging = () => isIndicatorDragging.current;\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            getIsIndicatorDragging,\n            onContentScroll,\n            setVisible,\n        }),\n        [onContentScroll],\n    );\n\n    const handleUpdate = () => {\n        const contentPercentage = offsetToPercentage(indicatorOffset.value, movementRange);\n        const offset = percentageToOffset(contentPercentage, totalContentLength);\n\n        scrollContentToOffset(offset);\n    };\n\n    const setIsIndicatorDragging = (value: boolean) => isIndicatorDragging.current = value;\n\n    const pan = Gesture.Pan()\n        .onBegin((e) => {\n            indicatorOffset.value = lastIndicatorOffset.value;\n            runOnJS(setIsIndicatorDragging)(true);\n        })\n        .onUpdate((e) => {\n            if (indicatorOffset.value <= 0 && e.translationY < 0) {\n                indicatorOffset.value = 0;\n                return;\n            }\n\n            if (indicatorOffset.value >= movementRange && e.translationY > 0) {\n                indicatorOffset.value = movementRange;\n                return;\n            }\n\n            indicatorOffset.value = lastIndicatorOffset.value + e.translationY;\n\n            runOnJS(handleUpdate)();\n        })\n        .onFinalize((e) => {\n            lastIndicatorOffset.value = indicatorOffset.value;\n            runOnJS(setIsIndicatorDragging)(false);\n        });\n\n    const hide = () => indicatorOpacity.value = withDelay(0, withTiming(0, { duration: visibleDurations.hideMillis }));\n\n    const show = () => indicatorOpacity.value = withDelay(0, withTiming(1, { duration: visibleDurations.showMillis }));\n\n    useEffect(() => {\n        if (visible) {\n            indicatorOffset.value = lastIndicatorOffset.value;\n            show();\n        } else {\n            hide();\n        }\n    }, [visible]);\n\n    return (\n        <View\n            style={[\n                { height: movementRange },\n                styles.view,\n                position,\n            ]}\n        >\n            <GestureDetector gesture={pan}>\n                <Animated.View style={[\n                    animatedStyle,\n                    styles.indicator,\n                ]}>\n                    <ChevronUp\n                        fill={'#ededed'}\n                        height={20}\n                        width={20}\n                    />\n                    <ChevronDown\n                        fill={'#ededed'}\n                        height={20}\n                        width={20}\n                    />\n                </Animated.View>\n            </GestureDetector>\n        </View>\n    );\n});\n\nexport default FastScroll;"],"mappings":"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"}
+{"version":3,"names":["React","useCallback","useEffect","useImperativeHandle","useRef","useState","R","View","Gesture","GestureDetector","Animated","runOnJS","useAnimatedStyle","useSharedValue","withDelay","withTiming","ChevronDown","ChevronUp","StyleSheet","baseColors","commonColors","offsetToPercentage","percentageToOffset","INDICATOR_WIDTH","styles","create","indicator","width","height","backgroundColor","gray","flexDirection","alignItems","justifyContent","borderRadius","view","position","FastScroll","forwardRef","props","ref","absolutePosition","additionalLength","contentLength","initialScrollPercentage","movementRange","scrollContentToOffset","visibleDurations","hideMillis","showMillis","totalContentLength","contentOffset","Math","floor","contentPercentage","initialLastIndicatorOffset","lastIndicatorOffset","indicatorOffset","value","isIndicatorDragging","indicatorOpacity","visible","setVisible","animatedStyle","transform","translateY","opacity","right","defaultTo","onContentScroll","event","current","nativeEvent","y","offset","getIsIndicatorDragging","handleUpdate","setIsIndicatorDragging","pan","Pan","onBegin","e","onUpdate","translationY","onFinalize","hide","duration","show","static","strongInverse"],"sources":["FastScroll.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport * as R from 'ramda';\nimport { NativeScrollEvent, NativeSyntheticEvent, View } from 'react-native';\nimport { Gesture, GestureDetector } from 'react-native-gesture-handler';\nimport Animated, { runOnJS, useAnimatedStyle, useSharedValue, withDelay, withTiming } from 'react-native-reanimated';\nimport { ChevronDown, ChevronUp } from '@fountain-ui/icons/src/v2Icons';\nimport { StyleSheet } from '@fountain-ui/core';\nimport { baseColors, commonColors } from '@fountain-ui/styles';\nimport FastScrollProps from './FastScrollProps';\nimport { offsetToPercentage, percentageToOffset } from './util';\n\nconst INDICATOR_WIDTH = 28;\n\nconst styles = StyleSheet.create({\n    indicator: {\n        width: INDICATOR_WIDTH,\n        height: 48,\n        backgroundColor: baseColors.gray['650'],\n        flexDirection: 'column',\n        alignItems: 'center',\n        justifyContent: 'center',\n        borderRadius: 16,\n    },\n    view: {\n        position: 'absolute',\n        width: 0,\n    },\n});\n\nconst FastScroll = React.forwardRef((props: FastScrollProps, ref) => {\n    const {\n        absolutePosition,\n        additionalLength = 0,\n        contentLength,\n        initialScrollPercentage = 0,\n        movementRange,\n        scrollContentToOffset,\n        visibleDurations = { hideMillis: 200, showMillis: 350 },\n    } = props;\n\n    const totalContentLength = contentLength + additionalLength;\n\n    const contentOffset = Math.floor((initialScrollPercentage / 100) * contentLength);\n    const contentPercentage = offsetToPercentage(contentOffset, totalContentLength);\n    const initialLastIndicatorOffset = percentageToOffset(contentPercentage, movementRange);\n\n    const lastIndicatorOffset = useSharedValue(initialLastIndicatorOffset);\n    const indicatorOffset = useSharedValue(lastIndicatorOffset.value);\n\n    const isIndicatorDragging = useRef(false);\n\n    const indicatorOpacity = useSharedValue(0);\n    const [visible, setVisible] = useState(false);\n\n    const animatedStyle = useAnimatedStyle(() => ({\n        transform: [{ translateY: indicatorOffset.value }],\n        opacity: indicatorOpacity.value,\n    }));\n\n    const position = {\n        ...absolutePosition,\n        right: R.defaultTo(0)(absolutePosition?.right) + INDICATOR_WIDTH,\n    };\n\n    const onContentScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {\n        if (!isIndicatorDragging.current) {\n            const contentPercentage = offsetToPercentage(event.nativeEvent.contentOffset.y, totalContentLength);\n            const offset = percentageToOffset(contentPercentage, movementRange);\n\n            if (offset < 0 || indicatorOffset.value < 0) {\n                lastIndicatorOffset.value = 0;\n                indicatorOffset.value = 0;\n                return;\n            }\n\n            if (offset > movementRange || indicatorOffset.value > movementRange) {\n                lastIndicatorOffset.value = movementRange;\n                indicatorOffset.value = movementRange;\n                return;\n            }\n\n            lastIndicatorOffset.value = offset;\n            indicatorOffset.value = offset;\n        } else {\n            setVisible(true);\n        }\n    }, [totalContentLength, movementRange]);\n\n    const getIsIndicatorDragging = () => isIndicatorDragging.current;\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            getIsIndicatorDragging,\n            onContentScroll,\n            setVisible,\n        }),\n        [onContentScroll],\n    );\n\n    const handleUpdate = () => {\n        const contentPercentage = offsetToPercentage(indicatorOffset.value, movementRange);\n        const offset = percentageToOffset(contentPercentage, totalContentLength);\n\n        scrollContentToOffset(offset);\n    };\n\n    const setIsIndicatorDragging = (value: boolean) => isIndicatorDragging.current = value;\n\n    const pan = Gesture.Pan()\n        .onBegin((e) => {\n            indicatorOffset.value = lastIndicatorOffset.value;\n            runOnJS(setIsIndicatorDragging)(true);\n        })\n        .onUpdate((e) => {\n            if (indicatorOffset.value <= 0 && e.translationY < 0) {\n                indicatorOffset.value = 0;\n                return;\n            }\n\n            if (indicatorOffset.value >= movementRange && e.translationY > 0) {\n                indicatorOffset.value = movementRange;\n                return;\n            }\n\n            indicatorOffset.value = lastIndicatorOffset.value + e.translationY;\n\n            runOnJS(handleUpdate)();\n        })\n        .onFinalize((e) => {\n            lastIndicatorOffset.value = indicatorOffset.value;\n            runOnJS(setIsIndicatorDragging)(false);\n        });\n\n    const hide = () => indicatorOpacity.value = withDelay(0, withTiming(0, { duration: visibleDurations.hideMillis }));\n\n    const show = () => indicatorOpacity.value = withDelay(0, withTiming(1, { duration: visibleDurations.showMillis }));\n\n    useEffect(() => {\n        if (visible) {\n            indicatorOffset.value = lastIndicatorOffset.value;\n            show();\n        } else {\n            hide();\n        }\n    }, [visible]);\n\n    return (\n        <View\n            style={[\n                { height: movementRange },\n                styles.view,\n                position,\n            ]}\n        >\n            <GestureDetector gesture={pan}>\n                <Animated.View style={[\n                    animatedStyle,\n                    styles.indicator,\n                ]}>\n                    <ChevronUp fill={commonColors.static.strongInverse}/>\n\n                    <ChevronDown fill={commonColors.static.strongInverse}/>\n                </Animated.View>\n            </GestureDetector>\n        </View>\n    );\n});\n\nexport default FastScroll;"],"mappings":"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"}

package/build/typescript/Carousel/Carousel.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import type CarouselProps from './CarouselProps';
 import type { CarouselInstance } from './types';
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<CarouselProps<any>, "style" | "data" | "autoplay" | "autoplayInterval" | "createItemStyle" | "createScrollAnimation" | "disableSmartAutoplay" | "initialIndex" | "itemHeight" | "itemWidth" | "loop" | "onIndexChange" | "renderItem" | "scrollEnabled" | "windowSize"> & React.RefAttributes<CarouselInstance>>>;
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<CarouselProps<any>, "style" | "data" | "autoplay" | "autoplayInterval" | "createItemStyle" | "createScrollAnimation" | "disableSmartAutoplay" | "initialIndex" | "itemHeight" | "itemWidth" | "loop" | "onIndexChange" | "renderItem" | "scrollEnabled" | "windowSize" | "needsOffscreenAlphaCompositingOnItem"> & React.RefAttributes<CarouselInstance>>>;
 export default _default;

package/build/typescript/Carousel/CarouselProps.d.ts

@@ -71,5 +71,12 @@ export default interface CarouselProps<ItemT = any> extends ComponentProps<{
      * @default 5
      */
     windowSize?: number;
+    /**
+     * Whether item views need to be rendered offscreen and composited with an alpha
+     * in order to preserve 100% correct colors and blending behavior.
+     * Use this when items have opacity animations and multiple overlapping elements.
+     * @default false
+     */
+    needsOffscreenAlphaCompositingOnItem?: boolean;
 }> {
 }

package/build/typescript/Carousel/components/InternalContext.d.ts

@@ -9,6 +9,7 @@ export interface InternalContextValue<ItemT> {
     itemWidth: number;
     itemVisibilityStore: ItemVisibilityStore;
     loop: boolean;
+    needsOffscreenAlphaCompositingOnItem: boolean;
 }
 declare const InternalContext: import("react").Context<InternalContextValue<any>>;
 export default InternalContext;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/lab",
-  "version": "3.0.0-alpha.11",
+  "version": "3.0.0-alpha.13",
   "private": false,
   "author": "Fountain-UI Team",
   "description": "Incubator for Fountain-UI React components.",
@@ -17,7 +17,7 @@
   "dependencies": {
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
-    "@fountain-ui/icons": "3.0.0-alpha.6",
+    "@fountain-ui/icons": "3.0.0-alpha.8",
     "@fountain-ui/utils": "^3.0.0-alpha.1",
     "react-native-calendars": "1.1267.0"
   },
@@ -29,7 +29,8 @@
     "react-dom": "^16.8.0 || ^17.0.0",
     "react-native": "^0.63.0",
     "react-native-gesture-handler": "^2.0.0",
-    "react-native-pager-view": "^4.0.0"
+    "react-native-pager-view": "^4.0.0",
+    "react-native-safe-area-context": "^4.0.0"
   },
   "peerDependenciesMeta": {
     "@gorhom/bottom-sheet": {
@@ -70,5 +71,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7142bb054dae2899d8c211c8b5a1d8060c8994bf"
+  "gitHead": "2ec97c0bb071b4a92a6e05858d2ca2809cd9c209"
 }

package/src/BottomSheet/BottomSheetNative.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Animated, LayoutChangeEvent, useWindowDimensions, ViewStyle } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import {
     BottomSheetBackdrop,
     BottomSheetBackdropProps,
@@ -15,6 +16,9 @@ import useDynamicSnapPoints from './useDynamicSnapPoints.native';
 
 const NoHandle = () => null;
 
+const DEFAULT_PADDING_BOTTOM = 24;
+const DEFAULT_PADDING_TOP = 22;
+
 export default function BottomSheet(props: BottomSheetProps) {
     const {
         backdropOpacity = 0.5,
@@ -82,6 +86,8 @@ export default function BottomSheet(props: BottomSheetProps) {
         backgroundStyleProp,
     ]);
 
+    const { bottom: bottomSafeInset } = useSafeAreaInsets();
+
     const contentWrapperStyle: ViewStyle = css([
         {
             backgroundColor: theme.palette.surface.base,
@@ -91,8 +97,8 @@ export default function BottomSheet(props: BottomSheetProps) {
             maxHeight: maxDynamicContentSize,
             minHeight: 325,
             overflow: 'hidden',
-            paddingBottom: theme.spacing(6),
-            paddingTop: theme.spacing(5.5),
+            paddingBottom: DEFAULT_PADDING_BOTTOM + bottomSafeInset,
+            paddingTop: DEFAULT_PADDING_TOP,
         },
         styleProp,
     ]);

package/src/Carousel/Carousel.tsx

@@ -24,6 +24,7 @@ const Carousel = forwardRef<CarouselInstance, CarouselProps>(function Carousel(p
         itemHeight,
         itemWidth,
         loop = false,
+        needsOffscreenAlphaCompositingOnItem = false,
         onIndexChange,
         renderItem,
         scrollEnabled = true,
@@ -89,6 +90,7 @@ const Carousel = forwardRef<CarouselInstance, CarouselProps>(function Carousel(p
         itemWidth,
         itemVisibilityStore,
         loop,
+        needsOffscreenAlphaCompositingOnItem,
     }), [
         createItemStyle,
         data,
@@ -97,6 +99,7 @@ const Carousel = forwardRef<CarouselInstance, CarouselProps>(function Carousel(p
         itemWidth,
         itemVisibilityStore,
         loop,
+        needsOffscreenAlphaCompositingOnItem,
     ]);
 
     return (

package/src/Carousel/CarouselProps.ts

@@ -93,4 +93,12 @@ export default interface CarouselProps<ItemT = any> extends ComponentProps<{
      * @default 5
      */
     windowSize?: number;
+
+    /**
+     * Whether item views need to be rendered offscreen and composited with an alpha 
+     * in order to preserve 100% correct colors and blending behavior.
+     * Use this when items have opacity animations and multiple overlapping elements.
+     * @default false
+     */
+    needsOffscreenAlphaCompositingOnItem?: boolean;
 }> {}

package/src/Carousel/components/InternalContext.ts

@@ -10,6 +10,7 @@ export interface InternalContextValue<ItemT> {
     itemWidth: number;
     itemVisibilityStore: ItemVisibilityStore;
     loop: boolean;
+    needsOffscreenAlphaCompositingOnItem: boolean;
 }
 
 const mockItemVisibilityStore: ItemVisibilityStore = {
@@ -26,6 +27,7 @@ const initialValue: Readonly<InternalContextValue<any>> = {
     itemWidth: 0,
     itemVisibilityStore: mockItemVisibilityStore,
     loop: false,
+    needsOffscreenAlphaCompositingOnItem: false,
 };
 
 const InternalContext = createContext<InternalContextValue<any>>(initialValue);

package/src/Carousel/components/ItemView.tsx

@@ -24,6 +24,7 @@ export default function ItemView(props: ItemViewProps) {
         itemHeight,
         itemWidth,
         itemVisibilityStore,
+        needsOffscreenAlphaCompositingOnItem,
     } = useContext(InternalContext);
 
     const [visible, setVisible] = useState(false);
@@ -44,6 +45,7 @@ export default function ItemView(props: ItemViewProps) {
 
     return (
         <Animated.View
+            needsOffscreenAlphaCompositing={needsOffscreenAlphaCompositingOnItem}
             children={visible ? children(interpolation) : null}
             onLayout={onLayout}
             style={[

package/src/ComicViewer/FastScroll.tsx

@@ -3,8 +3,9 @@ import * as R from 'ramda';
 import { NativeScrollEvent, NativeSyntheticEvent, View } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withDelay, withTiming } from 'react-native-reanimated';
-import { ChevronDown, ChevronUp } from '@fountain-ui/icons';
+import { ChevronDown, ChevronUp } from '@fountain-ui/icons/src/v2Icons';
 import { StyleSheet } from '@fountain-ui/core';
+import { baseColors, commonColors } from '@fountain-ui/styles';
 import FastScrollProps from './FastScrollProps';
 import { offsetToPercentage, percentageToOffset } from './util';
 
@@ -14,7 +15,7 @@ const styles = StyleSheet.create({
     indicator: {
         width: INDICATOR_WIDTH,
         height: 48,
-        backgroundColor: '#767676',
+        backgroundColor: baseColors.gray['650'],
         flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'center',
@@ -157,16 +158,9 @@ const FastScroll = React.forwardRef((props: FastScrollProps, ref) => {
                     animatedStyle,
                     styles.indicator,
                 ]}>
-                    <ChevronUp
-                        fill={'#ededed'}
-                        height={20}
-                        width={20}
-                    />
-                    <ChevronDown
-                        fill={'#ededed'}
-                        height={20}
-                        width={20}
-                    />
+                    <ChevronUp fill={commonColors.static.strongInverse}/>
+
+                    <ChevronDown fill={commonColors.static.strongInverse}/>
                 </Animated.View>
             </GestureDetector>
         </View>