@fountain-ui/core 2.0.0-beta.10 → 2.0.0-beta.13

package/build/module/hooks/useCollapsibleAppBar.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useRef } from 'react';
 import { Keyboard, Platform } from 'react-native';
 import { runOnJS, useAnimatedScrollHandler, useAnimatedStyle, useDerivedValue, useSharedValue, withTiming } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -8,7 +8,9 @@ import useAppbarStyles from './useAppbarStyles';
 const defaultOptions = {
   keyboardDismissMode: 'none'
 };
-const ANIMATION_DURATION_MILLIS = 100;
+const ANIMATION_CONFIG = {
+  duration: 100
+};
 const SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';
 export default function useCollapsibleAppBar() {
   let userOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultOptions;
@@ -21,31 +23,49 @@ export default function useCollapsibleAppBar() {
   const safeAreaInsets = useSafeAreaInsets();
   const [appBarHeight, onAppBarLayout] = useHeight();
   const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();
-  const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight);
+  const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight, [collapsibleToolbarHeight]);
   const translateY = useSharedValue(0);
   const lastTranslateY = useSharedValue(0);
   const lastOffsetY = useSharedValue(0);
   const overlapped = useSharedValue(false);
   const elevationStyle = useElevationStyle(4);
   const animatedStyle = useAnimatedStyle(() => {
-    return Platform.OS === 'web' ? {
-      transform: [{
-        translateY: translateY.value
-      }],
-      boxShadow: overlapped.value ? elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.boxShadow : 0
-    } : {
-      transform: [{
-        translateY: translateY.value
-      }],
-      elevation: overlapped.value ? elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.elevation : 0,
-      shadowColor: elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowColor,
-      shadowOffset: elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowOffset,
-      shadowRadius: elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowRadius,
-      shadowOpacity: overlapped.value ? elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowOpacity : 0
-    };
-  });
-  const indexRef = React.useRef(0);
-  const offsetsRef = React.useRef([]);
+    const transform = [{
+      translateY: translateY.value
+    }];
+
+    if (Platform.OS === 'web') {
+      return {
+        transform,
+        boxShadow: overlapped.value ? elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.boxShadow : 0
+      };
+    }
+
+    if (Platform.OS === 'android') {
+      return {
+        transform,
+        elevation: overlapped.value ? elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.elevation : 0
+      };
+    }
+
+    if (Platform.OS === 'ios') {
+      return {
+        transform,
+        shadowColor: elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowColor,
+        shadowOffset: elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowOffset,
+        shadowRadius: elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowRadius,
+        shadowOpacity: overlapped.value ? elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowOpacity : 0
+      };
+    }
+
+    return {};
+  }, [
+    /**
+     * FIXME: Consider add `elevationStyle` to dependencies.
+     */
+  ]);
+  const indexRef = useRef(0);
+  const offsetsRef = useRef([]);
 
   const onScrollViewChanged = nextIndex => {
     const prevIndex = indexRef.current;
@@ -62,9 +82,7 @@ export default function useCollapsibleAppBar() {
     overlapped.value = savedOffsetY > 0; // If next ScrollView's offset is too short, expand app bar.
 
     if (translateY.value < 0 && savedOffsetY < appBarHeight) {
-      translateY.value = withTiming(0, {
-        duration: ANIMATION_DURATION_MILLIS
-      });
+      translateY.value = withTiming(0, ANIMATION_CONFIG);
     }
   };
 
@@ -91,15 +109,11 @@ export default function useCollapsibleAppBar() {
       } else {
         if (offsetY > -maxTy) {
           if (ty === 0) {
-            translateY.value = withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {
-              duration: ANIMATION_DURATION_MILLIS
-            });
+            translateY.value = withTiming(Math.min(Math.max(-offsetY, maxTy), 0), ANIMATION_CONFIG);
           }
         } else {
           if (ty === maxTy) {
-            translateY.value = withTiming(0, {
-              duration: ANIMATION_DURATION_MILLIS
-            });
+            translateY.value = withTiming(0, ANIMATION_CONFIG);
           }
         }
 
@@ -123,11 +137,9 @@ export default function useCollapsibleAppBar() {
       const threshold = maxTy * 0.5;
       const nextTranslateY = ty > threshold || offsetY < appBarHeight ? 0 : maxTy;
       overlapped.value = offsetY + nextTranslateY > 0;
-      translateY.value = withTiming(nextTranslateY, {
-        duration: ANIMATION_DURATION_MILLIS
-      });
+      translateY.value = withTiming(nextTranslateY, ANIMATION_CONFIG);
     }
-  });
+  }, [keyboardDismissMode]);
   const hasCollapsible = collapsibleToolbarHeight > 0;
   const appBarStyle = [animatedStyle, {
     paddingTop: safeAreaInsets.top

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

@@ -1 +1 @@
-{"version":3,"names":["React","Keyboard","Platform","runOnJS","useAnimatedScrollHandler","useAnimatedStyle","useDerivedValue","useSharedValue","withTiming","useSafeAreaInsets","useHeight","useElevationStyle","useAppbarStyles","defaultOptions","keyboardDismissMode","ANIMATION_DURATION_MILLIS","SUPPORTS_DRAG_DETECTION","OS","useCollapsibleAppBar","userOptions","styles","safeAreaInsets","appBarHeight","onAppBarLayout","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","translateY","lastTranslateY","lastOffsetY","overlapped","elevationStyle","animatedStyle","transform","value","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","useRef","offsetsRef","onScrollViewChanged","nextIndex","prevIndex","current","savedOffsetY","duration","scrollHandler","onBeginDrag","dismiss","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","ty","maxTy","dy","Math","min","max","onEndDrag","onMomentumEnd","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","floating","undefined","scrollContentInsets"],"sources":["useCollapsibleAppBar.ts"],"sourcesContent":["import React from 'react';\nimport { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport {\n    runOnJS,\n    useAnimatedScrollHandler,\n    useAnimatedStyle,\n    useDerivedValue,\n    useSharedValue,\n    withTiming,\n} from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { useHeight } from '../internal/hooks';\nimport useElevationStyle from './useElevationStyle';\nimport useAppbarStyles from './useAppbarStyles';\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    keyboardDismissMode?: 'none' | 'on-drag';\n}\n\nexport interface CollapsibleAppBar {\n    appBarStyle: ViewStyleProp;\n    onAppBarLayout: OnLayoutCallback;\n    onCollapsibleToolbarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    onScrollViewChanged: (index: number) => void;\n    scrollContentInsets: ContentInsets;\n}\n\nconst defaultOptions: Required<Options> = {\n    keyboardDismissMode: 'none',\n};\n\nconst ANIMATION_DURATION_MILLIS = 100;\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\n\nexport default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n    const { keyboardDismissMode }: 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 [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 overlapped = useSharedValue<boolean>(false);\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            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    };\n\n    const scrollHandler = useAnimatedScrollHandler({\n        onBeginDrag: () => {\n            if (keyboardDismissMode === 'on-drag') {\n                runOnJS(Keyboard.dismiss)();\n            }\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            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        onAppBarLayout,\n        onCollapsibleToolbarLayout,\n        onScroll: scrollHandler,\n        onScrollViewChanged,\n        scrollContentInsets: { top: hasCollapsible ? appBarHeight : 0 },\n    };\n};\n"],"mappings":"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"}
+{"version":3,"names":["useRef","Keyboard","Platform","runOnJS","useAnimatedScrollHandler","useAnimatedStyle","useDerivedValue","useSharedValue","withTiming","useSafeAreaInsets","useHeight","useElevationStyle","useAppbarStyles","defaultOptions","keyboardDismissMode","ANIMATION_CONFIG","duration","SUPPORTS_DRAG_DETECTION","OS","useCollapsibleAppBar","userOptions","styles","safeAreaInsets","appBarHeight","onAppBarLayout","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","translateY","lastTranslateY","lastOffsetY","overlapped","elevationStyle","animatedStyle","transform","value","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","offsetsRef","onScrollViewChanged","nextIndex","prevIndex","current","savedOffsetY","scrollHandler","onBeginDrag","dismiss","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","ty","maxTy","dy","Math","min","max","onEndDrag","onMomentumEnd","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","floating","undefined","scrollContentInsets"],"sources":["useCollapsibleAppBar.ts"],"sourcesContent":["import { useRef } from 'react';\nimport { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport {\n    runOnJS,\n    useAnimatedScrollHandler,\n    useAnimatedStyle,\n    useDerivedValue,\n    useSharedValue,\n    withTiming,\n} from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { useHeight } from '../internal/hooks';\nimport useElevationStyle from './useElevationStyle';\nimport useAppbarStyles from './useAppbarStyles';\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    keyboardDismissMode?: 'none' | 'on-drag';\n}\n\nexport interface CollapsibleAppBar {\n    appBarStyle: ViewStyleProp;\n    onAppBarLayout: OnLayoutCallback;\n    onCollapsibleToolbarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    onScrollViewChanged: (index: number) => void;\n    scrollContentInsets: ContentInsets;\n}\n\nconst defaultOptions: Required<Options> = {\n    keyboardDismissMode: 'none',\n};\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 100 };\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\n\nexport default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n    const { keyboardDismissMode }: 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 [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();\n\n    const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight, [collapsibleToolbarHeight]);\n\n    const translateY = useSharedValue<number>(0);\n    const lastTranslateY = useSharedValue<number>(0);\n    const lastOffsetY = useSharedValue<number>(0);\n    const overlapped = useSharedValue<boolean>(false);\n\n    const elevationStyle = useElevationStyle(4);\n    const animatedStyle = useAnimatedStyle(() => {\n        const transform = [{ translateY: translateY.value }];\n\n        if (Platform.OS === 'web') {\n            return {\n                transform,\n                boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,\n            };\n        }\n        if (Platform.OS === 'android') {\n            return {\n                transform,\n                elevation: overlapped.value ? elevationStyle?.elevation : 0,\n            };\n        }\n        if (Platform.OS === 'ios') {\n            return {\n                transform,\n                shadowColor: elevationStyle?.shadowColor,\n                shadowOffset: elevationStyle?.shadowOffset,\n                shadowRadius: elevationStyle?.shadowRadius,\n                shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,\n            };\n        }\n        return {};\n    }, [\n        /**\n         * FIXME: Consider add `elevationStyle` to dependencies.\n         */\n    ]);\n\n    const indexRef = useRef<number>(0);\n    const offsetsRef = useRef<Array<number>>([]);\n\n    const onScrollViewChanged = (nextIndex: number) => {\n        const prevIndex = indexRef.current;\n        if (prevIndex === nextIndex) {\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, ANIMATION_CONFIG);\n        }\n    };\n\n    const scrollHandler = useAnimatedScrollHandler({\n        onBeginDrag: () => {\n            if (keyboardDismissMode === 'on-drag') {\n                runOnJS(Keyboard.dismiss)();\n            }\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            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), ANIMATION_CONFIG);\n                    }\n                } else {\n                    if (ty === maxTy) {\n                        translateY.value = withTiming(0, ANIMATION_CONFIG);\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, ANIMATION_CONFIG);\n        },\n    }, [keyboardDismissMode]);\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        onAppBarLayout,\n        onCollapsibleToolbarLayout,\n        onScroll: scrollHandler,\n        onScrollViewChanged,\n        scrollContentInsets: { top: hasCollapsible ? appBarHeight : 0 },\n    };\n};\n"],"mappings":"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"}

package/build/module/hooks/useFadeInAppBar.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useMemo } from 'react';
 import { Keyboard, Platform } from 'react-native';
 import { runOnJS, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -30,7 +30,7 @@ export default function useFadeInAppBar() {
   const styles = useAppbarStyles();
   const safeAreaInsets = useSafeAreaInsets();
   const [appBarHeight, onAppBarLayout] = useHeight();
-  const [fromOffsetY, toOffsetY] = React.useMemo(() => {
+  const [fromOffsetY, toOffsetY] = useMemo(() => {
     const endY = typeof fadeInEndY === 'function' ? fadeInEndY(appBarHeight) : fadeInEndY;
     const beginY = typeof fadeInBeginY === 'function' ? fadeInBeginY(endY, appBarHeight) : fadeInBeginY;
     return [beginY, endY];
@@ -38,19 +38,40 @@ export default function useFadeInAppBar() {
   const dy = useSharedValue(0);
   const lastOffsetY = useSharedValue(0);
   const normalized = useSharedValue(0);
-  const backgroundColor = theme.palette.background.default;
-  const [r, g, b] = React.useMemo(() => rgb(backgroundColor), [backgroundColor]);
-  const animatedAppBarStyle = useAnimatedStyle(() => ({
-    backgroundColor: `rgba(${r}, ${g}, ${b}, ${normalized.value})`,
-    elevation: normalized.value >= 1 ? 6 : 0,
-    shadowColor: '#000',
-    shadowOffset,
-    shadowRadius: 4.65,
-    shadowOpacity: normalized.value >= 1 ? 0.25 : 0
-  }));
+  const originalBackgroundColor = theme.palette.background.default;
+  const rgbValues = useMemo(() => rgb(originalBackgroundColor), [originalBackgroundColor]);
+  const animatedAppBarStyle = useAnimatedStyle(() => {
+    const [r, g, b] = rgbValues;
+    const backgroundColor = `rgba(${r}, ${g}, ${b}, ${normalized.value})`;
+
+    if (Platform.OS === 'web') {
+      return {
+        backgroundColor
+      };
+    }
+
+    if (Platform.OS === 'android') {
+      return {
+        backgroundColor,
+        elevation: normalized.value >= 1 ? 6 : 0
+      };
+    }
+
+    if (Platform.OS === 'ios') {
+      return {
+        backgroundColor,
+        shadowColor: '#000',
+        shadowOffset,
+        shadowRadius: 4.65,
+        shadowOpacity: normalized.value >= 1 ? 0.25 : 0
+      };
+    }
+
+    return {};
+  }, [rgbValues]);
   const animatedTitleStyle = useAnimatedStyle(() => ({
     opacity: normalized.value
-  }));
+  }), []);
   const scrollHandler = useAnimatedScrollHandler({
     onBeginDrag: () => {
       if (keyboardDismissMode === 'on-drag') {
@@ -70,7 +91,7 @@ export default function useFadeInAppBar() {
     onMomentumEnd: event => {
       lastOffsetY.value = event.contentOffset.y;
     }
-  });
+  }, [keyboardDismissMode]);
   const appBarStyle = [animatedAppBarStyle, {
     paddingTop: safeAreaInsets.top
   }, floating ? styles.floating : undefined];

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

@@ -1 +1 @@
-{"version":3,"names":["React","Keyboard","Platform","runOnJS","useAnimatedScrollHandler","useAnimatedStyle","useSharedValue","useSafeAreaInsets","rgb","useHeight","useTheme","useAppbarStyles","defaultOptions","fadeInBeginY","endY","appBarHeight","fadeInEndY","floating","keyboardDismissMode","shadowOffset","OS","width","height","undefined","useFadeInAppBar","userOptions","theme","styles","safeAreaInsets","onAppBarLayout","fromOffsetY","toOffsetY","useMemo","beginY","dy","lastOffsetY","normalized","backgroundColor","palette","background","default","r","g","b","animatedAppBarStyle","value","elevation","shadowColor","shadowRadius","shadowOpacity","animatedTitleStyle","opacity","scrollHandler","onBeginDrag","dismiss","onScroll","event","offsetY","contentOffset","y","distance","Math","max","localOffsetY","min","onEndDrag","onMomentumEnd","appBarStyle","paddingTop","top","titleStyle"],"sources":["useFadeInAppBar.ts"],"sourcesContent":["import React from 'react';\nimport { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport type { SharedValue } from 'react-native-reanimated';\nimport { runOnJS, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { rgb } from '@fountain-ui/utils';\nimport { useHeight } from '../internal/hooks';\nimport { useTheme } from '../styles';\nimport useAppbarStyles from './useAppbarStyles';\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface Options {\n    fadeInBeginY?: number | ((endY: number, appBarHeight: number) => number);\n    fadeInEndY?: number | ((appBarHeight: number) => number);\n    floating?: boolean;\n    keyboardDismissMode?: 'none' | 'on-drag';\n}\n\nexport interface FadeInAppBar {\n    appBarStyle: ViewStyleProp;\n    titleStyle: ViewStyleProp;\n    onAppBarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    dy: SharedValue<number>;\n    normalized: SharedValue<number>;\n}\n\nconst defaultOptions: Required<Options> = {\n    fadeInBeginY: (endY, appBarHeight) => endY - appBarHeight,\n    fadeInEndY: (appBarHeight) => appBarHeight,\n    floating: true,\n    keyboardDismissMode: 'none',\n};\n\nconst shadowOffset = Platform.OS === 'ios' ? { width: 0, height: 3 } : undefined;\n\nexport default function useFadeInAppBar(userOptions: Options = defaultOptions): FadeInAppBar {\n    const {\n        fadeInBeginY,\n        fadeInEndY,\n        floating,\n        keyboardDismissMode,\n    }: Required<Options> = {\n        ...defaultOptions,\n        ...userOptions,\n    };\n\n    const theme = useTheme();\n\n    const styles = useAppbarStyles();\n\n    const safeAreaInsets = useSafeAreaInsets();\n\n    const [appBarHeight, onAppBarLayout] = useHeight();\n\n    const [fromOffsetY, toOffsetY] = React.useMemo(() => {\n        const endY = typeof fadeInEndY === 'function'\n            ? fadeInEndY(appBarHeight)\n            : fadeInEndY;\n\n        const beginY = typeof fadeInBeginY === 'function'\n            ? fadeInBeginY(endY, appBarHeight)\n            : fadeInBeginY;\n\n        return [beginY, endY];\n    }, [fadeInBeginY, fadeInBeginY, appBarHeight]);\n\n    const dy = useSharedValue<number>(0);\n    const lastOffsetY = useSharedValue<number>(0);\n    const normalized = useSharedValue<number>(0);\n\n    const backgroundColor = theme.palette.background.default;\n    const [r, g, b] = React.useMemo(() => rgb(backgroundColor), [backgroundColor]);\n\n    const animatedAppBarStyle = useAnimatedStyle(() => ({\n        backgroundColor: `rgba(${r}, ${g}, ${b}, ${normalized.value})`,\n        elevation: normalized.value >= 1 ? 6 : 0,\n        shadowColor: '#000',\n        shadowOffset,\n        shadowRadius: 4.65,\n        shadowOpacity: normalized.value >= 1 ? 0.25 : 0,\n    }));\n\n    const animatedTitleStyle = useAnimatedStyle(() => ({\n        opacity: normalized.value,\n    }));\n\n    const scrollHandler = useAnimatedScrollHandler({\n        onBeginDrag: () => {\n            if (keyboardDismissMode === 'on-drag') {\n                runOnJS(Keyboard.dismiss)();\n            }\n        },\n        onScroll: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            const distance = Math.max(toOffsetY - fromOffsetY, 1);\n            const localOffsetY = offsetY - fromOffsetY;\n\n            dy.value = offsetY - lastOffsetY.value;\n\n            normalized.value = Math.min(Math.max(localOffsetY / distance, 0), 1);\n        },\n        onEndDrag: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n        onMomentumEnd: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n    });\n\n    const appBarStyle = [\n        animatedAppBarStyle,\n        { paddingTop: safeAreaInsets.top },\n        floating ? styles.floating : undefined,\n    ];\n\n    return {\n        appBarStyle,\n        titleStyle: [animatedTitleStyle],\n        onAppBarLayout,\n        onScroll: scrollHandler,\n        dy,\n        normalized,\n    };\n};\n"],"mappings":"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"}
+{"version":3,"names":["useMemo","Keyboard","Platform","runOnJS","useAnimatedScrollHandler","useAnimatedStyle","useSharedValue","useSafeAreaInsets","rgb","useHeight","useTheme","useAppbarStyles","defaultOptions","fadeInBeginY","endY","appBarHeight","fadeInEndY","floating","keyboardDismissMode","shadowOffset","OS","width","height","undefined","useFadeInAppBar","userOptions","theme","styles","safeAreaInsets","onAppBarLayout","fromOffsetY","toOffsetY","beginY","dy","lastOffsetY","normalized","originalBackgroundColor","palette","background","default","rgbValues","animatedAppBarStyle","r","g","b","backgroundColor","value","elevation","shadowColor","shadowRadius","shadowOpacity","animatedTitleStyle","opacity","scrollHandler","onBeginDrag","dismiss","onScroll","event","offsetY","contentOffset","y","distance","Math","max","localOffsetY","min","onEndDrag","onMomentumEnd","appBarStyle","paddingTop","top","titleStyle"],"sources":["useFadeInAppBar.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport type { SharedValue } from 'react-native-reanimated';\nimport { runOnJS, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { rgb } from '@fountain-ui/utils';\nimport { useHeight } from '../internal/hooks';\nimport { useTheme } from '../styles';\nimport useAppbarStyles from './useAppbarStyles';\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface Options {\n    fadeInBeginY?: number | ((endY: number, appBarHeight: number) => number);\n    fadeInEndY?: number | ((appBarHeight: number) => number);\n    floating?: boolean;\n    keyboardDismissMode?: 'none' | 'on-drag';\n}\n\nexport interface FadeInAppBar {\n    appBarStyle: ViewStyleProp;\n    titleStyle: ViewStyleProp;\n    onAppBarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    dy: SharedValue<number>;\n    normalized: SharedValue<number>;\n}\n\nconst defaultOptions: Required<Options> = {\n    fadeInBeginY: (endY, appBarHeight) => endY - appBarHeight,\n    fadeInEndY: (appBarHeight) => appBarHeight,\n    floating: true,\n    keyboardDismissMode: 'none',\n};\n\nconst shadowOffset = Platform.OS === 'ios' ? { width: 0, height: 3 } : undefined;\n\nexport default function useFadeInAppBar(userOptions: Options = defaultOptions): FadeInAppBar {\n    const {\n        fadeInBeginY,\n        fadeInEndY,\n        floating,\n        keyboardDismissMode,\n    }: Required<Options> = {\n        ...defaultOptions,\n        ...userOptions,\n    };\n\n    const theme = useTheme();\n\n    const styles = useAppbarStyles();\n\n    const safeAreaInsets = useSafeAreaInsets();\n\n    const [appBarHeight, onAppBarLayout] = useHeight();\n\n    const [fromOffsetY, toOffsetY] = useMemo(() => {\n        const endY = typeof fadeInEndY === 'function'\n            ? fadeInEndY(appBarHeight)\n            : fadeInEndY;\n\n        const beginY = typeof fadeInBeginY === 'function'\n            ? fadeInBeginY(endY, appBarHeight)\n            : fadeInBeginY;\n\n        return [beginY, endY];\n    }, [fadeInBeginY, fadeInBeginY, appBarHeight]);\n\n    const dy = useSharedValue<number>(0);\n    const lastOffsetY = useSharedValue<number>(0);\n    const normalized = useSharedValue<number>(0);\n\n    const originalBackgroundColor = theme.palette.background.default;\n    const rgbValues = useMemo(() => rgb(originalBackgroundColor), [originalBackgroundColor]);\n\n    const animatedAppBarStyle = useAnimatedStyle(() => {\n        const [r, g, b] = rgbValues;\n        const backgroundColor = `rgba(${r}, ${g}, ${b}, ${normalized.value})`;\n\n        if (Platform.OS === 'web') {\n            return { backgroundColor };\n        }\n        if (Platform.OS === 'android') {\n            return {\n                backgroundColor,\n                elevation: normalized.value >= 1 ? 6 : 0,\n            };\n        }\n        if (Platform.OS === 'ios') {\n            return {\n                backgroundColor,\n                shadowColor: '#000',\n                shadowOffset,\n                shadowRadius: 4.65,\n                shadowOpacity: normalized.value >= 1 ? 0.25 : 0,\n            };\n        }\n        return {};\n    }, [rgbValues]);\n\n    const animatedTitleStyle = useAnimatedStyle(() => ({\n        opacity: normalized.value,\n    }), []);\n\n    const scrollHandler = useAnimatedScrollHandler({\n        onBeginDrag: () => {\n            if (keyboardDismissMode === 'on-drag') {\n                runOnJS(Keyboard.dismiss)();\n            }\n        },\n        onScroll: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            const distance = Math.max(toOffsetY - fromOffsetY, 1);\n            const localOffsetY = offsetY - fromOffsetY;\n\n            dy.value = offsetY - lastOffsetY.value;\n\n            normalized.value = Math.min(Math.max(localOffsetY / distance, 0), 1);\n        },\n        onEndDrag: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n        onMomentumEnd: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n    }, [keyboardDismissMode]);\n\n    const appBarStyle = [\n        animatedAppBarStyle,\n        { paddingTop: safeAreaInsets.top },\n        floating ? styles.floating : undefined,\n    ];\n\n    return {\n        appBarStyle,\n        titleStyle: [animatedTitleStyle],\n        onAppBarLayout,\n        onScroll: scrollHandler,\n        dy,\n        normalized,\n    };\n};\n"],"mappings":"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"}

package/build/module/hooks/useThrottle.js

@@ -1,11 +1,11 @@
-import React from 'react';
+import { useCallback, useRef } from 'react';
 export default function useThrottle(options) {
   const {
     periodMillis,
     callback
   } = options;
-  const lastExecMillisRef = React.useRef(0);
-  return React.useCallback(function () {
+  const lastExecMillisRef = useRef(0);
+  return useCallback(function () {
     const now = Date.now();
     const millisAfterExecuted = now - lastExecMillisRef.current;
     lastExecMillisRef.current = now;

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

@@ -1 +1 @@
-{"version":3,"names":["React","useThrottle","options","periodMillis","callback","lastExecMillisRef","useRef","useCallback","now","Date","millisAfterExecuted","current"],"sources":["useThrottle.ts"],"sourcesContent":["import React from 'react';\n\nexport interface ThrottleOptions {\n    periodMillis: number;\n    callback?: (args?: any) => void;\n}\n\nexport default function useThrottle(options: ThrottleOptions) {\n    const { periodMillis, callback } = options;\n\n    const lastExecMillisRef = React.useRef(0);\n\n    return React.useCallback((...args: any[]) => {\n        const now = Date.now();\n        const millisAfterExecuted = now - lastExecMillisRef.current;\n        lastExecMillisRef.current = now;\n\n        if (millisAfterExecuted > periodMillis || periodMillis <= 0) {\n            if (callback) {\n                callback(...args);\n            }\n        }\n    }, [callback, periodMillis]);\n}\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAOA,eAAe,SAASC,WAAT,CAAqBC,OAArB,EAA+C;EAC1D,MAAM;IAAEC,YAAF;IAAgBC;EAAhB,IAA6BF,OAAnC;EAEA,MAAMG,iBAAiB,GAAGL,KAAK,CAACM,MAAN,CAAa,CAAb,CAA1B;EAEA,OAAON,KAAK,CAACO,WAAN,CAAkB,YAAoB;IACzC,MAAMC,GAAG,GAAGC,IAAI,CAACD,GAAL,EAAZ;IACA,MAAME,mBAAmB,GAAGF,GAAG,GAAGH,iBAAiB,CAACM,OAApD;IACAN,iBAAiB,CAACM,OAAlB,GAA4BH,GAA5B;;IAEA,IAAIE,mBAAmB,GAAGP,YAAtB,IAAsCA,YAAY,IAAI,CAA1D,EAA6D;MACzD,IAAIC,QAAJ,EAAc;QACVA,QAAQ,CAAC,YAAD,CAAR;MACH;IACJ;EACJ,CAVM,EAUJ,CAACA,QAAD,EAAWD,YAAX,CAVI,CAAP;AAWH"}
+{"version":3,"names":["useCallback","useRef","useThrottle","options","periodMillis","callback","lastExecMillisRef","now","Date","millisAfterExecuted","current"],"sources":["useThrottle.ts"],"sourcesContent":["import { useCallback, useRef } from 'react';\n\nexport interface ThrottleOptions {\n    periodMillis: number;\n    callback?: (args?: any) => void;\n}\n\nexport default function useThrottle(options: ThrottleOptions) {\n    const { periodMillis, callback } = options;\n\n    const lastExecMillisRef = useRef(0);\n\n    return useCallback((...args: any[]) => {\n        const now = Date.now();\n        const millisAfterExecuted = now - lastExecMillisRef.current;\n        lastExecMillisRef.current = now;\n\n        if (millisAfterExecuted > periodMillis || periodMillis <= 0) {\n            if (callback) {\n                callback(...args);\n            }\n        }\n    }, [callback, periodMillis]);\n}\n"],"mappings":"AAAA,SAASA,WAAT,EAAsBC,MAAtB,QAAoC,OAApC;AAOA,eAAe,SAASC,WAAT,CAAqBC,OAArB,EAA+C;EAC1D,MAAM;IAAEC,YAAF;IAAgBC;EAAhB,IAA6BF,OAAnC;EAEA,MAAMG,iBAAiB,GAAGL,MAAM,CAAC,CAAD,CAAhC;EAEA,OAAOD,WAAW,CAAC,YAAoB;IACnC,MAAMO,GAAG,GAAGC,IAAI,CAACD,GAAL,EAAZ;IACA,MAAME,mBAAmB,GAAGF,GAAG,GAAGD,iBAAiB,CAACI,OAApD;IACAJ,iBAAiB,CAACI,OAAlB,GAA4BH,GAA5B;;IAEA,IAAIE,mBAAmB,GAAGL,YAAtB,IAAsCA,YAAY,IAAI,CAA1D,EAA6D;MACzD,IAAIC,QAAJ,EAAc;QACVA,QAAQ,CAAC,YAAD,CAAR;MACH;IACJ;EACJ,CAViB,EAUf,CAACA,QAAD,EAAWD,YAAX,CAVe,CAAlB;AAWH"}

package/build/module/internal/hooks/index.js

@@ -1,3 +1,2 @@
 export { default as useHeight } from './useHeight';
-export { default as useWidth } from './useWidth';
 //# sourceMappingURL=index.js.map

package/build/module/internal/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["default","useHeight","useWidth"],"sources":["index.ts"],"sourcesContent":["export { default as useHeight } from './useHeight';\nexport { default as useWidth } from './useWidth';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,SAApB,QAAqC,aAArC;AACA,SAASD,OAAO,IAAIE,QAApB,QAAoC,YAApC"}
+{"version":3,"names":["default","useHeight"],"sources":["index.ts"],"sourcesContent":["export { default as useHeight } from './useHeight';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,SAApB,QAAqC,aAArC"}

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

@@ -1,8 +1,8 @@
-import React from 'react';
+import { useState } from 'react';
 import { useWorkletCallback } from 'react-native-reanimated';
 export default function useHeight() {
   let initialHeight = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-  const [height, setHeight] = React.useState(initialHeight);
+  const [height, setHeight] = useState(initialHeight);
   const onLayout = useWorkletCallback(e => {
     setHeight(e.nativeEvent.layout.height);
   }, []);

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"names":["useState","useWorkletCallback","useHeight","initialHeight","height","setHeight","onLayout","e","nativeEvent","layout"],"sources":["useHeight.ts"],"sourcesContent":["import { useState } 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] = 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,SAASA,QAAT,QAAyB,OAAzB;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,QAAQ,CAASG,aAAT,CAApC;EAEA,MAAMG,QAAQ,GAAGL,kBAAkB,CAAEM,CAAD,IAAO;IACvCF,SAAS,CAACE,CAAC,CAACC,WAAF,CAAcC,MAAd,CAAqBL,MAAtB,CAAT;EACH,CAFkC,EAEhC,EAFgC,CAAnC;EAIA,OAAO,CAACA,MAAD,EAASE,QAAT,CAAP;AACH;AAAA"}

package/build/typescript/Tabs/useTabCoordinates.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import TabCoordinate from './TabCoordinate';
+export interface UseTabCoordinates {
+    coordinates: TabCoordinate[];
+    updateCoordinate: (index: number, x: number, width: number) => void;
+}
+export default function useTabCoordinates(tabElements: React.ReactNode): UseTabCoordinates;

package/build/typescript/Tabs/useTabsWidth.d.ts

@@ -0,0 +1,2 @@
+import { ViewProps } from 'react-native';
+export default function useTabsWidth(): [number, ViewProps['onLayout']];

package/build/typescript/animated/AnimatedPressable.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import Animated from 'react-native-reanimated';
-declare const _default: React.ComponentClass<Animated.AnimateProps<import("../Pressable").PressableProps>, any>;
+import { Animated } from 'react-native';
+declare const _default: Animated.AnimatedComponent<React.ComponentType<import("../Pressable").PressableProps>>;
 export default _default;

package/build/typescript/internal/hooks/index.d.ts

@@ -1,2 +1 @@
 export { default as useHeight } from './useHeight';
-export { default as useWidth } from './useWidth';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/core",
-  "version": "2.0.0-beta.10",
+  "version": "2.0.0-beta.13",
   "author": "Fountain-UI Team",
   "description": "React components that implement Tappytoon's Fountain Design.",
   "license": "MIT",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cd8db00a031d4e0debcdc860908c47c7cf709f6e"
+  "gitHead": "0ac49f4ca5f910fc8b5edad2593300d796b2d914"
 }

package/src/Accordion/Accordion.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import type { WithTimingConfig } from 'react-native-reanimated';
 import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import { ChevronDown as ChevronDownIcon } from '../internal/icons';
@@ -13,7 +14,7 @@ import AccordionProps from './AccordionProps';
 
 type AccordionStyles = NamedStylesStringUnion<'root'>;
 
-const ANIMATION_OPTION = { duration: 250 };
+const ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 250 };
 
 const useStyles: UseStyles<AccordionStyles> = function (): AccordionStyles {
     const theme = useTheme();
@@ -38,15 +39,16 @@ export default function Accordion(props: AccordionProps) {
     const styles = useStyles();
 
     const [isExpanded, setIsExpanded] = useState(false);
+
     const rotate = useSharedValue(0);
 
     const animatedChevronDownStyles = useAnimatedStyle(() => ({
         transform: [{ rotate: `${rotate.value}deg` }],
-    }));
+    }), []);
 
     const onPress = () => {
         setIsExpanded(prev => !prev);
-        rotate.value = withTiming(!isExpanded ? 180 : 0, ANIMATION_OPTION);
+        rotate.value = withTiming(!isExpanded ? 180 : 0, ANIMATION_CONFIG);
     };
 
     return (

package/src/ButtonBase/ButtonBase.tsx

@@ -1,11 +1,12 @@
-import React from 'react';
-import type { WithTimingConfig } from 'react-native-reanimated';
-import { useAnimatedStyle, useSharedValue, withDelay, withTiming } from 'react-native-reanimated';
+import React, { useCallback, useEffect, useRef } from 'react';
+import { Animated } from 'react-native';
 import { useThrottle } from '../hooks';
 import { AnimatedPressable } from '../animated';
-import { StyleSheet } from '../styles';
 import type ButtonBaseProps from './ButtonBaseProps';
-import useDisabledReaction from './useDisabledReaction';
+
+interface StartPressAnimation {
+    (pressIn: boolean, isHover: boolean): void;
+}
 
 export const ORIGINAL_OPACITY = 1;
 export const DISABLED_OPACITY = .3;
@@ -14,14 +15,23 @@ const ACTIVE_OPACITY = .65;
 const ORIGINAL_SCALE = 1;
 const MINIFIED_SCALE = .96;
 
-const animationTimingConfig: WithTimingConfig = { duration: 150 };
+// at "node_modules/react-native/Libraries/Pressability.js"
+// const DEFAULT_MIN_PRESS_DURATION = 130;
+const PRESS_IN_DELAY = 130;
+
+type TimingAnimationValue = Animated.Value | Animated.ValueXY;
+type TimingAnimationToValue = Animated.TimingAnimationConfig['toValue'];
 
-const styles = StyleSheet.create({
-    disabled: {
-        opacity: DISABLED_OPACITY,
-        transform: [{ scale: ORIGINAL_SCALE }],
-    },
-});
+const startTimingAnimationWithDefaults = (
+    value: TimingAnimationValue,
+    toValue: TimingAnimationToValue,
+) => {
+    Animated.timing(value, {
+        toValue,
+        duration: 150,
+        useNativeDriver: true,
+    }).start();
+};
 
 export default function ButtonBase(props: ButtonBaseProps) {
     const {
@@ -30,7 +40,7 @@ export default function ButtonBase(props: ButtonBaseProps) {
         disableThrottle = false,
         onPress,
         pressEffect = 'opacity',
-        style,
+        style: styleProp,
         throttleMillis = 650,
         ...otherProps
     } = props;
@@ -40,56 +50,68 @@ export default function ButtonBase(props: ButtonBaseProps) {
         callback: onPress,
     });
 
-    const opacity = useSharedValue(ORIGINAL_OPACITY);
-    const scale = useSharedValue(ORIGINAL_SCALE);
+    const opacity = useRef<Animated.Value>(new Animated.Value(ORIGINAL_OPACITY)).current;
+    const scale = useRef<Animated.Value>(new Animated.Value(ORIGINAL_SCALE)).current;
 
-    const animatedStyle = useAnimatedStyle(() => ({
-        opacity: opacity.value,
-        transform: [{ scale: scale.value }],
-    }));
+    useEffect(() => {
+        opacity.setValue(disabled ? DISABLED_OPACITY : ORIGINAL_OPACITY);
+    }, [disabled]);
 
-    useDisabledReaction(disabled, opacity);
+    const startScaleAnimation = useCallback<StartPressAnimation>((pressIn, isHover) => {
+        if (!isHover) {
+            startTimingAnimationWithDefaults(
+                scale,
+                pressIn ? MINIFIED_SCALE : ORIGINAL_SCALE,
+            );
+        }
+    }, []);
 
-    const startAnimation = (pressIn: boolean, isHovered: boolean = false) => {
-        if (pressEffect === 'none') {
-            return;
+    const startOpacityAnimation = useCallback<StartPressAnimation>((pressIn) => {
+        if (pressIn) {
+            opacity.setValue(ACTIVE_OPACITY);
+        } else {
+            startTimingAnimationWithDefaults(opacity, ORIGINAL_OPACITY);
         }
+    }, []);
 
-        if (pressEffect === 'opacity') {
-            if (pressIn) {
-                opacity.value = ACTIVE_OPACITY;
-            } else {
-                opacity.value = withTiming(ORIGINAL_OPACITY, animationTimingConfig);
-            }
-        } else if (!isHovered) {
-            if (pressIn) {
-                scale.value = withDelay(
-                    100,
-                    withTiming(MINIFIED_SCALE, animationTimingConfig),
-                );
-            } else {
-                scale.value = withTiming(ORIGINAL_SCALE, animationTimingConfig);
-            }
+    const startPressAnimation = useCallback<StartPressAnimation>((pressIn, isHover = false) => {
+        if (pressEffect === 'scale') {
+            startScaleAnimation(pressIn, isHover);
+        } else if (pressEffect === 'opacity') {
+            startOpacityAnimation(pressIn, isHover);
         }
+    }, [pressEffect]);
+
+    const handlePressIn = useCallback(() => {
+        startPressAnimation(true, false);
+    }, [startPressAnimation]);
+
+    const handlePressOut = useCallback(() => {
+        startPressAnimation(false, false);
+    }, [startPressAnimation]);
+
+    const animatedStyle = {
+        opacity,
+        transform: [{ scale }],
     };
 
     return (
         <AnimatedPressable
             disabled={disabled}
             onPress={handlePress}
-            onPressIn={() => startAnimation(true)}
-            onPressOut={() => startAnimation(false)}
+            onPressIn={handlePressIn}
+            onPressOut={handlePressOut}
             style={[
                 animatedStyle,
-                disabled ? styles.disabled : undefined,
-                style,
+                styleProp,
             ]}
+            unstable_pressDelay={PRESS_IN_DELAY}
             {...otherProps}
         >
             {typeof children !== 'function' ? (
                 ({ hovered }) => {
                     if (hovered !== undefined && !disabled) {
-                        startAnimation(hovered, true);
+                        startPressAnimation(hovered, true);
                     }
 
                     return children;