@coinbase/cds-mobile 8.13.2 → 8.13.5

package/CHANGELOG.md

@@ -8,6 +8,24 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.13.5 (10/3/2025 PST)
+
+#### 🐞 Fixes
+
+- Support custom font in SegmentedTab. [[#65](https://github.com/coinbase/cds/pull/65)]
+
+## 8.13.4 (10/1/2025 PST)
+
+#### 🐞 Fixes
+
+- Fix tour position flickering issue.
+
+## 8.13.3 (10/1/2025 PST)
+
+#### 🐞 Fixes
+
+- Remove alignSelf="start" from mobile RollingNumber, keeping it the same behavior with web. [[#55](https://github.com/coinbase/cds/pull/55)]
+
 ## 8.13.2 (10/1/2025 PST)
 
 #### 🐞 Fixes

package/dts/tabs/SegmentedTab.d.ts

@@ -8,22 +8,24 @@ import {
 } from 'react-native';
 import type { ThemeVars } from '@coinbase/cds-common/core/theme';
 import { type TabValue } from '@coinbase/cds-common/tabs/useTabs';
-export type SegmentedTabProps<T extends string = string> = {
-  /**
-   * Text color when the SegmentedTab is active.
-   * @default negativeForeground
-   */
-  activeColor?: ThemeVars.Color;
-  /**
-   * Text color when the SegmentedTab is inactive.
-   * @default foreground
-   */
-  color?: ThemeVars.Color;
-  /** Callback that is fired when the SegmentedTab is pressed. */
-  onPress?: (id: string, event: GestureResponderEvent) => void;
-  style?: StyleProp<ViewStyle>;
-} & TabValue<T> &
-  Omit<PressableProps, 'children' | 'disabled' | 'onPress' | 'style'>;
+import { type TextBaseProps } from '../typography/Text';
+export type SegmentedTabProps<T extends string = string> = TabValue<T> &
+  Pick<TextBaseProps, 'font' | 'fontFamily' | 'fontSize' | 'fontWeight' | 'lineHeight'> &
+  Omit<PressableProps, 'children' | 'disabled' | 'onPress' | 'style'> & {
+    /**
+     * Text color when the SegmentedTab is active.
+     * @default negativeForeground
+     */
+    activeColor?: ThemeVars.Color;
+    /**
+     * Text color when the SegmentedTab is inactive.
+     * @default foreground
+     */
+    color?: ThemeVars.Color;
+    /** Callback that is fired when the SegmentedTab is pressed. */
+    onPress?: (id: string, event: GestureResponderEvent) => void;
+    style?: StyleProp<ViewStyle>;
+  };
 type SegmentedTabFC = <T extends string = string>(
   props: SegmentedTabProps<T> & {
     ref?: React.ForwardedRef<View>;

package/dts/tabs/SegmentedTab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedTab.d.ts","sourceRoot":"","sources":["../../src/tabs/SegmentedTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAO,EACL,KAAK,qBAAqB,EAE1B,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,IAAI,EACT,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AASlE,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IACzD;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC9B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACxB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,GAAG,QAAQ,CAAC,CAAC,CAAC,GACb,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,CAAC,CAAC;AAItE,KAAK,cAAc,GAAG,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAC9C,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;CAAE,KAC7D,KAAK,CAAC,YAAY,CAAC;AA0FxB,eAAO,MAAM,YAAY,EAA4B,cAAc,CAAC"}
+{"version":3,"file":"SegmentedTab.d.ts","sourceRoot":"","sources":["../../src/tabs/SegmentedTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAO,EACL,KAAK,qBAAqB,EAE1B,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,IAAI,EACT,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAKlE,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAI9D,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,QAAQ,CAAC,CAAC,CAAC,GACpE,IAAI,CAAC,aAAa,EAAE,MAAM,GAAG,YAAY,GAAG,UAAU,GAAG,YAAY,GAAG,YAAY,CAAC,GACrF,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,CAAC,GAAG;IACpE;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC9B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACxB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAIJ,KAAK,cAAc,GAAG,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAC9C,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;CAAE,KAC7D,KAAK,CAAC,YAAY,CAAC;AAmGxB,eAAO,MAAM,YAAY,EAA4B,cAAc,CAAC"}

package/dts/tour/Tour.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tour.d.ts","sourceRoot":"","sources":["../../src/tour/Tour.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAS,IAAI,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAQxD,OAAO,KAAK,EACV,WAAW,EACX,sBAAsB,EAEvB,MAAM,mCAAmC,CAAC;AAE3C,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,aAAa,EAClB,KAAK,YAAY,EAClB,MAAM,mBAAmB,CAAC;AAmB3B,MAAM,MAAM,sBAAsB,GAAG;IACnC;;OAEG;IACH,oBAAoB,EAAE,IAAI,CAAC;IAC3B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAAC,CAAC;AAEjE,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,WAAW,CAAC,CAAC,CAAC,GAAG;IAClE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC;;;OAGG;IACH,sBAAsB,CAAC,EAAE,sBAAsB,CAAC;IAChD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B;;;OAGG;IACH,qBAAqB,CAAC,EAAE,oBAAoB,CAAC;IAC7C;;OAEG;IACH,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAClC;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxC,GAAG,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,GAAG,yBAAyB,GAAG,IAAI,CAAC,GACzF,WAAW,CAAC;AAEd,KAAK,MAAM,GAAG,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;AA2HlF,eAAO,MAAM,IAAI,EAAoB,MAAM,CAAC"}
+{"version":3,"file":"Tour.d.ts","sourceRoot":"","sources":["../../src/tour/Tour.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAAS,IAAI,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAMxD,OAAO,KAAK,EACV,WAAW,EACX,sBAAsB,EAEvB,MAAM,mCAAmC,CAAC;AAE3C,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,aAAa,EAClB,KAAK,YAAY,EAClB,MAAM,mBAAmB,CAAC;AAmB3B,MAAM,MAAM,sBAAsB,GAAG;IACnC;;OAEG;IACH,oBAAoB,EAAE,IAAI,CAAC;IAC3B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAAC,CAAC;AAEjE,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,WAAW,CAAC,CAAC,CAAC,GAAG;IAClE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC;;;OAGG;IACH,sBAAsB,CAAC,EAAE,sBAAsB,CAAC;IAChD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B;;;OAGG;IACH,qBAAqB,CAAC,EAAE,oBAAoB,CAAC;IAC7C;;OAEG;IACH,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAClC;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxC,GAAG,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,GAAG,yBAAyB,GAAG,IAAI,CAAC,GACzF,WAAW,CAAC;AAEd,KAAK,MAAM,GAAG,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;AA2IlF,eAAO,MAAM,IAAI,EAAoB,MAAM,CAAC"}

package/dts/tour/TourStep.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TourStep.d.ts","sourceRoot":"","sources":["../../src/tour/TourStep.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAI3C,KAAK,aAAa,GAAG;IACnB,iDAAiD;IACjD,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,QAAQ,GAAI,kBAAkB,aAAa,4CAQvD,CAAC"}
+{"version":3,"file":"TourStep.d.ts","sourceRoot":"","sources":["../../src/tour/TourStep.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAI3C,KAAK,aAAa,GAAG;IACnB,iDAAiD;IACjD,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,QAAQ,GAAI,kBAAkB,aAAa,4CAWvD,CAAC"}

package/esm/numbers/RollingNumber/RollingNumber.js

@@ -256,7 +256,6 @@ export const RollingNumber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, re
   }, [accessibilityLiveRegion, textProps, accessibilityLabelPrefix, accessibilityLabel, formatted, prefix, suffix, accessibilityLabelSuffix, styles == null ? void 0 : styles.text]);
   return /*#__PURE__*/_jsxs(HStack, {
     ref: ref,
-    alignSelf: "flex-start",
     style: rootStyle,
     testID: testID,
     children: [invisibleMeasuredDigits, screenReaderOnlySection, /*#__PURE__*/_jsxs(HStack, {

package/esm/numbers/__stories__/RollingNumber.stories.js

@@ -470,7 +470,8 @@ const StyleOverrides = () => {
           paddingVertical: 4,
           paddingHorizontal: 8,
           borderRadius: 8,
-          backgroundColor: theme.color.bgSecondaryWash
+          backgroundColor: theme.color.bgSecondaryWash,
+          alignSelf: 'flex-start'
         },
         fraction: {
           opacity: 0.2,

package/esm/tabs/SegmentedTab.js

@@ -1,4 +1,4 @@
-const _excluded = ["id", "label", "disabled", "onPress", "color", "activeColor", "style", "aria-selected", "accessibilityRole", "testID"];
+const _excluded = ["id", "label", "disabled", "onPress", "color", "activeColor", "style", "aria-selected", "accessibilityRole", "testID", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight"];
 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, useMemo } from 'react';
@@ -23,7 +23,12 @@ const SegmentedTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
       style,
       'aria-selected': ariaSelected,
       accessibilityRole = 'button',
-      testID
+      testID,
+      font = 'headline',
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const {
@@ -64,7 +69,11 @@ const SegmentedTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
       paddingY: 1,
       children: typeof label === 'string' ? /*#__PURE__*/_jsx(AnimatedTextHeadline, {
         animated: true,
-        font: "headline",
+        font: font,
+        fontFamily: fontFamily,
+        fontSize: fontSize,
+        fontWeight: fontWeight,
+        lineHeight: lineHeight,
         style: animatedTextStyles,
         testID: testID + "-label",
         children: label

package/esm/tabs/__stories__/SegmentedTabs.stories.js

@@ -57,6 +57,14 @@ const AnotherCustomSegmentedTab = _ref2 => {
     })
   });
 };
+const CustomSegmentedTabColor = props => /*#__PURE__*/_jsx(SegmentedTab, _extends({}, props, {
+  activeColor: "fgWarning",
+  color: "bgPrimary",
+  font: "label2"
+}));
+const CustomSegmentedTabFont = props => /*#__PURE__*/_jsx(SegmentedTab, _extends({}, props, {
+  font: "label2"
+}));
 const basicSegments = [{
   id: 'buy',
   label: 'Buy'
@@ -124,6 +132,19 @@ const customSegments = [{
   id: 'convert',
   label: 'Convert'
 }];
+const mixedCustomSegments = [{
+  id: 'buy',
+  label: 'Buy',
+  Component: CustomSegmentedTabColor
+}, {
+  id: 'sell',
+  label: 'Sell',
+  Component: CustomSegmentedTabFont
+}, {
+  id: 'convert',
+  label: 'Convert',
+  Component: CustomSegmentedTabColor
+}];
 const SegmentedTabsExample = _ref3 => {
   let {
       title,
@@ -179,6 +200,10 @@ const SegmentedTabsScreen = () => /*#__PURE__*/_jsxs(ExampleScreen, {
     defaultActiveTab: customSegments[0],
     tabs: customSegments,
     title: "Custom Single Segment"
+  }), /*#__PURE__*/_jsx(SegmentedTabsExample, {
+    defaultActiveTab: mixedCustomSegments[0],
+    tabs: mixedCustomSegments,
+    title: "Mixed Custom Segments"
   }), /*#__PURE__*/_jsx(SegmentedTabsExample, {
     TabComponent: AnotherCustomSegmentedTab,
     TabsActiveIndicatorComponent: CustomActiveIndicator,

package/esm/tour/Tour.js

@@ -1,9 +1,7 @@
 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, { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useRef } from 'react';
 import { Modal, View } from 'react-native';
-import { useRefMap } from '@coinbase/cds-common/hooks/useRefMap';
 import { OverlayContentContext } from '@coinbase/cds-common/overlays/OverlayContentContext';
-import { RefMapContext } from '@coinbase/cds-common/system/RefMapContext';
 import { TourContext } from '@coinbase/cds-common/tour/TourContext';
 import { useTour } from '@coinbase/cds-common/tour/useTour';
 import { arrow as arrowMiddleware, autoPlacement, offset, shift, useFloating } from '@floating-ui/react-native';
@@ -35,13 +33,17 @@ const TourComponent = _ref => {
     testID
   } = _ref;
   const theme = useTheme();
-  const refMap = useRefMap();
+  const defaultTourStepOffset = theme.space[3];
+  const defaultTourStepShiftPadding = theme.space[4];
   const tourStepArrowRef = useRef(null);
   const RenderedTourStep = activeTourStep == null ? void 0 : activeTourStep.Component;
   const RenderedTourStepArrow = (_activeTourStep$Arrow = activeTourStep == null ? void 0 : activeTourStep.ArrowComponent) != null ? _activeTourStep$Arrow : TourStepArrowComponent;
-  const activeTourStepTarget = activeTourStep ? refMap.getRef(activeTourStep.id) : null;
-  const defaultTourStepOffset = theme.space[3];
-  const defaultTourStepShiftPadding = theme.space[4];
+  const [animation, animationApi] = useSpring(() => ({
+    from: {
+      opacity: 0
+    },
+    config: springConfig.slow
+  }), []);
   const {
     refs,
     floatingStyles,
@@ -56,25 +58,43 @@ const TourComponent = _ref => {
       element: tourStepArrowRef
     })]
   });
-  const [animation, animationApi] = useSpring(() => ({
-    from: {
-      opacity: 0
-    },
-    config: springConfig.slow
-  }), []);
   const handleChange = useCallback(tourStep => {
-    // If the opacity is already 0, animating it to 0 does not trigger `onRest`
-    if (animation.opacity.get() === 0) return onChange(tourStep);
     void animationApi.start({
       to: {
         opacity: 0
       },
       config: springConfig.stiff,
-      onRest: () => onChange(tourStep)
+      onResolve: () => {
+        onChange(tourStep);
+      }
     });
-  }, [animation.opacity, animationApi, onChange]);
-  const revealTourStep = useCallback(() => {
-    activeTourStepTarget == null || activeTourStepTarget.measureInWindow((x, y, width, height) => {
+  }, [animationApi, onChange]);
+  const api = useTour({
+    steps,
+    activeTourStep,
+    onChange: handleChange
+  });
+  const {
+    activeTourStepTarget,
+    setActiveTourStepTarget
+  } = api;
+
+  // Component Lifecycle & Side Effects
+  // ---------------------------------------------------------------------------
+  // This component's visual side effects (animations) are driven by a single
+  // callback, `handleSetActiveTourStepTarget`.
+  //
+  // This function is called from the `TourStep` component's ref callback
+  // whenever the active step changes. Because the ref callback is tied to the
+  // lifecycle of the `TourStep`, it reliably fires whenever a new step becomes
+  // active.
+  //
+  // This centralizes the logic for revealing a step: when the callback fires,
+  // we measure the target element's position on screen and then kick off the
+  // fade-in animation, all in one sequential, event-driven flow.
+
+  const handleActiveTourStepTargetChange = useCallback(target => {
+    target == null || target.measureInWindow((x, y, width, height) => {
       refs.setReference({
         measure: callback => {
           callback(x, y, width, height);
@@ -87,53 +107,44 @@ const TourComponent = _ref => {
         }
       });
     });
-  }, [activeTourStepTarget, animationApi, refs]);
-  const api = useTour({
-    steps,
-    activeTourStep,
-    onChange: handleChange
-  });
-  useEffect(() => {
-    if (!activeTourStep) return;
-    revealTourStep();
-  }, [activeTourStep, revealTourStep]);
+    setActiveTourStepTarget(target);
+  }, [animationApi, refs, setActiveTourStepTarget]);
   return /*#__PURE__*/_jsx(OverlayContentContext.Provider, {
     value: overlayContentContextValue,
-    children: /*#__PURE__*/_jsx(RefMapContext.Provider, {
-      value: refMap,
-      children: /*#__PURE__*/_jsxs(TourContext.Provider, {
-        value: api,
-        children: [children, !!RenderedTourStep && /*#__PURE__*/_jsxs(Modal, {
-          transparent: true,
-          accessibilityLabel: accessibilityLabel,
-          accessibilityLabelledBy: accessibilityLabelledBy,
-          animationType: "none",
-          id: id,
-          presentationStyle: "overFullScreen",
-          testID: testID,
-          children: [!((_activeTourStep$hideO = activeTourStep.hideOverlay) != null ? _activeTourStep$hideO : hideOverlay) && !!activeTourStepTarget && /*#__PURE__*/_jsx(animated.View, {
+    children: /*#__PURE__*/_jsxs(TourContext.Provider, {
+      value: _extends({}, api, {
+        setActiveTourStepTarget: handleActiveTourStepTargetChange
+      }),
+      children: [children, !!RenderedTourStep && /*#__PURE__*/_jsxs(Modal, {
+        transparent: true,
+        accessibilityLabel: accessibilityLabel,
+        accessibilityLabelledBy: accessibilityLabelledBy,
+        animationType: "none",
+        id: id,
+        presentationStyle: "overFullScreen",
+        testID: testID,
+        children: [!((_activeTourStep$hideO = activeTourStep.hideOverlay) != null ? _activeTourStep$hideO : hideOverlay) && !!activeTourStepTarget && /*#__PURE__*/_jsx(animated.View, {
+          style: animation,
+          children: /*#__PURE__*/_jsx(TourMaskComponent, {
+            activeTourStepTarget: activeTourStepTarget,
+            borderRadius: (_activeTourStep$tourM = activeTourStep.tourMaskBorderRadius) != null ? _activeTourStep$tourM : tourMaskBorderRadius,
+            padding: (_activeTourStep$tourM2 = activeTourStep.tourMaskPadding) != null ? _activeTourStep$tourM2 : tourMaskPadding
+          })
+        }), /*#__PURE__*/_jsx(View, {
+          ref: refs.setFloating,
+          collapsable: false,
+          style: floatingStyles,
+          children: /*#__PURE__*/_jsxs(animated.View, {
             style: animation,
-            children: /*#__PURE__*/_jsx(TourMaskComponent, {
-              activeTourStepTarget: activeTourStepTarget,
-              borderRadius: (_activeTourStep$tourM = activeTourStep.tourMaskBorderRadius) != null ? _activeTourStep$tourM : tourMaskBorderRadius,
-              padding: (_activeTourStep$tourM2 = activeTourStep.tourMaskPadding) != null ? _activeTourStep$tourM2 : tourMaskPadding
-            })
-          }), /*#__PURE__*/_jsx(View, {
-            ref: refs.setFloating,
-            collapsable: false,
-            style: floatingStyles,
-            children: /*#__PURE__*/_jsxs(animated.View, {
-              style: animation,
-              children: [/*#__PURE__*/_jsx(RenderedTourStepArrow, {
-                ref: tourStepArrowRef,
-                arrow: arrow,
-                placement: placement,
-                style: activeTourStep == null ? void 0 : activeTourStep.arrowStyle
-              }), /*#__PURE__*/_jsx(RenderedTourStep, _extends({}, activeTourStep))]
-            })
-          })]
+            children: [/*#__PURE__*/_jsx(RenderedTourStepArrow, {
+              ref: tourStepArrowRef,
+              arrow: arrow,
+              placement: placement,
+              style: activeTourStep == null ? void 0 : activeTourStep.arrowStyle
+            }), /*#__PURE__*/_jsx(RenderedTourStep, _extends({}, activeTourStep))]
+          })
         })]
-      })
+      })]
     })
   });
 };

package/esm/tour/TourStep.js

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import { View } from 'react-native';
-import { useRefMapContext } from '@coinbase/cds-common/system/RefMapContext';
+import { useTourContext } from '@coinbase/cds-common/tour/TourContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * The TourStep component wraps the target element (children) that you want to highlight during a step
@@ -13,9 +13,10 @@ export const TourStep = _ref => {
     children
   } = _ref;
   const {
-    registerRef
-  } = useRefMapContext();
-  const refCallback = useCallback(ref => ref && registerRef(id, ref), [id, registerRef]);
+    activeTourStep,
+    setActiveTourStepTarget
+  } = useTourContext();
+  const refCallback = useCallback(ref => (activeTourStep == null ? void 0 : activeTourStep.id) === id && ref && setActiveTourStepTarget(ref), [activeTourStep, id, setActiveTourStepTarget]);
   return /*#__PURE__*/_jsx(View, {
     ref: refCallback,
     collapsable: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.13.2",
+  "version": "8.13.5",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -150,9 +150,9 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.13.2",
+    "@coinbase/cds-common": "^8.13.5",
     "@coinbase/cds-icons": "^5.4.1",
-    "@coinbase/cds-illustrations": "^4.22.1",
+    "@coinbase/cds-illustrations": "^4.23.0",
     "@coinbase/cds-lottie-files": "^3.3.1",
     "@coinbase/cds-utils": "^2.3.2",
     "@floating-ui/react-native": "^0.10.5",