@fountain-ui/core 2.0.0-beta.15 → 2.0.0-beta.18

package/build/commonjs/Tabs/IndexAwareTab.js

@@ -7,18 +7,24 @@ exports.default = IndexAwareTab;
 
 var _react = require("react");
 
-var _reactNativeReanimated = require("react-native-reanimated");
+var _InternalContext = _interopRequireDefault(require("./InternalContext"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function IndexAwareTab(props) {
   const {
     children,
-    index,
-    sharedIndex
+    index
   } = props;
-  const [selected, setSelected] = (0, _react.useState)(index === sharedIndex.value);
-  (0, _reactNativeReanimated.useAnimatedReaction)(() => index === sharedIndex.value, result => {
-    (0, _reactNativeReanimated.runOnJS)(setSelected)(result);
-  }, [index]);
+  const [selected, setSelected] = (0, _react.useState)(false);
+  const {
+    indexStore
+  } = (0, _react.useContext)(_InternalContext.default);
+  (0, _react.useEffect)(() => {
+    return indexStore.subscribe(currentIndex => {
+      setSelected(currentIndex === index);
+    });
+  }, [indexStore, index]);
   return /*#__PURE__*/(0, _react.cloneElement)(children, {
     selected
   });

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

@@ -1 +1 @@
-{"version":3,"names":["IndexAwareTab","props","children","index","sharedIndex","selected","setSelected","useState","value","useAnimatedReaction","result","runOnJS","cloneElement"],"sources":["IndexAwareTab.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React, { cloneElement, useState } from 'react';\nimport type { SharedValue } from 'react-native-reanimated';\nimport { runOnJS, useAnimatedReaction } from 'react-native-reanimated';\n\nexport interface IndexAwareTabProps {\n    children: ReactElement;\n    index: number;\n    sharedIndex: SharedValue<number>;\n}\n\nexport default function IndexAwareTab(props: IndexAwareTabProps) {\n    const {\n        children,\n        index,\n        sharedIndex,\n    } = props;\n\n    const [selected, setSelected] = useState(index === sharedIndex.value);\n\n    useAnimatedReaction(\n        () => index === sharedIndex.value,\n        (result) => {\n            runOnJS(setSelected)(result);\n        },\n        [index],\n    );\n\n    return cloneElement(children, { selected });\n};\n"],"mappings":";;;;;;;AACA;;AAEA;;AAQe,SAASA,aAAT,CAAuBC,KAAvB,EAAkD;EAC7D,MAAM;IACFC,QADE;IAEFC,KAFE;IAGFC;EAHE,IAIFH,KAJJ;EAMA,MAAM,CAACI,QAAD,EAAWC,WAAX,IAA0B,IAAAC,eAAA,EAASJ,KAAK,KAAKC,WAAW,CAACI,KAA/B,CAAhC;EAEA,IAAAC,0CAAA,EACI,MAAMN,KAAK,KAAKC,WAAW,CAACI,KADhC,EAEKE,MAAD,IAAY;IACR,IAAAC,8BAAA,EAAQL,WAAR,EAAqBI,MAArB;EACH,CAJL,EAKI,CAACP,KAAD,CALJ;EAQA,oBAAO,IAAAS,mBAAA,EAAaV,QAAb,EAAuB;IAAEG;EAAF,CAAvB,CAAP;AACH;;AAAA"}
+{"version":3,"names":["IndexAwareTab","props","children","index","selected","setSelected","useState","indexStore","useContext","InternalContext","useEffect","subscribe","currentIndex","cloneElement"],"sources":["IndexAwareTab.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React, { cloneElement, useContext, useEffect, useState } from 'react';\nimport InternalContext from './InternalContext';\n\nexport interface IndexAwareTabProps {\n    children: ReactElement;\n    index: number;\n}\n\nexport default function IndexAwareTab(props: IndexAwareTabProps) {\n    const {\n        children,\n        index,\n    } = props;\n\n    const [selected, setSelected] = useState(false);\n\n    const { indexStore } = useContext(InternalContext);\n\n    useEffect(() => {\n        return indexStore.subscribe((currentIndex) => {\n            setSelected(currentIndex === index);\n        });\n    }, [indexStore, index]);\n\n    return cloneElement(children, { selected });\n};\n"],"mappings":";;;;;;;AACA;;AACA;;;;AAOe,SAASA,aAAT,CAAuBC,KAAvB,EAAkD;EAC7D,MAAM;IACFC,QADE;IAEFC;EAFE,IAGFF,KAHJ;EAKA,MAAM,CAACG,QAAD,EAAWC,WAAX,IAA0B,IAAAC,eAAA,EAAS,KAAT,CAAhC;EAEA,MAAM;IAAEC;EAAF,IAAiB,IAAAC,iBAAA,EAAWC,wBAAX,CAAvB;EAEA,IAAAC,gBAAA,EAAU,MAAM;IACZ,OAAOH,UAAU,CAACI,SAAX,CAAsBC,YAAD,IAAkB;MAC1CP,WAAW,CAACO,YAAY,KAAKT,KAAlB,CAAX;IACH,CAFM,CAAP;EAGH,CAJD,EAIG,CAACI,UAAD,EAAaJ,KAAb,CAJH;EAMA,oBAAO,IAAAU,mBAAA,EAAaX,QAAb,EAAuB;IAAEE;EAAF,CAAvB,CAAP;AACH;;AAAA"}

package/build/commonjs/Tabs/InternalContext.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _store = require("../store");
+
+const InternalContext = /*#__PURE__*/(0, _react.createContext)({
+  indexStore: new _store.MockStore()
+});
+var _default = InternalContext;
+exports.default = _default;
+//# sourceMappingURL=InternalContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["InternalContext","createContext","indexStore","MockStore"],"sources":["InternalContext.ts"],"sourcesContent":["import { createContext } from 'react';\nimport type { MonoStore } from '../store';\nimport { MockStore } from '../store';\n\nexport interface InternalContextValue {\n    indexStore: MonoStore<number>;\n}\n\nconst InternalContext = createContext<InternalContextValue>({\n    indexStore: new MockStore(),\n});\n\nexport default InternalContext;\n"],"mappings":";;;;;;;AAAA;;AAEA;;AAMA,MAAMA,eAAe,gBAAG,IAAAC,oBAAA,EAAoC;EACxDC,UAAU,EAAE,IAAIC,gBAAJ;AAD4C,CAApC,CAAxB;eAIeH,e"}

package/build/commonjs/Tabs/ScrollableTabsView.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ScrollableTabsView;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNative = require("react-native");
+
+var _useScrollViewReaction = _interopRequireDefault(require("./useScrollViewReaction"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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); }
+
+function ScrollableTabsView(props) {
+  const {
+    coordinates,
+    ...scrollViewProps
+  } = props;
+  const {
+    scrollViewRef,
+    onLayout
+  } = (0, _useScrollViewReaction.default)(coordinates);
+  return /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, _extends({
+    ref: scrollViewRef,
+    onLayout: onLayout
+  }, scrollViewProps));
+}
+
+;
+//# sourceMappingURL=ScrollableTabsView.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["ScrollableTabsView","props","coordinates","scrollViewProps","scrollViewRef","onLayout","useScrollViewReaction"],"sources":["ScrollableTabsView.tsx"],"sourcesContent":["import React from 'react';\nimport type { ScrollViewProps } from 'react-native';\nimport { ScrollView } from 'react-native';\nimport TabCoordinate from './TabCoordinate';\nimport useScrollViewReaction from './useScrollViewReaction';\n\nexport interface ScrollableTabsViewProps extends ScrollViewProps {\n    coordinates: TabCoordinate[];\n}\n\nexport default function ScrollableTabsView(props: ScrollableTabsViewProps) {\n    const {\n        coordinates,\n        ...scrollViewProps\n    } = props;\n\n    const { scrollViewRef, onLayout } = useScrollViewReaction(coordinates);\n\n    return (\n        <ScrollView\n            ref={scrollViewRef}\n            onLayout={onLayout}\n            {...scrollViewProps}\n        />\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AAEA;;AAEA;;;;;;AAMe,SAASA,kBAAT,CAA4BC,KAA5B,EAA4D;EACvE,MAAM;IACFC,WADE;IAEF,GAAGC;EAFD,IAGFF,KAHJ;EAKA,MAAM;IAAEG,aAAF;IAAiBC;EAAjB,IAA8B,IAAAC,8BAAA,EAAsBJ,WAAtB,CAApC;EAEA,oBACI,6BAAC,uBAAD;IACI,GAAG,EAAEE,aADT;IAEI,QAAQ,EAAEC;EAFd,GAGQF,eAHR,EADJ;AAOH;;AAAA"}

package/build/commonjs/Tabs/TabIndicator.js

@@ -5,20 +5,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = TabIndicator;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _reactNative = require("react-native");
 
 var _styles = require("../styles");
 
 var _TabCoordinate = require("./TabCoordinate");
 
+var _InternalContext = _interopRequireDefault(require("./InternalContext"));
+
+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 }; }
-
 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 INDICATOR_WIDTH = 10;
