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

package/build/commonjs/Tabs/Tabs.js

@@ -5,24 +5,26 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Tabs;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _reactNative = require("react-native");
 
 var _reactNativeReanimated = require("react-native-reanimated");
 
-var _utils = require("@fountain-ui/utils");
-
 var _styles = require("../styles");
 
-var _hooks = require("../internal/hooks");
+var _TabIndicator = _interopRequireDefault(require("./TabIndicator"));
 
-var _TabCoordinate = require("./TabCoordinate");
+var _useTabsWidth = _interopRequireDefault(require("./useTabsWidth"));
 
-var _TabIndicator = _interopRequireDefault(require("./TabIndicator"));
+var _useTabCoordinates = _interopRequireDefault(require("./useTabCoordinates"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 const useStyles = function () {
@@ -41,6 +43,11 @@ const useStyles = function () {
   };
 };
 
+const ANIMATION_CONFIG = {
+  duration: 200,
+  easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.exp)
+};
+
 function Tabs(props) {
   const {
     children,
@@ -56,49 +63,43 @@ function Tabs(props) {
     ...otherProps
   } = props;
   const styles = useStyles();
-  const [containerWidth, handleLayout] = (0, _hooks.useWidth)();
-
-  const scrollViewRef = _react.default.useRef(null);
-
-  const tabCount = _react.default.Children.count(children);
-
-  const [coordinates, setCoordinates] = _react.default.useState(() => new Array(tabCount));
-
+  const [containerWidth, handleLayout] = (0, _useTabsWidth.default)();
+  const scrollViewRef = (0, _react.useRef)(null);
+  const {
+    coordinates,
+    updateCoordinate
+  } = (0, _useTabCoordinates.default)(children);
   const internalScrollValue = (0, _reactNativeReanimated.useSharedValue)(0);
-  const scrollValue = scrollValueProp || internalScrollValue;
-  const isReadyToRenderIndicator = (0, _utils.isEveryDefined)(coordinates);
-
-  _react.default.useEffect(() => {
+  const scrollValue = scrollValueProp ?? internalScrollValue;
+  const isReadyToRenderIndicator = coordinates.length > 0;
+  (0, _react.useEffect)(() => {
     const animateTab = index => {
-      internalScrollValue.value = (0, _reactNativeReanimated.withTiming)(index, {
-        duration: 200,
-        easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.exp)
-      });
+      scrollValue.value = (0, _reactNativeReanimated.withTiming)(index, ANIMATION_CONFIG);
     };
 
-    if (scrollValueProp === undefined) {
-      animateTab(indexProp);
+    animateTab(indexProp);
+  }, [indexProp, scrollValue]);
+  const scrollPosition = (0, _react.useMemo)(() => {
+    const coordinate = coordinates[indexProp - 1];
+
+    if (coordinate) {
+      const tabWidth = coordinate.x2 - coordinate.x1;
+      return Math.floor(coordinate.x1 + tabWidth / 2);
     }
-  }, [indexProp, scrollValueProp, internalScrollValue]);
-
-  _react.default.useEffect(() => {
-    const snapTab = index => {
-      const scrollView = scrollViewRef.current;
-      const coordinate = coordinates[index - 1] || _TabCoordinate.defaultCoordinate;
-
-      if (scrollView) {
-        const tabWidth = coordinate.x2 - coordinate.x1;
-        const x = coordinate.x1 + tabWidth / 2;
-        scrollView.scrollTo({
-          x,
-          y: 0,
-          animated: true
-        });
-      }
-    };
 
-    snapTab(indexProp);
-  }, [indexProp, containerWidth, coordinates]);
+    return 0;
+  }, [indexProp, coordinates]);
+  (0, _react.useEffect)(() => {
+    const scrollView = scrollViewRef.current;
+
+    if (scrollView) {
+      scrollView.scrollTo({
+        x: scrollPosition,
+        y: 0,
+        animated: true
+      });
+    }
+  }, [scrollPosition, containerWidth]);
 
   const tabElements = _react.default.Children.map(children, (child, index) => {
     const onLayout = event => {
@@ -106,10 +107,7 @@ function Tabs(props) {
         x,
         width
       } = event.nativeEvent.layout;
-      setCoordinates(prev => [...prev.slice(0, index), {
-        x1: x,
-        x2: x + width
-      }, ...prev.slice(index + 1)]);
+      updateCoordinate(index, x, width);
     };
 
     const onMouseDown = e => {
@@ -129,7 +127,7 @@ function Tabs(props) {
     const selected = index === indexProp;
     const enableIndicatorPlaceholder = disableIndicator ? false : isReadyToRenderIndicator ? false : selected; //@ts-ignore
 
-    return /*#__PURE__*/_react.default.cloneElement(child, {
+    return /*#__PURE__*/(0, _react.cloneElement)(child, {
       enableIndicator: enableIndicatorPlaceholder,
       onLayout,
       onPress,

package/build/commonjs/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"names":["useStyles","theme","useTheme","root","fixedRoot","flexDirection","fixedTab","flex","scrollableContainer","paddingHorizontal","spacing","Tabs","props","children","index","indexProp","disableIndicator","keyboardDismissMode","keyboardShouldPersistTaps","onChange","scrollable","scrollValue","scrollValueProp","style","variant","otherProps","styles","containerWidth","handleLayout","useWidth","scrollViewRef","React","useRef","tabCount","Children","count","coordinates","setCoordinates","useState","Array","internalScrollValue","useSharedValue","isReadyToRenderIndicator","isEveryDefined","useEffect","animateTab","value","withTiming","duration","easing","Easing","out","exp","undefined","snapTab","scrollView","current","coordinate","defaultCoordinate","tabWidth","x2","x1","x","scrollTo","y","animated","tabElements","map","child","onLayout","event","width","nativeEvent","layout","prev","slice","onMouseDown","e","preventDefault","onPress","selected","enableIndicatorPlaceholder","cloneElement","enableIndicator","indicator","css"],"sources":["Tabs.tsx"],"sourcesContent":["import React from 'react';\nimport { GestureResponderEvent, LayoutChangeEvent, ScrollView, View } from 'react-native';\nimport { Easing, useSharedValue, withTiming } from 'react-native-reanimated';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { isEveryDefined } from '@fountain-ui/utils';\nimport { css, useTheme } from '../styles';\nimport { useWidth } from '../internal/hooks';\nimport type TabsProps from './TabsProps';\nimport TabCoordinate, { defaultCoordinate } from './TabCoordinate';\nimport TabIndicator from './TabIndicator';\n\ntype TabsStyleKeys =\n    | 'root'\n    | 'fixedRoot'\n    | 'fixedTab'\n    | 'scrollableContainer';\n\ntype TabsStyles = NamedStylesStringUnion<TabsStyleKeys>;\n\nconst useStyles: UseStyles<TabsStyles> = function (): TabsStyles {\n    const theme = useTheme();\n\n    return {\n        root: {},\n        fixedRoot: {\n            flexDirection: 'row',\n        },\n        fixedTab: {\n            flex: 1,\n        },\n        scrollableContainer: {\n            paddingHorizontal: theme.spacing(1),\n        },\n    };\n};\n\nexport default function Tabs(props: TabsProps) {\n    const {\n        children,\n        index: indexProp,\n        disableIndicator = false,\n        keyboardDismissMode = 'none',\n        keyboardShouldPersistTaps = 'never',\n        onChange,\n        scrollable = false,\n        scrollValue: scrollValueProp,\n        style,\n        variant = 'primary',\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const [containerWidth, handleLayout] = useWidth();\n\n    const scrollViewRef = React.useRef<ScrollView | null>(null);\n\n    const tabCount = React.Children.count(children);\n    const [coordinates, setCoordinates] = React.useState<TabCoordinate[]>(() => new Array(tabCount));\n\n    const internalScrollValue = useSharedValue(0);\n    const scrollValue = scrollValueProp || internalScrollValue;\n\n    const isReadyToRenderIndicator = isEveryDefined(coordinates);\n\n    React.useEffect(() => {\n        const animateTab = (index: number) => {\n            internalScrollValue.value = withTiming(index, {\n                duration: 200,\n                easing: Easing.out(Easing.exp),\n            });\n        };\n\n        if (scrollValueProp === undefined) {\n            animateTab(indexProp);\n        }\n    }, [indexProp, scrollValueProp, internalScrollValue]);\n\n    React.useEffect(() => {\n        const snapTab = (index: number) => {\n            const scrollView = scrollViewRef.current;\n            const coordinate: TabCoordinate = coordinates[index - 1] || defaultCoordinate;\n\n            if (scrollView) {\n                const tabWidth = coordinate.x2 - coordinate.x1;\n                const x = coordinate.x1 + tabWidth / 2;\n\n                scrollView.scrollTo({ x, y: 0, animated: true });\n            }\n        };\n\n        snapTab(indexProp);\n    }, [indexProp, containerWidth, coordinates]);\n\n    const tabElements = React.Children.map(children, (child, index) => {\n        const onLayout = (event: LayoutChangeEvent) => {\n            const { x, width } = event.nativeEvent.layout;\n\n            setCoordinates(prev => ([\n                ...prev.slice(0, index),\n                { x1: x, x2: x + width },\n                ...prev.slice(index + 1),\n            ]));\n        };\n\n        const onMouseDown = (e: GestureResponderEvent) => {\n            if (keyboardShouldPersistTaps === 'always') {\n                e.preventDefault();\n            }\n        };\n\n        const onPress = () => {\n            onChange?.(index);\n            // @ts-ignore\n            child.props.onPress?.();\n        };\n\n        const selected = index === indexProp;\n        const enableIndicatorPlaceholder = disableIndicator\n            ? false\n            : (isReadyToRenderIndicator ? false : selected);\n\n        //@ts-ignore\n        return React.cloneElement(child, {\n            enableIndicator: enableIndicatorPlaceholder,\n            onLayout,\n            onPress,\n            onMouseDown,\n            variant,\n            selected,\n            style: scrollable ? undefined : styles.fixedTab,\n        });\n    });\n\n    const indicator = (\n        <TabIndicator\n            coordinates={coordinates}\n            disabled={disableIndicator}\n            scrollable={scrollable}\n            scrollValue={scrollValue}\n        />\n    );\n\n    return (\n        <View\n            onLayout={handleLayout}\n            style={css([\n                styles.root,\n                scrollable ? undefined : styles.fixedRoot,\n                style,\n            ])}\n            {...otherProps}\n        >\n            {scrollable ? (\n                <ScrollView\n                    automaticallyAdjustContentInsets={false}\n                    bounces={false}\n                    contentContainerStyle={styles.scrollableContainer}\n                    directionalLockEnabled={true}\n                    horizontal={true}\n                    ref={scrollViewRef}\n                    scrollsToTop={false}\n                    showsHorizontalScrollIndicator={false}\n                    showsVerticalScrollIndicator={false}\n                    keyboardDismissMode={keyboardDismissMode}\n                    keyboardShouldPersistTaps={keyboardShouldPersistTaps}\n                >\n                    {tabElements}\n                    {indicator}\n                </ScrollView>\n            ) : (\n                <>\n                    {tabElements}\n                    {indicator}\n                </>\n            )}\n        </View>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["useStyles","theme","useTheme","root","fixedRoot","flexDirection","fixedTab","flex","scrollableContainer","paddingHorizontal","spacing","ANIMATION_CONFIG","duration","easing","Easing","out","exp","Tabs","props","children","index","indexProp","disableIndicator","keyboardDismissMode","keyboardShouldPersistTaps","onChange","scrollable","scrollValue","scrollValueProp","style","variant","otherProps","styles","containerWidth","handleLayout","useTabsWidth","scrollViewRef","useRef","coordinates","updateCoordinate","useTabCoordinates","internalScrollValue","useSharedValue","isReadyToRenderIndicator","length","useEffect","animateTab","value","withTiming","scrollPosition","useMemo","coordinate","tabWidth","x2","x1","Math","floor","scrollView","current","scrollTo","x","y","animated","tabElements","React","Children","map","child","onLayout","event","width","nativeEvent","layout","onMouseDown","e","preventDefault","onPress","selected","enableIndicatorPlaceholder","cloneElement","enableIndicator","undefined","indicator","css"],"sources":["Tabs.tsx"],"sourcesContent":["import React, { cloneElement, useEffect, useMemo, useRef } from 'react';\nimport { GestureResponderEvent, LayoutChangeEvent, ScrollView, View } from 'react-native';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport { Easing, useSharedValue, withTiming } from 'react-native-reanimated';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport type TabsProps from './TabsProps';\nimport TabIndicator from './TabIndicator';\nimport useTabsWidth from './useTabsWidth';\nimport useTabCoordinates from './useTabCoordinates';\n\ntype TabsStyleKeys =\n    | 'root'\n    | 'fixedRoot'\n    | 'fixedTab'\n    | 'scrollableContainer';\n\ntype TabsStyles = NamedStylesStringUnion<TabsStyleKeys>;\n\nconst useStyles: UseStyles<TabsStyles> = function (): TabsStyles {\n    const theme = useTheme();\n\n    return {\n        root: {},\n        fixedRoot: {\n            flexDirection: 'row',\n        },\n        fixedTab: {\n            flex: 1,\n        },\n        scrollableContainer: {\n            paddingHorizontal: theme.spacing(1),\n        },\n    };\n};\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = {\n    duration: 200,\n    easing: Easing.out(Easing.exp),\n};\n\nexport default function Tabs(props: TabsProps) {\n    const {\n        children,\n        index: indexProp,\n        disableIndicator = false,\n        keyboardDismissMode = 'none',\n        keyboardShouldPersistTaps = 'never',\n        onChange,\n        scrollable = false,\n        scrollValue: scrollValueProp,\n        style,\n        variant = 'primary',\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const [containerWidth, handleLayout] = useTabsWidth();\n\n    const scrollViewRef = useRef<ScrollView | null>(null);\n\n    const { coordinates, updateCoordinate } = useTabCoordinates(children);\n\n    const internalScrollValue = useSharedValue(0);\n    const scrollValue = scrollValueProp ?? internalScrollValue;\n\n    const isReadyToRenderIndicator = coordinates.length > 0;\n\n    useEffect(() => {\n        const animateTab = (index: number) => {\n            scrollValue.value = withTiming(index, ANIMATION_CONFIG);\n        };\n\n        animateTab(indexProp);\n    }, [indexProp, scrollValue]);\n\n    const scrollPosition = useMemo<number>(() => {\n        const coordinate = coordinates[indexProp - 1];\n\n        if (coordinate) {\n            const tabWidth = coordinate.x2 - coordinate.x1;\n            return Math.floor(coordinate.x1 + tabWidth / 2);\n        }\n\n        return 0;\n    }, [indexProp, coordinates]);\n\n    useEffect(() => {\n        const scrollView = scrollViewRef.current;\n\n        if (scrollView) {\n            scrollView.scrollTo({ x: scrollPosition, y: 0, animated: true });\n        }\n    }, [scrollPosition, containerWidth]);\n\n    const tabElements = React.Children.map(children, (child, index) => {\n        const onLayout = (event: LayoutChangeEvent) => {\n            const { x, width } = event.nativeEvent.layout;\n\n            updateCoordinate(index, x, width);\n        };\n\n        const onMouseDown = (e: GestureResponderEvent) => {\n            if (keyboardShouldPersistTaps === 'always') {\n                e.preventDefault();\n            }\n        };\n\n        const onPress = () => {\n            onChange?.(index);\n            // @ts-ignore\n            child.props.onPress?.();\n        };\n\n        const selected = index === indexProp;\n        const enableIndicatorPlaceholder = disableIndicator\n            ? false\n            : (isReadyToRenderIndicator ? false : selected);\n\n        //@ts-ignore\n        return cloneElement(child, {\n            enableIndicator: enableIndicatorPlaceholder,\n            onLayout,\n            onPress,\n            onMouseDown,\n            variant,\n            selected,\n            style: scrollable ? undefined : styles.fixedTab,\n        });\n    });\n\n    const indicator = (\n        <TabIndicator\n            coordinates={coordinates}\n            disabled={disableIndicator}\n            scrollable={scrollable}\n            scrollValue={scrollValue}\n        />\n    );\n\n    return (\n        <View\n            onLayout={handleLayout}\n            style={css([\n                styles.root,\n                scrollable ? undefined : styles.fixedRoot,\n                style,\n            ])}\n            {...otherProps}\n        >\n            {scrollable ? (\n                <ScrollView\n                    automaticallyAdjustContentInsets={false}\n                    bounces={false}\n                    contentContainerStyle={styles.scrollableContainer}\n                    directionalLockEnabled={true}\n                    horizontal={true}\n                    ref={scrollViewRef}\n                    scrollsToTop={false}\n                    showsHorizontalScrollIndicator={false}\n                    showsVerticalScrollIndicator={false}\n                    keyboardDismissMode={keyboardDismissMode}\n                    keyboardShouldPersistTaps={keyboardShouldPersistTaps}\n                >\n                    {tabElements}\n                    {indicator}\n                </ScrollView>\n            ) : (\n                <React.Fragment>\n                    {tabElements}\n                    {indicator}\n                </React.Fragment>\n            )}\n        </View>\n    );\n};\n"],"mappings":"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"}

package/build/commonjs/Tabs/useTabCoordinates.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useTabCoordinates;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _utils = require("@fountain-ui/utils");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function useTabCoordinates(tabElements) {
+  const incompleteCoordinatesRef = (0, _react.useRef)([]);
+  const [completeCoordinates, setCompleteCoordinates] = (0, _react.useState)([]);
+
+  const isAllCoordinatesDefined = coordinates => {
+    const numberOfTab = _react.default.Children.count(tabElements);
+
+    const numberOfCoordinates = coordinates.length;
+    const everyCoordinatesDefined = (0, _utils.isEveryDefined)(coordinates);
+    return numberOfTab === numberOfCoordinates && everyCoordinatesDefined;
+  };
+
+  const updateCoordinate = (index, x, width) => {
+    incompleteCoordinatesRef.current[index] = {
+      x1: x,
+      x2: x + width
+    };
+
+    if (isAllCoordinatesDefined(incompleteCoordinatesRef.current)) {
+      setCompleteCoordinates(incompleteCoordinatesRef.current);
+    }
+  };
+
+  return {
+    coordinates: completeCoordinates,
+    updateCoordinate
+  };
+}
+//# sourceMappingURL=useTabCoordinates.js.map

package/build/commonjs/Tabs/useTabCoordinates.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useTabCoordinates","tabElements","incompleteCoordinatesRef","useRef","completeCoordinates","setCompleteCoordinates","useState","isAllCoordinatesDefined","coordinates","numberOfTab","React","Children","count","numberOfCoordinates","length","everyCoordinatesDefined","isEveryDefined","updateCoordinate","index","x","width","current","x1","x2"],"sources":["useTabCoordinates.ts"],"sourcesContent":["import React, { useRef, useState } from 'react';\nimport { isEveryDefined } from '@fountain-ui/utils';\nimport TabCoordinate from './TabCoordinate';\n\nexport interface UseTabCoordinates {\n    coordinates: TabCoordinate[];\n    updateCoordinate: (index: number, x: number, width: number) => void;\n}\n\nexport default function useTabCoordinates(tabElements: React.ReactNode): UseTabCoordinates {\n    const incompleteCoordinatesRef = useRef<TabCoordinate[]>([]);\n\n    const [completeCoordinates, setCompleteCoordinates] = useState<TabCoordinate[]>([]);\n\n    const isAllCoordinatesDefined = (coordinates: TabCoordinate[]): boolean => {\n        const numberOfTab = React.Children.count(tabElements);\n        const numberOfCoordinates = coordinates.length;\n\n        const everyCoordinatesDefined = isEveryDefined(coordinates);\n\n        return numberOfTab === numberOfCoordinates && everyCoordinatesDefined;\n    };\n\n    const updateCoordinate = (index: number, x: number, width: number) => {\n        incompleteCoordinatesRef.current[index] = { x1: x, x2: x + width };\n\n        if (isAllCoordinatesDefined(incompleteCoordinatesRef.current)) {\n            setCompleteCoordinates(incompleteCoordinatesRef.current);\n        }\n    };\n\n    return {\n        coordinates: completeCoordinates,\n        updateCoordinate,\n    };\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;;;;;AAQe,SAASA,iBAAT,CAA2BC,WAA3B,EAA4E;EACvF,MAAMC,wBAAwB,GAAG,IAAAC,aAAA,EAAwB,EAAxB,CAAjC;EAEA,MAAM,CAACC,mBAAD,EAAsBC,sBAAtB,IAAgD,IAAAC,eAAA,EAA0B,EAA1B,CAAtD;;EAEA,MAAMC,uBAAuB,GAAIC,WAAD,IAA2C;IACvE,MAAMC,WAAW,GAAGC,cAAA,CAAMC,QAAN,CAAeC,KAAf,CAAqBX,WAArB,CAApB;;IACA,MAAMY,mBAAmB,GAAGL,WAAW,CAACM,MAAxC;IAEA,MAAMC,uBAAuB,GAAG,IAAAC,qBAAA,EAAeR,WAAf,CAAhC;IAEA,OAAOC,WAAW,KAAKI,mBAAhB,IAAuCE,uBAA9C;EACH,CAPD;;EASA,MAAME,gBAAgB,GAAG,CAACC,KAAD,EAAgBC,CAAhB,EAA2BC,KAA3B,KAA6C;IAClElB,wBAAwB,CAACmB,OAAzB,CAAiCH,KAAjC,IAA0C;MAAEI,EAAE,EAAEH,CAAN;MAASI,EAAE,EAAEJ,CAAC,GAAGC;IAAjB,CAA1C;;IAEA,IAAIb,uBAAuB,CAACL,wBAAwB,CAACmB,OAA1B,CAA3B,EAA+D;MAC3DhB,sBAAsB,CAACH,wBAAwB,CAACmB,OAA1B,CAAtB;IACH;EACJ,CAND;;EAQA,OAAO;IACHb,WAAW,EAAEJ,mBADV;IAEHa;EAFG,CAAP;AAIH"}

package/build/commonjs/Tabs/useTabsWidth.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useTabsWidth;
+
+var _react = require("react");
+
+var _reactNative = require("react-native");
+
+const assumeInitialWidth = () => _reactNative.Dimensions.get('window').width;
+
+const isIntegerPartEquals = (a, b) => Math.round(a) === Math.round(b);
+
+const isIntegerPartDifferent = (a, b) => !isIntegerPartEquals(a, b);
+
+function useTabsWidth() {
+  const [width, setWidth] = (0, _react.useState)(assumeInitialWidth);
+  const onLayout = (0, _react.useCallback)(e => {
+    const newWidth = e.nativeEvent.layout.width;
+    setWidth(prevWidth => isIntegerPartDifferent(prevWidth, newWidth) ? newWidth : prevWidth);
+  }, []);
+  return [width, onLayout];
+}
+//# sourceMappingURL=useTabsWidth.js.map

package/build/commonjs/Tabs/useTabsWidth.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["assumeInitialWidth","Dimensions","get","width","isIntegerPartEquals","a","b","Math","round","isIntegerPartDifferent","useTabsWidth","setWidth","useState","onLayout","useCallback","e","newWidth","nativeEvent","layout","prevWidth"],"sources":["useTabsWidth.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport { Dimensions, LayoutChangeEvent, ViewProps } from 'react-native';\n\nconst assumeInitialWidth = (): number => Dimensions.get('window').width;\n\nconst isIntegerPartEquals = (a: number, b: number) => Math.round(a) === Math.round(b);\n\nconst isIntegerPartDifferent = (a: number, b: number) => !isIntegerPartEquals(a, b);\n\nexport default function useTabsWidth(): [number, ViewProps['onLayout']] {\n    const [width, setWidth] = useState(assumeInitialWidth);\n\n    const onLayout = useCallback((e: LayoutChangeEvent) => {\n        const newWidth = e.nativeEvent.layout.width;\n\n        setWidth((prevWidth) => isIntegerPartDifferent(prevWidth, newWidth) ? newWidth : prevWidth);\n    }, []);\n\n    return [width, onLayout];\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA,MAAMA,kBAAkB,GAAG,MAAcC,uBAAA,CAAWC,GAAX,CAAe,QAAf,EAAyBC,KAAlE;;AAEA,MAAMC,mBAAmB,GAAG,CAACC,CAAD,EAAYC,CAAZ,KAA0BC,IAAI,CAACC,KAAL,CAAWH,CAAX,MAAkBE,IAAI,CAACC,KAAL,CAAWF,CAAX,CAAxE;;AAEA,MAAMG,sBAAsB,GAAG,CAACJ,CAAD,EAAYC,CAAZ,KAA0B,CAACF,mBAAmB,CAACC,CAAD,EAAIC,CAAJ,CAA7E;;AAEe,SAASI,YAAT,GAAyD;EACpE,MAAM,CAACP,KAAD,EAAQQ,QAAR,IAAoB,IAAAC,eAAA,EAASZ,kBAAT,CAA1B;EAEA,MAAMa,QAAQ,GAAG,IAAAC,kBAAA,EAAaC,CAAD,IAA0B;IACnD,MAAMC,QAAQ,GAAGD,CAAC,CAACE,WAAF,CAAcC,MAAd,CAAqBf,KAAtC;IAEAQ,QAAQ,CAAEQ,SAAD,IAAeV,sBAAsB,CAACU,SAAD,EAAYH,QAAZ,CAAtB,GAA8CA,QAA9C,GAAyDG,SAAzE,CAAR;EACH,CAJgB,EAId,EAJc,CAAjB;EAMA,OAAO,CAAChB,KAAD,EAAQU,QAAR,CAAP;AACH"}

package/build/commonjs/Tooltip/Tooltip.js

@@ -5,36 +5,36 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Tooltip;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _reactNative = require("react-native");
 
-var _reactNativeGestureHandler = require("react-native-gesture-handler");
-
 var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
 
 var _utils = require("@fountain-ui/utils");
 
+var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
+
 var _styles = require("../styles");
 
 var _icons = require("../internal/icons");
 
 var _UpArrow = _interopRequireDefault(require("./UpArrow"));
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const defaultOpacity = 0.8;
+const DEFAULT_OPACITY = 0.8;
 const initialLayout = {
   width: 0,
   height: 0,
   x: 0,
   y: 0
 };
-const animationTimingConfig = {
+const ANIMATION_CONFIG = {
   duration: 150
 };
 
@@ -52,15 +52,13 @@ function Tooltip(props) {
     visible = false
   } = props;
   const theme = (0, _styles.useTheme)();
-
-  const [layout, setLayout] = _react.default.useState(initialLayout);
-
+  const [layout, setLayout] = (0, _react.useState)(initialLayout);
   const scale = (0, _reactNativeReanimated.useSharedValue)(0);
-  const tooltipAnimatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
+  const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
     transform: [{
       scale: scale.value
     }]
-  }));
+  }), []);
   const [r, g, b] = (0, _utils.rgb)(theme.palette.primary.main);
   const totalVerticalOffset = -(layout.height + verticalOffset);
   const tooltipLayoutStyle = {
@@ -74,15 +72,13 @@ function Tooltip(props) {
     height: visible ? undefined : 0,
     overflow: visible ? undefined : 'hidden'
   };
-
-  _react.default.useEffect(() => {
-    const nextValue = visible ? 1 : 0;
-    scale.value = (0, _reactNativeReanimated.withTiming)(nextValue, animationTimingConfig);
+  (0, _react.useEffect)(() => {
+    const nextScaleValue = visible ? 1 : 0;
+    scale.value = (0, _reactNativeReanimated.withTiming)(nextScaleValue, ANIMATION_CONFIG);
   }, [visible]);
-
   const touchableStyle = {
     alignItems: 'center',
-    backgroundColor: `rgba(${r}, ${g}, ${b}, ${defaultOpacity})`,
+    backgroundColor: `rgba(${r}, ${g}, ${b}, ${DEFAULT_OPACITY})`,
     borderRadius: theme.shape.roundness,
     flexDirection: 'row',
     padding: theme.spacing(2)
@@ -95,8 +91,8 @@ function Tooltip(props) {
     marginRight: theme.spacing(2)
   }]);
 
-  const buttonElem = /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.TouchableWithoutFeedback, {
-    disallowInterruption: true,
+  const buttonElem = /*#__PURE__*/_react.default.createElement(_ButtonBase.default, {
+    pressEffect: 'none',
     onPress: onClose
   }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: (0, _styles.css)(touchableStyle)
@@ -114,14 +110,14 @@ function Tooltip(props) {
   const arrowElem = /*#__PURE__*/_react.default.createElement(_UpArrow.default, {
     upsideDown: placement === 'top',
     fill: theme.palette.primary.main,
-    opacity: defaultOpacity
+    opacity: DEFAULT_OPACITY
   });
 
   return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: style
   }, children, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
     onLayout: event => setLayout(event.nativeEvent.layout),
-    style: [tooltipAnimatedStyle, tooltipLayoutStyle, tooltipStyle]
+    style: [animatedStyle, tooltipLayoutStyle, tooltipStyle]
   }, placement === 'top' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, buttonElem, arrowElem) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, arrowElem, buttonElem)));
 }
 

package/build/commonjs/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"names":["defaultOpacity","initialLayout","width","height","x","y","animationTimingConfig","duration","Tooltip","props","children","left","onClose","placement","right","style","title","tooltipStyle","verticalOffset","visible","theme","useTheme","layout","setLayout","React","useState","scale","useSharedValue","tooltipAnimatedStyle","useAnimatedStyle","transform","value","r","g","b","rgb","palette","primary","main","totalVerticalOffset","tooltipLayoutStyle","alignItems","bottom","undefined","position","top","zIndex","tooltip","overflow","useEffect","nextValue","withTiming","touchableStyle","backgroundColor","borderRadius","shape","roundness","flexDirection","padding","spacing","fontStyle","createFontStyle","selector","typo","caption2","color","contrastTextColor","textStyle","css","marginRight","buttonElem","arrowElem","event","nativeEvent"],"sources":["Tooltip.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View, ViewProps } from 'react-native';\nimport { TouchableWithoutFeedback } from 'react-native-gesture-handler';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport { rgb } from '@fountain-ui/utils';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { Close as CloseIcon } from '../internal/icons';\nimport type TooltipProps from './TooltipProps';\nimport UpArrow from './UpArrow';\n\nconst defaultOpacity = 0.8;\nconst initialLayout = { width: 0, height: 0, x: 0, y: 0 };\n\nconst animationTimingConfig: WithTimingConfig = { duration: 150 };\n\nexport default function Tooltip(props: TooltipProps) {\n    const {\n        children,\n        left,\n        onClose,\n        placement = 'top',\n        right,\n        style,\n        title,\n        tooltipStyle,\n        verticalOffset = 4,\n        visible = false,\n    } = props;\n\n    const theme = useTheme();\n\n    const [layout, setLayout] = React.useState(initialLayout);\n\n    const scale = useSharedValue(0);\n\n    const tooltipAnimatedStyle = useAnimatedStyle(() => ({\n        transform: [{ scale: scale.value }],\n    }));\n\n    const [r, g, b] = rgb(theme.palette.primary.main);\n\n    const totalVerticalOffset = -(layout.height + verticalOffset);\n    const tooltipLayoutStyle: ViewProps['style'] = {\n        alignItems: 'center',\n        bottom: placement === 'bottom' ? totalVerticalOffset : undefined,\n        left,\n        position: 'absolute',\n        right,\n        top: placement === 'top' ? totalVerticalOffset : undefined,\n        zIndex: theme.zIndex.tooltip,\n        height: visible ? undefined : 0,\n        overflow: visible ? undefined : 'hidden',\n    };\n\n    React.useEffect(() => {\n        const nextValue = visible ? 1 : 0;\n\n        scale.value = withTiming(nextValue, animationTimingConfig);\n    }, [visible]);\n\n    const touchableStyle: ViewProps['style'] = {\n        alignItems: 'center',\n        backgroundColor: `rgba(${r}, ${g}, ${b}, ${defaultOpacity})`,\n        borderRadius: theme.shape.roundness,\n        flexDirection: 'row',\n        padding: theme.spacing(2),\n    };\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.caption2,\n        color: theme.palette.primary.contrastTextColor,\n    });\n\n    const textStyle = css([\n        fontStyle,\n        { marginRight: theme.spacing(2) },\n    ]);\n\n    const buttonElem = (\n        <TouchableWithoutFeedback\n            disallowInterruption={true}\n            onPress={onClose}\n        >\n            <View style={css(touchableStyle)}>\n                <Text\n                    children={title}\n                    // TODO: Should we provide text prop customization?\n                    numberOfLines={1}\n                    style={textStyle}\n                />\n                <CloseIcon\n                    fill={theme.palette.primary.contrastTextColor}\n                    width={20}\n                    height={20}\n                />\n            </View>\n        </TouchableWithoutFeedback>\n    );\n\n    const arrowElem = (\n        <UpArrow\n            upsideDown={placement === 'top'}\n            fill={theme.palette.primary.main}\n            opacity={defaultOpacity}\n        />\n    );\n\n    return (\n        <View style={style}>\n            {children}\n\n            <Animated.View\n                onLayout={(event) => setLayout(event.nativeEvent.layout)}\n                style={[\n                    tooltipAnimatedStyle,\n                    tooltipLayoutStyle,\n                    tooltipStyle,\n                ]}\n            >\n                {placement === 'top' ? (\n                    <React.Fragment>\n                        {buttonElem}\n                        {arrowElem}\n                    </React.Fragment>\n                ) : (\n                    <React.Fragment>\n                        {arrowElem}\n                        {buttonElem}\n                    </React.Fragment>\n                )}\n            </Animated.View>\n        </View>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["DEFAULT_OPACITY","initialLayout","width","height","x","y","ANIMATION_CONFIG","duration","Tooltip","props","children","left","onClose","placement","right","style","title","tooltipStyle","verticalOffset","visible","theme","useTheme","layout","setLayout","useState","scale","useSharedValue","animatedStyle","useAnimatedStyle","transform","value","r","g","b","rgb","palette","primary","main","totalVerticalOffset","tooltipLayoutStyle","alignItems","bottom","undefined","position","top","zIndex","tooltip","overflow","useEffect","nextScaleValue","withTiming","touchableStyle","backgroundColor","borderRadius","shape","roundness","flexDirection","padding","spacing","fontStyle","createFontStyle","selector","typo","caption2","color","contrastTextColor","textStyle","css","marginRight","buttonElem","arrowElem","event","nativeEvent"],"sources":["Tooltip.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Text, View, ViewProps } from 'react-native';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport { rgb } from '@fountain-ui/utils';\nimport ButtonBase from '../ButtonBase';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { Close as CloseIcon } from '../internal/icons';\nimport type TooltipProps from './TooltipProps';\nimport UpArrow from './UpArrow';\n\nconst DEFAULT_OPACITY = 0.8;\nconst initialLayout = { width: 0, height: 0, x: 0, y: 0 };\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 150 };\n\nexport default function Tooltip(props: TooltipProps) {\n    const {\n        children,\n        left,\n        onClose,\n        placement = 'top',\n        right,\n        style,\n        title,\n        tooltipStyle,\n        verticalOffset = 4,\n        visible = false,\n    } = props;\n\n    const theme = useTheme();\n\n    const [layout, setLayout] = useState(initialLayout);\n\n    const scale = useSharedValue(0);\n\n    const animatedStyle = useAnimatedStyle(() => ({\n        transform: [{ scale: scale.value }],\n    }), []);\n\n    const [r, g, b] = rgb(theme.palette.primary.main);\n\n    const totalVerticalOffset = -(layout.height + verticalOffset);\n    const tooltipLayoutStyle: ViewProps['style'] = {\n        alignItems: 'center',\n        bottom: placement === 'bottom' ? totalVerticalOffset : undefined,\n        left,\n        position: 'absolute',\n        right,\n        top: placement === 'top' ? totalVerticalOffset : undefined,\n        zIndex: theme.zIndex.tooltip,\n        height: visible ? undefined : 0,\n        overflow: visible ? undefined : 'hidden',\n    };\n\n    useEffect(() => {\n        const nextScaleValue = visible ? 1 : 0;\n\n        scale.value = withTiming(nextScaleValue, ANIMATION_CONFIG);\n    }, [visible]);\n\n    const touchableStyle: ViewProps['style'] = {\n        alignItems: 'center',\n        backgroundColor: `rgba(${r}, ${g}, ${b}, ${DEFAULT_OPACITY})`,\n        borderRadius: theme.shape.roundness,\n        flexDirection: 'row',\n        padding: theme.spacing(2),\n    };\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.caption2,\n        color: theme.palette.primary.contrastTextColor,\n    });\n\n    const textStyle = css([\n        fontStyle,\n        { marginRight: theme.spacing(2) },\n    ]);\n\n    const buttonElem = (\n        <ButtonBase\n            pressEffect={'none'}\n            onPress={onClose}\n        >\n            <View style={css(touchableStyle)}>\n                <Text\n                    children={title}\n                    // TODO: Should we provide text prop customization?\n                    numberOfLines={1}\n                    style={textStyle}\n                />\n                <CloseIcon\n                    fill={theme.palette.primary.contrastTextColor}\n                    width={20}\n                    height={20}\n                />\n            </View>\n        </ButtonBase>\n    );\n\n    const arrowElem = (\n        <UpArrow\n            upsideDown={placement === 'top'}\n            fill={theme.palette.primary.main}\n            opacity={DEFAULT_OPACITY}\n        />\n    );\n\n    return (\n        <View style={style}>\n            {children}\n\n            <Animated.View\n                onLayout={(event) => setLayout(event.nativeEvent.layout)}\n                style={[\n                    animatedStyle,\n                    tooltipLayoutStyle,\n                    tooltipStyle,\n                ]}\n            >\n                {placement === 'top' ? (\n                    <React.Fragment>\n                        {buttonElem}\n                        {arrowElem}\n                    </React.Fragment>\n                ) : (\n                    <React.Fragment>\n                        {arrowElem}\n                        {buttonElem}\n                    </React.Fragment>\n                )}\n            </Animated.View>\n        </View>\n    );\n};\n"],"mappings":"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"}

package/build/commonjs/animated/AnimatedPressable.js

@@ -5,14 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _reactNativeReanimated = _interopRequireDefault(require("react-native-reanimated"));
+var _reactNative = require("react-native");
 
 var _Pressable = _interopRequireDefault(require("../Pressable"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// @ts-ignore
-var _default = _reactNativeReanimated.default.createAnimatedComponent(_Pressable.default);
+var _default = _reactNative.Animated.createAnimatedComponent(_Pressable.default);
 
 exports.default = _default;
 //# sourceMappingURL=AnimatedPressable.js.map

package/build/commonjs/animated/AnimatedPressable.js.map

@@ -1 +1 @@
-{"version":3,"names":["Animated","createAnimatedComponent","Pressable"],"sources":["AnimatedPressable.tsx"],"sourcesContent":["import React from 'react';\nimport Animated from 'react-native-reanimated';\nimport Pressable from '../Pressable';\n\n// @ts-ignore\nexport default Animated.createAnimatedComponent(Pressable);\n"],"mappings":";;;;;;;AACA;;AACA;;;;AAEA;eACeA,8BAAA,CAASC,uBAAT,CAAiCC,kBAAjC,C"}
+{"version":3,"names":["Animated","createAnimatedComponent","Pressable"],"sources":["AnimatedPressable.tsx"],"sourcesContent":["import React from 'react';\nimport { Animated } from 'react-native';\nimport Pressable from '../Pressable';\n\nexport default Animated.createAnimatedComponent(Pressable);\n"],"mappings":";;;;;;;AACA;;AACA;;;;eAEeA,qBAAA,CAASC,uBAAT,CAAiCC,kBAAjC,C"}

package/build/commonjs/hooks/useCollapsibleAppBar.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = useCollapsibleAppBar;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = require("react");
 
 var _reactNative = require("react-native");
 
@@ -24,7 +24,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const defaultOptions = {
   keyboardDismissMode: 'none'
 };
-const ANIMATION_DURATION_MILLIS = 100;
+const ANIMATION_CONFIG = {
+  duration: 100
+};
 const SUPPORTS_DRAG_DETECTION = _reactNative.Platform.OS !== 'web';
 
 function useCollapsibleAppBar() {
@@ -38,33 +40,49 @@ function useCollapsibleAppBar() {
   const safeAreaInsets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
   const [appBarHeight, onAppBarLayout] = (0, _hooks.useHeight)();
   const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = (0, _hooks.useHeight)();
-  const maxTranslateY = (0, _reactNativeReanimated.useDerivedValue)(() => -collapsibleToolbarHeight);
+  const maxTranslateY = (0, _reactNativeReanimated.useDerivedValue)(() => -collapsibleToolbarHeight, [collapsibleToolbarHeight]);
   const translateY = (0, _reactNativeReanimated.useSharedValue)(0);
   const lastTranslateY = (0, _reactNativeReanimated.useSharedValue)(0);
   const lastOffsetY = (0, _reactNativeReanimated.useSharedValue)(0);
   const overlapped = (0, _reactNativeReanimated.useSharedValue)(false);
   const elevationStyle = (0, _useElevationStyle.default)(4);
   const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
-    return _reactNative.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.default.useRef(0);
-
-  const offsetsRef = _react.default.useRef([]);
+    const transform = [{
+      translateY: translateY.value
+    }];
+
+    if (_reactNative.Platform.OS === 'web') {
+      return {
+        transform,
+        boxShadow: overlapped.value ? elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.boxShadow : 0
+      };
+    }
+
+    if (_reactNative.Platform.OS === 'android') {
+      return {
+        transform,
+        elevation: overlapped.value ? elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.elevation : 0
+      };
+    }
+
+    if (_reactNative.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 = (0, _react.useRef)(0);
+  const offsetsRef = (0, _react.useRef)([]);
 
   const onScrollViewChanged = nextIndex => {
     const prevIndex = indexRef.current;
@@ -81,9 +99,7 @@ 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 = (0, _reactNativeReanimated.withTiming)(0, {
-        duration: ANIMATION_DURATION_MILLIS
-      });
+      translateY.value = (0, _reactNativeReanimated.withTiming)(0, ANIMATION_CONFIG);
     }
   };
 
@@ -110,15 +126,11 @@ function useCollapsibleAppBar() {
       } else {
         if (offsetY > -maxTy) {
           if (ty === 0) {
-            translateY.value = (0, _reactNativeReanimated.withTiming)(Math.min(Math.max(-offsetY, maxTy), 0), {
-              duration: ANIMATION_DURATION_MILLIS
-            });
+            translateY.value = (0, _reactNativeReanimated.withTiming)(Math.min(Math.max(-offsetY, maxTy), 0), ANIMATION_CONFIG);
           }
         } else {
           if (ty === maxTy) {
-            translateY.value = (0, _reactNativeReanimated.withTiming)(0, {
-              duration: ANIMATION_DURATION_MILLIS
-            });
+            translateY.value = (0, _reactNativeReanimated.withTiming)(0, ANIMATION_CONFIG);
           }
         }
 
@@ -142,11 +154,9 @@ function useCollapsibleAppBar() {
       const threshold = maxTy * 0.5;
       const nextTranslateY = ty > threshold || offsetY < appBarHeight ? 0 : maxTy;
       overlapped.value = offsetY + nextTranslateY > 0;
-      translateY.value = (0, _reactNativeReanimated.withTiming)(nextTranslateY, {
-        duration: ANIMATION_DURATION_MILLIS
-      });
+      translateY.value = (0, _reactNativeReanimated.withTiming)(nextTranslateY, ANIMATION_CONFIG);
     }
-  });
+  }, [keyboardDismissMode]);
   const hasCollapsible = collapsibleToolbarHeight > 0;
   const appBarStyle = [animatedStyle, {
     paddingTop: safeAreaInsets.top