@coinbase/cds-mobile 9.20.0 → 9.21.1

package/CHANGELOG.md

@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 9.21.1 (8/24/2026 PST)
+
+#### 🐞 Fixes
+
+- Fix DotCount not rendering on mount when count is greater than 0. [[#858](https://github.com/coinbase/cds/pull/858)]
+
+## 9.21.0 (8/21/2026 PST)
+
+#### 🚀 Updates
+
+- Fix: apply root safe-area insets inside mobile Modal. [[#846](https://github.com/coinbase/cds/pull/846)]
+
 ## 9.20.0 (8/20/2026 PST)
 
 #### 🚀 Updates

package/dts/dots/DotCount.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DotCount.d.ts","sourceRoot":"","sources":["../../src/dots/DotCount.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAClE,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,SAAS,EAEd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAgBtB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yCAAyC,CAAC;AAC1E,OAAO,KAAK,EACV,oBAAoB,EACpB,gBAAgB,EACjB,MAAM,8CAA8C,CAAC;AACtD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAC1E,OAAO,EACL,kBAAkB,EAClB,wBAAwB,EACzB,MAAM,qDAAqD,CAAC;AAK7D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AASvD,OAAO,EAAE,kBAAkB,EAAE,wBAAwB,EAAE,CAAC;AAexD,MAAM,MAAM,iBAAiB,GAAG,WAAW,GACzC,IAAI,CACF,wBAAwB,EACxB,oBAAoB,GAAG,yBAAyB,GAAG,mBAAmB,CACvE,GACD,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,YAAY,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAC,GAAG;IAC3E;;UAEM;IACN,KAAK,EAAE,MAAM,CAAC;IACd;;;UAGM;IACN,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;SAGK;IACL,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,6CAA6C;IAC7C,GAAG,CAAC,EAAE,oBAAoB,CAAC;IAC3B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,8CAA8C;IAC9C,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;CACjC,CAAC;AAEJ,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAAG;IAC9C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,sEAAsE;IACtE,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,wBAAwB;QACxB,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACjC,mBAAmB;QACnB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC7B,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,QAAQ,qCAAiB,aAAa,6CA2JjD,CAAC"}
+{"version":3,"file":"DotCount.d.ts","sourceRoot":"","sources":["../../src/dots/DotCount.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAClE,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,SAAS,EAEd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAgBtB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yCAAyC,CAAC;AAC1E,OAAO,KAAK,EACV,oBAAoB,EACpB,gBAAgB,EACjB,MAAM,8CAA8C,CAAC;AACtD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAC1E,OAAO,EACL,kBAAkB,EAClB,wBAAwB,EACzB,MAAM,qDAAqD,CAAC;AAK7D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AASvD,OAAO,EAAE,kBAAkB,EAAE,wBAAwB,EAAE,CAAC;AAexD,MAAM,MAAM,iBAAiB,GAAG,WAAW,GACzC,IAAI,CACF,wBAAwB,EACxB,oBAAoB,GAAG,yBAAyB,GAAG,mBAAmB,CACvE,GACD,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,YAAY,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAC,GAAG;IAC3E;;UAEM;IACN,KAAK,EAAE,MAAM,CAAC;IACd;;;UAGM;IACN,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;SAGK;IACL,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,6CAA6C;IAC7C,GAAG,CAAC,EAAE,oBAAoB,CAAC;IAC3B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,8CAA8C;IAC9C,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;CACjC,CAAC;AAEJ,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAAG;IAC9C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,sEAAsE;IACtE,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,wBAAwB;QACxB,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACjC,mBAAmB;QACnB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC7B,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,QAAQ,qCAAiB,aAAa,6CAgKjD,CAAC"}

package/dts/overlays/modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/overlays/modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+E,MAAM,OAAO,CAAC;AAQpG,OAAO,KAAK,EAAE,UAAU,IAAI,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGrF,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,4CAA4C,CAAC;AAKlG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAG1E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKjD,KAAK,wBAAwB,GAAG;IAAE,UAAU,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC;AAE3D;;;GAGG;AACH,KAAK,gBAAgB,GAAG,IAAI,CAC1B,QAAQ,EACN,YAAY,GACZ,OAAO,GACP,aAAa,GACb,aAAa,GACb,cAAc,GACd,qBAAqB,GACrB,sBAAsB,GACtB,wBAAwB,GACxB,yBAAyB,GACzB,gBAAgB,GAChB,mBAAmB,GACnB,kBAAkB,GAClB,gBAAgB,GAChB,UAAU,GACV,aAAa,GACb,gBAAgB,GAChB,eAAe,GACf,aAAa,GACb,oBAAoB,GACpB,kBAAkB,GAClB,WAAW,GACX,SAAS,GACT,UAAU,GACV,UAAU,GACV,YAAY,GACZ,eAAe,GACf,cAAc,GACd,YAAY,GACZ,UAAU,GACV,WAAW,GACX,UAAU,GACV,WAAW,CACd,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,WAAW,GACtC,iBAAiB,GACjB,gBAAgB,GAChB,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,SAAS,GAAG,gBAAgB,GAAG,eAAe,CAAC,GAAG;IAChF,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,wBAAwB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACpF;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB;;SAEK;IACL,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC;IAC7B,yDAAyD;IACzD,MAAM,CAAC,EAAE;QACP,iCAAiC;QACjC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC7B,mDAAmD;QACnD,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACjC,CAAC;CACH,CAAC;AAEJ,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,cAAc,EAAE,gBAAgB,CAAC,CAAC;AAEvE,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC;AAMxC,eAAO,MAAM,KAAK,iDAIb,UAAU,GAAG;IACd,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;CACpC,6CAyJF,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/overlays/modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+E,MAAM,OAAO,CAAC;AASpG,OAAO,KAAK,EAAE,UAAU,IAAI,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGrF,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,4CAA4C,CAAC;AAKlG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAG1E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKjD,KAAK,wBAAwB,GAAG;IAAE,UAAU,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC;AAE3D;;;GAGG;AACH,KAAK,gBAAgB,GAAG,IAAI,CAC1B,QAAQ,EACN,YAAY,GACZ,OAAO,GACP,aAAa,GACb,aAAa,GACb,cAAc,GACd,qBAAqB,GACrB,sBAAsB,GACtB,wBAAwB,GACxB,yBAAyB,GACzB,gBAAgB,GAChB,mBAAmB,GACnB,kBAAkB,GAClB,gBAAgB,GAChB,UAAU,GACV,aAAa,GACb,gBAAgB,GAChB,eAAe,GACf,aAAa,GACb,oBAAoB,GACpB,kBAAkB,GAClB,WAAW,GACX,SAAS,GACT,UAAU,GACV,UAAU,GACV,YAAY,GACZ,eAAe,GACf,cAAc,GACd,YAAY,GACZ,UAAU,GACV,WAAW,GACX,UAAU,GACV,WAAW,CACd,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,WAAW,GACtC,iBAAiB,GACjB,gBAAgB,GAChB,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,SAAS,GAAG,gBAAgB,GAAG,eAAe,CAAC,GAAG;IAChF,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,wBAAwB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACpF;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB;;SAEK;IACL,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC;IAC7B,yDAAyD;IACzD,MAAM,CAAC,EAAE;QACP,iCAAiC;QACjC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC7B,mDAAmD;QACnD,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACjC,CAAC;CACH,CAAC;AAEJ,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,cAAc,EAAE,gBAAgB,CAAC,CAAC;AAEvE,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC;AAMxC,eAAO,MAAM,KAAK,iDAIb,UAAU,GAAG;IACd,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;CACpC,6CAyKF,CAAC"}

package/esm/dots/DotCount.js

@@ -63,8 +63,12 @@ export const DotCount = /*#__PURE__*/memo(_props => {
     width: width != null ? width : height,
     height
   }, overlap);
-  const opacityAnimatedValue = useSharedValue(opacityEnter.fromValue);
-  const scaleAnimatedValue = useSharedValue(scaleEnter.fromValue);
+
+  // When mounting with a count already present, initialize to the visible state so
+  // the badge renders immediately. The enter reaction only fires on a 0->N transition,
+  // which never happens on first mount and may not fire on mount in release builds.
+  const opacityAnimatedValue = useSharedValue(count > 0 ? opacityEnter.toValue : opacityEnter.fromValue);
+  const scaleAnimatedValue = useSharedValue(count > 0 ? scaleEnter.toValue : scaleEnter.fromValue);
   const [shouldUnmount, setShouldUnmount] = useState(count === 0);
   const [countInternal, setCountInternal] = useState(count);
   const prevCount = usePreviousValue(count);

package/esm/overlays/modal/Modal.js

@@ -3,8 +3,8 @@ const _excluded = ["ref"],
 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, useCallback, useEffect, useImperativeHandle, useMemo, useState } from 'react';
-import { Modal as RNModal, Platform, StatusBar, StyleSheet, useWindowDimensions } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
+import { Modal as RNModal, Platform, StatusBar, StyleSheet, useWindowDimensions, View } from 'react-native';
+import { useSafeAreaInsets } 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';
@@ -80,6 +80,19 @@ export const Modal = /*#__PURE__*/memo(_ref => {
     width,
     height
   } = useWindowDimensions();
+  // RN Modal is a separate native surface; SafeAreaView often reports 0 insets.
+  // useSafeAreaInsets() reads the root provider (device insets).
+  const insets = useSafeAreaInsets();
+  const safeAreaStyle = useMemo(() => {
+    var _StatusBar$currentHei;
+    const androidStatusBarHeight = Platform.OS === 'android' ? (_StatusBar$currentHei = StatusBar.currentHeight) != null ? _StatusBar$currentHei : 0 : 0;
+    return [styles.safeAreaContainer, {
+      paddingTop: Math.max(insets.top, androidStatusBarHeight),
+      paddingBottom: insets.bottom,
+      paddingLeft: insets.left,
+      paddingRight: insets.right
+    }, customStyles == null ? void 0 : customStyles.safeArea];
+  }, [customStyles == null ? void 0 : customStyles.safeArea, insets.bottom, insets.left, insets.right, insets.top]);
   const handleClose = useCallback(() => {
     animateOut.start(_ref2 => {
       let {
@@ -165,8 +178,8 @@ export const Modal = /*#__PURE__*/memo(_ref => {
           opacity
         }, customStyles == null ? void 0 : customStyles.modal],
         width: width,
-        children: /*#__PURE__*/_jsx(SafeAreaView, {
-          style: [styles.safeAreaContainer, customStyles == null ? void 0 : customStyles.safeArea],
+        children: /*#__PURE__*/_jsx(View, {
+          style: safeAreaStyle,
           children: /*#__PURE__*/_jsx(ModalContext.Provider, {
             value: modalData,
             children: typeof children === 'function' ? children(renderChildrenProps) : children
@@ -178,7 +191,6 @@ export const Modal = /*#__PURE__*/memo(_ref => {
 });
 const styles = StyleSheet.create({
   safeAreaContainer: {
-    flex: 1,
-    paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0
+    flex: 1
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "9.20.0",
+  "version": "9.21.1",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -218,7 +218,7 @@
     "react-native-worklets": "0.5.2"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^9.20.0",
+    "@coinbase/cds-common": "^9.21.1",
     "@coinbase/cds-icons": "^5.22.0",
     "@coinbase/cds-illustrations": "^4.48.0",
     "@coinbase/cds-lottie-files": "^3.3.4",