@coinbase/cds-mobile 8.59.0 → 8.60.0

package/esm/overlays/__stories__/AlertOverModal.stories.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback } from 'react';
 import { useAlert } from '@coinbase/cds-common/overlays/useAlert';
 import { useModal } from '@coinbase/cds-common/overlays/useModal';
 import { Button } from '../../buttons/Button';
@@ -48,17 +48,9 @@ const AlertOnModal = () => {
       })]
     }));
   }, [closeModal, openModal, showAlert]);
-  useEffect(() => {
-    handlePress();
-    showAlert();
-    return () => {
-      close();
-      closeModal();
-    };
-  }, [close, closeModal, handlePress, showAlert]);
   return /*#__PURE__*/_jsx(Button, {
     onPress: handlePress,
-    children: "Open Modal"
+    children: "Open"
   });
 };
 const AlertOverModalScreen = () => {

package/esm/overlays/__stories__/AlertPortal.stories.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback } from 'react';
 import { useAlert } from '@coinbase/cds-common/overlays/useAlert';
 import { Button } from '../../buttons/Button';
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';
@@ -27,13 +27,9 @@ const AlertExample = () => {
     preferredActionVariant: "negative",
     title: "Alert title"
   })), [open, close, handleAction]);
-  useEffect(() => {
-    showAlert();
-    return () => close();
-  }, [close, showAlert]);
   return /*#__PURE__*/_jsx(Button, {
     onPress: showAlert,
-    children: "Show Alert"
+    children: "Open"
   });
 };
 const AlertPortalScreen = () => {

package/esm/overlays/__stories__/AlertSingleAction.stories.js

@@ -4,14 +4,14 @@ import { Example, ExampleScreen } from '../../examples/ExampleScreen';
 import { Alert } from '../Alert';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const SingleActionAlert = () => {
-  const [visible, setVisible] = useState(true);
+  const [visible, setVisible] = useState(false);
   const handleShow = useCallback(() => setVisible(true), []);
   const handleClose = useCallback(() => setVisible(false), []);
   const handleAction = useCallback(() => console.log('pressed'), []);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Button, {
       onPress: handleShow,
-      children: "Show Alert"
+      children: "Open"
     }), /*#__PURE__*/_jsx(Alert, {
       body: "Alert body type that can run over multiple lines, but should be kept short.",
       onPreferredActionPress: handleAction,

package/esm/overlays/__stories__/AlertVerticalActions.stories.js

@@ -4,14 +4,14 @@ import { Example, ExampleScreen } from '../../examples/ExampleScreen';
 import { Alert } from '../Alert';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const BasicAlert = () => {
-  const [visible, setVisible] = useState(true);
+  const [visible, setVisible] = useState(false);
   const handleShow = useCallback(() => setVisible(true), []);
   const handleClose = useCallback(() => setVisible(false), []);
   const handleAction = useCallback(() => console.log('pressed'), []);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Button, {
       onPress: handleShow,
-      children: "Show Alert"
+      children: "Open"
     }), /*#__PURE__*/_jsx(Alert, {
       actionLayout: "vertical",
       body: "Alert body type that can run over multiple lines, but should be kept short.",

package/esm/overlays/__stories__/DrawerFallback.stories.js

@@ -5,7 +5,10 @@ import { Fallback, Spacer, VStack } from '../../layout';
 import { Drawer } from '../drawer/Drawer';
 import { navOptions, SideDrawerContent } from './Drawers';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const SidebarDrawerContentFallback = () => {
+const SidebarDrawerContentFallback = _ref => {
+  let {
+    handleClose
+  } = _ref;
   return /*#__PURE__*/_jsxs(VStack, {
     height: "100%",
     justifyContent: "space-between",
@@ -30,28 +33,30 @@ const SidebarDrawerContentFallback = () => {
         height: 50,
         shape: "squircle",
         width: "100%"
-      }), /*#__PURE__*/_jsx(Spacer, {}), navOptions.map(_ref => {
+      }), /*#__PURE__*/_jsx(Spacer, {}), navOptions.map(_ref2 => {
         let {
           label
-        } = _ref;
+        } = _ref2;
         return /*#__PURE__*/_jsx(Fallback, {
           height: 30,
           shape: "square",
           width: "100%"
         }, label);
       })]
-    }), /*#__PURE__*/_jsx(Fallback, {
-      height: 50,
-      shape: "squircle",
-      width: "100%"
+    }), /*#__PURE__*/_jsx(Button, {
+      block: true,
+      compact: true,
+      onPress: handleClose,
+      variant: "secondary",
+      children: "Cancel"
     })]
   });
 };