@@ -42,41 +44,66 @@ const useStyles = function () {
   };
 };
 
-const ANIMATION_CONFIG = {
-  duration: 300,
-  easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.exp)
+const startAnimation = (value, toValue) => {
+  _reactNative.Animated.timing(value, {
+    toValue: toValue,
+    duration: 300,
+    easing: _reactNative.Easing.bezier(0.25, 1, 0.5, 1),
+    useNativeDriver: true
+  }).start();
 };
 
 function TabIndicator(props) {
   const {
     coordinates,
     disabled,
+    initialIndex,
     scrollable,
-    sharedIndex,
     style,
     ...otherProps
   } = props;
   const styles = useStyles();
-  const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
-    const index = sharedIndex.value;
+  const computeAnimationValues = (0, _react.useCallback)(currentIndex => {
     const {
       x1,
       x2
-    } = coordinates[index] ?? _TabCoordinate.defaultCoordinate;
+    } = coordinates[currentIndex] ?? _TabCoordinate.defaultCoordinate;
     const tabWidth = x2 - x1;
-    const translateX = x1 + (tabWidth - INDICATOR_WIDTH) / 2;
+    const nextTranslateX = x1 + (tabWidth - INDICATOR_WIDTH) / 2;
     const inset = scrollable ? SCROLLABLE_TABS_INSET : 0;
-    const scaleX = (tabWidth - inset) / INDICATOR_WIDTH;
+    const nextScaleX = (tabWidth - inset) / INDICATOR_WIDTH;
     return {
+      tx: nextTranslateX,
+      sx: nextScaleX
+    };
+  }, [coordinates, scrollable]);
+  const {
+    tx: initialTx,
+    sx: initialSx
+  } = computeAnimationValues(initialIndex);
+  const translateX = (0, _react.useRef)(new _reactNative.Animated.Value(initialTx)).current;
+  const scaleX = (0, _react.useRef)(new _reactNative.Animated.Value(initialSx)).current;
+  const {
+    indexStore
+  } = (0, _react.useContext)(_InternalContext.default);
+  (0, _react.useEffect)(() => {
+    return indexStore.subscribe(currentIndex => {
+      const {
+        tx,
+        sx
+      } = computeAnimationValues(currentIndex);
+      startAnimation(translateX, tx);
+      startAnimation(scaleX, sx);
+    });
+  }, [indexStore, computeAnimationValues]);
+  return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, _extends({
+    style: [styles.root, disabled ? styles.disabled : undefined, {
       transform: [{
-        translateX: (0, _reactNativeReanimated.withTiming)(translateX, ANIMATION_CONFIG)
+        translateX
       }, {
-        scaleX: (0, _reactNativeReanimated.withTiming)(scaleX, ANIMATION_CONFIG)
+        scaleX
       }]
-    };
-  }, [coordinates, scrollable]);
-  return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, _extends({
-    style: [styles.root, disabled ? styles.disabled : undefined, animatedStyle, style]
+    }, style]
   }, otherProps));
 }
 

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

