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

package/build/module/Tabs/TabIndicator.js

@@ -4,14 +4,19 @@ import React from 'react';
 import Animated, { Easing, useAnimatedStyle, withTiming } from 'react-native-reanimated';
 import { useTheme } from '../styles';
 import { defaultCoordinate } from './TabCoordinate';
+const INDICATOR_WIDTH = 10;
+const INDICATOR_HEIGHT = 4;
+const SCROLLABLE_TABS_INSET = 12 * 2;
 
 const useStyles = function () {
   const theme = useTheme();
   return {
     root: {
       backgroundColor: theme.palette.secondary.main,
+      left: 0,
       bottom: 0,
-      height: 4,
+      width: INDICATOR_WIDTH,
+      height: INDICATOR_HEIGHT,
       position: 'absolute'
     },
     disabled: {
@@ -21,7 +26,7 @@ const useStyles = function () {
 };
 
 const ANIMATION_CONFIG = {
-  duration: 200,
+  duration: 300,
   easing: Easing.out(Easing.exp)
 };
 export default function TabIndicator(props) {
@@ -41,13 +46,15 @@ export default function TabIndicator(props) {
       x2
     } = coordinates[index] ?? defaultCoordinate;
     const tabWidth = x2 - x1;
-    const singleInset = scrollable ? 12 : 0;
-    const totalInset = singleInset * 2;
-    const nextLeft = x1 + singleInset;
-    const nextWidth = tabWidth - totalInset;
+    const translateX = x1 + (tabWidth - INDICATOR_WIDTH) / 2;
+    const inset = scrollable ? SCROLLABLE_TABS_INSET : 0;
+    const scaleX = (tabWidth - inset) / INDICATOR_WIDTH;
     return {
-      left: withTiming(nextLeft, ANIMATION_CONFIG),
-      width: withTiming(nextWidth, ANIMATION_CONFIG)
+      transform: [{
+        translateX: withTiming(translateX, ANIMATION_CONFIG)
+      }, {
+        scaleX: withTiming(scaleX, ANIMATION_CONFIG)
+      }]
     };
   }, [coordinates, scrollable]);
   return /*#__PURE__*/React.createElement(Animated.View, _extends({

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

@@ -1 +1 @@
-{"version":3,"names":["React","Animated","Easing","useAnimatedStyle","withTiming","useTheme","defaultCoordinate","useStyles","theme","root","backgroundColor","palette","secondary","main","bottom","height","position","disabled","ANIMATION_CONFIG","duration","easing","out","exp","TabIndicator","props","coordinates","scrollable","sharedIndex","style","otherProps","styles","animatedStyle","index","value","x1","x2","tabWidth","singleInset","totalInset","nextLeft","nextWidth","left","width","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 useStyles: UseStyles<TabIndicatorStyles> = function (): TabIndicatorStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            backgroundColor: theme.palette.secondary.main,\n            bottom: 0,\n            height: 4,\n            position: 'absolute',\n        },\n        disabled: {\n            height: 0,\n        },\n    };\n};\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = {\n    duration: 200,\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 singleInset = scrollable ? 12 : 0;\n        const totalInset = singleInset * 2;\n\n        const nextLeft = x1 + singleInset;\n        const nextWidth = tabWidth - totalInset;\n\n        return {\n            left: withTiming(nextLeft, ANIMATION_CONFIG),\n            width: withTiming(nextWidth, ANIMATION_CONFIG),\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,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,QAAP,IAAmBC,MAAnB,EAA2BC,gBAA3B,EAA6CC,UAA7C,QAA+D,yBAA/D;AAEA,SAASC,QAAT,QAAyB,WAAzB;AAEA,SAASC,iBAAT,QAAkC,iBAAlC;;AAIA,MAAMC,SAAwC,GAAG,YAAgC;EAC7E,MAAMC,KAAK,GAAGH,QAAQ,EAAtB;EAEA,OAAO;IACHI,IAAI,EAAE;MACFC,eAAe,EAAEF,KAAK,CAACG,OAAN,CAAcC,SAAd,CAAwBC,IADvC;MAEFC,MAAM,EAAE,CAFN;MAGFC,MAAM,EAAE,CAHN;MAIFC,QAAQ,EAAE;IAJR,CADH;IAOHC,QAAQ,EAAE;MACNF,MAAM,EAAE;IADF;EAPP,CAAP;AAWH,CAdD;;AAgBA,MAAMG,gBAA4C,GAAG;EACjDC,QAAQ,EAAE,GADuC;EAEjDC,MAAM,EAAElB,MAAM,CAACmB,GAAP,CAAWnB,MAAM,CAACoB,GAAlB;AAFyC,CAArD;AAKA,eAAe,SAASC,YAAT,CAAsBC,KAAtB,EAAgD;EAC3D,MAAM;IACFC,WADE;IAEFR,QAFE;IAGFS,UAHE;IAIFC,WAJE;IAKFC,KALE;IAMF,GAAGC;EAND,IAOFL,KAPJ;EASA,MAAMM,MAAM,GAAGvB,SAAS,EAAxB;EAEA,MAAMwB,aAAa,GAAG5B,gBAAgB,CAAC,MAAM;IACzC,MAAM6B,KAAK,GAAGL,WAAW,CAACM,KAA1B;IAEA,MAAM;MAAEC,EAAF;MAAMC;IAAN,IAAaV,WAAW,CAACO,KAAD,CAAX,IAAsB1B,iBAAzC;IAEA,MAAM8B,QAAQ,GAAGD,EAAE,GAAGD,EAAtB;IAEA,MAAMG,WAAW,GAAGX,UAAU,GAAG,EAAH,GAAQ,CAAtC;IACA,MAAMY,UAAU,GAAGD,WAAW,GAAG,CAAjC;IAEA,MAAME,QAAQ,GAAGL,EAAE,GAAGG,WAAtB;IACA,MAAMG,SAAS,GAAGJ,QAAQ,GAAGE,UAA7B;IAEA,OAAO;MACHG,IAAI,EAAErC,UAAU,CAACmC,QAAD,EAAWrB,gBAAX,CADb;MAEHwB,KAAK,EAAEtC,UAAU,CAACoC,SAAD,EAAYtB,gBAAZ;IAFd,CAAP;EAIH,CAjBqC,EAiBnC,CAACO,WAAD,EAAcC,UAAd,CAjBmC,CAAtC;EAmBA,oBACI,oBAAC,QAAD,CAAU,IAAV;IACI,KAAK,EAAE,CACHI,MAAM,CAACrB,IADJ,EAEHQ,QAAQ,GAAGa,MAAM,CAACb,QAAV,GAAqB0B,SAF1B,EAGHZ,aAHG,EAIHH,KAJG;EADX,GAOQC,UAPR,EADJ;AAWH;AAAA"}
+{"version":3,"names":["React","Animated","Easing","useAnimatedStyle","withTiming","useTheme","defaultCoordinate","INDICATOR_WIDTH","INDICATOR_HEIGHT","SCROLLABLE_TABS_INSET","useStyles","theme","root","backgroundColor","palette","secondary","main","left","bottom","width","height","position","disabled","ANIMATION_CONFIG","duration","easing","out","exp","TabIndicator","props","coordinates","scrollable","sharedIndex","style","otherProps","styles","animatedStyle","index","value","x1","x2","tabWidth","translateX","inset","scaleX","transform","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,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,QAAP,IAAmBC,MAAnB,EAA2BC,gBAA3B,EAA6CC,UAA7C,QAA+D,yBAA/D;AAEA,SAASC,QAAT,QAAyB,WAAzB;AAEA,SAASC,iBAAT,QAAkC,iBAAlC;AAIA,MAAMC,eAAe,GAAG,EAAxB;AACA,MAAMC,gBAAgB,GAAG,CAAzB;AAEA,MAAMC,qBAAqB,GAAG,KAAK,CAAnC;;AAEA,MAAMC,SAAwC,GAAG,YAAgC;EAC7E,MAAMC,KAAK,GAAGN,QAAQ,EAAtB;EAEA,OAAO;IACHO,IAAI,EAAE;MACFC,eAAe,EAAEF,KAAK,CAACG,OAAN,CAAcC,SAAd,CAAwBC,IADvC;MAEFC,IAAI,EAAE,CAFJ;MAGFC,MAAM,EAAE,CAHN;MAIFC,KAAK,EAAEZ,eAJL;MAKFa,MAAM,EAAEZ,gBALN;MAMFa,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,EAAEvB,MAAM,CAACwB,GAAP,CAAWxB,MAAM,CAACyB,GAAlB;AAFyC,CAArD;AAKA,eAAe,SAASC,YAAT,CAAsBC,KAAtB,EAAgD;EAC3D,MAAM;IACFC,WADE;IAEFR,QAFE;IAGFS,UAHE;IAIFC,WAJE;IAKFC,KALE;IAMF,GAAGC;EAND,IAOFL,KAPJ;EASA,MAAMM,MAAM,GAAGzB,SAAS,EAAxB;EAEA,MAAM0B,aAAa,GAAGjC,gBAAgB,CAAC,MAAM;IACzC,MAAMkC,KAAK,GAAGL,WAAW,CAACM,KAA1B;IAEA,MAAM;MAAEC,EAAF;MAAMC;IAAN,IAAaV,WAAW,CAACO,KAAD,CAAX,IAAsB/B,iBAAzC;IAEA,MAAMmC,QAAQ,GAAGD,EAAE,GAAGD,EAAtB;IAEA,MAAMG,UAAU,GAAGH,EAAE,GAAG,CAACE,QAAQ,GAAGlC,eAAZ,IAA+B,CAAvD;IAEA,MAAMoC,KAAK,GAAGZ,UAAU,GAAGtB,qBAAH,GAA2B,CAAnD;IACA,MAAMmC,MAAM,GAAG,CAACH,QAAQ,GAAGE,KAAZ,IAAqBpC,eAApC;IAEA,OAAO;MACHsC,SAAS,EAAE,CACP;QAAEH,UAAU,EAAEtC,UAAU,CAACsC,UAAD,EAAanB,gBAAb;MAAxB,CADO,EAEP;QAAEqB,MAAM,EAAExC,UAAU,CAACwC,MAAD,EAASrB,gBAAT;MAApB,CAFO;IADR,CAAP;EAMH,CAlBqC,EAkBnC,CAACO,WAAD,EAAcC,UAAd,CAlBmC,CAAtC;EAoBA,oBACI,oBAAC,QAAD,CAAU,IAAV;IACI,KAAK,EAAE,CACHI,MAAM,CAACvB,IADJ,EAEHU,QAAQ,GAAGa,MAAM,CAACb,QAAV,GAAqBwB,SAF1B,EAGHV,aAHG,EAIHH,KAJG;EADX,GAOQC,UAPR,EADJ;AAWH;AAAA"}

package/build/module/Tabs/Tabs.js

@@ -33,9 +33,11 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
     onChange,
     scrollable = false,
     style,
-    variant = 'primary'
+    variant = 'primary',
+    UNSTABLE_sharedIndex
   } = props;
-  const sharedIndex = useSharedValue(initialIndex);
+  const fallbackSharedIndex = useSharedValue(initialIndex);
+  const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;
 
   const getCurrentIndex = () => sharedIndex.value;
 
@@ -83,7 +85,7 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
 
 
     const tabElement = /*#__PURE__*/cloneElement(child, {
-      enableIndicator: !disableIndicator && isReadyToRenderIndicator,
+      enableIndicator: !disableIndicator && !isReadyToRenderIndicator,
       onLayout,
       onPress,
       onMouseDown,
@@ -96,12 +98,12 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
       sharedIndex: sharedIndex
     });
   });
-  const tabIndicator = /*#__PURE__*/React.createElement(TabIndicator, {
+  const tabIndicator = isReadyToRenderIndicator ? /*#__PURE__*/React.createElement(TabIndicator, {
     coordinates: coordinates,
     disabled: disableIndicator,
     scrollable: scrollable,
     sharedIndex: sharedIndex
-  });
+  }) : null;
   return /*#__PURE__*/React.createElement(View, {
     onLayout: onLayout,
     style: css([styles.root, scrollable ? undefined : styles.fixedRoot, style])

package/build/module/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cloneElement","forwardRef","useImperativeHandle","ScrollView","View","useSharedValue","css","useTheme","TabIndicator","IndexAwareTab","useTabCoordinates","useScrollViewReaction","useStyles","theme","root","fixedRoot","flexDirection","fixedTab","flex","scrollableContainer","paddingHorizontal","spacing","Tabs","props","ref","children","initialIndex","disableIndicator","keyboardDismissMode","keyboardShouldPersistTaps","onChange","scrollable","style","variant","sharedIndex","getCurrentIndex","value","setTab","newIndex","styles","coordinates","updateCoordinate","scrollViewRef","onLayout","isReadyToRenderIndicator","length","tabElements","Children","map","child","index","event","x","width","nativeEvent","layout","onMouseDown","e","preventDefault","onPress","tabElement","enableIndicator","undefined","tabIndicator"],"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    } = props;\n\n    const sharedIndex = useSharedValue<number>(initialIndex);\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 = (\n        <TabIndicator\n            coordinates={coordinates}\n            disabled={disableIndicator}\n            scrollable={scrollable}\n            sharedIndex={sharedIndex}\n        />\n    );\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":"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"}
+{"version":3,"names":["React","cloneElement","forwardRef","useImperativeHandle","ScrollView","View","useSharedValue","css","useTheme","TabIndicator","IndexAwareTab","useTabCoordinates","useScrollViewReaction","useStyles","theme","root","fixedRoot","flexDirection","fixedTab","flex","scrollableContainer","paddingHorizontal","spacing","Tabs","props","ref","children","initialIndex","disableIndicator","keyboardDismissMode","keyboardShouldPersistTaps","onChange","scrollable","style","variant","UNSTABLE_sharedIndex","fallbackSharedIndex","sharedIndex","getCurrentIndex","value","setTab","newIndex","styles","coordinates","updateCoordinate","scrollViewRef","onLayout","isReadyToRenderIndicator","length","tabElements","Children","map","child","index","event","x","width","nativeEvent","layout","onMouseDown","e","preventDefault","onPress","tabElement","enableIndicator","undefined","tabIndicator"],"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":"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"}

package/build/module/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 { 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     * 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 { 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":""}

package/build/module/Tabs/useScrollViewReaction.js

@@ -1,24 +1,29 @@
 import { useCallback, useRef } from 'react';
-import { runOnJS, useAnimatedReaction } from 'react-native-reanimated';
+import { Platform } from 'react-native';
+import { runOnJS, scrollTo, useAnimatedReaction, useAnimatedRef } from 'react-native-reanimated';
 export default function useScrollViewReaction(sharedIndex, coordinates) {
-  const scrollViewRef = useRef(null);
-  const lastScrolledPositionRef = useRef(NaN);
+  const scrollViewRef = useAnimatedRef();
+  const lastScrolledXRef = useRef(NaN);
 
-  const scrollTo = scrollPosition => {
-    const scrollView = scrollViewRef.current;
+  const scrollToX = x => {
+    if (Number.isFinite(x)) {
+      var _scrollViewRef$curren;
 
-    if (scrollView && Number.isFinite(scrollPosition)) {
-      scrollView.scrollTo({
-        x: scrollPosition,
+      (_scrollViewRef$curren = scrollViewRef.current) === null || _scrollViewRef$curren === void 0 ? void 0 : _scrollViewRef$curren.scrollTo({
+        x,
         y: 0,
         animated: true
       });
-      lastScrolledPositionRef.current = scrollPosition;
+      didScrollToX(x);
     }
   };
 
+  const didScrollToX = x => {
+    lastScrolledXRef.current = x;
+  };
+
   const onLayout = useCallback(() => {
-    scrollTo(lastScrolledPositionRef.current);
+    scrollToX(lastScrolledXRef.current);
   }, []);
   useAnimatedReaction(() => {
     const prevIndex = sharedIndex.value - 1;
@@ -30,9 +35,14 @@ export default function useScrollViewReaction(sharedIndex, coordinates) {
     }
 
     return 0;
-  }, (scrollPosition, prevScrollPosition) => {
-    if (scrollPosition !== prevScrollPosition) {
-      runOnJS(scrollTo)(scrollPosition);
+  }, (x, prevX) => {
+    if (x !== prevX) {
+      if (Platform.OS === 'web') {
+        runOnJS(scrollToX)(x);
+      } else {
+        scrollTo(scrollViewRef, x, 0, true);
+        runOnJS(didScrollToX)(x);
+      }
     }
   }, [coordinates]);
   return {

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

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useRef","runOnJS","useAnimatedReaction","useScrollViewReaction","sharedIndex","coordinates","scrollViewRef","lastScrolledPositionRef","NaN","scrollTo","scrollPosition","scrollView","current","Number","isFinite","x","y","animated","onLayout","prevIndex","value","prevCoordinate","prevTabWidth","x2","x1","Math","floor","prevScrollPosition"],"sources":["useScrollViewReaction.ts"],"sourcesContent":["import type { MutableRefObject } from 'react';\nimport { useCallback, useRef } from 'react';\nimport type { ScrollView, ViewProps } from 'react-native';\nimport { runOnJS, SharedValue, useAnimatedReaction } 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 = useRef<ScrollView | null>(null);\n\n    const lastScrolledPositionRef = useRef<number>(NaN);\n\n    const scrollTo = (scrollPosition: number) => {\n        const scrollView = scrollViewRef.current;\n\n        if (scrollView && Number.isFinite(scrollPosition)) {\n            scrollView.scrollTo({ x: scrollPosition, y: 0, animated: true });\n\n            lastScrolledPositionRef.current = scrollPosition;\n        }\n    };\n\n    const onLayout = useCallback(() => {\n        scrollTo(lastScrolledPositionRef.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        (scrollPosition, prevScrollPosition) => {\n            if (scrollPosition !== prevScrollPosition) {\n                runOnJS(scrollTo)(scrollPosition);\n            }\n        },\n        [coordinates],\n    );\n\n    return { scrollViewRef, onLayout };\n};\n"],"mappings":"AACA,SAASA,WAAT,EAAsBC,MAAtB,QAAoC,OAApC;AAEA,SAASC,OAAT,EAA+BC,mBAA/B,QAA0D,yBAA1D;AAQA,eAAe,SAASC,qBAAT,CACXC,WADW,EAEXC,WAFW,EAGU;EACrB,MAAMC,aAAa,GAAGN,MAAM,CAAoB,IAApB,CAA5B;EAEA,MAAMO,uBAAuB,GAAGP,MAAM,CAASQ,GAAT,CAAtC;;EAEA,MAAMC,QAAQ,GAAIC,cAAD,IAA4B;IACzC,MAAMC,UAAU,GAAGL,aAAa,CAACM,OAAjC;;IAEA,IAAID,UAAU,IAAIE,MAAM,CAACC,QAAP,CAAgBJ,cAAhB,CAAlB,EAAmD;MAC/CC,UAAU,CAACF,QAAX,CAAoB;QAAEM,CAAC,EAAEL,cAAL;QAAqBM,CAAC,EAAE,CAAxB;QAA2BC,QAAQ,EAAE;MAArC,CAApB;MAEAV,uBAAuB,CAACK,OAAxB,GAAkCF,cAAlC;IACH;EACJ,CARD;;EAUA,MAAMQ,QAAQ,GAAGnB,WAAW,CAAC,MAAM;IAC/BU,QAAQ,CAACF,uBAAuB,CAACK,OAAzB,CAAR;EACH,CAF2B,EAEzB,EAFyB,CAA5B;EAIAV,mBAAmB,CACf,MAAM;IACF,MAAMiB,SAAS,GAAGf,WAAW,CAACgB,KAAZ,GAAoB,CAAtC;IACA,MAAMC,cAAc,GAAGhB,WAAW,CAACc,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,CAXc,EAYf,CAACZ,cAAD,EAAiBiB,kBAAjB,KAAwC;IACpC,IAAIjB,cAAc,KAAKiB,kBAAvB,EAA2C;MACvC1B,OAAO,CAACQ,QAAD,CAAP,CAAkBC,cAAlB;IACH;EACJ,CAhBc,EAiBf,CAACL,WAAD,CAjBe,CAAnB;EAoBA,OAAO;IAAEC,aAAF;IAAiBY;EAAjB,CAAP;AACH;AAAA"}
+{"version":3,"names":["useCallback","useRef","Platform","runOnJS","scrollTo","useAnimatedReaction","useAnimatedRef","useScrollViewReaction","sharedIndex","coordinates","scrollViewRef","lastScrolledXRef","NaN","scrollToX","x","Number","isFinite","current","y","animated","didScrollToX","onLayout","prevIndex","value","prevCoordinate","prevTabWidth","x2","x1","Math","floor","prevX","OS"],"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,SAASA,WAAT,EAAsBC,MAAtB,QAAoC,OAApC;AAEA,SAASC,QAAT,QAAyB,cAAzB;AACA,SAASC,OAAT,EAAkBC,QAAlB,EAAyCC,mBAAzC,EAA8DC,cAA9D,QAAoF,yBAApF;AAQA,eAAe,SAASC,qBAAT,CACXC,WADW,EAEXC,WAFW,EAGU;EACrB,MAAMC,aAAa,GAAGJ,cAAc,EAApC;EAEA,MAAMK,gBAAgB,GAAGV,MAAM,CAASW,GAAT,CAA/B;;EAEA,MAAMC,SAAS,GAAIC,CAAD,IAAe;IAC7B,IAAIC,MAAM,CAACC,QAAP,CAAgBF,CAAhB,CAAJ,EAAwB;MAAA;;MACpB,yBAAAJ,aAAa,CAACO,OAAd,gFAAuBb,QAAvB,CAAgC;QAAEU,CAAF;QAAKI,CAAC,EAAE,CAAR;QAAWC,QAAQ,EAAE;MAArB,CAAhC;MAEAC,YAAY,CAACN,CAAD,CAAZ;IACH;EACJ,CAND;;EAQA,MAAMM,YAAY,GAAIN,CAAD,IAAe;IAChCH,gBAAgB,CAACM,OAAjB,GAA2BH,CAA3B;EACH,CAFD;;EAIA,MAAMO,QAAQ,GAAGrB,WAAW,CAAC,MAAM;IAC/Ba,SAAS,CAACF,gBAAgB,CAACM,OAAlB,CAAT;EACH,CAF2B,EAEzB,EAFyB,CAA5B;EAIAZ,mBAAmB,CACf,MAAM;IACF,MAAMiB,SAAS,GAAGd,WAAW,CAACe,KAAZ,GAAoB,CAAtC;IACA,MAAMC,cAAc,GAAGf,WAAW,CAACa,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,CAXc,EAYf,CAACX,CAAD,EAAIgB,KAAJ,KAAc;IACV,IAAIhB,CAAC,KAAKgB,KAAV,EAAiB;MACb,IAAI5B,QAAQ,CAAC6B,EAAT,KAAgB,KAApB,EAA2B;QACvB5B,OAAO,CAACU,SAAD,CAAP,CAAmBC,CAAnB;MACH,CAFD,MAEO;QACHV,QAAQ,CAACM,aAAD,EAAgBI,CAAhB,EAAmB,CAAnB,EAAsB,IAAtB,CAAR;QACAX,OAAO,CAACiB,YAAD,CAAP,CAAsBN,CAAtB;MACH;IACJ;EACJ,CArBc,EAsBf,CAACL,WAAD,CAtBe,CAAnB;EAyBA,OAAO;IAAEC,aAAF;IAAiBW;EAAjB,CAAP;AACH;AAAA"}

package/build/module/hooks/useValidWindowDimensions/index.ios.js

@@ -1,13 +1,19 @@
-import { useState, useEffect } from 'react';
-import { useWindowDimensions } from 'react-native';
+import { useEffect, useState } from 'react';
+import { Dimensions } from 'react-native';
 export default function useValidWindowDimensions() {
-  const window = useWindowDimensions();
-  const [validWindow, setValidWindow] = useState(window);
+  const [window, setWindow] = useState(() => Dimensions.get('window'));
   useEffect(() => {
-    if (window.width !== 0 && window.height !== 0) {
-      setValidWindow(window);
-    }
-  }, [window]);
-  return validWindow;
+    const subscription = Dimensions.addEventListener('change', newDimension => {
+      const {
+        window: newWindow
+      } = newDimension;
+
+      if (newWindow.width !== 0 && newWindow.height !== 0) {
+        setWindow(newWindow);
+      }
+    });
+    return subscription.remove;
+  }, []);
+  return window;
 }
 //# sourceMappingURL=index.ios.js.map

package/build/module/hooks/useValidWindowDimensions/index.ios.js.map

@@ -1 +1 @@
-{"version":3,"names":["useState","useEffect","useWindowDimensions","useValidWindowDimensions","window","validWindow","setValidWindow","width","height"],"sources":["index.ios.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport { useWindowDimensions } from 'react-native';\n\nexport default function useValidWindowDimensions() {\n    const window = useWindowDimensions();\n    const [validWindow, setValidWindow] = useState(window);\n\n    useEffect(() => {\n        if (window.width !== 0 && window.height !== 0) {\n            setValidWindow(window);\n        }\n    }, [window]);\n\n    return validWindow;\n}\n"],"mappings":"AAAA,SAASA,QAAT,EAAmBC,SAAnB,QAAoC,OAApC;AACA,SAASC,mBAAT,QAAoC,cAApC;AAEA,eAAe,SAASC,wBAAT,GAAoC;EAC/C,MAAMC,MAAM,GAAGF,mBAAmB,EAAlC;EACA,MAAM,CAACG,WAAD,EAAcC,cAAd,IAAgCN,QAAQ,CAACI,MAAD,CAA9C;EAEAH,SAAS,CAAC,MAAM;IACZ,IAAIG,MAAM,CAACG,KAAP,KAAiB,CAAjB,IAAsBH,MAAM,CAACI,MAAP,KAAkB,CAA5C,EAA+C;MAC3CF,cAAc,CAACF,MAAD,CAAd;IACH;EACJ,CAJQ,EAIN,CAACA,MAAD,CAJM,CAAT;EAMA,OAAOC,WAAP;AACH"}
+{"version":3,"names":["useEffect","useState","Dimensions","useValidWindowDimensions","window","setWindow","get","subscription","addEventListener","newDimension","newWindow","width","height","remove"],"sources":["index.ios.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport type { ScaledSize } from 'react-native';\nimport { Dimensions } from 'react-native';\n\nexport default function useValidWindowDimensions(): ScaledSize {\n    const [window, setWindow] = useState<ScaledSize>(() => Dimensions.get('window'));\n\n    useEffect(() => {\n        const subscription = Dimensions.addEventListener('change', (newDimension) => {\n            const { window: newWindow } = newDimension;\n\n            if (newWindow.width !== 0 && newWindow.height !== 0) {\n                setWindow(newWindow);\n            }\n        });\n\n        return subscription.remove;\n    }, []);\n\n    return window;\n}\n"],"mappings":"AAAA,SAASA,SAAT,EAAoBC,QAApB,QAAoC,OAApC;AAEA,SAASC,UAAT,QAA2B,cAA3B;AAEA,eAAe,SAASC,wBAAT,GAAgD;EAC3D,MAAM,CAACC,MAAD,EAASC,SAAT,IAAsBJ,QAAQ,CAAa,MAAMC,UAAU,CAACI,GAAX,CAAe,QAAf,CAAnB,CAApC;EAEAN,SAAS,CAAC,MAAM;IACZ,MAAMO,YAAY,GAAGL,UAAU,CAACM,gBAAX,CAA4B,QAA5B,EAAuCC,YAAD,IAAkB;MACzE,MAAM;QAAEL,MAAM,EAAEM;MAAV,IAAwBD,YAA9B;;MAEA,IAAIC,SAAS,CAACC,KAAV,KAAoB,CAApB,IAAyBD,SAAS,CAACE,MAAV,KAAqB,CAAlD,EAAqD;QACjDP,SAAS,CAACK,SAAD,CAAT;MACH;IACJ,CANoB,CAArB;IAQA,OAAOH,YAAY,CAACM,MAApB;EACH,CAVQ,EAUN,EAVM,CAAT;EAYA,OAAOT,MAAP;AACH"}

package/build/typescript/CircularProgress/CircularProgress.d.ts

@@ -1,3 +1,3 @@
-import { ViewProps } from 'react-native';
+import type { ViewProps } from 'react-native';
 import { OverridableComponentProps } from '../types';
 export default function CircularProgress(props: OverridableComponentProps<ViewProps>): JSX.Element;

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

@@ -1,5 +1,5 @@
 import React from 'react';
 import type TabsProps from './TabsProps';
 import type { TabsInstance } from './TabsProps';
-declare const Tabs: React.ForwardRefExoticComponent<Pick<TabsProps, "testID" | "style" | "onLayout" | "keyboardDismissMode" | "children" | "pointerEvents" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "hitSlop" | "removeClippedSubviews" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "variant" | "keyboardShouldPersistTaps" | "onChange" | "disableIndicator" | "initialIndex" | "scrollable"> & React.RefAttributes<TabsInstance>>;
+declare const Tabs: React.ForwardRefExoticComponent<Pick<TabsProps, "testID" | "style" | "onLayout" | "keyboardDismissMode" | "children" | "pointerEvents" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "hitSlop" | "removeClippedSubviews" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "variant" | "keyboardShouldPersistTaps" | "onChange" | "disableIndicator" | "initialIndex" | "scrollable" | "UNSTABLE_sharedIndex"> & React.RefAttributes<TabsInstance>>;
 export default Tabs;

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

@@ -1,5 +1,6 @@
 import type { ReactNode, Ref } from 'react';
 import type { ViewProps } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
 import type { TabVariant } from '../Tab';
 import type { OverridableComponentProps } from '../types';
 export declare type KeyboardDismissMode = 'none' | 'on-drag' | 'interactive';
@@ -50,6 +51,10 @@ export default interface TabsProps extends OverridableComponentProps<ViewProps,
      * @default false
      */
     scrollable?: boolean;
+    /**
+     * Unstable API.
+     */
+    UNSTABLE_sharedIndex?: SharedValue<number>;
     /**
      * The variant to use.
      * @default 'primary'

package/build/typescript/hooks/useValidWindowDimensions/index.ios.d.ts

@@ -1 +1,2 @@
-export default function useValidWindowDimensions(): import("react-native").ScaledSize;
+import type { ScaledSize } from 'react-native';
+export default function useValidWindowDimensions(): ScaledSize;

package/package.json

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

package/src/ButtonBase/ButtonBase.tsx

@@ -17,7 +17,7 @@ const MINIFIED_SCALE = .96;
 
 // at "node_modules/react-native/Libraries/Pressability.js"
 // const DEFAULT_MIN_PRESS_DURATION = 130;
-const PRESS_IN_DELAY = 130;
+const SCALE_EFFECT_PRESS_IN_DELAY = 130;
 
 type TimingAnimationValue = Animated.Value | Animated.ValueXY;
 type TimingAnimationToValue = Animated.TimingAnimationConfig['toValue'];
@@ -95,6 +95,10 @@ export default function ButtonBase(props: ButtonBaseProps) {
         transform: [{ scale }],
     };
 
+    const pressDelay = pressEffect === 'scale'
+        ? SCALE_EFFECT_PRESS_IN_DELAY
+        : 0;
+
     return (
         <AnimatedPressable
             disabled={disabled}
@@ -105,7 +109,7 @@ export default function ButtonBase(props: ButtonBaseProps) {
                 animatedStyle,
                 styleProp,
             ]}
-            unstable_pressDelay={PRESS_IN_DELAY}
+            unstable_pressDelay={pressDelay}
             {...otherProps}
         >
             {typeof children !== 'function' ? (

package/src/CircularProgress/CircularProgress.tsx

@@ -1,15 +1,12 @@
-import React, { useEffect } from 'react';
-import { ViewProps } from 'react-native';
+import React, { useEffect, useRef } from 'react';
+import type { ViewProps } from 'react-native';
+import { Animated, Easing } from 'react-native';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import type { WithTimingConfig } from 'react-native-reanimated';
-import Animated, { Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';
 import { CircularProgress as CircularProgressIcon } from '../internal/icons';
 import { OverridableComponentProps } from '../types';
 
 type CircularProgressStyles = NamedStylesStringUnion<'root'>;
 
-const ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 900, easing: Easing.linear };
-
 const MIN_ROTATE_DEGREE = 0;
 const MAX_ROTATE_DEGREE = 360;
 
@@ -27,18 +24,29 @@ export default function CircularProgress(props: OverridableComponentProps<ViewPr
 
     const styles = useStyles();
 
-    const rotate = useSharedValue(MIN_ROTATE_DEGREE);
+    const rotate = useRef(new Animated.Value(MIN_ROTATE_DEGREE)).current;
 
-    const animatedStyle = useAnimatedStyle(() => ({
-        transform: [{ rotate: `${rotate.value}deg` }],
-    }), []);
+    const animatedStyle = {
+        transform: [{
+            rotate: rotate.interpolate({
+                inputRange: [MIN_ROTATE_DEGREE, MAX_ROTATE_DEGREE],
+                outputRange: [`${MIN_ROTATE_DEGREE}deg`, `${MAX_ROTATE_DEGREE}deg`],
+            }),
+        }],
+    };
 
     useEffect(() => {
-        rotate.value = withRepeat(
-            withTiming(MAX_ROTATE_DEGREE, ANIMATION_CONFIG),
-            -1,
-            false,
-        );
+        Animated.loop(
+            Animated.timing(
+                rotate,
+                {
+                    toValue: MAX_ROTATE_DEGREE,
+                    duration: 900,
+                    easing: Easing.linear,
+                    useNativeDriver: true,
+                },
+            ),
+        ).start();
     }, []);
 
     return (

package/src/Tabs/TabIndicator.tsx

@@ -8,14 +8,21 @@ import { defaultCoordinate } from './TabCoordinate';
 
 type TabIndicatorStyles = NamedStylesStringUnion<'root' | 'disabled'>;
 
+const INDICATOR_WIDTH = 10;
+const INDICATOR_HEIGHT = 4;
+
+const SCROLLABLE_TABS_INSET = 12 * 2;
+
 const useStyles: UseStyles<TabIndicatorStyles> = function (): TabIndicatorStyles {
     const theme = useTheme();
 
     return {
         root: {
             backgroundColor: theme.palette.secondary.main,
+            left: 0,
             bottom: 0,
-            height: 4,
+            width: INDICATOR_WIDTH,
+            height: INDICATOR_HEIGHT,
             position: 'absolute',
         },
         disabled: {
@@ -25,7 +32,7 @@ const useStyles: UseStyles<TabIndicatorStyles> = function (): TabIndicatorStyles
 };
 
 const ANIMATION_CONFIG: Readonly<WithTimingConfig> = {
-    duration: 200,
+    duration: 300,
     easing: Easing.out(Easing.exp),
 };
 
@@ -48,15 +55,16 @@ export default function TabIndicator(props: TabIndicatorProps) {
 
         const tabWidth = x2 - x1;
 
-        const singleInset = scrollable ? 12 : 0;
-        const totalInset = singleInset * 2;
+        const translateX = x1 + (tabWidth - INDICATOR_WIDTH) / 2;
 
-        const nextLeft = x1 + singleInset;
-        const nextWidth = tabWidth - totalInset;
+        const inset = scrollable ? SCROLLABLE_TABS_INSET : 0;
+        const scaleX = (tabWidth - inset) / INDICATOR_WIDTH;
 
         return {
-            left: withTiming(nextLeft, ANIMATION_CONFIG),
-            width: withTiming(nextWidth, ANIMATION_CONFIG),
+            transform: [
+                { translateX: withTiming(translateX, ANIMATION_CONFIG) },
+                { scaleX: withTiming(scaleX, ANIMATION_CONFIG) },
+            ],
         };
     }, [coordinates, scrollable]);
 

package/src/Tabs/Tabs.tsx

@@ -47,9 +47,12 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
         scrollable = false,
         style,
         variant = 'primary',
+        UNSTABLE_sharedIndex,
     } = props;
 
-    const sharedIndex = useSharedValue<number>(initialIndex);
+    const fallbackSharedIndex = useSharedValue<number>(initialIndex);
+
+    const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;
 
     const getCurrentIndex = (): number => sharedIndex.value;
 
@@ -97,7 +100,7 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
 
         // @ts-ignore
         const tabElement = cloneElement(child, {
-            enableIndicator: !disableIndicator && isReadyToRenderIndicator,
+            enableIndicator: !disableIndicator && !isReadyToRenderIndicator,
             onLayout,
             onPress,
             onMouseDown,
@@ -114,14 +117,14 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
         );
     });
 
-    const tabIndicator = (
+    const tabIndicator = isReadyToRenderIndicator ? (
         <TabIndicator
             coordinates={coordinates}
             disabled={disableIndicator}
             scrollable={scrollable}
             sharedIndex={sharedIndex}
         />
-    );
+    ) : null;
 
     return (
         <View

package/src/Tabs/TabsProps.ts

@@ -1,5 +1,6 @@
 import type { ReactNode, Ref } from 'react';
 import type { ViewProps } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
 import type { TabVariant } from '../Tab';
 import type { OverridableComponentProps } from '../types';
 
@@ -70,6 +71,11 @@ export default interface TabsProps extends OverridableComponentProps<ViewProps,
      */
     scrollable?: boolean;
 
+    /**
+     * Unstable API.
+     */
+    UNSTABLE_sharedIndex?: SharedValue<number>;
+
     /**
      * The variant to use.
      * @default 'primary'

package/src/Tabs/useScrollViewReaction.ts

@@ -1,7 +1,8 @@
 import type { MutableRefObject } from 'react';
 import { useCallback, useRef } from 'react';
 import type { ScrollView, ViewProps } from 'react-native';
-import { runOnJS, SharedValue, useAnimatedReaction } from 'react-native-reanimated';
+import { Platform } from 'react-native';
+import { runOnJS, scrollTo, SharedValue, useAnimatedReaction, useAnimatedRef } from 'react-native-reanimated';
 import type TabCoordinate from './TabCoordinate';
 
 export interface UseScrollViewReaction {
@@ -13,22 +14,24 @@ export default function useScrollViewReaction(
     sharedIndex: SharedValue<number>,
     coordinates: TabCoordinate[],
 ): UseScrollViewReaction {
-    const scrollViewRef = useRef<ScrollView | null>(null);
+    const scrollViewRef = useAnimatedRef<ScrollView>();
 
-    const lastScrolledPositionRef = useRef<number>(NaN);
+    const lastScrolledXRef = useRef<number>(NaN);
 
-    const scrollTo = (scrollPosition: number) => {
-        const scrollView = scrollViewRef.current;
+    const scrollToX = (x: number) => {
+        if (Number.isFinite(x)) {
+            scrollViewRef.current?.scrollTo({ x, y: 0, animated: true });
 
-        if (scrollView && Number.isFinite(scrollPosition)) {
-            scrollView.scrollTo({ x: scrollPosition, y: 0, animated: true });
-
-            lastScrolledPositionRef.current = scrollPosition;
+            didScrollToX(x);
         }
     };
 
+    const didScrollToX = (x: number) => {
+        lastScrolledXRef.current = x;
+    };
+
     const onLayout = useCallback(() => {
-        scrollTo(lastScrolledPositionRef.current);
+        scrollToX(lastScrolledXRef.current);
     }, []);
 
     useAnimatedReaction(
@@ -43,9 +46,14 @@ export default function useScrollViewReaction(
 
             return 0;
         },
-        (scrollPosition, prevScrollPosition) => {
-            if (scrollPosition !== prevScrollPosition) {
-                runOnJS(scrollTo)(scrollPosition);
+        (x, prevX) => {
+            if (x !== prevX) {
+                if (Platform.OS === 'web') {
+                    runOnJS(scrollToX)(x);
+                } else {
+                    scrollTo(scrollViewRef, x, 0, true);
+                    runOnJS(didScrollToX)(x);
+                }
             }
         },
         [coordinates],