@fountain-ui/lab 2.0.0-beta.6 → 2.0.0-beta.7

package/build/module/hooks/useHeight.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useHeight.ts"],"names":["React","Animated","useHeight","initialHeight","height","setHeight","useState","onLayout","useWorkletCallback","e","nativeEvent","layout"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,QAAP,MAAqB,yBAArB;AAIA,eAAe,SAASC,SAAT,CAAmBC,aAAa,GAAG,CAAnC,EAAkE;AAC7E,QAAM,CAACC,MAAD,EAASC,SAAT,IAAsBL,KAAK,CAACM,QAAN,CAAuBH,aAAvB,CAA5B;AAEA,QAAMI,QAAQ,GAAGN,QAAQ,CAACO,kBAAT,CAA6BC,CAAD,IAAO;AAChDJ,IAAAA,SAAS,CAACI,CAAC,CAACC,WAAF,CAAcC,MAAd,CAAqBP,MAAtB,CAAT;AACH,GAFgB,EAEd,EAFc,CAAjB;AAIA,SAAO,CAACA,MAAD,EAASG,QAAT,CAAP;AACH;AAAA","sourcesContent":["import React from 'react';\nimport { ViewProps } from 'react-native';\nimport Animated from 'react-native-reanimated';\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport default function useHeight(initialHeight = 0): [number, OnLayoutCallback] {\n    const [height, setHeight] = React.useState<number>(initialHeight);\n\n    const onLayout = Animated.useWorkletCallback((e) => {\n        setHeight(e.nativeEvent.layout.height);\n    }, []);\n\n    return [height, onLayout];\n};\n"]}
+{"version":3,"names":["React","useWorkletCallback","useHeight","initialHeight","height","setHeight","useState","onLayout","e","nativeEvent","layout"],"sources":["useHeight.ts"],"sourcesContent":["import React from 'react';\nimport { ViewProps } from 'react-native';\nimport { useWorkletCallback } from 'react-native-reanimated';\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport default function useHeight(initialHeight = 0): [number, OnLayoutCallback] {\n    const [height, setHeight] = React.useState<number>(initialHeight);\n\n    const onLayout = useWorkletCallback((e) => {\n        setHeight(e.nativeEvent.layout.height);\n    }, []);\n\n    return [height, onLayout];\n};\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,kBAAT,QAAmC,yBAAnC;AAIA,eAAe,SAASC,SAAT,GAAkE;EAAA,IAA/CC,aAA+C,uEAA/B,CAA+B;EAC7E,MAAM,CAACC,MAAD,EAASC,SAAT,IAAsBL,KAAK,CAACM,QAAN,CAAuBH,aAAvB,CAA5B;EAEA,MAAMI,QAAQ,GAAGN,kBAAkB,CAAEO,CAAD,IAAO;IACvCH,SAAS,CAACG,CAAC,CAACC,WAAF,CAAcC,MAAd,CAAqBN,MAAtB,CAAT;EACH,CAFkC,EAEhC,EAFgC,CAAnC;EAIA,OAAO,CAACA,MAAD,EAASG,QAAT,CAAP;AACH;AAAA"}

package/build/module/hooks/useUnstableCollapsibleAppBar.js

@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
 import { Platform } from 'react-native';
-import Animated from 'react-native-reanimated';
+import { useAnimatedScrollHandler, useAnimatedStyle, useDerivedValue, useSharedValue, withTiming } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import useAppbarStyles from './useAppbarStyles';
 import useElevationStyle from './useElevationStyle';
@@ -18,7 +18,8 @@ function useLargerValueOfLastTwoValues(value) {
   return Math.max(...refLatestTwoValues.current);
 }
 
-export default function useUnstableCollapsibleAppBar(userOptions = defaultOptions) {
+export default function useUnstableCollapsibleAppBar() {
+  let userOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultOptions;
   const {
     shouldTranslateYReset
   } = { ...defaultOptions,
@@ -29,15 +30,15 @@ export default function useUnstableCollapsibleAppBar(userOptions = defaultOption
   const [appBarHeight, onAppBarLayout] = useHeight();
   const appBarMaxHeight = useLargerValueOfLastTwoValues(appBarHeight);
   const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();
-  const maxTranslateY = Animated.useDerivedValue(() => -collapsibleToolbarHeight);
-  const translateY = Animated.useSharedValue(0);
-  const lastTranslateY = Animated.useSharedValue(0);
-  const lastOffsetY = Animated.useSharedValue(0);
-  const prevOffsetY = Animated.useSharedValue(0);
-  const overlapped = Animated.useSharedValue(false);
-  const vectorY = Animated.useSharedValue(0);
+  const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight);
+  const translateY = useSharedValue(0);
+  const lastTranslateY = useSharedValue(0);
+  const lastOffsetY = useSharedValue(0);
+  const prevOffsetY = useSharedValue(0);
+  const overlapped = useSharedValue(false);
+  const vectorY = useSharedValue(0);
   const elevationStyle = useElevationStyle(4);
-  const animatedStyle = Animated.useAnimatedStyle(() => {
+  const animatedStyle = useAnimatedStyle(() => {
     return Platform.OS === 'web' ? {
       transform: [{
         translateY: translateY.value
@@ -58,13 +59,11 @@ export default function useUnstableCollapsibleAppBar(userOptions = defaultOption
   const offsetsRef = React.useRef([]);
 
   const onScrollViewChanged = nextIndex => {
-    var _offsetsRef$current$n;
-
     const prevIndex = indexRef.current;
 
     if (prevIndex === nextIndex) {
       if (shouldTranslateYReset) {
-        translateY.value = Animated.withTiming(0, {
+        translateY.value = withTiming(0, {
           duration: ANIMATION_DURATION_MILLIS
         });
         vectorY.value = 0;
@@ -76,21 +75,21 @@ export default function useUnstableCollapsibleAppBar(userOptions = defaultOption
     }
 
     offsetsRef.current[prevIndex] = lastOffsetY.value;
-    const savedOffsetY = (_offsetsRef$current$n = offsetsRef.current[nextIndex]) !== null && _offsetsRef$current$n !== void 0 ? _offsetsRef$current$n : 0;
+    const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;
     lastOffsetY.value = savedOffsetY;
     indexRef.current = nextIndex; // Determine whether to overlap every time index is changed.
 
     overlapped.value = savedOffsetY > 0; // If next ScrollView's offset is too short, expand app bar.
 
     if (translateY.value < 0 && savedOffsetY < appBarHeight) {
-      translateY.value = Animated.withTiming(0, {
+      translateY.value = withTiming(0, {
         duration: ANIMATION_DURATION_MILLIS
       });
       vectorY.value = 0;
     }
   };
 
-  const scrollHandler = Animated.useAnimatedScrollHandler({
+  const scrollHandler = useAnimatedScrollHandler({
     onBeginDrag: () => {
       lastTranslateY.value = translateY.value;
     },
@@ -112,13 +111,13 @@ export default function useUnstableCollapsibleAppBar(userOptions = defaultOption
       } else {
         if (offsetY > -maxTy) {
           if (ty === 0) {
-            translateY.value = Animated.withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {
+            translateY.value = withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {
               duration: ANIMATION_DURATION_MILLIS
             });
           }
         } else {
           if (ty === maxTy) {
-            translateY.value = Animated.withTiming(0, {
+            translateY.value = withTiming(0, {
               duration: ANIMATION_DURATION_MILLIS
             });
           }
@@ -144,7 +143,7 @@ export default function useUnstableCollapsibleAppBar(userOptions = defaultOption
       const threshold = maxTy * 0.5;
       const nextTranslateY = ty > threshold || offsetY < appBarHeight ? 0 : maxTy;
       overlapped.value = offsetY + nextTranslateY > 0;
-      translateY.value = Animated.withTiming(nextTranslateY, {
+      translateY.value = withTiming(nextTranslateY, {
         duration: ANIMATION_DURATION_MILLIS
       });
     }

package/build/module/hooks/useUnstableCollapsibleAppBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useUnstableCollapsibleAppBar.ts"],"names":["React","useRef","Platform","Animated","useSafeAreaInsets","useAppbarStyles","useElevationStyle","useHeight","defaultOptions","shouldTranslateYReset","ANIMATION_DURATION_MILLIS","SUPPORTS_DRAG_DETECTION","OS","useLargerValueOfLastTwoValues","value","refLatestTwoValues","current","shift","push","Math","max","useUnstableCollapsibleAppBar","userOptions","styles","safeAreaInsets","appBarHeight","onAppBarLayout","appBarMaxHeight","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","useDerivedValue","translateY","useSharedValue","lastTranslateY","lastOffsetY","prevOffsetY","overlapped","vectorY","elevationStyle","animatedStyle","useAnimatedStyle","transform","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","offsetsRef","onScrollViewChanged","nextIndex","prevIndex","withTiming","duration","savedOffsetY","scrollHandler","useAnimatedScrollHandler","onBeginDrag","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","ty","maxTy","deltaY","dy","min","onEndDrag","onMomentumEnd","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","floating","undefined","scrollContentInsets"],"mappings":"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","sourcesContent":["import React, { useRef } from 'react';\nimport { Falsy, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport Animated from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport useAppbarStyles from './useAppbarStyles';\nimport useElevationStyle from './useElevationStyle';\nimport useHeight from './useHeight';\n\ntype WebOnlyStyle = { boxShadow: any };\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | WebOnlyStyle | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface ContentInsets {\n    top?: number;\n    bottom?: number;\n    left?: number;\n    right?: number;\n}\n\nexport interface Options {\n    shouldTranslateYReset?: boolean;\n}\n\nexport interface CollapsibleAppBar {\n    appBarStyle: ViewStyleProp;\n    vectorY: Animated.SharedValue<number>;\n    onAppBarLayout: OnLayoutCallback;\n    onCollapsibleToolbarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    onScrollViewChanged: (index: number) => void;\n    scrollContentInsets: ContentInsets;\n}\n\nconst defaultOptions: Required<Options> = {\n    shouldTranslateYReset: false,\n};\n\nconst ANIMATION_DURATION_MILLIS = 100;\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\n\n\nfunction useLargerValueOfLastTwoValues(value: number) {\n    const refLatestTwoValues = useRef([0, 0]);\n\n    refLatestTwoValues.current.shift();\n    refLatestTwoValues.current.push(value);\n\n    return Math.max(...refLatestTwoValues.current);\n}\n\n\nexport default function useUnstableCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n    const { shouldTranslateYReset }: Required<Options> = {\n        ...defaultOptions,\n        ...userOptions,\n    };\n\n    const styles = useAppbarStyles();\n\n    const safeAreaInsets = useSafeAreaInsets();\n\n    const [appBarHeight, onAppBarLayout] = useHeight();\n    const appBarMaxHeight = useLargerValueOfLastTwoValues(appBarHeight);\n    const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();\n\n    const maxTranslateY = Animated.useDerivedValue(() => -collapsibleToolbarHeight);\n\n    const translateY = Animated.useSharedValue<number>(0);\n    const lastTranslateY = Animated.useSharedValue<number>(0);\n    const lastOffsetY = Animated.useSharedValue<number>(0);\n    const prevOffsetY = Animated.useSharedValue<number>(0);\n    const overlapped = Animated.useSharedValue<boolean>(false);\n    const vectorY = Animated.useSharedValue<number>(0);\n\n    const elevationStyle = useElevationStyle(4);\n    const animatedStyle = Animated.useAnimatedStyle(() => {\n        return Platform.OS === 'web' ? ({\n            transform: [{ translateY: translateY.value }],\n            boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,\n        }) : ({\n            transform: [{ translateY: translateY.value }],\n            elevation: overlapped.value ? elevationStyle?.elevation : 0,\n            shadowColor: elevationStyle?.shadowColor,\n            shadowOffset: elevationStyle?.shadowOffset,\n            shadowRadius: elevationStyle?.shadowRadius,\n            shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,\n        });\n    });\n\n    const indexRef = React.useRef<number>(0);\n    const offsetsRef = React.useRef<Array<number>>([]);\n\n    const onScrollViewChanged = (nextIndex: number) => {\n        const prevIndex = indexRef.current;\n        if (prevIndex === nextIndex) {\n            if (shouldTranslateYReset) {\n                translateY.value = Animated.withTiming(0, {\n                    duration: ANIMATION_DURATION_MILLIS,\n                });\n\n                vectorY.value = 0;\n                offsetsRef.current = [];\n                overlapped.value = false;\n            }\n\n            return;\n        }\n\n        offsetsRef.current[prevIndex] = lastOffsetY.value;\n\n        const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;\n        lastOffsetY.value = savedOffsetY;\n\n        indexRef.current = nextIndex;\n\n        // Determine whether to overlap every time index is changed.\n        overlapped.value = savedOffsetY > 0;\n\n        // If next ScrollView's offset is too short, expand app bar.\n        if (translateY.value < 0 && savedOffsetY < appBarHeight) {\n            translateY.value = Animated.withTiming(0, {\n                duration: ANIMATION_DURATION_MILLIS,\n            });\n\n            vectorY.value = 0;\n        }\n    };\n\n    const scrollHandler = Animated.useAnimatedScrollHandler({\n        onBeginDrag: () => {\n            lastTranslateY.value = translateY.value;\n        },\n        onMomentumBegin: () => {\n            lastTranslateY.value = translateY.value;\n        },\n        onScroll: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            const deltaY = offsetY - prevOffsetY.value;\n            vectorY.value = (vectorY.value * deltaY >= 0 && offsetY > 0) ? vectorY.value + deltaY : deltaY;\n            prevOffsetY.value = offsetY;\n\n            if (SUPPORTS_DRAG_DETECTION) {\n                const dy = offsetY - lastOffsetY.value;\n\n                translateY.value = offsetY <= 0 ? 0 : Math.min(Math.max(lastTranslateY.value - dy, maxTy), 0);\n\n                overlapped.value = offsetY + translateY.value > 0;\n            } else {\n                if (offsetY > -maxTy) {\n                    if (ty === 0) {\n                        translateY.value = Animated.withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {\n                            duration: ANIMATION_DURATION_MILLIS,\n                        });\n                    }\n                } else {\n                    if (ty === maxTy) {\n                        translateY.value = Animated.withTiming(0, {\n                            duration: ANIMATION_DURATION_MILLIS,\n                        });\n                    }\n                }\n\n                overlapped.value = offsetY > 0;\n\n                lastOffsetY.value = offsetY;\n            }\n        },\n        onEndDrag: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n        onMomentumEnd: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            lastOffsetY.value = offsetY;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            // If toolbar is already positioned on edge, do nothing.\n            if (ty <= maxTy || ty >= 0) {\n                return;\n            }\n\n            const threshold = maxTy * 0.5;\n\n            const nextTranslateY = (ty > threshold || offsetY < appBarHeight) ? 0 : maxTy;\n\n            overlapped.value = offsetY + nextTranslateY > 0;\n\n            translateY.value = Animated.withTiming(nextTranslateY, {\n                duration: ANIMATION_DURATION_MILLIS,\n            });\n        },\n    });\n\n    const hasCollapsible = collapsibleToolbarHeight > 0;\n\n    const appBarStyle = [\n        animatedStyle,\n        { paddingTop: safeAreaInsets.top },\n        hasCollapsible ? styles.floating : undefined,\n    ];\n\n    return {\n        appBarStyle,\n        vectorY,\n        onAppBarLayout,\n        onCollapsibleToolbarLayout,\n        onScroll: scrollHandler,\n        onScrollViewChanged,\n        scrollContentInsets: { top: hasCollapsible ? appBarMaxHeight : 0 },\n    };\n};\n"]}
+{"version":3,"names":["React","useRef","Platform","useAnimatedScrollHandler","useAnimatedStyle","useDerivedValue","useSharedValue","withTiming","useSafeAreaInsets","useAppbarStyles","useElevationStyle","useHeight","defaultOptions","shouldTranslateYReset","ANIMATION_DURATION_MILLIS","SUPPORTS_DRAG_DETECTION","OS","useLargerValueOfLastTwoValues","value","refLatestTwoValues","current","shift","push","Math","max","useUnstableCollapsibleAppBar","userOptions","styles","safeAreaInsets","appBarHeight","onAppBarLayout","appBarMaxHeight","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","translateY","lastTranslateY","lastOffsetY","prevOffsetY","overlapped","vectorY","elevationStyle","animatedStyle","transform","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","offsetsRef","onScrollViewChanged","nextIndex","prevIndex","duration","savedOffsetY","scrollHandler","onBeginDrag","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","ty","maxTy","deltaY","dy","min","onEndDrag","onMomentumEnd","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","floating","undefined","scrollContentInsets"],"sources":["useUnstableCollapsibleAppBar.ts"],"sourcesContent":["import React, { useRef } from 'react';\nimport { Falsy, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport type { SharedValue } from 'react-native-reanimated';\nimport {\n    useAnimatedScrollHandler,\n    useAnimatedStyle,\n    useDerivedValue,\n    useSharedValue,\n    withTiming,\n} from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport useAppbarStyles from './useAppbarStyles';\nimport useElevationStyle from './useElevationStyle';\nimport useHeight from './useHeight';\n\ntype WebOnlyStyle = { boxShadow: any };\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | WebOnlyStyle | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface ContentInsets {\n    top?: number;\n    bottom?: number;\n    left?: number;\n    right?: number;\n}\n\nexport interface Options {\n    shouldTranslateYReset?: boolean;\n}\n\nexport interface CollapsibleAppBar {\n    appBarStyle: ViewStyleProp;\n    vectorY: SharedValue<number>;\n    onAppBarLayout: OnLayoutCallback;\n    onCollapsibleToolbarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    onScrollViewChanged: (index: number) => void;\n    scrollContentInsets: ContentInsets;\n}\n\nconst defaultOptions: Required<Options> = {\n    shouldTranslateYReset: false,\n};\n\nconst ANIMATION_DURATION_MILLIS = 100;\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\n\n\nfunction useLargerValueOfLastTwoValues(value: number) {\n    const refLatestTwoValues = useRef([0, 0]);\n\n    refLatestTwoValues.current.shift();\n    refLatestTwoValues.current.push(value);\n\n    return Math.max(...refLatestTwoValues.current);\n}\n\n\nexport default function useUnstableCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n    const { shouldTranslateYReset }: Required<Options> = {\n        ...defaultOptions,\n        ...userOptions,\n    };\n\n    const styles = useAppbarStyles();\n\n    const safeAreaInsets = useSafeAreaInsets();\n\n    const [appBarHeight, onAppBarLayout] = useHeight();\n    const appBarMaxHeight = useLargerValueOfLastTwoValues(appBarHeight);\n    const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();\n\n    const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight);\n\n    const translateY = useSharedValue<number>(0);\n    const lastTranslateY = useSharedValue<number>(0);\n    const lastOffsetY = useSharedValue<number>(0);\n    const prevOffsetY = useSharedValue<number>(0);\n    const overlapped = useSharedValue<boolean>(false);\n    const vectorY = useSharedValue<number>(0);\n\n    const elevationStyle = useElevationStyle(4);\n    const animatedStyle = useAnimatedStyle(() => {\n        return Platform.OS === 'web' ? ({\n            transform: [{ translateY: translateY.value }],\n            boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,\n        }) : ({\n            transform: [{ translateY: translateY.value }],\n            elevation: overlapped.value ? elevationStyle?.elevation : 0,\n            shadowColor: elevationStyle?.shadowColor,\n            shadowOffset: elevationStyle?.shadowOffset,\n            shadowRadius: elevationStyle?.shadowRadius,\n            shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,\n        });\n    });\n\n    const indexRef = React.useRef<number>(0);\n    const offsetsRef = React.useRef<Array<number>>([]);\n\n    const onScrollViewChanged = (nextIndex: number) => {\n        const prevIndex = indexRef.current;\n        if (prevIndex === nextIndex) {\n            if (shouldTranslateYReset) {\n                translateY.value = withTiming(0, {\n                    duration: ANIMATION_DURATION_MILLIS,\n                });\n\n                vectorY.value = 0;\n                offsetsRef.current = [];\n                overlapped.value = false;\n            }\n\n            return;\n        }\n\n        offsetsRef.current[prevIndex] = lastOffsetY.value;\n\n        const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;\n        lastOffsetY.value = savedOffsetY;\n\n        indexRef.current = nextIndex;\n\n        // Determine whether to overlap every time index is changed.\n        overlapped.value = savedOffsetY > 0;\n\n        // If next ScrollView's offset is too short, expand app bar.\n        if (translateY.value < 0 && savedOffsetY < appBarHeight) {\n            translateY.value = withTiming(0, {\n                duration: ANIMATION_DURATION_MILLIS,\n            });\n\n            vectorY.value = 0;\n        }\n    };\n\n    const scrollHandler = useAnimatedScrollHandler({\n        onBeginDrag: () => {\n            lastTranslateY.value = translateY.value;\n        },\n        onMomentumBegin: () => {\n            lastTranslateY.value = translateY.value;\n        },\n        onScroll: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            const deltaY = offsetY - prevOffsetY.value;\n            vectorY.value = (vectorY.value * deltaY >= 0 && offsetY > 0) ? vectorY.value + deltaY : deltaY;\n            prevOffsetY.value = offsetY;\n\n            if (SUPPORTS_DRAG_DETECTION) {\n                const dy = offsetY - lastOffsetY.value;\n\n                translateY.value = offsetY <= 0 ? 0 : Math.min(Math.max(lastTranslateY.value - dy, maxTy), 0);\n\n                overlapped.value = offsetY + translateY.value > 0;\n            } else {\n                if (offsetY > -maxTy) {\n                    if (ty === 0) {\n                        translateY.value = withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {\n                            duration: ANIMATION_DURATION_MILLIS,\n                        });\n                    }\n                } else {\n                    if (ty === maxTy) {\n                        translateY.value = withTiming(0, {\n                            duration: ANIMATION_DURATION_MILLIS,\n                        });\n                    }\n                }\n\n                overlapped.value = offsetY > 0;\n\n                lastOffsetY.value = offsetY;\n            }\n        },\n        onEndDrag: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n        onMomentumEnd: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            lastOffsetY.value = offsetY;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            // If toolbar is already positioned on edge, do nothing.\n            if (ty <= maxTy || ty >= 0) {\n                return;\n            }\n\n            const threshold = maxTy * 0.5;\n\n            const nextTranslateY = (ty > threshold || offsetY < appBarHeight) ? 0 : maxTy;\n\n            overlapped.value = offsetY + nextTranslateY > 0;\n\n            translateY.value = withTiming(nextTranslateY, {\n                duration: ANIMATION_DURATION_MILLIS,\n            });\n        },\n    });\n\n    const hasCollapsible = collapsibleToolbarHeight > 0;\n\n    const appBarStyle = [\n        animatedStyle,\n        { paddingTop: safeAreaInsets.top },\n        hasCollapsible ? styles.floating : undefined,\n    ];\n\n    return {\n        appBarStyle,\n        vectorY,\n        onAppBarLayout,\n        onCollapsibleToolbarLayout,\n        onScroll: scrollHandler,\n        onScrollViewChanged,\n        scrollContentInsets: { top: hasCollapsible ? appBarMaxHeight : 0 },\n    };\n};\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,MAAhB,QAA8B,OAA9B;AACA,SAAgBC,QAAhB,QAAwF,cAAxF;AAEA,SACIC,wBADJ,EAEIC,gBAFJ,EAGIC,eAHJ,EAIIC,cAJJ,EAKIC,UALJ,QAMO,yBANP;AAOA,SAASC,iBAAT,QAAkC,gCAAlC;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AACA,OAAOC,iBAAP,MAA8B,qBAA9B;AACA,OAAOC,SAAP,MAAsB,aAAtB;AA+BA,MAAMC,cAAiC,GAAG;EACtCC,qBAAqB,EAAE;AADe,CAA1C;AAIA,MAAMC,yBAAyB,GAAG,GAAlC;AAEA,MAAMC,uBAAuB,GAAGb,QAAQ,CAACc,EAAT,KAAgB,KAAhD;;AAGA,SAASC,6BAAT,CAAuCC,KAAvC,EAAsD;EAClD,MAAMC,kBAAkB,GAAGlB,MAAM,CAAC,CAAC,CAAD,EAAI,CAAJ,CAAD,CAAjC;EAEAkB,kBAAkB,CAACC,OAAnB,CAA2BC,KAA3B;EACAF,kBAAkB,CAACC,OAAnB,CAA2BE,IAA3B,CAAgCJ,KAAhC;EAEA,OAAOK,IAAI,CAACC,GAAL,CAAS,GAAGL,kBAAkB,CAACC,OAA/B,CAAP;AACH;;AAGD,eAAe,SAASK,4BAAT,GAAgG;EAAA,IAA1DC,WAA0D,uEAAnCd,cAAmC;EAC3G,MAAM;IAAEC;EAAF,IAA+C,EACjD,GAAGD,cAD8C;IAEjD,GAAGc;EAF8C,CAArD;EAKA,MAAMC,MAAM,GAAGlB,eAAe,EAA9B;EAEA,MAAMmB,cAAc,GAAGpB,iBAAiB,EAAxC;EAEA,MAAM,CAACqB,YAAD,EAAeC,cAAf,IAAiCnB,SAAS,EAAhD;EACA,MAAMoB,eAAe,GAAGd,6BAA6B,CAACY,YAAD,CAArD;EACA,MAAM,CAACG,wBAAD,EAA2BC,0BAA3B,IAAyDtB,SAAS,EAAxE;EAEA,MAAMuB,aAAa,GAAG7B,eAAe,CAAC,MAAM,CAAC2B,wBAAR,CAArC;EAEA,MAAMG,UAAU,GAAG7B,cAAc,CAAS,CAAT,CAAjC;EACA,MAAM8B,cAAc,GAAG9B,cAAc,CAAS,CAAT,CAArC;EACA,MAAM+B,WAAW,GAAG/B,cAAc,CAAS,CAAT,CAAlC;EACA,MAAMgC,WAAW,GAAGhC,cAAc,CAAS,CAAT,CAAlC;EACA,MAAMiC,UAAU,GAAGjC,cAAc,CAAU,KAAV,CAAjC;EACA,MAAMkC,OAAO,GAAGlC,cAAc,CAAS,CAAT,CAA9B;EAEA,MAAMmC,cAAc,GAAG/B,iBAAiB,CAAC,CAAD,CAAxC;EACA,MAAMgC,aAAa,GAAGtC,gBAAgB,CAAC,MAAM;IACzC,OAAOF,QAAQ,CAACc,EAAT,KAAgB,KAAhB,GAAyB;MAC5B2B,SAAS,EAAE,CAAC;QAAER,UAAU,EAAEA,UAAU,CAACjB;MAAzB,CAAD,CADiB;MAE5B0B,SAAS,EAAEL,UAAU,CAACrB,KAAX,GAAmBuB,cAAnB,aAAmBA,cAAnB,uBAAmBA,cAAc,CAAEG,SAAnC,GAA+C;IAF9B,CAAzB,GAGD;MACFD,SAAS,EAAE,CAAC;QAAER,UAAU,EAAEA,UAAU,CAACjB;MAAzB,CAAD,CADT;MAEF2B,SAAS,EAAEN,UAAU,CAACrB,KAAX,GAAmBuB,cAAnB,aAAmBA,cAAnB,uBAAmBA,cAAc,CAAEI,SAAnC,GAA+C,CAFxD;MAGFC,WAAW,EAAEL,cAAF,aAAEA,cAAF,uBAAEA,cAAc,CAAEK,WAH3B;MAIFC,YAAY,EAAEN,cAAF,aAAEA,cAAF,uBAAEA,cAAc,CAAEM,YAJ5B;MAKFC,YAAY,EAAEP,cAAF,aAAEA,cAAF,uBAAEA,cAAc,CAAEO,YAL5B;MAMFC,aAAa,EAAEV,UAAU,CAACrB,KAAX,GAAmBuB,cAAnB,aAAmBA,cAAnB,uBAAmBA,cAAc,CAAEQ,aAAnC,GAAmD;IANhE,CAHN;EAWH,CAZqC,CAAtC;EAcA,MAAMC,QAAQ,GAAGlD,KAAK,CAACC,MAAN,CAAqB,CAArB,CAAjB;EACA,MAAMkD,UAAU,GAAGnD,KAAK,CAACC,MAAN,CAA4B,EAA5B,CAAnB;;EAEA,MAAMmD,mBAAmB,GAAIC,SAAD,IAAuB;IAC/C,MAAMC,SAAS,GAAGJ,QAAQ,CAAC9B,OAA3B;;IACA,IAAIkC,SAAS,KAAKD,SAAlB,EAA6B;MACzB,IAAIxC,qBAAJ,EAA2B;QACvBsB,UAAU,CAACjB,KAAX,GAAmBX,UAAU,CAAC,CAAD,EAAI;UAC7BgD,QAAQ,EAAEzC;QADmB,CAAJ,CAA7B;QAIA0B,OAAO,CAACtB,KAAR,GAAgB,CAAhB;QACAiC,UAAU,CAAC/B,OAAX,GAAqB,EAArB;QACAmB,UAAU,CAACrB,KAAX,GAAmB,KAAnB;MACH;;MAED;IACH;;IAEDiC,UAAU,CAAC/B,OAAX,CAAmBkC,SAAnB,IAAgCjB,WAAW,CAACnB,KAA5C;IAEA,MAAMsC,YAAY,GAAGL,UAAU,CAAC/B,OAAX,CAAmBiC,SAAnB,KAAiC,CAAtD;IACAhB,WAAW,CAACnB,KAAZ,GAAoBsC,YAApB;IAEAN,QAAQ,CAAC9B,OAAT,GAAmBiC,SAAnB,CArB+C,CAuB/C;;IACAd,UAAU,CAACrB,KAAX,GAAmBsC,YAAY,GAAG,CAAlC,CAxB+C,CA0B/C;;IACA,IAAIrB,UAAU,CAACjB,KAAX,GAAmB,CAAnB,IAAwBsC,YAAY,GAAG3B,YAA3C,EAAyD;MACrDM,UAAU,CAACjB,KAAX,GAAmBX,UAAU,CAAC,CAAD,EAAI;QAC7BgD,QAAQ,EAAEzC;MADmB,CAAJ,CAA7B;MAIA0B,OAAO,CAACtB,KAAR,GAAgB,CAAhB;IACH;EACJ,CAlCD;;EAoCA,MAAMuC,aAAa,GAAGtD,wBAAwB,CAAC;IAC3CuD,WAAW,EAAE,MAAM;MACftB,cAAc,CAAClB,KAAf,GAAuBiB,UAAU,CAACjB,KAAlC;IACH,CAH0C;IAI3CyC,eAAe,EAAE,MAAM;MACnBvB,cAAc,CAAClB,KAAf,GAAuBiB,UAAU,CAACjB,KAAlC;IACH,CAN0C;IAO3C0C,QAAQ,EAAGC,KAAD,IAAW;MACjB,MAAMC,OAAO,GAAGD,KAAK,CAACE,aAAN,CAAoBC,CAApC;MAEA,MAAMC,EAAE,GAAG9B,UAAU,CAACjB,KAAtB;MACA,MAAMgD,KAAK,GAAGhC,aAAa,CAAChB,KAA5B;MAEA,MAAMiD,MAAM,GAAGL,OAAO,GAAGxB,WAAW,CAACpB,KAArC;MACAsB,OAAO,CAACtB,KAAR,GAAiBsB,OAAO,CAACtB,KAAR,GAAgBiD,MAAhB,IAA0B,CAA1B,IAA+BL,OAAO,GAAG,CAA1C,GAA+CtB,OAAO,CAACtB,KAAR,GAAgBiD,MAA/D,GAAwEA,MAAxF;MACA7B,WAAW,CAACpB,KAAZ,GAAoB4C,OAApB;;MAEA,IAAI/C,uBAAJ,EAA6B;QACzB,MAAMqD,EAAE,GAAGN,OAAO,GAAGzB,WAAW,CAACnB,KAAjC;QAEAiB,UAAU,CAACjB,KAAX,GAAmB4C,OAAO,IAAI,CAAX,GAAe,CAAf,GAAmBvC,IAAI,CAAC8C,GAAL,CAAS9C,IAAI,CAACC,GAAL,CAASY,cAAc,CAAClB,KAAf,GAAuBkD,EAAhC,EAAoCF,KAApC,CAAT,EAAqD,CAArD,CAAtC;QAEA3B,UAAU,CAACrB,KAAX,GAAmB4C,OAAO,GAAG3B,UAAU,CAACjB,KAArB,GAA6B,CAAhD;MACH,CAND,MAMO;QACH,IAAI4C,OAAO,GAAG,CAACI,KAAf,EAAsB;UAClB,IAAID,EAAE,KAAK,CAAX,EAAc;YACV9B,UAAU,CAACjB,KAAX,GAAmBX,UAAU,CAACgB,IAAI,CAAC8C,GAAL,CAAS9C,IAAI,CAACC,GAAL,CAAS,CAACsC,OAAV,EAAmBI,KAAnB,CAAT,EAAoC,CAApC,CAAD,EAAyC;cAClEX,QAAQ,EAAEzC;YADwD,CAAzC,CAA7B;UAGH;QACJ,CAND,MAMO;UACH,IAAImD,EAAE,KAAKC,KAAX,EAAkB;YACd/B,UAAU,CAACjB,KAAX,GAAmBX,UAAU,CAAC,CAAD,EAAI;cAC7BgD,QAAQ,EAAEzC;YADmB,CAAJ,CAA7B;UAGH;QACJ;;QAEDyB,UAAU,CAACrB,KAAX,GAAmB4C,OAAO,GAAG,CAA7B;QAEAzB,WAAW,CAACnB,KAAZ,GAAoB4C,OAApB;MACH;IACJ,CA1C0C;IA2C3CQ,SAAS,EAAGT,KAAD,IAAW;MAClBxB,WAAW,CAACnB,KAAZ,GAAoB2C,KAAK,CAACE,aAAN,CAAoBC,CAAxC;IACH,CA7C0C;IA8C3CO,aAAa,EAAGV,KAAD,IAAW;MACtB,MAAMC,OAAO,GAAGD,KAAK,CAACE,aAAN,CAAoBC,CAApC;MAEA3B,WAAW,CAACnB,KAAZ,GAAoB4C,OAApB;MAEA,MAAMG,EAAE,GAAG9B,UAAU,CAACjB,KAAtB;MACA,MAAMgD,KAAK,GAAGhC,aAAa,CAAChB,KAA5B,CANsB,CAQtB;;MACA,IAAI+C,EAAE,IAAIC,KAAN,IAAeD,EAAE,IAAI,CAAzB,EAA4B;QACxB;MACH;;MAED,MAAMO,SAAS,GAAGN,KAAK,GAAG,GAA1B;MAEA,MAAMO,cAAc,GAAIR,EAAE,GAAGO,SAAL,IAAkBV,OAAO,GAAGjC,YAA7B,GAA6C,CAA7C,GAAiDqC,KAAxE;MAEA3B,UAAU,CAACrB,KAAX,GAAmB4C,OAAO,GAAGW,cAAV,GAA2B,CAA9C;MAEAtC,UAAU,CAACjB,KAAX,GAAmBX,UAAU,CAACkE,cAAD,EAAiB;QAC1ClB,QAAQ,EAAEzC;MADgC,CAAjB,CAA7B;IAGH;EApE0C,CAAD,CAA9C;EAuEA,MAAM4D,cAAc,GAAG1C,wBAAwB,GAAG,CAAlD;EAEA,MAAM2C,WAAW,GAAG,CAChBjC,aADgB,EAEhB;IAAEkC,UAAU,EAAEhD,cAAc,CAACiD;EAA7B,CAFgB,EAGhBH,cAAc,GAAG/C,MAAM,CAACmD,QAAV,GAAqBC,SAHnB,CAApB;EAMA,OAAO;IACHJ,WADG;IAEHnC,OAFG;IAGHV,cAHG;IAIHG,0BAJG;IAKH2B,QAAQ,EAAEH,aALP;IAMHL,mBANG;IAOH4B,mBAAmB,EAAE;MAAEH,GAAG,EAAEH,cAAc,GAAG3C,eAAH,GAAqB;IAA1C;EAPlB,CAAP;AASH;AAAA"}

package/build/module/hooks/useUnstableToggleDisplayStyle.js

@@ -1,14 +1,16 @@
-import Animated from 'react-native-reanimated';
-export default function useAnimatedDisplayStyle(vectorY, threshold = 200, defaultDisplay = 'flex') {
-  const display = Animated.useSharedValue(defaultDisplay);
-  Animated.useAnimatedReaction(() => vectorY.value, vy => {
+import { useAnimatedReaction, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
+export default function useAnimatedDisplayStyle(vectorY) {
+  let threshold = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 200;
+  let defaultDisplay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'flex';
+  const display = useSharedValue(defaultDisplay);
+  useAnimatedReaction(() => vectorY.value, vy => {
     if (vy >= threshold) {
       display.value = 'none';
     } else if (vy < threshold) {
       display.value = 'flex';
     }
   });
-  return Animated.useAnimatedStyle(() => ({
+  return useAnimatedStyle(() => ({
     display: display.value
   }));
 }

package/build/module/hooks/useUnstableToggleDisplayStyle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useUnstableToggleDisplayStyle.ts"],"names":["Animated","useAnimatedDisplayStyle","vectorY","threshold","defaultDisplay","display","useSharedValue","useAnimatedReaction","value","vy","useAnimatedStyle"],"mappings":"AAAA,OAAOA,QAAP,MAAqB,yBAArB;AAEA,eAAe,SAASC,uBAAT,CACXC,OADW,EAEXC,SAAiB,GAAG,GAFT,EAGXC,cAA+B,GAAG,MAHvB,EAIb;AACE,QAAMC,OAAO,GAAGL,QAAQ,CAACM,cAAT,CAAwBF,cAAxB,CAAhB;AAEAJ,EAAAA,QAAQ,CAACO,mBAAT,CACI,MAAML,OAAO,CAACM,KADlB,EAEKC,EAAD,IAAQ;AACJ,QAAIA,EAAE,IAAIN,SAAV,EAAqB;AACjBE,MAAAA,OAAO,CAACG,KAAR,GAAgB,MAAhB;AACH,KAFD,MAEO,IAAIC,EAAE,GAAGN,SAAT,EAAoB;AACvBE,MAAAA,OAAO,CAACG,KAAR,GAAgB,MAAhB;AACH;AACJ,GARL;AAWA,SAAOR,QAAQ,CAACU,gBAAT,CAA0B,OAAO;AACpCL,IAAAA,OAAO,EAAEA,OAAO,CAACG;AADmB,GAAP,CAA1B,CAAP;AAGH;AAAA","sourcesContent":["import Animated from 'react-native-reanimated';\n\nexport default function useAnimatedDisplayStyle(\n    vectorY: Animated.SharedValue<number>,\n    threshold: number = 200,\n    defaultDisplay: 'flex' | 'none' = 'flex',\n) {\n    const display = Animated.useSharedValue(defaultDisplay);\n\n    Animated.useAnimatedReaction(\n        () => vectorY.value,\n        (vy) => {\n            if (vy >= threshold) {\n                display.value = 'none';\n            } else if (vy < threshold) {\n                display.value = 'flex';\n            }\n        },\n    );\n\n    return Animated.useAnimatedStyle(() => ({\n        display: display.value,\n    }));\n};\n"]}
+{"version":3,"names":["useAnimatedReaction","useAnimatedStyle","useSharedValue","useAnimatedDisplayStyle","vectorY","threshold","defaultDisplay","display","value","vy"],"sources":["useUnstableToggleDisplayStyle.ts"],"sourcesContent":["import type { SharedValue } from 'react-native-reanimated';\nimport { useAnimatedReaction, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';\n\nexport default function useAnimatedDisplayStyle(\n    vectorY: SharedValue<number>,\n    threshold: number = 200,\n    defaultDisplay: 'flex' | 'none' = 'flex',\n) {\n    const display = useSharedValue(defaultDisplay);\n\n    useAnimatedReaction(\n        () => vectorY.value,\n        (vy) => {\n            if (vy >= threshold) {\n                display.value = 'none';\n            } else if (vy < threshold) {\n                display.value = 'flex';\n            }\n        },\n    );\n\n    return useAnimatedStyle(() => ({\n        display: display.value,\n    }));\n};\n"],"mappings":"AACA,SAASA,mBAAT,EAA8BC,gBAA9B,EAAgDC,cAAhD,QAAsE,yBAAtE;AAEA,eAAe,SAASC,uBAAT,CACXC,OADW,EAIb;EAAA,IAFEC,SAEF,uEAFsB,GAEtB;EAAA,IADEC,cACF,uEADoC,MACpC;EACE,MAAMC,OAAO,GAAGL,cAAc,CAACI,cAAD,CAA9B;EAEAN,mBAAmB,CACf,MAAMI,OAAO,CAACI,KADC,EAEdC,EAAD,IAAQ;IACJ,IAAIA,EAAE,IAAIJ,SAAV,EAAqB;MACjBE,OAAO,CAACC,KAAR,GAAgB,MAAhB;IACH,CAFD,MAEO,IAAIC,EAAE,GAAGJ,SAAT,EAAoB;MACvBE,OAAO,CAACC,KAAR,GAAgB,MAAhB;IACH;EACJ,CARc,CAAnB;EAWA,OAAOP,gBAAgB,CAAC,OAAO;IAC3BM,OAAO,EAAEA,OAAO,CAACC;EADU,CAAP,CAAD,CAAvB;AAGH;AAAA"}

package/build/module/hooks/useWidth.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useWidth.ts"],"names":["React","useWindowDimensions","useWidth","window","width","setWidth","useState","onLayout","useCallback","e","newWidth","nativeEvent","layout","Math","round"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAA4BC,mBAA5B,QAAkE,cAAlE;AAEA,eAAe,SAASC,QAAT,GAAqD;AAChE,QAAMC,MAAM,GAAGF,mBAAmB,EAAlC;AACA,QAAM,CAACG,KAAD,EAAQC,QAAR,IAAoBL,KAAK,CAACM,QAAN,CAAeH,MAAM,CAACC,KAAtB,CAA1B;AAEA,QAAMG,QAAQ,GAAGP,KAAK,CAACQ,WAAN,CAAmBC,CAAD,IAA0B;AACzD,UAAMC,QAAQ,GAAGD,CAAC,CAACE,WAAF,CAAcC,MAAd,CAAqBR,KAAtC;;AAEA,QAAIM,QAAQ,GAAG,CAAX,IAAgBG,IAAI,CAACC,KAAL,CAAWJ,QAAX,MAAyBG,IAAI,CAACC,KAAL,CAAWV,KAAX,CAA7C,EAAgE;AAC5DC,MAAAA,QAAQ,CAACK,QAAD,CAAR;AACH;AACJ,GANgB,EAMd,EANc,CAAjB;AAQA,SAAO,CAACN,KAAD,EAAQG,QAAR,CAAP;AACH","sourcesContent":["import React from 'react';\nimport { LayoutChangeEvent, useWindowDimensions, ViewProps } from 'react-native';\n\nexport default function useWidth(): [number, ViewProps['onLayout']] {\n    const window = useWindowDimensions();\n    const [width, setWidth] = React.useState(window.width);\n\n    const onLayout = React.useCallback((e: LayoutChangeEvent) => {\n        const newWidth = e.nativeEvent.layout.width;\n\n        if (newWidth > 0 && Math.round(newWidth) !== Math.round(width)) {\n            setWidth(newWidth);\n        }\n    }, []);\n\n    return [width, onLayout];\n}"]}
+{"version":3,"names":["React","useWindowDimensions","useWidth","window","width","setWidth","useState","onLayout","useCallback","e","newWidth","nativeEvent","layout","Math","round"],"sources":["useWidth.ts"],"sourcesContent":["import React from 'react';\nimport { LayoutChangeEvent, useWindowDimensions, ViewProps } from 'react-native';\n\nexport default function useWidth(): [number, ViewProps['onLayout']] {\n    const window = useWindowDimensions();\n    const [width, setWidth] = React.useState(window.width);\n\n    const onLayout = React.useCallback((e: LayoutChangeEvent) => {\n        const newWidth = e.nativeEvent.layout.width;\n\n        if (newWidth > 0 && Math.round(newWidth) !== Math.round(width)) {\n            setWidth(newWidth);\n        }\n    }, []);\n\n    return [width, onLayout];\n}"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAA4BC,mBAA5B,QAAkE,cAAlE;AAEA,eAAe,SAASC,QAAT,GAAqD;EAChE,MAAMC,MAAM,GAAGF,mBAAmB,EAAlC;EACA,MAAM,CAACG,KAAD,EAAQC,QAAR,IAAoBL,KAAK,CAACM,QAAN,CAAeH,MAAM,CAACC,KAAtB,CAA1B;EAEA,MAAMG,QAAQ,GAAGP,KAAK,CAACQ,WAAN,CAAmBC,CAAD,IAA0B;IACzD,MAAMC,QAAQ,GAAGD,CAAC,CAACE,WAAF,CAAcC,MAAd,CAAqBR,KAAtC;;IAEA,IAAIM,QAAQ,GAAG,CAAX,IAAgBG,IAAI,CAACC,KAAL,CAAWJ,QAAX,MAAyBG,IAAI,CAACC,KAAL,CAAWV,KAAX,CAA7C,EAAgE;MAC5DC,QAAQ,CAACK,QAAD,CAAR;IACH;EACJ,CANgB,EAMd,EANc,CAAjB;EAQA,OAAO,CAACN,KAAD,EAAQG,QAAR,CAAP;AACH"}

package/build/module/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":["default","BottomSheet","Carousel","DateTimePicker","FlipCard","ViewPager","ComicViewer","StatusBarProvider","useStatusBarContext"],"mappings":"AAAA,SAASA,OAAO,IAAIC,WAApB,QAAuC,eAAvC;AACA,cAAc,eAAd;AAEA,SAASD,OAAO,IAAIE,QAApB,QAAoC,YAApC;AACA,cAAc,YAAd;AAEA,SAASF,OAAO,IAAIG,cAApB,QAA0C,kBAA1C;AACA,cAAc,kBAAd;AAEA,SAASH,OAAO,IAAII,QAApB,QAAoC,YAApC;AACA,cAAc,YAAd;AAEA,SAASJ,OAAO,IAAIK,SAApB,QAAqC,aAArC;AACA,cAAc,aAAd;AAEA,SAASL,OAAO,IAAIM,WAApB,QAAuC,eAAvC;AACA,cAAc,eAAd;AAEA,SAASN,OAAO,IAAIO,iBAApB,EAAuCC,mBAAvC,QAAkE,qBAAlE;AACA,cAAc,qBAAd;AAEA,cAAc,SAAd","sourcesContent":["export { default as BottomSheet } from './BottomSheet';\nexport * from './BottomSheet';\n\nexport { default as Carousel } from './Carousel';\nexport * from './Carousel';\n\nexport { default as DateTimePicker } from './DateTimePicker';\nexport * from './DateTimePicker';\n\nexport { default as FlipCard } from './FlipCard';\nexport * from './FlipCard';\n\nexport { default as ViewPager } from './ViewPager';\nexport * from './ViewPager';\n\nexport { default as ComicViewer } from './ComicViewer';\nexport * from './ComicViewer';\n\nexport { default as StatusBarProvider, useStatusBarContext } from './StatusBarProvider';\nexport * from './StatusBarProvider';\n\nexport * from './hooks';\n"]}
+{"version":3,"names":["default","BottomSheet","Carousel","DateTimePicker","FlipCard","ViewPager","ComicViewer","StatusBarProvider","useStatusBarContext"],"sources":["index.ts"],"sourcesContent":["export { default as BottomSheet } from './BottomSheet';\nexport * from './BottomSheet';\n\nexport { default as Carousel } from './Carousel';\nexport * from './Carousel';\n\nexport { default as DateTimePicker } from './DateTimePicker';\nexport * from './DateTimePicker';\n\nexport { default as FlipCard } from './FlipCard';\nexport * from './FlipCard';\n\nexport { default as ViewPager } from './ViewPager';\nexport * from './ViewPager';\n\nexport { default as ComicViewer } from './ComicViewer';\nexport * from './ComicViewer';\n\nexport { default as StatusBarProvider, useStatusBarContext } from './StatusBarProvider';\nexport * from './StatusBarProvider';\n\nexport * from './hooks';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,WAApB,QAAuC,eAAvC;AACA,cAAc,eAAd;AAEA,SAASD,OAAO,IAAIE,QAApB,QAAoC,YAApC;AACA,cAAc,YAAd;AAEA,SAASF,OAAO,IAAIG,cAApB,QAA0C,kBAA1C;AACA,cAAc,kBAAd;AAEA,SAASH,OAAO,IAAII,QAApB,QAAoC,YAApC;AACA,cAAc,YAAd;AAEA,SAASJ,OAAO,IAAIK,SAApB,QAAqC,aAArC;AACA,cAAc,aAAd;AAEA,SAASL,OAAO,IAAIM,WAApB,QAAuC,eAAvC;AACA,cAAc,eAAd;AAEA,SAASN,OAAO,IAAIO,iBAApB,EAAuCC,mBAAvC,QAAkE,qBAAlE;AACA,cAAc,qBAAd;AAEA,cAAc,SAAd"}

package/build/typescript/AnimatedY/AnimatedY.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type AnimatedYProps from './AnimatedYProps';
 export default function AnimatedY(props: AnimatedYProps): JSX.Element;

package/build/typescript/BottomSheet/BottomSheetNative.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type BottomSheetProps from './BottomSheetProps';
 export default function BottomSheet(props: BottomSheetProps): JSX.Element;

package/build/typescript/BottomSheet/BottomSheetWeb.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type BottomSheetProps from './BottomSheetProps';
 export default function BottomSheet(props: BottomSheetProps): JSX.Element;

package/build/typescript/BottomSheet/TransparentBackdrop.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { BottomSheetBackdropProps } from '@gorhom/bottom-sheet';
 export default function TransparentBackdrop(props: BottomSheetBackdropProps): JSX.Element;

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

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type CarouselProps from './CarouselProps';
 export default function Carousel<ItemT>(props: CarouselProps<ItemT>): JSX.Element;

package/build/typescript/ComicViewer/ComicViewer.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { default as ComicViewerProps } from './ComicViewerProps';
 export default function ComicViewer<T>(props: ComicViewerProps<T>): JSX.Element;

package/build/typescript/DateTimePicker/DateTimePicker.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type DateTimePickerProps from './DateTimePickerProps';
 export default function DateTimePicker(props: DateTimePickerProps): JSX.Element;

package/build/typescript/DateTimePicker/YearPicker.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface YearPickerProps {
     date: Date;
     locale?: string;

package/build/typescript/FlipCard/FlipCard.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type FlipCardProps from './FlipCardProps';
 export default function FlipCard(props: FlipCardProps): JSX.Element;

package/build/typescript/StatusBarProvider/StatusBarProvider.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type StatusBarProviderProps from './StatusBarProviderProps';
 export default function StatusBarProvider(props: StatusBarProviderProps): JSX.Element;

package/build/typescript/ViewPager/ViewPagerNative.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type ViewPagerProps from './ViewPagerProps';
 export default function ViewPager(props: ViewPagerProps): JSX.Element;

package/build/typescript/ViewPager/ViewPagerWeb.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type ViewPagerProps from './ViewPagerProps';
 export default function ViewPager(props: ViewPagerProps): JSX.Element;

package/build/typescript/hooks/useUnstableCollapsibleAppBar.d.ts

@@ -1,5 +1,5 @@
 import { Falsy, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';
-import Animated from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
 declare type WebOnlyStyle = {
     boxShadow: any;
 };
@@ -17,7 +17,7 @@ export interface Options {
 }
 export interface CollapsibleAppBar {
     appBarStyle: ViewStyleProp;
-    vectorY: Animated.SharedValue<number>;
+    vectorY: SharedValue<number>;
     onAppBarLayout: OnLayoutCallback;
     onCollapsibleToolbarLayout: OnLayoutCallback;
     onScroll: OnScroll;

package/build/typescript/hooks/useUnstableToggleDisplayStyle.d.ts

@@ -1,4 +1,4 @@
-import Animated from 'react-native-reanimated';
-export default function useAnimatedDisplayStyle(vectorY: Animated.SharedValue<number>, threshold?: number, defaultDisplay?: 'flex' | 'none'): {
+import type { SharedValue } from 'react-native-reanimated';
+export default function useAnimatedDisplayStyle(vectorY: SharedValue<number>, threshold?: number, defaultDisplay?: 'flex' | 'none'): {
     display: "flex" | "none";
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/lab",
-  "version": "2.0.0-beta.6",
+  "version": "2.0.0-beta.7",
   "private": false,
   "author": "Fountain-UI Team",
   "description": "Incubator for Fountain-UI React components.",
@@ -15,8 +15,8 @@
     "prepare": "bob build"
   },
   "dependencies": {
-    "@emotion/react": "^11.4.1",
-    "@emotion/styled": "^11.0.0",
+    "@emotion/react": "^11.10.0",
+    "@emotion/styled": "^11.10.0",
     "@fountain-ui/icons": "^2.0.0-beta.6",
     "@fountain-ui/utils": "^2.0.0-beta.3",
     "react-native-calendars": "1.1267.0"
@@ -29,6 +29,7 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react-native": "^0.63.0",
+    "react-native-gesture-handler": "^2.0.0",
     "react-native-snap-carousel": "^3.9.0",
     "react-slick": "^0.25.0"
   },
@@ -84,5 +85,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "10ec965daab032df7f6e7e09f793de59b9b5f787"
+  "gitHead": "92adfb973082a3ebaa68ab16d8144230523b36d8"
 }

package/src/AnimatedY/AnimatedY.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Animated, { Easing } from 'react-native-reanimated';
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import type AnimatedYProps from './AnimatedYProps';
 
 export default function AnimatedY(props: AnimatedYProps) {
@@ -9,14 +9,14 @@ export default function AnimatedY(props: AnimatedYProps) {
         style,
     } = props;
 
-    const animatedY = Animated.useSharedValue(translateY);
-    const animatedStyle = Animated.useAnimatedStyle(() => ({
+    const animatedY = useSharedValue(translateY);
+    const animatedStyle = useAnimatedStyle(() => ({
         transform: [{ translateY: animatedY.value }],
     }));
 
     React.useEffect(() => {
         if (translateY >= 0) {
-            animatedY.value = Animated.withTiming(translateY, {
+            animatedY.value = withTiming(translateY, {
                 duration: 150,
                 easing: Easing.out(Easing.exp),
             });

package/src/FlipCard/FlipCard.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { StyleSheet, View } from 'react-native';
-import Animated from 'react-native-reanimated';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import type FlipCardProps from './FlipCardProps';
 
 const styles = StyleSheet.create({
@@ -27,9 +27,9 @@ export default function FlipCard(props: FlipCardProps) {
         style,
     } = props;
 
-    const sharedAngle = Animated.useSharedValue(0);
+    const sharedAngle = useSharedValue(0);
 
-    const animatedFrontCardStyle = Animated.useAnimatedStyle(() => {
+    const animatedFrontCardStyle = useAnimatedStyle(() => {
         return {
             zIndex: sharedAngle.value < Z_INDEX_CHANGE_ANGLE ? 2 : 1,
             transform: [
@@ -39,7 +39,7 @@ export default function FlipCard(props: FlipCardProps) {
         };
     });
 
-    const animatedBackCardStyle = Animated.useAnimatedStyle(() => {
+    const animatedBackCardStyle = useAnimatedStyle(() => {
         return {
             zIndex: sharedAngle.value <= Z_INDEX_CHANGE_ANGLE ? 1 : 2,
             transform: [
@@ -51,7 +51,7 @@ export default function FlipCard(props: FlipCardProps) {
 
     useEffect(() => {
         sharedAngle.value = 0;
-        sharedAngle.value = Animated.withTiming(180, { duration: 500 });
+        sharedAngle.value = withTiming(180, { duration: 500 });
     }, [reanimationKey]);
 
     return (
@@ -65,4 +65,4 @@ export default function FlipCard(props: FlipCardProps) {
             </Animated.View>
         </View>
     );
-};
+};

package/src/hooks/useHeight.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import { ViewProps } from 'react-native';
-import Animated from 'react-native-reanimated';
+import { useWorkletCallback } from 'react-native-reanimated';
 
 type OnLayoutCallback = ViewProps['onLayout'];
 
 export default function useHeight(initialHeight = 0): [number, OnLayoutCallback] {
     const [height, setHeight] = React.useState<number>(initialHeight);
 
-    const onLayout = Animated.useWorkletCallback((e) => {
+    const onLayout = useWorkletCallback((e) => {
         setHeight(e.nativeEvent.layout.height);
     }, []);
 

package/src/hooks/useUnstableCollapsibleAppBar.ts

@@ -1,6 +1,13 @@
 import React, { useRef } from 'react';
 import { Falsy, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';
-import Animated from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
+import {
+    useAnimatedScrollHandler,
+    useAnimatedStyle,
+    useDerivedValue,
+    useSharedValue,
+    withTiming,
+} from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import useAppbarStyles from './useAppbarStyles';
 import useElevationStyle from './useElevationStyle';
@@ -27,7 +34,7 @@ export interface Options {
 
 export interface CollapsibleAppBar {
     appBarStyle: ViewStyleProp;
-    vectorY: Animated.SharedValue<number>;
+    vectorY: SharedValue<number>;
     onAppBarLayout: OnLayoutCallback;
     onCollapsibleToolbarLayout: OnLayoutCallback;
     onScroll: OnScroll;
@@ -68,17 +75,17 @@ export default function useUnstableCollapsibleAppBar(userOptions: Options = defa
     const appBarMaxHeight = useLargerValueOfLastTwoValues(appBarHeight);
     const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();
 
-    const maxTranslateY = Animated.useDerivedValue(() => -collapsibleToolbarHeight);
+    const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight);
 
-    const translateY = Animated.useSharedValue<number>(0);
-    const lastTranslateY = Animated.useSharedValue<number>(0);
-    const lastOffsetY = Animated.useSharedValue<number>(0);
-    const prevOffsetY = Animated.useSharedValue<number>(0);
-    const overlapped = Animated.useSharedValue<boolean>(false);
-    const vectorY = Animated.useSharedValue<number>(0);
+    const translateY = useSharedValue<number>(0);
+    const lastTranslateY = useSharedValue<number>(0);
+    const lastOffsetY = useSharedValue<number>(0);
+    const prevOffsetY = useSharedValue<number>(0);
+    const overlapped = useSharedValue<boolean>(false);
+    const vectorY = useSharedValue<number>(0);
 
     const elevationStyle = useElevationStyle(4);
-    const animatedStyle = Animated.useAnimatedStyle(() => {
+    const animatedStyle = useAnimatedStyle(() => {
         return Platform.OS === 'web' ? ({
             transform: [{ translateY: translateY.value }],
             boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,
@@ -99,7 +106,7 @@ export default function useUnstableCollapsibleAppBar(userOptions: Options = defa
         const prevIndex = indexRef.current;
         if (prevIndex === nextIndex) {
             if (shouldTranslateYReset) {
-                translateY.value = Animated.withTiming(0, {
+                translateY.value = withTiming(0, {
                     duration: ANIMATION_DURATION_MILLIS,
                 });
 
@@ -123,7 +130,7 @@ export default function useUnstableCollapsibleAppBar(userOptions: Options = defa
 
         // If next ScrollView's offset is too short, expand app bar.
         if (translateY.value < 0 && savedOffsetY < appBarHeight) {
-            translateY.value = Animated.withTiming(0, {
+            translateY.value = withTiming(0, {
                 duration: ANIMATION_DURATION_MILLIS,
             });
 
@@ -131,7 +138,7 @@ export default function useUnstableCollapsibleAppBar(userOptions: Options = defa
         }
     };
 
-    const scrollHandler = Animated.useAnimatedScrollHandler({
+    const scrollHandler = useAnimatedScrollHandler({
         onBeginDrag: () => {
             lastTranslateY.value = translateY.value;
         },
@@ -157,13 +164,13 @@ export default function useUnstableCollapsibleAppBar(userOptions: Options = defa
             } else {
                 if (offsetY > -maxTy) {
                     if (ty === 0) {
-                        translateY.value = Animated.withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {
+                        translateY.value = withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {
                             duration: ANIMATION_DURATION_MILLIS,
                         });
                     }
                 } else {
                     if (ty === maxTy) {
-                        translateY.value = Animated.withTiming(0, {
+                        translateY.value = withTiming(0, {
                             duration: ANIMATION_DURATION_MILLIS,
                         });
                     }
@@ -196,7 +203,7 @@ export default function useUnstableCollapsibleAppBar(userOptions: Options = defa
 
             overlapped.value = offsetY + nextTranslateY > 0;
 
-            translateY.value = Animated.withTiming(nextTranslateY, {
+            translateY.value = withTiming(nextTranslateY, {
                 duration: ANIMATION_DURATION_MILLIS,
             });
         },

package/src/hooks/useUnstableToggleDisplayStyle.ts

@@ -1,13 +1,14 @@
-import Animated from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
+import { useAnimatedReaction, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
 
 export default function useAnimatedDisplayStyle(
-    vectorY: Animated.SharedValue<number>,
+    vectorY: SharedValue<number>,
     threshold: number = 200,
     defaultDisplay: 'flex' | 'none' = 'flex',
 ) {
-    const display = Animated.useSharedValue(defaultDisplay);
+    const display = useSharedValue(defaultDisplay);
 
-    Animated.useAnimatedReaction(
+    useAnimatedReaction(
         () => vectorY.value,
         (vy) => {
             if (vy >= threshold) {
@@ -18,7 +19,7 @@ export default function useAnimatedDisplayStyle(
         },
     );
 
-    return Animated.useAnimatedStyle(() => ({
+    return useAnimatedStyle(() => ({
         display: display.value,
     }));
 };