@coinbase/cds-mobile 8.66.2 → 9.0.0-rc.2

package/esm/overlays/PortalProvider.js

@@ -5,6 +5,11 @@ import { ToastProvider } from '@coinbase/cds-common/overlays/ToastProvider';
 import { usePortal } from '@coinbase/cds-common/overlays/usePortal';
 import { usePortalState } from '@coinbase/cds-common/overlays/usePortalState';
 import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Internal component that renders active overlay nodes. On Android, nests multiple
+ * overlays as children of each other since Android's native Modal cannot render
+ * sibling modals at the same level.
+ */
 export const PortalHost = /*#__PURE__*/memo(_ref => {
   let {
     nodes
@@ -29,6 +34,17 @@ export const PortalHost = /*#__PURE__*/memo(_ref => {
     children: elements
   });
 });
+
+/**
+ * Required root-level provider that enables CDS overlay components (Modal, Toast, Alert,
+ * Tooltip, Tray). Manages the registry of active overlays and provides the context for
+ * overlay state management and toast queuing.
+ *
+ * Unlike the PortalProvider in cds-web, cds-mobile does not use DOM portals. Overlay components render
+ * above other content using React Native's native Modal component.
+ *
+ * Must be rendered once near the root of your application, alongside ThemeProvider.
+ */
 export const PortalProvider = _ref2 => {
   let {
     children,
@@ -46,6 +62,12 @@ export const PortalProvider = _ref2 => {
     })
   });
 };