@@ -1 +1 @@
-{"version":3,"names":["INDICATOR_WIDTH","INDICATOR_HEIGHT","SCROLLABLE_TABS_INSET","useStyles","theme","useTheme","root","backgroundColor","palette","secondary","main","left","bottom","width","height","position","disabled","ANIMATION_CONFIG","duration","easing","Easing","out","exp","TabIndicator","props","coordinates","scrollable","sharedIndex","style","otherProps","styles","animatedStyle","useAnimatedStyle","index","value","x1","x2","defaultCoordinate","tabWidth","translateX","inset","scaleX","transform","withTiming","undefined"],"sources":["TabIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { Easing, useAnimatedStyle, withTiming } from 'react-native-reanimated';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport type TabIndicatorProps from './TabIndicatorProps';\nimport { defaultCoordinate } from './TabCoordinate';\n\ntype TabIndicatorStyles = NamedStylesStringUnion<'root' | 'disabled'>;\n\nconst INDICATOR_WIDTH = 10;\nconst INDICATOR_HEIGHT = 4;\n\nconst SCROLLABLE_TABS_INSET = 12 * 2;\n\nconst useStyles: UseStyles<TabIndicatorStyles> = function (): TabIndicatorStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            backgroundColor: theme.palette.secondary.main,\n            left: 0,\n            bottom: 0,\n            width: INDICATOR_WIDTH,\n            height: INDICATOR_HEIGHT,\n            position: 'absolute',\n        },\n        disabled: {\n            height: 0,\n        },\n    };\n};\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = {\n    duration: 300,\n    easing: Easing.out(Easing.exp),\n};\n\nexport default function TabIndicator(props: TabIndicatorProps) {\n    const {\n        coordinates,\n        disabled,\n        scrollable,\n        sharedIndex,\n        style,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const animatedStyle = useAnimatedStyle(() => {\n        const index = sharedIndex.value;\n\n        const { x1, x2 } = coordinates[index] ?? defaultCoordinate;\n\n        const tabWidth = x2 - x1;\n\n        const translateX = x1 + (tabWidth - INDICATOR_WIDTH) / 2;\n\n        const inset = scrollable ? SCROLLABLE_TABS_INSET : 0;\n        const scaleX = (tabWidth - inset) / INDICATOR_WIDTH;\n\n        return {\n            transform: [\n                { translateX: withTiming(translateX, ANIMATION_CONFIG) },\n                { scaleX: withTiming(scaleX, ANIMATION_CONFIG) },\n            ],\n        };\n    }, [coordinates, scrollable]);\n\n    return (\n        <Animated.View\n            style={[\n                styles.root,\n                disabled ? styles.disabled : undefined,\n                animatedStyle,\n                style,\n            ]}\n            {...otherProps}\n        />\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AAEA;;AAEA;;AAEA;;;;;;;;;;AAIA,MAAMA,eAAe,GAAG,EAAxB;AACA,MAAMC,gBAAgB,GAAG,CAAzB;AAEA,MAAMC,qBAAqB,GAAG,KAAK,CAAnC;;AAEA,MAAMC,SAAwC,GAAG,YAAgC;EAC7E,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,eAAe,EAAEH,KAAK,CAACI,OAAN,CAAcC,SAAd,CAAwBC,IADvC;MAEFC,IAAI,EAAE,CAFJ;MAGFC,MAAM,EAAE,CAHN;MAIFC,KAAK,EAAEb,eAJL;MAKFc,MAAM,EAAEb,gBALN;MAMFc,QAAQ,EAAE;IANR,CADH;IASHC,QAAQ,EAAE;MACNF,MAAM,EAAE;IADF;EATP,CAAP;AAaH,CAhBD;;AAkBA,MAAMG,gBAA4C,GAAG;EACjDC,QAAQ,EAAE,GADuC;EAEjDC,MAAM,EAAEC,6BAAA,CAAOC,GAAP,CAAWD,6BAAA,CAAOE,GAAlB;AAFyC,CAArD;;AAKe,SAASC,YAAT,CAAsBC,KAAtB,EAAgD;EAC3D,MAAM;IACFC,WADE;IAEFT,QAFE;IAGFU,UAHE;IAIFC,WAJE;IAKFC,KALE;IAMF,GAAGC;EAND,IAOFL,KAPJ;EASA,MAAMM,MAAM,GAAG3B,SAAS,EAAxB;EAEA,MAAM4B,aAAa,GAAG,IAAAC,uCAAA,EAAiB,MAAM;IACzC,MAAMC,KAAK,GAAGN,WAAW,CAACO,KAA1B;IAEA,MAAM;MAAEC,EAAF;MAAMC;IAAN,IAAaX,WAAW,CAACQ,KAAD,CAAX,IAAsBI,gCAAzC;IAEA,MAAMC,QAAQ,GAAGF,EAAE,GAAGD,EAAtB;IAEA,MAAMI,UAAU,GAAGJ,EAAE,GAAG,CAACG,QAAQ,GAAGtC,eAAZ,IAA+B,CAAvD;IAEA,MAAMwC,KAAK,GAAGd,UAAU,GAAGxB,qBAAH,GAA2B,CAAnD;IACA,MAAMuC,MAAM,GAAG,CAACH,QAAQ,GAAGE,KAAZ,IAAqBxC,eAApC;IAEA,OAAO;MACH0C,SAAS,EAAE,CACP;QAAEH,UAAU,EAAE,IAAAI,iCAAA,EAAWJ,UAAX,EAAuBtB,gBAAvB;MAAd,CADO,EAEP;QAAEwB,MAAM,EAAE,IAAAE,iCAAA,EAAWF,MAAX,EAAmBxB,gBAAnB;MAAV,CAFO;IADR,CAAP;EAMH,CAlBqB,EAkBnB,CAACQ,WAAD,EAAcC,UAAd,CAlBmB,CAAtB;EAoBA,oBACI,6BAAC,8BAAD,CAAU,IAAV;IACI,KAAK,EAAE,CACHI,MAAM,CAACxB,IADJ,EAEHU,QAAQ,GAAGc,MAAM,CAACd,QAAV,GAAqB4B,SAF1B,EAGHb,aAHG,EAIHH,KAJG;EADX,GAOQC,UAPR,EADJ;AAWH;;AAAA"}
+{"version":3,"names":["INDICATOR_WIDTH","INDICATOR_HEIGHT","SCROLLABLE_TABS_INSET","useStyles","theme","useTheme","root","backgroundColor","palette","secondary","main","left","bottom","width","height","position","disabled","startAnimation","value","toValue","Animated","timing","duration","easing","Easing","bezier","useNativeDriver","start","TabIndicator","props","coordinates","initialIndex","scrollable","style","otherProps","styles","computeAnimationValues","useCallback","currentIndex","x1","x2","defaultCoordinate","tabWidth","nextTranslateX","inset","nextScaleX","tx","sx","initialTx","initialSx","translateX","useRef","Value","current","scaleX","indexStore","useContext","InternalContext","useEffect","subscribe","undefined","transform"],"sources":["TabIndicator.tsx"],"sourcesContent":["import React, { useCallback, useContext, useEffect, useRef } from 'react';\nimport { Animated, Easing } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport type TabIndicatorProps from './TabIndicatorProps';\nimport { defaultCoordinate } from './TabCoordinate';\nimport InternalContext from './InternalContext';\n\ntype TabIndicatorStyles = NamedStylesStringUnion<'root' | 'disabled'>;\n\nconst INDICATOR_WIDTH = 10;\nconst INDICATOR_HEIGHT = 4;\n\nconst SCROLLABLE_TABS_INSET = 12 * 2;\n\nconst useStyles: UseStyles<TabIndicatorStyles> = function (): TabIndicatorStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            backgroundColor: theme.palette.secondary.main,\n            left: 0,\n            bottom: 0,\n            width: INDICATOR_WIDTH,\n            height: INDICATOR_HEIGHT,\n            position: 'absolute',\n        },\n        disabled: {\n            height: 0,\n        },\n    };\n};\n\nconst startAnimation = (value: Animated.Value, toValue: number) => {\n    Animated.timing(value, {\n        toValue: toValue,\n        duration: 300,\n        easing: Easing.bezier(0.25, 1, 0.5, 1),\n        useNativeDriver: true,\n    }).start();\n};\n\nexport default function TabIndicator(props: TabIndicatorProps) {\n    const {\n        coordinates,\n        disabled,\n        initialIndex,\n        scrollable,\n        style,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const computeAnimationValues = useCallback((currentIndex: number) => {\n        const { x1, x2 } = coordinates[currentIndex] ?? defaultCoordinate;\n\n        const tabWidth = x2 - x1;\n\n        const nextTranslateX = x1 + (tabWidth - INDICATOR_WIDTH) / 2;\n\n        const inset = scrollable ? SCROLLABLE_TABS_INSET : 0;\n        const nextScaleX = (tabWidth - inset) / INDICATOR_WIDTH;\n\n        return { tx: nextTranslateX, sx: nextScaleX };\n    }, [coordinates, scrollable]);\n\n    const {\n        tx: initialTx,\n        sx: initialSx,\n    } = computeAnimationValues(initialIndex);\n\n    const translateX = useRef(new Animated.Value(initialTx)).current;\n    const scaleX = useRef(new Animated.Value(initialSx)).current;\n\n    const { indexStore } = useContext(InternalContext);\n\n    useEffect(() => {\n        return indexStore.subscribe(currentIndex => {\n            const { tx, sx } = computeAnimationValues(currentIndex);\n\n            startAnimation(translateX, tx);\n            startAnimation(scaleX, sx);\n        });\n    }, [indexStore, computeAnimationValues]);\n\n    return (\n        <Animated.View\n            style={[\n                styles.root,\n                disabled ? styles.disabled : undefined,\n                { transform: [{ translateX }, { scaleX }] },\n                style,\n            ]}\n            {...otherProps}\n        />\n    );\n};\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["TabIndicatorProps.ts"],"sourcesContent":["import type { ViewProps } from 'react-native';\nimport type { SharedValue } from 'react-native-reanimated';\nimport type { OverridableComponentProps } from '../types';\nimport type TabCoordinate from './TabCoordinate';\n\nexport default interface TabIndicatorProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * Tab item coordinates.\n     */\n    coordinates: TabCoordinate[];\n\n    /**\n     * If `true`, the indicator is disabled.\n     */\n    disabled: boolean;\n\n    /**\n     * If `true`, the tab will be able to scroll.\n     */\n    scrollable: boolean;\n\n    /**\n     * Shared index value for using animated interpolation.\n     */\n    sharedIndex: SharedValue<number>;\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["TabIndicatorProps.ts"],"sourcesContent":["import type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\nimport type TabCoordinate from './TabCoordinate';\n\nexport default interface TabIndicatorProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * Tab item coordinates.\n     */\n    coordinates: TabCoordinate[];\n\n    /**\n     * If `true`, the indicator is disabled.\n     */\n    disabled: boolean;\n\n    /**\n     * Initial index.\n     */\n    initialIndex: number;\n\n    /**\n     * If `true`, the tab will be able to scroll.\n     */\n    scrollable: boolean;\n}> {}\n"],"mappings":""}

package/build/commonjs/Tabs/Tabs.js

@@ -9,17 +9,21 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactNative = require("react-native");
 
-var _reactNativeReanimated = require("react-native-reanimated");
-
 var _styles = require("../styles");
 
+var _hooks = require("../hooks");
+
 var _TabIndicator = _interopRequireDefault(require("./TabIndicator"));
 
+var _ScrollableTabsView = _interopRequireDefault(require("./ScrollableTabsView"));
+
 var _IndexAwareTab = _interopRequireDefault(require("./IndexAwareTab"));
 
 var _useTabCoordinates = _interopRequireDefault(require("./useTabCoordinates"));
 
-var _useScrollViewReaction = _interopRequireDefault(require("./useScrollViewReaction"));
+var _useIndexStore = _interopRequireDefault(require("./useIndexStore"));
+
+var _InternalContext = _interopRequireDefault(require("./InternalContext"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -56,17 +60,16 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(function Tabs(props, ref) {
     variant = 'primary',
     UNSTABLE_sharedIndex
   } = props;
-  const fallbackSharedIndex = (0, _reactNativeReanimated.useSharedValue)(initialIndex);
+  const fallbackSharedIndex = (0, _hooks.useSyncAnimatedValue)({
+    initialValue: initialIndex
+  });
   const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;
 
-  const getCurrentIndex = () => sharedIndex.value;
-
   const setTab = newIndex => {
-    sharedIndex.value = newIndex;
+    sharedIndex.animatedValue.setValue(newIndex);
   };
 
   (0, _react.useImperativeHandle)(ref, () => ({
-    getCurrentIndex,
     setTab
   }), [sharedIndex]);
   const styles = useStyles();
@@ -74,10 +77,7 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(function Tabs(props, ref) {
     coordinates,
     updateCoordinate
   } = (0, _useTabCoordinates.default)(children);
-  const {
-    scrollViewRef,
-    onLayout
-  } = (0, _useScrollViewReaction.default)(sharedIndex, coordinates);
+  const indexStore = (0, _useIndexStore.default)(sharedIndex);
   const isReadyToRenderIndicator = coordinates.length > 0;
 
   const tabElements = _react.default.Children.map(children, (child, index) => {
@@ -115,33 +115,35 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(function Tabs(props, ref) {
     });
     return /*#__PURE__*/_react.default.createElement(_IndexAwareTab.default, {
       children: tabElement,
-      index: index,
-      sharedIndex: sharedIndex
+      index: index
     });
   });
 
   const tabIndicator = isReadyToRenderIndicator ? /*#__PURE__*/_react.default.createElement(_TabIndicator.default, {
     coordinates: coordinates,
     disabled: disableIndicator,
-    scrollable: scrollable,
-    sharedIndex: sharedIndex
+    initialIndex: sharedIndex.initialValue,
+    scrollable: scrollable
   }) : null;
-  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    onLayout: onLayout,
+  return /*#__PURE__*/_react.default.createElement(_InternalContext.default.Provider, {
+    value: {
+      indexStore
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: (0, _styles.css)([styles.root, scrollable ? undefined : styles.fixedRoot, style])
-  }, scrollable ? /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, {
+  }, scrollable ? /*#__PURE__*/_react.default.createElement(_ScrollableTabsView.default, {
     automaticallyAdjustContentInsets: false,
     bounces: false,
     contentContainerStyle: styles.scrollableContainer,
+    coordinates: coordinates,
     directionalLockEnabled: true,
     horizontal: true,
-    ref: scrollViewRef,
     scrollsToTop: false,
     showsHorizontalScrollIndicator: false,
     showsVerticalScrollIndicator: false,
     keyboardDismissMode: keyboardDismissMode,
     keyboardShouldPersistTaps: keyboardShouldPersistTaps
-  }, tabElements, tabIndicator) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tabElements, tabIndicator));
+  }, tabElements, tabIndicator) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tabElements, tabIndicator)));
 });
 var _default = Tabs;
 exports.default = _default;

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

