@coinbase/cds-mobile 8.47.1 → 8.47.2

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.47.2 (2/19/2026 PST)
+
+#### 🐞 Fixes
+
+- Fix mobile CardRoot style forwarding logic. [[#405](https://github.com/coinbase/cds/pull/405)]
+
 ## 8.47.1 (2/19/2026 PST)
 
 #### 🐞 Fixes

package/esm/cards/CardRoot.js

@@ -1,4 +1,4 @@
-const _excluded = ["children", "style", "renderAsPressable"];
+const _excluded = ["children", "renderAsPressable"];
 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 } from 'react';

package/esm/cards/__stories__/MessagingCard.stories.js

@@ -65,9 +65,7 @@ const DismissibleCardsExample = () => {
             height: 100,
             resizeMode: "cover",
             shape: "rectangle",
-            source: {
-              uri: coinbaseOneLogo
-            },
+            source: coinbaseOneLogo,
             width: 80
           }) : /*#__PURE__*/_jsx(Pictogram, {
             accessibilityLabel: "Add to watchlist",
@@ -105,9 +103,7 @@ const MessagingCardScreen = () => {
             height: 120,
             resizeMode: "cover",
             shape: "rectangle",
-            source: {
-              uri: coinbaseOneLogo
-            },
+            source: coinbaseOneLogo,
             width: 90
           }),
           mediaPlacement: "end",
@@ -162,9 +158,7 @@ const MessagingCardScreen = () => {
             height: 120,
             resizeMode: "cover",
             shape: "rectangle",
-            source: {
-              uri: coinbaseOneLogo
-            },
+            source: coinbaseOneLogo,
             width: 90
           }),
           mediaPlacement: "end",
@@ -190,9 +184,7 @@ const MessagingCardScreen = () => {
             height: 120,
             resizeMode: "cover",
             shape: "rectangle",
-            source: {
-              uri: coinbaseOneLogo
-            },
+            source: coinbaseOneLogo,
             width: 90
           }),
           mediaPlacement: "end",
@@ -218,9 +210,7 @@ const MessagingCardScreen = () => {
             height: 156,
             resizeMode: "cover",
             shape: "rectangle",
-            source: {
-              uri: coinbaseOneLogo
-            },
+            source: coinbaseOneLogo,
             width: 120
           }),
           mediaPlacement: "end",
@@ -248,9 +238,7 @@ const MessagingCardScreen = () => {
             height: 186,
             resizeMode: "cover",
             shape: "rectangle",
-            source: {
-              uri: coinbaseOneLogo
-            },
+            source: coinbaseOneLogo,
             width: 130
           }),
           mediaPlacement: "end",
@@ -287,9 +275,7 @@ const MessagingCardScreen = () => {
             height: 156,
             resizeMode: "cover",
             shape: "rectangle",
-            source: {
-              uri: coinbaseOneLogo
-            },
+            source: coinbaseOneLogo,
             width: 120
           }),
           mediaPlacement: "end",
@@ -339,9 +325,7 @@ const MessagingCardScreen = () => {
             height: 120,
             resizeMode: "cover",
             shape: "rectangle",
-            source: {
-              uri: coinbaseOneLogo
-            },
+            source: coinbaseOneLogo,
             width: 90
           }),
           mediaPlacement: "end",
@@ -386,9 +370,7 @@ const MessagingCardScreen = () => {
             height: 120,
             resizeMode: "cover",
             shape: "rectangle",
-            source: {
-              uri: coinbaseOneLogo
-            },
+            source: coinbaseOneLogo,
             width: 90
           }),
           mediaPlacement: "end",
@@ -410,6 +392,84 @@ const MessagingCardScreen = () => {
           type: "nudge"
         })]
       })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Custom Background Color",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(MessagingCard, _extends({}, exampleProps, {
+          renderAsPressable: true,
+          accessibilityLabel: "View card details",
+          blendStyles: {
+            background: '#1E5A9E'
+          },
+          description: "Pressable card with custom background via blendStyles.background",
+          media: /*#__PURE__*/_jsx(RemoteImage, {
+            accessibilityLabel: "Coinbase One promotional image",
+            height: 130,
+            resizeMode: "cover",
+            shape: "rectangle",
+            source: coinbaseOneLogo,
+            width: 90
+          }),
+          mediaPlacement: "end",
+          onPress: NoopFn,
+          title: "Pressable with Custom Background",
+          type: "upsell"
+        })), /*#__PURE__*/_jsx(MessagingCard, _extends({}, exampleProps, {
+          renderAsPressable: true,
+          accessibilityLabel: "View nudge details",
+          blendStyles: {
+            background: '#FFF8E6'
+          },
+          description: "Pressable nudge with custom background via blendStyles.background",
+          media: /*#__PURE__*/_jsx(Pictogram, {
+            accessibilityLabel: "Rocket",
+            dimension: "48x48",
+            name: "baseRocket"
+          }),
+          mediaPlacement: "end",
+          onPress: NoopFn,
+          title: "Nudge with Custom Background",
+          type: "nudge"
+        })), /*#__PURE__*/_jsx(MessagingCard, _extends({}, exampleProps, {
+          accessibilityLabel: "Non-pressable card",
+          description: "Non-pressable card with custom background via styles.root",
+          media: /*#__PURE__*/_jsx(RemoteImage, {
+            accessibilityLabel: "Coinbase One promotional image",
+            height: 130,
+            resizeMode: "cover",
+            shape: "rectangle",
+            source: coinbaseOneLogo,
+            width: 90
+          }),
+          mediaPlacement: "end",
+          renderAsPressable: false,
+          styles: {
+            root: {
+              backgroundColor: '#1E5A9E'
+            }
+          },
+          title: "Non-pressable with Custom Background",
+          type: "upsell"
+        })), /*#__PURE__*/_jsx(MessagingCard, _extends({}, exampleProps, {
+          accessibilityLabel: "Non-pressable nudge",
+          description: "Non-pressable nudge with custom background via styles.root",
+          media: /*#__PURE__*/_jsx(Pictogram, {
+            accessibilityLabel: "Rocket",
+            dimension: "48x48",
+            name: "baseRocket"
+          }),
+          mediaPlacement: "end",
+          renderAsPressable: false,
+          styles: {
+            root: {
+              backgroundColor: '#FFF8E6'
+            }
+          },
+          title: "Non-pressable Nudge with Custom Background",
+          type: "nudge"
+        }))]
+      })
     }), /*#__PURE__*/_jsx(Example, {
       title: "Text Content",
       children: /*#__PURE__*/_jsxs(VStack, {
@@ -421,9 +481,7 @@ const MessagingCardScreen = () => {
             height: 160,
             resizeMode: "cover",
             shape: "rectangle",
-            source: {
-              uri: coinbaseOneLogo
-            },
+            source: coinbaseOneLogo,
             width: 120
           }),
           mediaPlacement: "end",
@@ -446,9 +504,7 @@ const MessagingCardScreen = () => {
             height: 140,
             resizeMode: "cover",
             shape: "rectangle",
-            source: {
-              uri: coinbaseOneLogo
-            },
+            source: coinbaseOneLogo,
             width: 100
           }),
           mediaPlacement: "end",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.47.1",
+  "version": "8.47.2",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -198,7 +198,7 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.47.1",
+    "@coinbase/cds-common": "^8.47.2",
     "@coinbase/cds-icons": "^5.11.0",
     "@coinbase/cds-illustrations": "^4.31.0",
     "@coinbase/cds-lottie-files": "^3.3.4",