+
+/**
+ * Renders overlay nodes independently from PortalProvider.
+ * Use this when `renderPortals={false}` is set on PortalProvider to control
+ * where in the component tree the overlay nodes are rendered.
+ */
 export const PortalNodes = () => {
   const {
     nodes

package/esm/overlays/Toast.js

@@ -2,11 +2,11 @@ const _excluded = ["text", "action", "onWillHide", "onDidHide", "bottomOffset",
 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); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle } from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { zIndex } from '@coinbase/cds-common/tokens/zIndex';
 import { Button } from '../buttons';
 import { useA11y } from '../hooks/useA11y';
 import { useComponentConfig } from '../hooks/useComponentConfig';
-import { useTheme } from '../hooks/useTheme';
 import { Box, HStack } from '../layout';
 import { ColorSurge } from '../motion/ColorSurge';
 import { Text } from '../typography/Text';
@@ -14,7 +14,7 @@ import { useToastAnimation } from './useToastAnimation';
 import { useToastPanResponder } from './useToastPanResponder';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const Toast = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
-  var _action$testID;
+  var _ref3, _action$testID;
   const mergedProps = useComponentConfig('Toast', _props);
   const {
       text,
@@ -26,7 +26,9 @@ export const Toast = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
       accessibilityLabel
     } = mergedProps,
     props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
-  const theme = useTheme();
+  const {
+    bottom: safeAreaBottom
+  } = useSafeAreaInsets();
   const [{
     opacity,
     bottom
@@ -75,8 +77,9 @@ export const Toast = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
     void handleClose();
   }, [action, handleClose]);
   return /*#__PURE__*/_jsx(Box, _extends({
+    accessibilityRole: "alert",
     alignSelf: "center",
-    bottom: bottomOffset != null ? bottomOffset : theme.space[2],
+    bottom: (_ref3 = bottomOffset) != null ? _ref3 : safeAreaBottom,
     maxWidth: "100%",
     padding: 2,
     position: "absolute",
@@ -86,7 +89,6 @@ export const Toast = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
     },
     zIndex: zIndex.portal
   }, props, {
-    accessibilityRole: "alert",
     children: /*#__PURE__*/_jsxs(HStack, _extends({
       animated: true,
       bordered: true,

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

@@ -227,10 +227,12 @@ const ProductUpsellTrayContent = /*#__PURE__*/memo(function ProductUpsellTrayCon
     children: /*#__PURE__*/_jsx(VStack, {
       position: "relative",
       children: /*#__PURE__*/_jsxs(VStack, {
-        dangerouslySetBackground: BACKGROUND_COLOR,
         gap: 4,
         paddingTop: 5,
         paddingX: 3,
+        style: {
+          backgroundColor: BACKGROUND_COLOR
+        },
         children: [/*#__PURE__*/_jsx(Box, {
           alignItems: "center",
           justifyContent: "center",

package/esm/overlays/drawer/Drawer.js

@@ -2,17 +2,17 @@ const _excluded = ["children", "pin", "onCloseComplete", "preventDismissGestures
 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); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { Animated, Keyboard, Modal, Platform, useWindowDimensions } from 'react-native';
+import { Animated, Keyboard, Modal, Platform, StatusBar, useWindowDimensions } from 'react-native';
 import { drawerAnimationDefaultDuration, MAX_OVER_DRAG } from '@coinbase/cds-common/animation/drawer';
 import { OverlayContentContext } from '@coinbase/cds-common/overlays/OverlayContentContext';
 import { horizontalDrawerPercentageOfView, verticalDrawerPercentageOfView as defaultVerticalDrawerPercentageOfView } from '@coinbase/cds-common/tokens/drawer';
 import { useComponentConfig } from '../../hooks/useComponentConfig';
+import { useHasNotch } from '../../hooks/useHasNotch';
 import { useTheme } from '../../hooks/useTheme';
 import { Box } from '../../layout/Box';
 import { HandleBar } from '../handlebar/HandleBar';
 import { Overlay } from '../overlay/Overlay';
 import { useOverlayAnimation } from '../overlay/useOverlayAnimation';
-import { DrawerStatusBar } from './DrawerStatusBar';
 import { useDrawerAnimation } from './useDrawerAnimation';
 import { useDrawerPanResponder } from './useDrawerPanResponder';
 import { useDrawerSpacing } from './useDrawerSpacing';
@@ -162,6 +162,12 @@ export const Drawer = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
     },
     variant: handleBarVariant
   }), [handleBarAccessibilityLabel, handleClose, getHandleBarPanHandlers, styles == null ? void 0 : styles.handleBar, styles == null ? void 0 : styles.handleBarHandle, handleBarVariant]);
+
+  // this outdated logic needs to be removed
+  // rather than hiding on the presence of a "notch" (all modern phones based on how we determine), we should hide the status bar when any overlay is visible
+  // see: https://linear.app/coinbase/issue/CDS-1557/temporarily-hide-status-bar-in-all-overlay-components
+  const hasNotch = useHasNotch();
+  const hideStatusBar = hasNotch && ['left', 'right', 'top'].includes(pin);
   return /*#__PURE__*/_jsx(Modal, _extends({
     hardwareAccelerated: true,
     transparent: true,
@@ -173,9 +179,12 @@ export const Drawer = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
   }, props, {
     children: /*#__PURE__*/_jsxs(OverlayContentContext.Provider, {
       value: overlayContentContextValue,
-      children: [/*#__PURE__*/_jsx(DrawerStatusBar, {
-        visible: true,
-        pin: pin
+      children: [Platform.select({
+        ios: hideStatusBar ? /*#__PURE__*/_jsx(StatusBar, {
+          animated: true,
+          hidden: true
+        }) : null,
+        default: null
       }), /*#__PURE__*/_jsx(Overlay, {
         onTouchStart: handleOverlayPress,
         opacity: opacityAnimation,

package/esm/overlays/drawer/DrawerStatusBar.js

@@ -2,6 +2,10 @@ import React, { memo } from 'react';
 import { Platform, StatusBar } from 'react-native';
 import { useHasNotch } from '../../hooks/useHasNotch';
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @deprecated If you need to hide the status bar and you're not using Drawer already, use the StatusBar component from react-native directly. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const DrawerStatusBar = /*#__PURE__*/memo(function DrawerStatusBar(_ref) {
   let {
     pin,

package/esm/overlays/modal/Modal.js

@@ -2,7 +2,8 @@ const _excluded = ["children", "visible", "onRequestClose", "onDidClose", "hideD
 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); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useState } from 'react';
-import { Modal as RNModal, Platform, SafeAreaView, StatusBar, StyleSheet } from 'react-native';
+import { Modal as RNModal, Platform, StatusBar, StyleSheet } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
 import { ModalContext } from '@coinbase/cds-common/overlays/ModalContext';
 import { OverlayContentContext } from '@coinbase/cds-common/overlays/OverlayContentContext';

package/esm/overlays/modal/ModalFooter.js

@@ -1,7 +1,7 @@
 const _excluded = ["primaryAction", "secondaryAction", "direction", "paddingX", "paddingY"];
 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); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React, { Fragment, memo } from 'react';
+import React, { cloneElement, memo } from 'react';
 import { useModalContext } from '@coinbase/cds-common/overlays/ModalContext';
 import { ButtonGroup } from '../../buttons/ButtonGroup';
 import { useComponentConfig } from '../../hooks/useComponentConfig';
@@ -20,7 +20,7 @@ export const ModalFooter = /*#__PURE__*/memo(_props => {
   const {
     hideDividers = false
   } = useModalContext();
-  const actions = [secondaryAction, primaryAction].filter(Boolean);
+  const actions = [secondaryAction, primaryAction].filter(action => Boolean(action));
   const isVertical = direction === 'vertical';
 
   // reverse actions order when stacked
@@ -38,9 +38,9 @@ export const ModalFooter = /*#__PURE__*/memo(_props => {
       children: actions.map((action, i) =>
       /*#__PURE__*/
       // actions are stable so should be fine to use index as key
-      _jsx(Fragment, {
-        children: action
-      }, i))
+      cloneElement(action, {
+        key: i
+      }))
     })
   }));
 });

package/esm/overlays/overlay/Overlay.js

@@ -1,4 +1,4 @@
-const _excluded = ["opacity"];
+const _excluded = ["opacity", "style"];
 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); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { memo } from 'react';
@@ -14,7 +14,8 @@ export const Overlay = /*#__PURE__*/memo(_props => {
   var _theme$darkSpectrum;
   const mergedProps = useComponentConfig('Overlay', _props);
   const {
-      opacity
+      opacity,
+      style
     } = mergedProps,
     props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const theme = useTheme();
@@ -24,9 +25,11 @@ export const Overlay = /*#__PURE__*/memo(_props => {
       animated: true,
       renderToHardwareTextureAndroid: true,
       background: "bgOverlay",
-      dangerouslySetBackground: theme.activeColorScheme === 'dark' ? "rgba(" + (theme == null || (_theme$darkSpectrum = theme.darkSpectrum) == null ? void 0 : _theme$darkSpectrum.gray0) + ", 0.5)" : undefined,
       opacity: opacity,
-      pin: "all"
+      pin: "all",
+      style: [theme.activeColorScheme === 'dark' ? {
+        backgroundColor: "rgba(" + (theme == null || (_theme$darkSpectrum = theme.darkSpectrum) == null ? void 0 : _theme$darkSpectrum.gray0) + ", 0.5)"
+      } : undefined, style]
     }, props))
   });
 });

package/esm/overlays/tooltip/__figma__/Tooltip.figma.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { figma } from '@figma/code-connect';
 import { Button } from '../../../buttons';
-import { TextBody, TextHeadline } from '../../../typography';
+import { Text } from '../../../typography';
 import { Tooltip } from '../Tooltip';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 figma.connect(Tooltip, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=715%3A14162', {
@@ -76,9 +76,11 @@ figma.connect(Tooltip, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-
     } = _ref2;
     return /*#__PURE__*/_jsx(Tooltip, {
       content: /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(TextHeadline, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "headline",
           children: content.title
-        }), /*#__PURE__*/_jsx(TextBody, {
+        }), /*#__PURE__*/_jsx(Text, {
+          font: "body",
           children: content.description
         })]
       }),

package/esm/overlays/tooltip/useTooltipPosition.js

@@ -1,6 +1,6 @@
 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 { useCallback, useMemo } from 'react';
-import { Platform } from 'react-native';
+import { Platform, StatusBar } from 'react-native';
 import { gutter } from '@coinbase/cds-common/tokens/sizing';
 import { IOS_BOTTOM_NAV_BAR_HEIGHT, useDimensions } from '../../hooks/useDimensions';
 import { useTheme } from '../../hooks/useTheme';
@@ -28,12 +28,21 @@ export const useTooltipPosition = _ref => {
     return pageOffsetX - Math.ceil(tooltipLayout.width / 2 - width / 2);
   }, [subjectLayout, tooltipLayout.width]);
   const calculateTooltipTop = useCallback(calculatedPlacement => {
-    var _subjectLayout$height, _tooltipLayout$height;
+    var _StatusBar$currentHei, _subjectLayout$height, _tooltipLayout$height;
     if (subjectLayout === undefined || tooltipLayout.height === 0) return undefined;
     const {
       pageOffsetY
     } = subjectLayout;
-    const actualPageYOffset = Platform.OS === 'ios' || yShiftByStatusBarHeight ? pageOffsetY : pageOffsetY - (statusBarHeight != null ? statusBarHeight : 0);
+
+    // On Android, we detect edge-to-edge mode by checking useSafeAreaInsets().top:
+    // - When > 0: App content extends behind the status bar (edge-to-edge enabled).
+    //   The tooltip and subject share the same coordinate origin, so no adjustment needed.
+    // - When === 0: App content is placed below the status bar (edge-to-edge disabled).
+    //   The subject's pageOffsetY is measured from screen top, but the tooltip is
+    //   rendered inside a Modal whose coordinate system starts below the status bar.
+    //   We subtract StatusBar.currentHeight to reconcile these two origins.
+    const isEdgeToEdge = statusBarHeight > 0;
+    const actualPageYOffset = Platform.OS === 'ios' || yShiftByStatusBarHeight ? pageOffsetY : isEdgeToEdge ? pageOffsetY : pageOffsetY - ((_StatusBar$currentHei = StatusBar.currentHeight) != null ? _StatusBar$currentHei : 0);
     return calculatedPlacement === 'bottom' ? actualPageYOffset + ((_subjectLayout$height = subjectLayout == null ? void 0 : subjectLayout.height) != null ? _subjectLayout$height : 0) : actualPageYOffset - ((_tooltipLayout$height = tooltipLayout == null ? void 0 : tooltipLayout.height) != null ? _tooltipLayout$height : 0);
   }, [statusBarHeight, subjectLayout, tooltipLayout.height, yShiftByStatusBarHeight]);
   const screenAwareTooltipPosition = useMemo(() => {

package/esm/overlays/useModal.js

@@ -1,7 +1,7 @@
 import { useModal } from '@coinbase/cds-common/overlays/useModal';
 
 /**
- * @deprecated Use the visible and onRequestClose props as outlined in the docs here https://cds.coinbase.com/components/modal#get-started. This will be removed in a future major release.
+ * @deprecated Use the `visible` and `onRequestClose` props as outlined in the docs here https://cds.coinbase.com/components/modal#get-started. This will be removed in a future major release.
  * @deprecationExpectedRemoval v7
  */
 export { useModal };

package/esm/page/__stories__/PageFooterInPage.stories.js

@@ -57,11 +57,13 @@ const PageFooterInPageScreen = () => {
       children: [/*#__PURE__*/_jsx(VStack, {
         alignContent: "center",
         alignItems: "center",
-        dangerouslySetBackground: "#FADADD",
         gap: 0,
         justifyContent: "center",
         left: 0,
         padding: 10,
+        style: {
+          backgroundColor: '#FADADD'
+        },
         children: /*#__PURE__*/_jsx(Text, {
           font: "title1",
           children: "Primary Content"

package/esm/page/__stories__/PageHeader.stories.js

@@ -55,7 +55,9 @@ const exampleProps = {
     children: "Intermediary Content"
   }),
   intermediary2: /*#__PURE__*/_jsx(Box, {
-    dangerouslySetBackground: "red",
+    style: {
+      backgroundColor: 'red'
+    },
     children: /*#__PURE__*/_jsx(Text, {
       font: "body",
       children: "Hello there. This is a rather long text sentence since I do not have lorem ipsum handy. Hello there. This is a rather long text sentence since I do not have lorem ipsum handy."

package/esm/page/__stories__/PageHeaderInErrorEmptyState.stories.js

@@ -40,9 +40,8 @@ const PageHeaderInErrorEmptyState = () => {
         width: "100%",
         children: [/*#__PURE__*/_jsx(PageHeader, {
           background: "bg",
-          position: "sticky",
           start: exampleProps.logoMark2,
-          top: "0"
+          top: 0
         }), /*#__PURE__*/_jsx(Box, {
           background: "bgPrimaryWash",
           children: /*#__PURE__*/_jsxs(VStack, {

package/esm/page/__stories__/PageHeaderInPage.stories.js

@@ -46,19 +46,20 @@ const PageHeaderInPage = () => {
             name: "close",
             testID: "header-back-button"
           }),
-          position: "sticky",
           start: exampleProps.start,
           title: exampleProps.title,
-          top: "0"
+          top: 0
         }), /*#__PURE__*/_jsx(VStack, {
           alignContent: "center",
           alignItems: "center",
-          dangerouslySetBackground: "#FADADD",
           flexGrow: 1,
           flexShrink: 1,
-          height: "500px",
+          height: 500,
           justifyContent: "center",
           padding: 10,
+          style: {
+            backgroundColor: '#FADADD'
+          },
           children: /*#__PURE__*/_jsx(Text, {
             font: "title1",
             children: "Primary Content"

package/esm/stepper/DefaultStepperHeaderHorizontal.js

@@ -1,16 +1,19 @@
-const _excluded = ["activeStep", "complete", "flatStepIds", "style", "paddingBottom", "width", "font", "fontFamily"];
+const _excluded = ["activeStep", "complete", "disableAnimateOnMount", "flatStepIds", "style", "paddingBottom", "width", "font", "fontFamily"];
 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); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import { memo, useEffect, useMemo } from 'react';
-import { animated, useSpring } from '@react-spring/native';
+import { memo, useEffect, useMemo, useRef, useState } from 'react';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { durations } from '@coinbase/cds-common/motion/tokens';
 import { HStack } from '../layout/HStack';
+import { mobileCurves } from '../motion/convertMotionConfig';
 import { Text } from '../typography/Text';
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-const AnimatedHStack = animated(HStack);
+const AnimatedHStack = Animated.createAnimatedComponent(HStack);
 export const DefaultStepperHeaderHorizontal = /*#__PURE__*/memo(function DefaultStepperHeaderHorizontal(_ref) {
   let {
       activeStep,
       complete,
+      disableAnimateOnMount,
       flatStepIds,
       style,
       paddingBottom = 1.5,
@@ -19,31 +22,44 @@ export const DefaultStepperHeaderHorizontal = /*#__PURE__*/memo(function Default
       fontFamily = font
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const [spring, springApi] = useSpring({
-    from: {
-      opacity: 0
-    },
-    to: {
-      opacity: 1
-    },
-    reset: true
-  }, []);
-
-  // TO DO: resetting the spring doesn't work like it does in react-spring on web
-  // need to look into this deeper and understand why there is a difference in behavior
+  const opacity = useSharedValue(disableAnimateOnMount ? 1 : 0);
+  const disableAnimateOnMountRef = useRef(disableAnimateOnMount);
+  const isInitialRender = useRef(true);
+  const [displayedStep, setDisplayedStep] = useState(activeStep);
+  const [displayedComplete, setDisplayedComplete] = useState(complete);
   useEffect(() => {
-    springApi.start({
-      from: {
-        opacity: 0
-      },
-      to: {
-        opacity: 1
-      },
-      reset: true
+    if (isInitialRender.current) {
+      isInitialRender.current = false;
+      setDisplayedStep(activeStep);
+      setDisplayedComplete(complete);
+      if (disableAnimateOnMountRef.current) return;
+      opacity.value = withTiming(1, {
+        duration: durations.fast1,
+        easing: mobileCurves.linear
+      });
+      return;
+    }
+
+    // Fade out with old text, then swap text and fade in
+    opacity.value = withTiming(0, {
+      duration: durations.fast1,
+      easing: mobileCurves.linear
     });
-  }, [springApi, activeStep]);
-  const styles = useMemo(() => [style, spring], [style, spring]);
-  const flatStepIndex = activeStep ? flatStepIds.indexOf(activeStep.id) : -1;
+    const timeout = setTimeout(() => {
+      setDisplayedStep(activeStep);
+      setDisplayedComplete(complete);
+      opacity.value = withTiming(1, {
+        duration: durations.fast1,
+        easing: mobileCurves.linear
+      });
+    }, durations.fast1 + durations.fast1);
+    return () => clearTimeout(timeout);
+  }, [activeStep, complete, opacity]);
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value
+  }));
+  const styles = useMemo(() => [style, animatedStyle], [style, animatedStyle]);
+  const flatStepIndex = displayedStep ? flatStepIds.indexOf(displayedStep.id) : -1;
   const emptyText = ' '; // Simple space for React Native
 
   return /*#__PURE__*/_jsx(AnimatedHStack, _extends({
@@ -57,7 +73,7 @@ export const DefaultStepperHeaderHorizontal = /*#__PURE__*/memo(function Default
       display: "flex",
       font: "caption",
       fontFamily: fontFamily,
-      children: !activeStep || complete ? emptyText : /*#__PURE__*/_jsxs(HStack, {
+      children: !displayedStep || displayedComplete ? emptyText : /*#__PURE__*/_jsxs(HStack, {
         gap: 1,
         children: [/*#__PURE__*/_jsxs(Text, {
           accessibilityElementsHidden: true,
@@ -66,12 +82,12 @@ export const DefaultStepperHeaderHorizontal = /*#__PURE__*/memo(function Default
           fontFamily: fontFamily,
           paddingEnd: 1,
           children: [flatStepIndex + 1, "/", flatStepIds.length]
-        }), activeStep.label && typeof activeStep.label === 'string' ? /*#__PURE__*/_jsx(Text, {
+        }), displayedStep.label && typeof displayedStep.label === 'string' ? /*#__PURE__*/_jsx(Text, {
           font: font,
           fontFamily: fontFamily,
           numberOfLines: 1,
-          children: activeStep.label
-        }) : activeStep.label]
+          children: displayedStep.label
+        }) : displayedStep.label]
       })
     })
   }));

package/esm/stepper/DefaultStepperProgressHorizontal.js

@@ -1,11 +1,11 @@
-const _excluded = ["step", "parentStep", "activeStepId", "depth", "active", "visited", "flatStepIds", "progress", "complete", "isDescendentActive", "progressSpringConfig", "animate", "disableAnimateOnMount", "style", "background", "defaultFill", "activeFill", "descendentActiveFill", "visitedFill", "completeFill", "borderRadius", "height"];
+const _excluded = ["step", "parentStep", "activeStepId", "depth", "active", "visited", "flatStepIds", "progress", "complete", "isDescendentActive", "progressTimingConfig", "animate", "disableAnimateOnMount", "style", "background", "defaultFill", "activeFill", "descendentActiveFill", "visitedFill", "completeFill", "borderRadius", "height"];
 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); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import { memo } from 'react';
-import { animated, to } from '@react-spring/native';
+import { memo, useCallback, useEffect } from 'react';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import { Box } from '../layout/Box';
 import { jsx as _jsx } from "react/jsx-runtime";
-const AnimatedBox = animated(Box);
+const AnimatedBox = Animated.createAnimatedComponent(Box);
 export const DefaultStepperProgressHorizontal = /*#__PURE__*/memo(function DefaultStepperProgressHorizontal(_ref) {
   let {
       active,
@@ -13,6 +13,7 @@ export const DefaultStepperProgressHorizontal = /*#__PURE__*/memo(function Defau
       progress,
       complete,
       isDescendentActive,
+      progressTimingConfig,
       style,
       background = 'bgLine',
       defaultFill = 'bgPrimary',
@@ -24,19 +25,31 @@ export const DefaultStepperProgressHorizontal = /*#__PURE__*/memo(function Defau
       height = 4
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const containerWidth = useSharedValue(0);
+  const animatedProgress = useSharedValue(progress);
+  const handleLayout = useCallback(event => {
+    containerWidth.value = event.nativeEvent.layout.width;
+  }, [containerWidth]);
+  useEffect(() => {
+    animatedProgress.value = withTiming(progress, progressTimingConfig);
+  }, [progress, progressTimingConfig, animatedProgress]);
+  const animatedStyle = useAnimatedStyle(() => ({
+    width: animatedProgress.value * containerWidth.value
+  }));
   return /*#__PURE__*/_jsx(Box, _extends({
     accessibilityElementsHidden: true,
     background: background,
     borderRadius: borderRadius,
     flexGrow: 1,
     height: height,
+    onLayout: handleLayout,
     style: style
   }, props, {
     children: /*#__PURE__*/_jsx(AnimatedBox, {
       background: complete ? completeFill : active ? activeFill : isDescendentActive ? descendentActiveFill : visited ? visitedFill : defaultFill,
       borderRadius: borderRadius,
       height: "100%",
-      width: to([progress], width => width * 100 + "%")
+      style: animatedStyle
     })
   }));
 });