-const SideDrawerWithFallback = _ref2 => {
+const SideDrawerWithFallback = _ref3 => {
   let {
     pin = 'left'
-  } = _ref2;
-  const [isVisible, setIsVisible] = useState(true);
+  } = _ref3;
+  const [isVisible, setIsVisible] = useState(false);
   const setIsVisibleToOn = useCallback(() => setIsVisible(true), []);
   const setIsVisibleToOff = useCallback(() => setIsVisible(false), []);
   const [isLoading, setIsLoading] = useState(true);
@@ -68,11 +73,13 @@ const SideDrawerWithFallback = _ref2 => {
     }), isVisible && /*#__PURE__*/_jsx(Drawer, {
       onCloseComplete: setIsVisibleToOff,
       pin: pin,
-      children: _ref3 => {
+      children: _ref4 => {
         let {
           handleClose
-        } = _ref3;
-        return isLoading ? /*#__PURE__*/_jsx(SidebarDrawerContentFallback, {}) : /*#__PURE__*/_jsx(SideDrawerContent, {
+        } = _ref4;
+        return isLoading ? /*#__PURE__*/_jsx(SidebarDrawerContentFallback, {
+          handleClose: handleClose
+        }) : /*#__PURE__*/_jsx(SideDrawerContent, {
           handleClose: handleClose
         });
       }

package/esm/overlays/__stories__/DrawerScrollable.stories.js

@@ -14,7 +14,7 @@ const SideDrawerScrollableContent = _ref => {
   let {
     pin = 'left'
   } = _ref;
-  const [isVisible, setIsVisible] = useState(true);
+  const [isVisible, setIsVisible] = useState(false);
   const setIsVisibleToOn = useCallback(() => setIsVisible(true), []);
   const setIsVisibleToOff = useCallback(() => setIsVisible(false), []);
   const drawerRef = useRef(null);
@@ -65,6 +65,13 @@ const SideDrawerScrollableContent = _ref => {
           data: lotsOfOptions,
           renderItem: renderItem
         })
+      }), /*#__PURE__*/_jsx(VStack, {
+        padding: 2,
+        children: /*#__PURE__*/_jsx(Button, {
+          onPress: handleOptionPress,
+          variant: "secondary",
+          children: "Cancel"
+        })
       })]
     })]
   });

package/esm/overlays/__stories__/Drawers.js

@@ -13,7 +13,7 @@ export const DefaultDrawer = _ref => {
     pin = 'left',
     reduceMotion
   } = _ref;
-  const [isVisible, setIsVisible] = useState(true);
+  const [isVisible, setIsVisible] = useState(false);
   const setIsVisibleOff = useCallback(() => setIsVisible(false), [setIsVisible]);
   const setIsVisibleOn = useCallback(() => setIsVisible(true), [setIsVisible]);
   return /*#__PURE__*/_jsxs(_Fragment, {
@@ -33,7 +33,7 @@ export const DefaultDrawer = _ref => {
           children: [/*#__PURE__*/_jsx(LoremIpsum, {}), /*#__PURE__*/_jsx(Button, {
             onPress: handleClose,
             variant: "secondary",
-            children: "Close Drawer"
+            children: "Cancel"
           })]
         });
       }
@@ -109,7 +109,7 @@ export const SideDrawerContent = _ref3 => {
       compact: true,
       onPress: handleClose,
       variant: "secondary",
-      children: "Sign out"
+      children: "Cancel"
     })]
   });
 };