@@ -1 +1 @@
-{"version":3,"names":["useStyles","theme","useTheme","root","fixedRoot","flexDirection","fixedTab","flex","scrollableContainer","paddingHorizontal","spacing","Tabs","forwardRef","props","ref","children","initialIndex","disableIndicator","keyboardDismissMode","keyboardShouldPersistTaps","onChange","scrollable","style","variant","UNSTABLE_sharedIndex","fallbackSharedIndex","useSharedValue","sharedIndex","getCurrentIndex","value","setTab","newIndex","useImperativeHandle","styles","coordinates","updateCoordinate","useTabCoordinates","scrollViewRef","onLayout","useScrollViewReaction","isReadyToRenderIndicator","length","tabElements","React","Children","map","child","index","event","x","width","nativeEvent","layout","onMouseDown","e","preventDefault","onPress","tabElement","cloneElement","enableIndicator","undefined","tabIndicator","css"],"sources":["Tabs.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef, useImperativeHandle } from 'react';\nimport type { GestureResponderEvent, LayoutChangeEvent } from 'react-native';\nimport { ScrollView, View } from 'react-native';\nimport { useSharedValue } from 'react-native-reanimated';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport type TabsProps from './TabsProps';\nimport type { TabsInstance } from './TabsProps';\nimport TabIndicator from './TabIndicator';\nimport IndexAwareTab from './IndexAwareTab';\nimport useTabCoordinates from './useTabCoordinates';\nimport useScrollViewReaction from './useScrollViewReaction';\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 Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {\n    const {\n        children,\n        initialIndex = 0,\n        disableIndicator = false,\n        keyboardDismissMode = 'none',\n        keyboardShouldPersistTaps = 'never',\n        onChange,\n        scrollable = false,\n        style,\n        variant = 'primary',\n        UNSTABLE_sharedIndex,\n    } = props;\n\n    const fallbackSharedIndex = useSharedValue<number>(initialIndex);\n\n    const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;\n\n    const getCurrentIndex = (): number => sharedIndex.value;\n\n    const setTab = (newIndex: number) => {\n        sharedIndex.value = newIndex;\n    };\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            getCurrentIndex,\n            setTab,\n        }),\n        [sharedIndex],\n    );\n\n    const styles = useStyles();\n\n    const { coordinates, updateCoordinate } = useTabCoordinates(children);\n\n    const { scrollViewRef, onLayout } = useScrollViewReaction(sharedIndex, coordinates);\n\n    const isReadyToRenderIndicator = coordinates.length > 0;\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            setTab(index);\n\n            onChange?.(index);\n            // @ts-ignore\n            child.props.onPress?.();\n        };\n\n        // @ts-ignore\n        const tabElement = cloneElement(child, {\n            enableIndicator: !disableIndicator && !isReadyToRenderIndicator,\n            onLayout,\n            onPress,\n            onMouseDown,\n            variant,\n            style: scrollable ? undefined : styles.fixedTab,\n        });\n\n        return (\n            <IndexAwareTab\n                children={tabElement}\n                index={index}\n                sharedIndex={sharedIndex}\n            />\n        );\n    });\n\n    const tabIndicator = isReadyToRenderIndicator ? (\n        <TabIndicator\n            coordinates={coordinates}\n            disabled={disableIndicator}\n            scrollable={scrollable}\n            sharedIndex={sharedIndex}\n        />\n    ) : null;\n\n    return (\n        <View\n            onLayout={onLayout}\n            style={css([\n                styles.root,\n                scrollable ? undefined : styles.fixedRoot,\n                style,\n            ])}\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                    {tabIndicator}\n                </ScrollView>\n            ) : (\n                <React.Fragment>\n                    {tabElements}\n                    {tabIndicator}\n                </React.Fragment>\n            )}\n        </View>\n    );\n});\n\nexport default Tabs;\n"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AAEA;;AAGA;;AACA;;AACA;;AACA;;;;;;;;AAUA,MAAMA,SAAgC,GAAG,YAAwB;EAC7D,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE,EADH;IAEHC,SAAS,EAAE;MACPC,aAAa,EAAE;IADR,CAFR;IAKHC,QAAQ,EAAE;MACNC,IAAI,EAAE;IADA,CALP;IAQHC,mBAAmB,EAAE;MACjBC,iBAAiB,EAAER,KAAK,CAACS,OAAN,CAAc,CAAd;IADF;EARlB,CAAP;AAYH,CAfD;;AAiBA,MAAMC,IAAI,gBAAG,IAAAC,iBAAA,EAAoC,SAASD,IAAT,CAAcE,KAAd,EAAqBC,GAArB,EAA0B;EACvE,MAAM;IACFC,QADE;IAEFC,YAAY,GAAG,CAFb;IAGFC,gBAAgB,GAAG,KAHjB;IAIFC,mBAAmB,GAAG,MAJpB;IAKFC,yBAAyB,GAAG,OAL1B;IAMFC,QANE;IAOFC,UAAU,GAAG,KAPX;IAQFC,KARE;IASFC,OAAO,GAAG,SATR;IAUFC;EAVE,IAWFX,KAXJ;EAaA,MAAMY,mBAAmB,GAAG,IAAAC,qCAAA,EAAuBV,YAAvB,CAA5B;EAEA,MAAMW,WAAW,GAAGH,oBAAoB,IAAIC,mBAA5C;;EAEA,MAAMG,eAAe,GAAG,MAAcD,WAAW,CAACE,KAAlD;;EAEA,MAAMC,MAAM,GAAIC,QAAD,IAAsB;IACjCJ,WAAW,CAACE,KAAZ,GAAoBE,QAApB;EACH,CAFD;;EAIA,IAAAC,0BAAA,EACIlB,GADJ,EAEI,OAAO;IACHc,eADG;IAEHE;EAFG,CAAP,CAFJ,EAMI,CAACH,WAAD,CANJ;EASA,MAAMM,MAAM,GAAGjC,SAAS,EAAxB;EAEA,MAAM;IAAEkC,WAAF;IAAeC;EAAf,IAAoC,IAAAC,0BAAA,EAAkBrB,QAAlB,CAA1C;EAEA,MAAM;IAAEsB,aAAF;IAAiBC;EAAjB,IAA8B,IAAAC,8BAAA,EAAsBZ,WAAtB,EAAmCO,WAAnC,CAApC;EAEA,MAAMM,wBAAwB,GAAGN,WAAW,CAACO,MAAZ,GAAqB,CAAtD;;EAEA,MAAMC,WAAW,GAAGC,cAAA,CAAMC,QAAN,CAAeC,GAAf,CAAmB9B,QAAnB,EAA6B,CAAC+B,KAAD,EAAQC,KAAR,KAAkB;IAC/D,MAAMT,QAAQ,GAAIU,KAAD,IAA8B;MAC3C,MAAM;QAAEC,CAAF;QAAKC;MAAL,IAAeF,KAAK,CAACG,WAAN,CAAkBC,MAAvC;MAEAjB,gBAAgB,CAACY,KAAD,EAAQE,CAAR,EAAWC,KAAX,CAAhB;IACH,CAJD;;IAMA,MAAMG,WAAW,GAAIC,CAAD,IAA8B;MAC9C,IAAInC,yBAAyB,KAAK,QAAlC,EAA4C;QACxCmC,CAAC,CAACC,cAAF;MACH;IACJ,CAJD;;IAMA,MAAMC,OAAO,GAAG,MAAM;MAAA;;MAClB1B,MAAM,CAACiB,KAAD,CAAN;MAEA3B,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAG2B,KAAH,CAAR,CAHkB,CAIlB;;MACA,wCAAAD,KAAK,CAACjC,KAAN,EAAY2C,OAAZ;IACH,CAND,CAb+D,CAqB/D;;;IACA,MAAMC,UAAU,gBAAG,IAAAC,mBAAA,EAAaZ,KAAb,EAAoB;MACnCa,eAAe,EAAE,CAAC1C,gBAAD,IAAqB,CAACuB,wBADJ;MAEnCF,QAFmC;MAGnCkB,OAHmC;MAInCH,WAJmC;MAKnC9B,OALmC;MAMnCD,KAAK,EAAED,UAAU,GAAGuC,SAAH,GAAe3B,MAAM,CAAC3B;IANJ,CAApB,CAAnB;IASA,oBACI,6BAAC,sBAAD;MACI,QAAQ,EAAEmD,UADd;MAEI,KAAK,EAAEV,KAFX;MAGI,WAAW,EAAEpB;IAHjB,EADJ;EAOH,CAtCmB,CAApB;;EAwCA,MAAMkC,YAAY,GAAGrB,wBAAwB,gBACzC,6BAAC,qBAAD;IACI,WAAW,EAAEN,WADjB;IAEI,QAAQ,EAAEjB,gBAFd;IAGI,UAAU,EAAEI,UAHhB;IAII,WAAW,EAAEM;EAJjB,EADyC,GAOzC,IAPJ;EASA,oBACI,6BAAC,iBAAD;IACI,QAAQ,EAAEW,QADd;IAEI,KAAK,EAAE,IAAAwB,WAAA,EAAI,CACP7B,MAAM,CAAC9B,IADA,EAEPkB,UAAU,GAAGuC,SAAH,GAAe3B,MAAM,CAAC7B,SAFzB,EAGPkB,KAHO,CAAJ;EAFX,GAQKD,UAAU,gBACP,6BAAC,uBAAD;IACI,gCAAgC,EAAE,KADtC;IAEI,OAAO,EAAE,KAFb;IAGI,qBAAqB,EAAEY,MAAM,CAACzB,mBAHlC;IAII,sBAAsB,EAAE,IAJ5B;IAKI,UAAU,EAAE,IALhB;IAMI,GAAG,EAAE6B,aANT;IAOI,YAAY,EAAE,KAPlB;IAQI,8BAA8B,EAAE,KARpC;IASI,4BAA4B,EAAE,KATlC;IAUI,mBAAmB,EAAEnB,mBAVzB;IAWI,yBAAyB,EAAEC;EAX/B,GAaKuB,WAbL,EAcKmB,YAdL,CADO,gBAkBP,6BAAC,cAAD,CAAO,QAAP,QACKnB,WADL,EAEKmB,YAFL,CA1BR,CADJ;AAkCH,CA5HY,CAAb;eA8HelD,I"}
+{"version":3,"names":["useStyles","theme","useTheme","root","fixedRoot","flexDirection","fixedTab","flex","scrollableContainer","paddingHorizontal","spacing","Tabs","forwardRef","props","ref","children","initialIndex","disableIndicator","keyboardDismissMode","keyboardShouldPersistTaps","onChange","scrollable","style","variant","UNSTABLE_sharedIndex","fallbackSharedIndex","useSyncAnimatedValue","initialValue","sharedIndex","setTab","newIndex","animatedValue","setValue","useImperativeHandle","styles","coordinates","updateCoordinate","useTabCoordinates","indexStore","useIndexStore","isReadyToRenderIndicator","length","tabElements","React","Children","map","child","index","onLayout","event","x","width","nativeEvent","layout","onMouseDown","e","preventDefault","onPress","tabElement","cloneElement","enableIndicator","undefined","tabIndicator","css"],"sources":["Tabs.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef, useImperativeHandle } from 'react';\nimport type { GestureResponderEvent, LayoutChangeEvent } from 'react-native';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport { useSyncAnimatedValue } from '../hooks';\nimport type TabsProps from './TabsProps';\nimport type { TabsInstance } from './types';\nimport TabIndicator from './TabIndicator';\nimport ScrollableTabsView from './ScrollableTabsView';\nimport IndexAwareTab from './IndexAwareTab';\nimport useTabCoordinates from './useTabCoordinates';\nimport useIndexStore from './useIndexStore';\nimport InternalContext from './InternalContext';\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 Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {\n    const {\n        children,\n        initialIndex = 0,\n        disableIndicator = false,\n        keyboardDismissMode = 'none',\n        keyboardShouldPersistTaps = 'never',\n        onChange,\n        scrollable = false,\n        style,\n        variant = 'primary',\n        UNSTABLE_sharedIndex,\n    } = props;\n\n    const fallbackSharedIndex = useSyncAnimatedValue({ initialValue: initialIndex });\n\n    const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;\n\n    const setTab = (newIndex: number) => {\n        sharedIndex.animatedValue.setValue(newIndex);\n    };\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            setTab,\n        }),\n        [sharedIndex],\n    );\n\n    const styles = useStyles();\n\n    const { coordinates, updateCoordinate } = useTabCoordinates(children);\n\n    const indexStore = useIndexStore(sharedIndex);\n\n    const isReadyToRenderIndicator = coordinates.length > 0;\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            setTab(index);\n\n            onChange?.(index);\n            // @ts-ignore\n            child.props.onPress?.();\n        };\n\n        // @ts-ignore\n        const tabElement = cloneElement(child, {\n            enableIndicator: !disableIndicator && !isReadyToRenderIndicator,\n            onLayout,\n            onPress,\n            onMouseDown,\n            variant,\n            style: scrollable ? undefined : styles.fixedTab,\n        });\n\n        return (\n            <IndexAwareTab\n                children={tabElement}\n                index={index}\n            />\n        );\n    });\n\n    const tabIndicator = isReadyToRenderIndicator ? (\n        <TabIndicator\n            coordinates={coordinates}\n            disabled={disableIndicator}\n            initialIndex={sharedIndex.initialValue}\n            scrollable={scrollable}\n        />\n    ) : null;\n\n    return (\n        <InternalContext.Provider value={{ indexStore }}>\n            <View\n                style={css([\n                    styles.root,\n                    scrollable ? undefined : styles.fixedRoot,\n                    style,\n                ])}\n            >\n                {scrollable ? (\n                    <ScrollableTabsView\n                        automaticallyAdjustContentInsets={false}\n                        bounces={false}\n                        contentContainerStyle={styles.scrollableContainer}\n                        coordinates={coordinates}\n                        directionalLockEnabled={true}\n                        horizontal={true}\n                        scrollsToTop={false}\n                        showsHorizontalScrollIndicator={false}\n                        showsVerticalScrollIndicator={false}\n                        keyboardDismissMode={keyboardDismissMode}\n                        keyboardShouldPersistTaps={keyboardShouldPersistTaps}\n                    >\n                        {tabElements}\n                        {tabIndicator}\n                    </ScrollableTabsView>\n                ) : (\n                    <React.Fragment>\n                        {tabElements}\n                        {tabIndicator}\n                    </React.Fragment>\n                )}\n            </View>\n        </InternalContext.Provider>\n    );\n});\n\nexport default Tabs;\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["TabsProps.ts"],"sourcesContent":["import type { ReactNode, Ref } from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { SharedValue } from 'react-native-reanimated';\nimport type { TabVariant } from '../Tab';\nimport type { OverridableComponentProps } from '../types';\n\nexport type KeyboardDismissMode =\n    'none'\n    | 'on-drag'\n    | 'interactive'; // ios only\n\nexport type KeyboardShouldPersistTaps =\n    'never'\n    | boolean\n    | 'always'\n    | 'handled'; // app only\n\nexport interface TabsInstance {\n    /**\n     * Get current tab index.\n     */\n    getCurrentIndex: () => number;\n\n    /**\n     * Function to scroll to a specific tab. Invalid index is ignored.\n     * @param index\n     */\n    setTab: (index: number) => void;\n}\n\nexport default interface TabsProps extends OverridableComponentProps<ViewProps, {\n    ref?: Ref<TabsInstance>;\n\n    /**\n     * Collection of Tab components.\n     */\n    children: ReactNode;\n\n    /**\n     * If `true`, the indicator is disabled.\n     * @default false\n     */\n    disableIndicator?: boolean;\n\n    /**\n     * Index of initial tab that should be selected.\n     * @default 0\n     */\n    initialIndex?: number;\n\n    /**\n     * keyboard dismissing condition of dragging.\n     * @default 'none'\n     */\n    keyboardDismissMode?: KeyboardDismissMode,\n\n    /**\n     * keyboard persisting condition of tapping.\n     * @default 'never'\n     */\n    keyboardShouldPersistTaps?: KeyboardShouldPersistTaps,\n\n    /**\n     * Callback fired when a tab is selected.\n     */\n    onChange?: (newIndex: number) => void;\n\n    /**\n     * If `true`, the component will be able to scroll.\n     * @default false\n     */\n    scrollable?: boolean;\n\n    /**\n     * Unstable API.\n     */\n    UNSTABLE_sharedIndex?: SharedValue<number>;\n\n    /**\n     * The variant to use.\n     * @default 'primary'\n     */\n    variant?: TabVariant;\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["TabsProps.ts"],"sourcesContent":["import type { ReactNode, Ref } from 'react';\nimport type { Animated, ViewProps } from 'react-native';\nimport type { TabVariant } from '../Tab';\nimport type { OverridableComponentProps, SyncAnimatedValue } from '../types';\nimport type { KeyboardDismissMode, KeyboardShouldPersistTaps, TabsInstance } from './types';\n\nexport default interface TabsProps extends OverridableComponentProps<ViewProps, {\n    ref?: Ref<TabsInstance>;\n\n    /**\n     * Collection of Tab components.\n     */\n    children: ReactNode;\n\n    /**\n     * If `true`, the indicator is disabled.\n     * @default false\n     */\n    disableIndicator?: boolean;\n\n    /**\n     * Index of initial tab that should be selected.\n     * @default 0\n     */\n    initialIndex?: number;\n\n    /**\n     * keyboard dismissing condition of dragging.\n     * @default 'none'\n     */\n    keyboardDismissMode?: KeyboardDismissMode,\n\n    /**\n     * keyboard persisting condition of tapping.\n     * @default 'never'\n     */\n    keyboardShouldPersistTaps?: KeyboardShouldPersistTaps,\n\n    /**\n     * Callback fired when a tab is selected.\n     */\n    onChange?: (newIndex: number) => void;\n\n    /**\n     * If `true`, the component will be able to scroll.\n     * @default false\n     */\n    scrollable?: boolean;\n\n    /**\n     * Unstable API.\n     */\n    UNSTABLE_sharedIndex?: SyncAnimatedValue;\n\n    /**\n     * The variant to use.\n     * @default 'primary'\n     */\n    variant?: TabVariant;\n}> {}\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './Tabs';\nexport type { default as TabsProps, TabsInstance } from './TabsProps';\n"],"mappings":";;;;;;;;;;;;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './Tabs';\nexport type { default as TabsProps } from './TabsProps';\nexport type { TabsInstance } from './types';\n"],"mappings":";;;;;;;;;;;;AAAA"}

package/build/commonjs/Tabs/types.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["export type KeyboardDismissMode =\n    'none'\n    | 'on-drag'\n    | 'interactive'; // ios only\n\nexport type KeyboardShouldPersistTaps =\n    'never'\n    | boolean\n    | 'always'\n    | 'handled'; // app only\n\nexport interface TabsInstance {\n    /**\n     * Function to scroll to a specific tab. Invalid index is ignored.\n     * @param index\n     */\n    setTab: (index: number) => void;\n}\n"],"mappings":""}

package/build/commonjs/Tabs/useIndexStore.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useIndexStore;
+
+var _react = require("react");
+
+var _store = require("../store");
+
+function useIndexStore(value) {
+  const {
+    animatedValue,
+    initialValue
+  } = value;
+  const store = (0, _react.useRef)(new _store.SimpleStore(initialValue)).current;
+  (0, _react.useEffect)(() => {
+    const id = animatedValue.addListener(newIndex => {
+      store.dispatch(newIndex.value);
+    });
+    return () => {
+      animatedValue.removeListener(id);
+    };
+  }, [animatedValue]);
+  (0, _react.useEffect)(() => {
+    return () => {
+      store.removeAllListeners();
+    };
+  }, [store]);
+  return store;
+}
+
+;
+//# sourceMappingURL=useIndexStore.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useIndexStore","value","animatedValue","initialValue","store","useRef","SimpleStore","current","useEffect","id","addListener","newIndex","dispatch","removeListener","removeAllListeners"],"sources":["useIndexStore.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport type { MonoStore } from '../store';\nimport { SimpleStore } from '../store';\nimport type { SyncAnimatedValue } from '../types';\n\nexport default function useIndexStore(value: SyncAnimatedValue): MonoStore<number> {\n    const {\n        animatedValue,\n        initialValue,\n    } = value;\n\n    const store = useRef(new SimpleStore(initialValue)).current;\n\n    useEffect(() => {\n        const id = animatedValue.addListener((newIndex) => {\n            store.dispatch(newIndex.value);\n        });\n\n        return () => {\n            animatedValue.removeListener(id);\n        };\n    }, [animatedValue]);\n\n    useEffect(() => {\n        return () => {\n            store.removeAllListeners();\n        };\n    }, [store]);\n\n    return store;\n};\n"],"mappings":";;;;;;;AAAA;;AAEA;;AAGe,SAASA,aAAT,CAAuBC,KAAvB,EAAoE;EAC/E,MAAM;IACFC,aADE;IAEFC;EAFE,IAGFF,KAHJ;EAKA,MAAMG,KAAK,GAAG,IAAAC,aAAA,EAAO,IAAIC,kBAAJ,CAAgBH,YAAhB,CAAP,EAAsCI,OAApD;EAEA,IAAAC,gBAAA,EAAU,MAAM;IACZ,MAAMC,EAAE,GAAGP,aAAa,CAACQ,WAAd,CAA2BC,QAAD,IAAc;MAC/CP,KAAK,CAACQ,QAAN,CAAeD,QAAQ,CAACV,KAAxB;IACH,CAFU,CAAX;IAIA,OAAO,MAAM;MACTC,aAAa,CAACW,cAAd,CAA6BJ,EAA7B;IACH,CAFD;EAGH,CARD,EAQG,CAACP,aAAD,CARH;EAUA,IAAAM,gBAAA,EAAU,MAAM;IACZ,OAAO,MAAM;MACTJ,KAAK,CAACU,kBAAN;IACH,CAFD;EAGH,CAJD,EAIG,CAACV,KAAD,CAJH;EAMA,OAAOA,KAAP;AACH;;AAAA"}

package/build/commonjs/Tabs/useScrollViewReaction.js

@@ -7,13 +7,16 @@ exports.default = useScrollViewReaction;
 
 var _react = require("react");
 
-var _reactNative = require("react-native");
+var _InternalContext = _interopRequireDefault(require("./InternalContext"));
 
-var _reactNativeReanimated = require("react-native-reanimated");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function useScrollViewReaction(sharedIndex, coordinates) {
-  const scrollViewRef = (0, _reactNativeReanimated.useAnimatedRef)();
+function useScrollViewReaction(coordinates) {
+  const scrollViewRef = (0, _react.useRef)(null);
   const lastScrolledXRef = (0, _react.useRef)(NaN);
+  const {
+    indexStore
+  } = (0, _react.useContext)(_InternalContext.default);
 
   const scrollToX = x => {
     if (Number.isFinite(x)) {
@@ -24,37 +27,30 @@ function useScrollViewReaction(sharedIndex, coordinates) {
         y: 0,
         animated: true
       });
-      didScrollToX(x);
+      lastScrolledXRef.current = x;
     }
   };
 
-  const didScrollToX = x => {
-    lastScrolledXRef.current = x;
-  };
-
   const onLayout = (0, _react.useCallback)(() => {
     scrollToX(lastScrolledXRef.current);
   }, []);
-  (0, _reactNativeReanimated.useAnimatedReaction)(() => {
-    const prevIndex = sharedIndex.value - 1;
-    const prevCoordinate = coordinates[prevIndex];
+  (0, _react.useEffect)(() => {
+    const computeNextScrollX = index => {
+      const prevIndex = index - 1;
+      const prevCoordinate = coordinates[prevIndex];
+
+      if (prevCoordinate) {
+        const prevTabWidth = prevCoordinate.x2 - prevCoordinate.x1;
+        return Math.floor(prevCoordinate.x1 + prevTabWidth / 2);
+      }
 
-    if (prevCoordinate) {
-      const prevTabWidth = prevCoordinate.x2 - prevCoordinate.x1;
-      return Math.floor(prevCoordinate.x1 + prevTabWidth / 2);
-    }
+      return 0;
+    };
 
-    return 0;
-  }, (x, prevX) => {
-    if (x !== prevX) {
-      if (_reactNative.Platform.OS === 'web') {
-        (0, _reactNativeReanimated.runOnJS)(scrollToX)(x);
-      } else {
-        (0, _reactNativeReanimated.scrollTo)(scrollViewRef, x, 0, true);
-        (0, _reactNativeReanimated.runOnJS)(didScrollToX)(x);
-      }
-    }
-  }, [coordinates]);
+    return indexStore.subscribe(currentIndex => {
+      scrollToX(computeNextScrollX(currentIndex));
+    });
+  }, [indexStore, coordinates]);
   return {
     scrollViewRef,
     onLayout

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

@@ -1 +1 @@
-{"version":3,"names":["useScrollViewReaction","sharedIndex","coordinates","scrollViewRef","useAnimatedRef","lastScrolledXRef","useRef","NaN","scrollToX","x","Number","isFinite","current","scrollTo","y","animated","didScrollToX","onLayout","useCallback","useAnimatedReaction","prevIndex","value","prevCoordinate","prevTabWidth","x2","x1","Math","floor","prevX","Platform","OS","runOnJS"],"sources":["useScrollViewReaction.ts"],"sourcesContent":["import type { MutableRefObject } from 'react';\nimport { useCallback, useRef } from 'react';\nimport type { ScrollView, ViewProps } from 'react-native';\nimport { Platform } from 'react-native';\nimport { runOnJS, scrollTo, SharedValue, useAnimatedReaction, useAnimatedRef } from 'react-native-reanimated';\nimport type TabCoordinate from './TabCoordinate';\n\nexport interface UseScrollViewReaction {\n    scrollViewRef: MutableRefObject<ScrollView | null>;\n    onLayout: ViewProps['onLayout'];\n}\n\nexport default function useScrollViewReaction(\n    sharedIndex: SharedValue<number>,\n    coordinates: TabCoordinate[],\n): UseScrollViewReaction {\n    const scrollViewRef = useAnimatedRef<ScrollView>();\n\n    const lastScrolledXRef = useRef<number>(NaN);\n\n    const scrollToX = (x: number) => {\n        if (Number.isFinite(x)) {\n            scrollViewRef.current?.scrollTo({ x, y: 0, animated: true });\n\n            didScrollToX(x);\n        }\n    };\n\n    const didScrollToX = (x: number) => {\n        lastScrolledXRef.current = x;\n    };\n\n    const onLayout = useCallback(() => {\n        scrollToX(lastScrolledXRef.current);\n    }, []);\n\n    useAnimatedReaction(\n        () => {\n            const prevIndex = sharedIndex.value - 1;\n            const prevCoordinate = coordinates[prevIndex];\n\n            if (prevCoordinate) {\n                const prevTabWidth = prevCoordinate.x2 - prevCoordinate.x1;\n                return Math.floor(prevCoordinate.x1 + prevTabWidth / 2);\n            }\n\n            return 0;\n        },\n        (x, prevX) => {\n            if (x !== prevX) {\n                if (Platform.OS === 'web') {\n                    runOnJS(scrollToX)(x);\n                } else {\n                    scrollTo(scrollViewRef, x, 0, true);\n                    runOnJS(didScrollToX)(x);\n                }\n            }\n        },\n        [coordinates],\n    );\n\n    return { scrollViewRef, onLayout };\n};\n"],"mappings":";;;;;;;AACA;;AAEA;;AACA;;AAQe,SAASA,qBAAT,CACXC,WADW,EAEXC,WAFW,EAGU;EACrB,MAAMC,aAAa,GAAG,IAAAC,qCAAA,GAAtB;EAEA,MAAMC,gBAAgB,GAAG,IAAAC,aAAA,EAAeC,GAAf,CAAzB;;EAEA,MAAMC,SAAS,GAAIC,CAAD,IAAe;IAC7B,IAAIC,MAAM,CAACC,QAAP,CAAgBF,CAAhB,CAAJ,EAAwB;MAAA;;MACpB,yBAAAN,aAAa,CAACS,OAAd,gFAAuBC,QAAvB,CAAgC;QAAEJ,CAAF;QAAKK,CAAC,EAAE,CAAR;QAAWC,QAAQ,EAAE;MAArB,CAAhC;MAEAC,YAAY,CAACP,CAAD,CAAZ;IACH;EACJ,CAND;;EAQA,MAAMO,YAAY,GAAIP,CAAD,IAAe;IAChCJ,gBAAgB,CAACO,OAAjB,GAA2BH,CAA3B;EACH,CAFD;;EAIA,MAAMQ,QAAQ,GAAG,IAAAC,kBAAA,EAAY,MAAM;IAC/BV,SAAS,CAACH,gBAAgB,CAACO,OAAlB,CAAT;EACH,CAFgB,EAEd,EAFc,CAAjB;EAIA,IAAAO,0CAAA,EACI,MAAM;IACF,MAAMC,SAAS,GAAGnB,WAAW,CAACoB,KAAZ,GAAoB,CAAtC;IACA,MAAMC,cAAc,GAAGpB,WAAW,CAACkB,SAAD,CAAlC;;IAEA,IAAIE,cAAJ,EAAoB;MAChB,MAAMC,YAAY,GAAGD,cAAc,CAACE,EAAf,GAAoBF,cAAc,CAACG,EAAxD;MACA,OAAOC,IAAI,CAACC,KAAL,CAAWL,cAAc,CAACG,EAAf,GAAoBF,YAAY,GAAG,CAA9C,CAAP;IACH;;IAED,OAAO,CAAP;EACH,CAXL,EAYI,CAACd,CAAD,EAAImB,KAAJ,KAAc;IACV,IAAInB,CAAC,KAAKmB,KAAV,EAAiB;MACb,IAAIC,qBAAA,CAASC,EAAT,KAAgB,KAApB,EAA2B;QACvB,IAAAC,8BAAA,EAAQvB,SAAR,EAAmBC,CAAnB;MACH,CAFD,MAEO;QACH,IAAAI,+BAAA,EAASV,aAAT,EAAwBM,CAAxB,EAA2B,CAA3B,EAA8B,IAA9B;QACA,IAAAsB,8BAAA,EAAQf,YAAR,EAAsBP,CAAtB;MACH;IACJ;EACJ,CArBL,EAsBI,CAACP,WAAD,CAtBJ;EAyBA,OAAO;IAAEC,aAAF;IAAiBc;EAAjB,CAAP;AACH;;AAAA"}
+{"version":3,"names":["useScrollViewReaction","coordinates","scrollViewRef","useRef","lastScrolledXRef","NaN","indexStore","useContext","InternalContext","scrollToX","x","Number","isFinite","current","scrollTo","y","animated","onLayout","useCallback","useEffect","computeNextScrollX","index","prevIndex","prevCoordinate","prevTabWidth","x2","x1","Math","floor","subscribe","currentIndex"],"sources":["useScrollViewReaction.ts"],"sourcesContent":["import type { MutableRefObject } from 'react';\nimport { useCallback, useContext, useEffect, useRef } from 'react';\nimport type { ScrollView, ViewProps } from 'react-native';\nimport type TabCoordinate from './TabCoordinate';\nimport InternalContext from './InternalContext';\n\nexport interface UseScrollViewReaction {\n    scrollViewRef: MutableRefObject<ScrollView | null>;\n    onLayout: ViewProps['onLayout'];\n}\n\nexport default function useScrollViewReaction(\n    coordinates: TabCoordinate[],\n): UseScrollViewReaction {\n    const scrollViewRef = useRef<ScrollView | null>(null);\n\n    const lastScrolledXRef = useRef<number>(NaN);\n\n    const { indexStore } = useContext(InternalContext);\n\n    const scrollToX = (x: number) => {\n        if (Number.isFinite(x)) {\n            scrollViewRef.current?.scrollTo({ x, y: 0, animated: true });\n\n            lastScrolledXRef.current = x;\n        }\n    };\n\n    const onLayout = useCallback(() => {\n        scrollToX(lastScrolledXRef.current);\n    }, []);\n\n    useEffect(() => {\n        const computeNextScrollX = (index: number) => {\n            const prevIndex = index - 1;\n            const prevCoordinate = coordinates[prevIndex];\n\n            if (prevCoordinate) {\n                const prevTabWidth = prevCoordinate.x2 - prevCoordinate.x1;\n                return Math.floor(prevCoordinate.x1 + prevTabWidth / 2);\n            }\n\n            return 0;\n        };\n\n        return indexStore.subscribe(currentIndex => {\n            scrollToX(computeNextScrollX(currentIndex));\n        });\n    }, [indexStore, coordinates]);\n\n    return { scrollViewRef, onLayout };\n};\n"],"mappings":";;;;;;;AACA;;AAGA;;;;AAOe,SAASA,qBAAT,CACXC,WADW,EAEU;EACrB,MAAMC,aAAa,GAAG,IAAAC,aAAA,EAA0B,IAA1B,CAAtB;EAEA,MAAMC,gBAAgB,GAAG,IAAAD,aAAA,EAAeE,GAAf,CAAzB;EAEA,MAAM;IAAEC;EAAF,IAAiB,IAAAC,iBAAA,EAAWC,wBAAX,CAAvB;;EAEA,MAAMC,SAAS,GAAIC,CAAD,IAAe;IAC7B,IAAIC,MAAM,CAACC,QAAP,CAAgBF,CAAhB,CAAJ,EAAwB;MAAA;;MACpB,yBAAAR,aAAa,CAACW,OAAd,gFAAuBC,QAAvB,CAAgC;QAAEJ,CAAF;QAAKK,CAAC,EAAE,CAAR;QAAWC,QAAQ,EAAE;MAArB,CAAhC;MAEAZ,gBAAgB,CAACS,OAAjB,GAA2BH,CAA3B;IACH;EACJ,CAND;;EAQA,MAAMO,QAAQ,GAAG,IAAAC,kBAAA,EAAY,MAAM;IAC/BT,SAAS,CAACL,gBAAgB,CAACS,OAAlB,CAAT;EACH,CAFgB,EAEd,EAFc,CAAjB;EAIA,IAAAM,gBAAA,EAAU,MAAM;IACZ,MAAMC,kBAAkB,GAAIC,KAAD,IAAmB;MAC1C,MAAMC,SAAS,GAAGD,KAAK,GAAG,CAA1B;MACA,MAAME,cAAc,GAAGtB,WAAW,CAACqB,SAAD,CAAlC;;MAEA,IAAIC,cAAJ,EAAoB;QAChB,MAAMC,YAAY,GAAGD,cAAc,CAACE,EAAf,GAAoBF,cAAc,CAACG,EAAxD;QACA,OAAOC,IAAI,CAACC,KAAL,CAAWL,cAAc,CAACG,EAAf,GAAoBF,YAAY,GAAG,CAA9C,CAAP;MACH;;MAED,OAAO,CAAP;IACH,CAVD;;IAYA,OAAOlB,UAAU,CAACuB,SAAX,CAAqBC,YAAY,IAAI;MACxCrB,SAAS,CAACW,kBAAkB,CAACU,YAAD,CAAnB,CAAT;IACH,CAFM,CAAP;EAGH,CAhBD,EAgBG,CAACxB,UAAD,EAAaL,WAAb,CAhBH;EAkBA,OAAO;IAAEC,aAAF;IAAiBe;EAAjB,CAAP;AACH;;AAAA"}

package/build/commonjs/hooks/index.js

@@ -33,6 +33,12 @@ Object.defineProperty(exports, "useFadeInAppBar", {
     return _useFadeInAppBar.default;
   }
 });
+Object.defineProperty(exports, "useSyncAnimatedValue", {
+  enumerable: true,
+  get: function () {
+    return _useSyncAnimatedValue.default;
+  }
+});
 Object.defineProperty(exports, "useThrottle", {
   enumerable: true,
   get: function () {
@@ -56,6 +62,8 @@ var _useElevationStyle = _interopRequireDefault(require("./useElevationStyle"));
 
 var _useFadeInAppBar = _interopRequireDefault(require("./useFadeInAppBar"));
 
+var _useSyncAnimatedValue = _interopRequireDefault(require("./useSyncAnimatedValue"));
+
 var _useThrottle = _interopRequireDefault(require("./useThrottle"));
 
 var _useValidWindowDimensions = _interopRequireDefault(require("./useValidWindowDimensions"));

package/build/commonjs/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default as useBreakpointUp } from './useBreakpointUp';\nexport { default as useCollapsibleAppBar } from './useCollapsibleAppBar';\nexport { default as useContentContainerStyle } from './useContentContainerStyle';\nexport { default as useElevationStyle } from './useElevationStyle';\nexport { default as useFadeInAppBar } from './useFadeInAppBar';\nexport { default as useThrottle } from './useThrottle';\nexport { default as useValidWindowDimensions } from './useValidWindowDimensions';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default as useBreakpointUp } from './useBreakpointUp';\nexport { default as useCollapsibleAppBar } from './useCollapsibleAppBar';\nexport { default as useContentContainerStyle } from './useContentContainerStyle';\nexport { default as useElevationStyle } from './useElevationStyle';\nexport { default as useFadeInAppBar } from './useFadeInAppBar';\nexport { default as useSyncAnimatedValue } from './useSyncAnimatedValue';\nexport { default as useThrottle } from './useThrottle';\nexport { default as useValidWindowDimensions } from './useValidWindowDimensions';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA"}