@coinbase/cds-mobile 9.6.11 → 9.7.1

package/CHANGELOG.md

@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 9.7.1 (7/22/2026 PST)
+
+#### 🐞 Fixes
+
+- Prevent Overlay/Modal scrim collapsing to 0x0 under Fabric. [[#804](https://github.com/coinbase/cds/pull/804)]
+
+## 9.7.0 (7/22/2026 PST)
+
+#### 🚀 Updates
+
+- Add hideSeparator prop to numpad. [[#799](https://github.com/coinbase/cds/pull/799)]
+
 ## 9.6.11 (7/22/2026 PST)
 
 #### 🐞 Fixes

package/dts/numpad/Numpad.d.ts

@@ -14,6 +14,7 @@ export type NumpadButtonProps = {
   onPress: (value: NumpadValue) => void;
   onLongPress?: (value: NumpadValue) => void;
   separator?: string;
+  hideSeparator?: boolean;
   disabled?: boolean;
   separatorAccessibilityLabel?: string;
   deleteAccessibilityLabel?: string;
@@ -21,6 +22,8 @@ export type NumpadButtonProps = {
 };
 export type NumpadBaseProps = BoxBaseProps & {
   separator?: string;
+  /** When `true`, hides the separator key and removes it from the accessibility tree. */
+  hideSeparator?: boolean;
   disabled?: boolean;
   accessory?: React.ReactNode;
   action?: React.ReactNode;

package/dts/numpad/Numpad.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Numpad.d.ts","sourceRoot":"","sources":["../../src/numpad/Numpad.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAc,IAAI,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAK1E,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAElD,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,KAAK,kBAAkB,EAAa,MAAM,qBAAqB,CAAC;AAGzE,eAAO,MAAM,SAAS,cAAc,CAAC;AACrC,eAAO,MAAM,MAAM,WAAW,CAAC;AAE/B,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC;AAC7C,MAAM,MAAM,UAAU,GAAG,OAAO,MAAM,CAAC;AAEvC,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,aAAa,GAAG,UAAU,CAAC;AAE9D,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,WAAW,CAAC;IACnB,OAAO,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACtC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,QAAQ,CAAC,EAAE,kBAAkB,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,YAAY,GAAG;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,wBAAwB,CAAC,EAAE,MAAM,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,eAAe,GACvC,WAAW,GAAG;IACZ,OAAO,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACtC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IAC3C;;;OAGG;IACH,QAAQ,CAAC,EAAE,kBAAkB,CAAC;CAC/B,GAAG,WAAW,GACf,WAAW,CAAC;AAuBd,eAAO,MAAM,MAAM,+DAId,WAAW,GAAG;IACf,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;CACvB,6CA0EF,CAAC"}
+{"version":3,"file":"Numpad.d.ts","sourceRoot":"","sources":["../../src/numpad/Numpad.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAc,IAAI,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAK1E,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAElD,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,KAAK,kBAAkB,EAAa,MAAM,qBAAqB,CAAC;AAGzE,eAAO,MAAM,SAAS,cAAc,CAAC;AACrC,eAAO,MAAM,MAAM,WAAW,CAAC;AAE/B,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC;AAC7C,MAAM,MAAM,UAAU,GAAG,OAAO,MAAM,CAAC;AAEvC,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,aAAa,GAAG,UAAU,CAAC;AAE9D,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,WAAW,CAAC;IACnB,OAAO,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACtC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,QAAQ,CAAC,EAAE,kBAAkB,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,YAAY,GAAG;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uFAAuF;IACvF,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,wBAAwB,CAAC,EAAE,MAAM,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,eAAe,GACvC,WAAW,GAAG;IACZ,OAAO,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACtC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IAC3C;;;OAGG;IACH,QAAQ,CAAC,EAAE,kBAAkB,CAAC;CAC/B,GAAG,WAAW,GACf,WAAW,CAAC;AAuBd,eAAO,MAAM,MAAM,+DAId,WAAW,GAAG;IACf,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;CACvB,6CA6EF,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;AAEpG,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,6CAsJF,CAAC"}
+{"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"}

package/dts/overlays/overlay/Overlay.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Animated } from 'react-native';
+import { type Animated } from 'react-native';
 import type { BoxBaseProps } from '../../layout/Box';
 import type { VStackProps } from '../../layout/VStack';
 export type OverlayBaseProps = Omit<BoxBaseProps, 'opacity'> & {

package/dts/overlays/overlay/Overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../../src/overlays/overlay/Overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAQ7C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAOvD,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC,GAAG;IAC7D,gIAAgI;IAChI,OAAO,EAAE,QAAQ,CAAC,KAAK,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,gBAAgB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;AAE3E,eAAO,MAAM,OAAO,qCAAiB,YAAY,6CAsB/C,CAAC"}
+{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../../src/overlays/overlay/Overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,KAAK,QAAQ,EAAuB,MAAM,cAAc,CAAC;AAQlE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAOvD,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC,GAAG;IAC7D,gIAAgI;IAChI,OAAO,EAAE,QAAQ,CAAC,KAAK,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,gBAAgB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;AAE3E,eAAO,MAAM,OAAO,qCAAiB,YAAY,6CAyB/C,CAAC"}

package/esm/numpad/Numpad.js

@@ -1,5 +1,5 @@
 const _excluded = ["ref"],
-  _excluded2 = ["separator", "disabled", "onPress", "onLongPress", "accessory", "action", "deleteAccessibilityLabel", "separatorAccessibilityLabel", "testID", "background", "flexGrow", "flexShrink", "gap", "feedback"];
+  _excluded2 = ["separator", "hideSeparator", "disabled", "onPress", "onLongPress", "accessory", "action", "deleteAccessibilityLabel", "separatorAccessibilityLabel", "testID", "background", "flexGrow", "flexShrink", "gap", "feedback"];
 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, useMemo } from 'react';
@@ -36,6 +36,7 @@ export const Numpad = /*#__PURE__*/memo(_ref => {
   const mergedProps = useComponentConfig('Numpad', _props);
   const {
       separator = '.',
+      hideSeparator = false,
       disabled,
       onPress,
       onLongPress,
@@ -63,6 +64,7 @@ export const Numpad = /*#__PURE__*/memo(_ref => {
           deleteAccessibilityLabel: deleteAccessibilityLabel,
           disabled: disabled,
           feedback: feedback,
+          hideSeparator: hideSeparator,
           onLongPress: onLongPress,
           onPress: onPress,
           separator: separator,
@@ -71,7 +73,7 @@ export const Numpad = /*#__PURE__*/memo(_ref => {
         }, "value_" + value))
       }, "num_pad_item_" + i);
     });
-  }, [deleteAccessibilityLabel, disabled, feedback, onLongPress, onPress, separator, separatorAccessibilityLabel]);
+  }, [deleteAccessibilityLabel, disabled, feedback, hideSeparator, onLongPress, onPress, separator, separatorAccessibilityLabel]);
   return /*#__PURE__*/_jsxs(VStack, _extends({
     ref: forwardedRef,
     background: background,
@@ -94,6 +96,7 @@ const NumpadButton = /*#__PURE__*/memo(function NumpadButton(_ref2) {
     onPress,
     onLongPress,
     separator = '.',
+    hideSeparator = false,
     disabled,
     separatorAccessibilityLabel,
     deleteAccessibilityLabel,
@@ -127,16 +130,19 @@ const NumpadButton = /*#__PURE__*/memo(function NumpadButton(_ref2) {
     if (value === 'SEPARATOR') return 'numpad-separator';
     return "numpad-" + value;
   }, [value]);
+  const isSeparatorHidden = value === 'SEPARATOR' && (hideSeparator || separator === '');
   const pressableStyles = useMemo(() => _extends({}, styles.button, {
-    opacity: value === 'SEPARATOR' && separator === '' ? 0 : undefined,
-    pointerEvents: value === 'SEPARATOR' && separator === '' ? 'none' : undefined
-  }), [separator, value]);
+    opacity: isSeparatorHidden ? 0 : undefined,
+    pointerEvents: isSeparatorHidden ? 'none' : undefined
+  }), [isSeparatorHidden]);
   return /*#__PURE__*/_jsx(Pressable, {
+    accessibilityElementsHidden: isSeparatorHidden,
     accessibilityLabel: accessibilityLabel,
     accessibilityRole: "button",
     accessibilityState: {
       disabled
     },
+    accessible: isSeparatorHidden ? false : undefined,
     background: "transparent",
     blendStyles: {
       pressedBackground: theme.color.bg,
@@ -146,6 +152,7 @@ const NumpadButton = /*#__PURE__*/memo(function NumpadButton(_ref2) {
     debounceTime: 100,
     disabled: disabled,
     feedback: feedback,
+    importantForAccessibility: isSeparatorHidden ? 'no-hide-descendants' : undefined,
     onLongPress: handleLongPress,
     onPress: handleOnPress,
     style: pressableStyles,

package/esm/numpad/__stories__/Numpad.stories.js

@@ -210,9 +210,9 @@ const NumpadExample2 = () => {
           paddingBottom: safeBottomPadding
         },
         children: /*#__PURE__*/_jsx(Numpad, {
+          hideSeparator: true,
           onLongPress: onLongPress,
-          onPress: onPress,
-          separator: ""
+          onPress: onPress
         })
       })]
     })]

package/esm/overlays/modal/Modal.js

@@ -3,7 +3,7 @@ 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 } from 'react-native';
+import { Modal as RNModal, Platform, StatusBar, StyleSheet, useWindowDimensions } 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';
@@ -76,6 +76,10 @@ export const Modal = /*#__PURE__*/memo(_ref => {
   }, animateIn, animateOut] = useModalAnimation();
   const [internalVisible, setInternalVisible] = useState(visible);
   const prevVisible = usePreviousValue(visible);
+  const {
+    width,
+    height
+  } = useWindowDimensions();
   const handleClose = useCallback(() => {
     animateOut.start(_ref2 => {
       let {
@@ -141,6 +145,7 @@ export const Modal = /*#__PURE__*/memo(_ref => {
         borderedVertical: borderedVertical,
         color: color,
         elevation: elevation,
+        height: height,
         maxHeight: maxHeight,
         maxWidth: maxWidth,
         minHeight: minHeight,
@@ -159,6 +164,7 @@ 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(ModalContext.Provider, {

package/esm/overlays/overlay/Overlay.js

@@ -2,6 +2,7 @@ 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';
+import { useWindowDimensions } from 'react-native';
 import { OverlayContentContext } from '@coinbase/cds-common/overlays/OverlayContentContext';
 import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { useTheme } from '../../hooks/useTheme';
@@ -19,17 +20,23 @@ export const Overlay = /*#__PURE__*/memo(_props => {
     } = mergedProps,
     props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const theme = useTheme();
+  const {
+    width,
+    height
+  } = useWindowDimensions();
   return /*#__PURE__*/_jsx(OverlayContentContext.Provider, {
     value: overlayContentContextValue,
     children: /*#__PURE__*/_jsx(VStack, _extends({
       animated: true,
       renderToHardwareTextureAndroid: true,
       background: "bgOverlay",
+      height: height,
       opacity: opacity,
       pin: "all",
       style: [theme.activeColorScheme === 'dark' ? {
         backgroundColor: "rgba(" + (theme == null || (_theme$darkSpectrum = theme.darkSpectrum) == null ? void 0 : _theme$darkSpectrum.gray0) + ", 0.5)"
-      } : undefined, style]
+      } : undefined, style],
+      width: width
     }, props))
   });
 });

package/package.json

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