@@ -117,7 +117,7 @@ export const SideDrawer = _ref5 => {
   let {
     pin = 'left'
   } = _ref5;
-  const [isVisible, setIsVisible] = useState(true);
+  const [isVisible, setIsVisible] = useState(false);
   const setIsVisibleOff = useCallback(() => setIsVisible(false), [setIsVisible]);
   const setIsVisibleOn = useCallback(() => setIsVisible(true), [setIsVisible]);
   return /*#__PURE__*/_jsxs(_Fragment, {

package/esm/overlays/__stories__/ModalBackButton.stories.js

@@ -8,7 +8,7 @@ import { ModalFooter } from '../modal/ModalFooter';
 import { ModalHeader } from '../modal/ModalHeader';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ModalBackButtonScreen = () => {
-  const [visible, setVisible] = useState(true);
+  const [visible, setVisible] = useState(false);
   const handleClose = useCallback(() => setVisible(false), []);
   const handleOpen = useCallback(() => setVisible(true), []);
   return /*#__PURE__*/_jsx(ExampleScreen, {
@@ -16,7 +16,7 @@ const ModalBackButtonScreen = () => {
       title: "Back Button Modal",
       children: [/*#__PURE__*/_jsx(Button, {
         onPress: handleOpen,
-        children: "Open Modal"
+        children: "Open"
       }), /*#__PURE__*/_jsxs(Modal, {
         onRequestClose: handleClose,
         visible: visible,

package/esm/overlays/__stories__/ModalBasic.stories.js

@@ -8,7 +8,7 @@ import { ModalFooter } from '../modal/ModalFooter';
 import { ModalHeader } from '../modal/ModalHeader';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ModalBasicScreen = () => {
-  const [visible, setVisible] = useState(true);
+  const [visible, setVisible] = useState(false);
   const handleClose = useCallback(() => setVisible(false), []);
   const handleOpen = useCallback(() => setVisible(true), []);
   return /*#__PURE__*/_jsx(ExampleScreen, {
@@ -16,7 +16,7 @@ const ModalBasicScreen = () => {
       title: "Basic Modal",
       children: [/*#__PURE__*/_jsx(Button, {
         onPress: handleOpen,
-        children: "Open Modal"
+        children: "Open"
       }), /*#__PURE__*/_jsxs(Modal, {
         onRequestClose: handleClose,
         visible: visible,

package/esm/overlays/__stories__/ModalCustomPadding.stories.js

@@ -8,7 +8,7 @@ import { ModalFooter } from '../modal/ModalFooter';
 import { ModalHeader } from '../modal/ModalHeader';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function ModalCustomPaddingScreen() {
-  const [visible, setVisible] = useState(true);
+  const [visible, setVisible] = useState(false);
   const handleClose = useCallback(() => setVisible(false), []);
   const handleOpen = useCallback(() => setVisible(true), []);
   return /*#__PURE__*/_jsx(ExampleScreen, {
@@ -16,7 +16,7 @@ export default function ModalCustomPaddingScreen() {
       title: "Modal with custom padding",
       children: [/*#__PURE__*/_jsx(Button, {
         onPress: handleOpen,
-        children: "Open Modal"
+        children: "Open"
       }), /*#__PURE__*/_jsxs(Modal, {
         onRequestClose: handleClose,
         visible: visible,

package/esm/overlays/__stories__/ModalLong.stories.js

@@ -9,7 +9,7 @@ import { ModalFooter } from '../modal/ModalFooter';
 import { ModalHeader } from '../modal/ModalHeader';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ModalLongScreen = () => {
-  const [visible, setVisible] = useState(true);
+  const [visible, setVisible] = useState(false);
   const handleClose = useCallback(() => setVisible(false), []);
   const handleOpen = useCallback(() => setVisible(true), []);
   return /*#__PURE__*/_jsx(ExampleScreen, {
@@ -17,7 +17,7 @@ const ModalLongScreen = () => {
       title: "Long Modal",
       children: [/*#__PURE__*/_jsx(Button, {
         onPress: handleOpen,
-        children: "Open Modal"
+        children: "Open"
       }), /*#__PURE__*/_jsxs(Modal, {
         onRequestClose: handleClose,
         visible: visible,

package/esm/overlays/__stories__/ModalPortal.stories.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback } from 'react';
 import { useModal } from '@coinbase/cds-common/overlays/useModal';
 import { Button } from '../../buttons/Button';
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';
@@ -33,16 +33,12 @@ const ModalPortalScreen = () => {
       })
     })]
   })), [openModal, closeModal]);
-  useEffect(() => {
-    handlePress();
-    return () => closeModal();
-  }, [closeModal, handlePress]);
   return /*#__PURE__*/_jsx(ExampleScreen, {
     children: /*#__PURE__*/_jsx(Example, {
       title: "Portal Modal",
       children: /*#__PURE__*/_jsx(Button, {
         onPress: handlePress,
-        children: "Open Modal"
+        children: "Open"
       })
     })
   });

package/esm/overlays/__stories__/Overlay.stories.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { Modal } from 'react-native';
 import { Button } from '../../buttons/Button';
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';
@@ -22,15 +22,11 @@ const OverlayScreen = () => {
       if (finished) setVisibleToOff();
     });
   }, [animateOverlayOut, setVisibleToOff]);
-  useEffect(() => {
-    openModal();
-    return () => closeModal();
-  }, [closeModal, openModal]);
   return /*#__PURE__*/_jsx(ExampleScreen, {
     children: /*#__PURE__*/_jsxs(Example, {
       children: [/*#__PURE__*/_jsx(Button, {
         onPress: openModal,
-        children: "Open Overlay"
+        children: "Open"
       }), /*#__PURE__*/_jsx(Modal, {
         hardwareAccelerated: true,
         statusBarTranslucent: true,

package/esm/overlays/__stories__/TrayNavigation.stories.js

@@ -1,6 +1,7 @@
 import React, { useCallback, useRef, useState } from 'react';
 import { navigationOptions } from '@coinbase/cds-common/internal/data/navigation';
 import { NoopFn } from '@coinbase/cds-common/utils/mockUtils';
+import { Button } from '../../buttons/Button';
 import { IconButton } from '../../buttons/IconButton';
 import { Menu } from '../../controls/Menu';
 import { SelectOption } from '../../controls/SelectOption';
@@ -10,7 +11,7 @@ import { HStack } from '../../layout';
 import { Tray } from '../tray/Tray';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const NavigationTray = () => {
-  const [isTrayVisible, setIsTrayVisible] = useState(true);
+  const [isTrayVisible, setIsTrayVisible] = useState(false);
   const setIsTrayVisibleToFalse = useCallback(() => setIsTrayVisible(false), []);
   const [value, setValue] = useState();
   const trayRef = useRef(null);
@@ -22,7 +23,10 @@ const NavigationTray = () => {
     setIsTrayVisible(true);
   }, []);
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(HStack, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onPress: handleAppSwitcherPress,
+      children: "Open"
+    }), /*#__PURE__*/_jsxs(HStack, {
       gap: 2,
       justifyContent: "flex-end",
       minHeight: 200,

package/esm/overlays/__stories__/Trays.js

@@ -6,14 +6,14 @@ import { Menu } from '../../controls/Menu';
 import { SelectOption } from '../../controls/SelectOption';
 import { Fallback, VStack } from '../../layout';
 import { Tray } from '../tray/Tray';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export const options = prices.slice(0, 4);
 const lotsOfOptions = prices.slice(0, 30);
 export const DefaultTray = _ref => {
   let {
     title
   } = _ref;
-  const [isTrayVisible, setIsTrayVisible] = useState(true);
+  const [isTrayVisible, setIsTrayVisible] = useState(false);
   const setIsTrayVisibleOff = useCallback(() => setIsTrayVisible(false), [setIsTrayVisible]);
   const setIsTrayVisibleOn = useCallback(() => setIsTrayVisible(true), [setIsTrayVisible]);
   const [value, setValue] = useState();
@@ -34,15 +34,24 @@ export const DefaultTray = _ref => {
       onCloseComplete: setIsTrayVisibleOff,
       onVisibilityChange: handleTrayVisibilityChange,
       title: title,
-      children: /*#__PURE__*/_jsx(Menu, {
-        onChange: setValue,
-        value: value,
-        children: options.map(option => /*#__PURE__*/_jsx(SelectOption, {
-          description: "BTC",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        gap: 2,
+        paddingX: 3,
+        children: [/*#__PURE__*/_jsx(Menu, {
+          onChange: setValue,
+          value: value,
+          children: options.map(option => /*#__PURE__*/_jsx(SelectOption, {
+            description: "BTC",
+            onPress: handleOptionPress,
+            title: option,
+            value: option
+          }, option))
+        }), /*#__PURE__*/_jsx(Button, {
+          block: true,
           onPress: handleOptionPress,
-          title: option,
-          value: option
-        }, option))
+          variant: "secondary",
+          children: "Close"
+        })]
       })
     })]
   });
@@ -64,7 +73,7 @@ export const ScrollableTray = _ref2 => {
     fallbackEnabled,
     verticalDrawerPercentageOfView
   } = _ref2;
-  const [isTrayVisible, setIsTrayVisible] = useState(true);
+  const [isTrayVisible, setIsTrayVisible] = useState(false);
   const setIsTrayVisibleOff = useCallback(() => setIsTrayVisible(false), [setIsTrayVisible]);
   const setIsTrayVisibleOn = useCallback(() => setIsTrayVisible(true), [setIsTrayVisible]);
   const [value, setValue] = useState();

package/esm/sticky-footer/__stories__/StickyFooter.stories.js

@@ -7,7 +7,7 @@ import { VStack } from '../../layout';
 import { StickyFooter } from '../StickyFooter';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const StickyFooterScreen = () => {
-  const [showStickyFooter, setShowStickyFooter] = useState(true);
+  const [showStickyFooter, setShowStickyFooter] = useState(false);
   const handleButtonPress = useCallback(() => {
     setShowStickyFooter(!showStickyFooter);
   }, [showStickyFooter]);
@@ -17,7 +17,7 @@ const StickyFooterScreen = () => {
       title: "StickyFooter with Screen",
       children: /*#__PURE__*/_jsx(Button, {
         onPress: handleButtonPress,
-        children: showStickyFooter ? 'Close' : 'Open'
+        children: showStickyFooter ? 'Cancel' : 'Open'
       })
     }), showStickyFooter && /*#__PURE__*/_jsx(View, {
       style: {

package/esm/sticky-footer/__stories__/StickyFooterWithTray.stories.js

@@ -14,7 +14,7 @@ const StickyFooterWithTray = _ref => {
   let {
     title
   } = _ref;
-  const [isTrayVisible, setIsTrayVisible] = useState(true);
+  const [isTrayVisible, setIsTrayVisible] = useState(false);
   const setIsTrayVisibleToFalse = useCallback(() => setIsTrayVisible(false), []);
   const setIsTrayVisibleToTrue = useCallback(() => setIsTrayVisible(true), []);
   const [value, setValue] = useState();
@@ -56,14 +56,14 @@ const StickyFooterWithTray = _ref => {
               flexGrow: 1,
               children: /*#__PURE__*/_jsx(Button, {
                 block: true,
+                onPress: handleClose,
                 variant: "secondary",
-                children: "Secondary"
+                children: "Cancel"
               })
             }), /*#__PURE__*/_jsx(Box, {
               flexGrow: 1,
               children: /*#__PURE__*/_jsx(Button, {
                 block: true,
-                onPress: handleClose,
                 children: "Primary"
               })
             })]

package/esm/visualizations/DefaultProgressCircleContent.js

@@ -4,7 +4,7 @@ import { ProgressTextLabel } from './ProgressTextLabel';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const DefaultProgressCircleContent = /*#__PURE__*/memo(_ref => {
   let {
-    progress,
+    progress = 0,
     disableAnimateOnMount,
     disabled,
     color = 'fgMuted'

package/esm/visualizations/ProgressBar.js

@@ -2,7 +2,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, I18nManager } from 'react-native';
 import { animateProgressBaseSpec } from '@coinbase/cds-common/animation/progress';
-import { useProgressSize } from '@coinbase/cds-common/visualizations/useProgressSize';
+import { getProgressSize } from '@coinbase/cds-common/visualizations/getProgressSize';
 import { convertMotionConfig } from '../animation/convertMotionConfig';
 import { useTheme } from '../hooks/useTheme';
 import { Box, HStack } from '../layout';
@@ -10,7 +10,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export const ProgressBar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef) => {
   let {
     weight = 'normal',
-    progress,
+    progress = 0,
     color = 'bgPrimary',
     disabled,
     disableAnimateOnMount,
@@ -22,7 +22,7 @@ export const ProgressBar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forw
     onAnimationStart
   } = _ref;
   const theme = useTheme();
-  const height = useProgressSize(weight);
+  const height = getProgressSize(weight);
   const animatedProgress = useRef(new Animated.Value(disableAnimateOnMount ? progress : 0));
   const [trackWidth, setTrackWidth] = useState(-1);
   useEffect(() => {

package/esm/visualizations/ProgressBarWithFloatLabel.js

@@ -1,64 +1,55 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, I18nManager } from 'react-native';
 import { animateProgressBaseSpec } from '@coinbase/cds-common/animation/progress';
-import { usePreviousValues } from '@coinbase/cds-common/hooks/usePreviousValues';
 import { convertMotionConfig } from '../animation/convertMotionConfig';
 import { useLayout } from '../hooks/useLayout';
 import { Box, VStack } from '../layout';
 import { getProgressBarLabelParts } from './getProgressBarLabelParts';
 import { ProgressTextLabel } from './ProgressTextLabel';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getEndTranslateX = (containerWidth, textWidth, progress) => I18nManager.isRTL ? Math.min(containerWidth - textWidth, containerWidth - containerWidth * progress) : Math.max(0, containerWidth * progress - textWidth);
 const ProgressBarFloatLabel = /*#__PURE__*/memo(_ref => {
   let {
     label,
     disabled,
-    progress,
+    progress = 0,
     disableAnimateOnMount,
     labelPlacement,
     styles
   } = _ref;
   const [textWidth, setTextWidth] = useState(-1);
-  const {
-    addPreviousValue: addPreviousPercent
-  } = usePreviousValues([disableAnimateOnMount ? progress : 0]);
   const [size, onLayout] = useLayout();
   const containerWidth = size.width;
-  const [hasAnimationMounted, setHasAnimationMounted] = useState(!disableAnimateOnMount);
-  const animatedProgress = useMemo(() => new Animated.Value(0), []);
-  addPreviousPercent(progress);
+  const animatedTranslateX = useRef(new Animated.Value(0));
   const {
     value: labelNum,
     render: renderLabel
   } = getProgressBarLabelParts(label);
   useEffect(() => {
-    if (containerWidth > 0 && textWidth > -1) {
-      if (!hasAnimationMounted && disableAnimateOnMount) {
-        animatedProgress.setValue(progress);
-        setHasAnimationMounted(true);
-      } else {
-        var _Animated$timing;
-        (_Animated$timing = Animated.timing(animatedProgress, convertMotionConfig(_extends({
-          toValue: progress
-        }, animateProgressBaseSpec, {
-          useNativeDriver: true
-        })))) == null || _Animated$timing.start();
-      }
+    if (containerWidth <= 0 || textWidth < 0) return;
+    const targetTranslateX = getEndTranslateX(containerWidth, textWidth, progress);
+    if (disableAnimateOnMount) {
+      animatedTranslateX.current.setValue(targetTranslateX);
+    } else {
+      Animated.timing(animatedTranslateX.current, convertMotionConfig(_extends({
+        toValue: targetTranslateX
+      }, animateProgressBaseSpec, {
+        useNativeDriver: true
+      }))).start();
     }
-  }, [progress, containerWidth, textWidth, animatedProgress, disableAnimateOnMount, hasAnimationMounted]);
+  }, [progress, containerWidth, textWidth, disableAnimateOnMount]);
   const handleTextLayout = useCallback(event => {
     setTextWidth(event.nativeEvent.layout.width);
   }, []);
+  const hasDimensions = containerWidth > 0 && textWidth > -1;
   const containerStyle = useMemo(() => [styles == null ? void 0 : styles.labelContainer], [styles == null ? void 0 : styles.labelContainer]);
   const labelStyle = useMemo(() => [{
-    opacity: hasAnimationMounted ? 1 : 0,
+    opacity: hasDimensions ? 1 : 0,
     transform: [{
-      translateX: animatedProgress.interpolate({
-        inputRange: [0, 1],
-        outputRange: [I18nManager.isRTL ? containerWidth - textWidth : 0, I18nManager.isRTL ? 0 : containerWidth - textWidth]
-      })
+      translateX: animatedTranslateX.current
     }]
-  }], [containerWidth, textWidth, hasAnimationMounted, animatedProgress]);
+  }], [hasDimensions]);
   return /*#__PURE__*/_jsx(Box, {
     flexWrap: "nowrap",
     onLayout: onLayout,