@coinbase/cds-mobile 9.10.0 → 9.10.1

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 9.10.1 (7/30/2026 PST)
+
+#### 🐞 Fixes
+
+- Size LinearGradient svg to measured pixels under Fabric. [[#810](https://github.com/coinbase/cds/pull/810)]
+
 ## 9.10.0 (7/30/2026 PST)
 
 #### 🚀 Updates

package/dts/gradients/LinearGradient.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LinearGradient.d.ts","sourceRoot":"","sources":["../../src/gradients/LinearGradient.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAc,IAAI,EAAE,MAAM,cAAc,CAAC;AAEhD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAU1E,KAAK,UAAU,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE3C,KAAK,mBAAmB,GAAG;IACzB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,eAAe,CAAC,CAAC;IACnE;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC;IACnD;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB;;;SAGK;IACL,GAAG,CAAC,EAAE,UAAU,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,EAAE,CAAC;IAC9B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,WAAW,CAAC;AAIhB,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,KAAK,EACL,GAAG,EACH,KAAoB,EACpB,MAAM,EACN,QAAQ,EACR,KAAW,EACX,KAAK,EACL,aAAa,EACb,MAAM,GACP,EAAE,mBAAmB,2CAmCrB"}
+{"version":3,"file":"LinearGradient.d.ts","sourceRoot":"","sources":["../../src/gradients/LinearGradient.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAc,IAAI,EAAE,MAAM,cAAc,CAAC;AAGhD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAU1E,KAAK,UAAU,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAI3C,KAAK,mBAAmB,GAAG;IACzB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,eAAe,CAAC,CAAC;IACnE;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC;IACnD;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB;;;SAGK;IACL,GAAG,CAAC,EAAE,UAAU,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,EAAE,CAAC;IAC9B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,WAAW,CAAC;AAIhB,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,KAAK,EACL,GAAG,EACH,KAAoB,EACpB,MAAM,EACN,QAAQ,EACR,KAAW,EACX,KAAK,EACL,aAAa,EACb,MAAM,GACP,EAAE,mBAAmB,2CA0DrB"}

package/esm/gradients/LinearGradient.js

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { Defs, LinearGradient as Lg, Rect, Stop, Svg } from 'react-native-svg';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -23,6 +23,30 @@ export function LinearGradient(_ref) {
     pointerEvents,
     testID
   } = _ref;
+  const [pixelSize, setPixelSize] = useState(() => {
+    const flat = StyleSheet.flatten(style);
+    return flat && typeof flat.width === 'number' && typeof flat.height === 'number' ? {
+      width: flat.width,
+      height: flat.height
+    } : null;
+  });
+  const handleLayout = useCallback(event => {
+    const width = Math.round(event.nativeEvent.layout.width);
+    const height = Math.round(event.nativeEvent.layout.height);
+    setPixelSize(prev => prev && prev.width === width && prev.height === height ? prev : {
+      width,
+      height
+    });
+  }, []);
+  const svgWidth = pixelSize ? pixelSize.width : 0;
+  const svgHeight = pixelSize ? pixelSize.height : 0;
+  const containerStyle = useMemo(() => ({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: svgWidth,
+    height: svgHeight
+  }), [svgWidth, svgHeight]);
   const svg = useMemo(() => {
     var _start$x, _start$y, _end$x, _end$y;
     const anglePI = -angle * Math.PI / 180;
@@ -31,10 +55,10 @@ export function LinearGradient(_ref) {
     const x2 = (_end$x = end == null ? void 0 : end.x) != null ? _end$x : Math.round(50 + Math.sin(anglePI + Math.PI) * 50) / 100;
     const y2 = (_end$y = end == null ? void 0 : end.y) != null ? _end$y : Math.round(50 + Math.cos(anglePI + Math.PI) * 50) / 100;
     return /*#__PURE__*/_jsx(View, {
-      style: StyleSheet.absoluteFillObject,
+      style: containerStyle,
       children: /*#__PURE__*/_jsxs(Svg, {
-        height: "100%",
-        width: "100%",
+        height: svgHeight,
+        width: svgWidth,
         children: [/*#__PURE__*/_jsx(Defs, {
           children: /*#__PURE__*/_jsx(Lg, {
             id: "LinearGradient",
@@ -50,14 +74,15 @@ export function LinearGradient(_ref) {
           })
         }), /*#__PURE__*/_jsx(Rect, {
           fill: "url(#LinearGradient)",
-          height: "100%",
-          width: "100%"
+          height: svgHeight,
+          width: svgWidth
         })]
       })
     }, "GrandientSvgContainer");
-  }, [colors, start, end, angle, stops]);
+  }, [colors, start, end, angle, stops, containerStyle, svgWidth, svgHeight]);
   const items = !elevated ? [svg, children] : [children, svg];
   return /*#__PURE__*/_jsx(View, {
+    onLayout: handleLayout,
     pointerEvents: pointerEvents,
     style: style,
     testID: testID,

package/package.json

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