fix: reference line opacity and build transition on mobile (#201)

* fix: set mobile reference line opacity directly instead of via group

* fix: do not spread inside of buildTransition

* Update tests and bump version

Author: hcopp

packages/mobile-visualization/CHANGELOG.md

@@ -8,6 +8,13 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 3.4.0-beta.7 (12/2/2025 PST)
+
+#### 🐞 Fixes
+
+- Fix babel build issue with transitions. [[#201](https://github.com/coinbase/cds/pull/201)]
+- Improve opacity customization for ReferenceLine. [[#201](https://github.com/coinbase/cds/pull/201)]
+
 ## 3.4.0-beta.6 (10/16/2025 PST)
 
 #### 🚀 Updates

packages/mobile-visualization/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile-visualization",
-  "version": "3.4.0-beta.6",
+  "version": "3.4.0-beta.7",
   "description": "Coinbase Design System - Mobile Visualization Native",
   "repository": {
     "type": "git",

packages/mobile-visualization/src/chart/Path.tsx

@@ -50,7 +50,7 @@ export type PathBaseProps = {
   /**
    * Opacity for the path stroke.
    */
-  strokeOpacity?: number;
+  strokeOpacity?: AnimatedProp<number>;
 };
 
 export type PathProps = PathBaseProps &

packages/mobile-visualization/src/chart/line/Line.tsx

@@ -91,7 +91,7 @@ export type LineBaseProps = {
    * @note when combined with gradient, both will be applied
    * @default 1
    */
-  strokeOpacity?: number;
+  strokeOpacity?: AnimatedProp<number>;
   /**
    * Width of the line
    * @default 2

packages/mobile-visualization/src/chart/line/ReferenceLine.tsx

@@ -110,6 +110,11 @@ export type ReferenceLineBaseProps = {
    * @default theme.color.bgLine
    */
   stroke?: string;
+  /**
+   * Opacity applied to both the line and label.
+   * @default 1
+   */
+  opacity?: AnimatedProp<number>;
 };
 
 type HorizontalReferenceLineProps = ReferenceLineBaseProps & {
@@ -163,6 +168,7 @@ export const ReferenceLine = memo<ReferenceLineProps>(
     labelVerticalAlignment,
     labelBoundsInset,
     stroke,
+    opacity = 1,
   }) => {
     const theme = useTheme();
     const { getXSerializableScale, getYSerializableScale, drawingArea } =
@@ -203,14 +209,13 @@ export const ReferenceLine = memo<ReferenceLineProps>(
 
     const labelXPixel = useDerivedValue(() => xPixel.value ?? 0, [xPixel]);
     const labelYPixel = useDerivedValue(() => yPixel.value ?? 0, [yPixel]);
-    const labelOpacity = useDerivedValue(
-      () =>
+
+    const labelOpacity = useDerivedValue(() => {
+      const isVisible =
         (dataY !== undefined && yPixel.value !== undefined) ||
-        (dataX !== undefined && xPixel.value !== undefined)
-          ? 1
-          : 0,
-      [yPixel],
-    );
+        (dataX !== undefined && xPixel.value !== undefined);
+      return isVisible ? unwrapAnimatedValue(opacity) : 0;
+    }, [yPixel, xPixel, opacity]);
 
     if (dataY !== undefined) {
       let labelX: number;
@@ -224,7 +229,12 @@ export const ReferenceLine = memo<ReferenceLineProps>(
 
       return (
         <>
-          <LineComponent animate={false} d={horizontalLine} stroke={effectiveLineStroke} />
+          <LineComponent
+            animate={false}
+            d={horizontalLine}
+            stroke={effectiveLineStroke}
+            strokeOpacity={opacity}
+          />
           {label && (
             <LabelComponent
               boundsInset={labelBoundsInset}
@@ -258,7 +268,12 @@ export const ReferenceLine = memo<ReferenceLineProps>(
 
       return (
         <>
-          <LineComponent animate={false} d={verticalLine} stroke={effectiveLineStroke} />
+          <LineComponent
+            animate={false}
+            d={verticalLine}
+            stroke={effectiveLineStroke}
+            strokeOpacity={opacity}
+          />
           {label && (
             <LabelComponent
               boundsInset={labelBoundsInset}

packages/mobile-visualization/src/chart/scrubber/Scrubber.tsx

@@ -147,7 +147,8 @@ export type ScrubberBaseProps = Pick<ScrubberBeaconGroupBaseProps, 'idlePulse'>
      */
     seriesIds?: string[];
     /**
-     * Hides the scrubber line
+     * Hides the scrubber line.
+     * @note This hides Scrubber's ReferenceLine including the label.
      */
     hideLine?: boolean;
     /**
@@ -360,18 +361,17 @@ export const Scrubber = memo(
             />
           )}
           {!hideLine && (
-            <Group opacity={lineOpacity}>
-              <ReferenceLine
-                LabelComponent={LabelComponent}
-                LineComponent={LineComponent}
-                dataX={dataX}
-                label={resolvedLabelValue}
-                labelBoundsInset={labelBoundsInset}
-                labelElevated={labelElevated}
-                labelFont={labelFont}
-                stroke={lineStroke}
-              />
-            </Group>
+            <ReferenceLine
+              LabelComponent={LabelComponent}
+              LineComponent={LineComponent}
+              dataX={dataX}
+              label={resolvedLabelValue}
+              labelBoundsInset={labelBoundsInset}
+              labelElevated={labelElevated}
+              labelFont={labelFont}
+              opacity={lineOpacity}
+              stroke={lineStroke}
+            />
           )}
           <ScrubberBeaconGroup
             ref={beaconGroupRef}

packages/mobile-visualization/src/chart/utils/__tests__/transition.test.ts

@@ -94,7 +94,7 @@ describe('buildTransition', () => {
       duration: 500,
     });
 
-    expect(withTiming).toHaveBeenCalledWith(100, { duration: 500 });
+    expect(withTiming).toHaveBeenCalledWith(100, { type: 'timing', duration: 500 });
     expect(result).toBe(100);
   });
 
@@ -107,6 +107,7 @@ describe('buildTransition', () => {
     });
 
     expect(withSpring).toHaveBeenCalledWith(200, {
+      type: 'spring',
       damping: 10,
       stiffness: 100,
     });
@@ -132,6 +133,7 @@ describe('buildTransition', () => {
     buildTransition(50, config);
 
     expect(withTiming).toHaveBeenCalledWith(50, {
+      type: 'timing',
       duration: 1000,
       easing: config.easing,
     });
@@ -152,6 +154,7 @@ describe('buildTransition', () => {
     buildTransition(75, config);
 
     expect(withSpring).toHaveBeenCalledWith(75, {
+      type: 'spring',
       damping: 15,
       stiffness: 200,
       mass: 1,

packages/mobile-visualization/src/chart/utils/transition.ts

@@ -149,17 +149,14 @@ export const buildTransition = (targetValue: number, transition: Transition): nu
   'worklet';
   switch (transition.type) {
     case 'timing': {
-      const { type, ...timingConfig } = transition;
-      return withTiming(targetValue, timingConfig);
+      return withTiming(targetValue, transition);
     }
     case 'spring': {
-      const { type, ...springConfig } = transition;
-      return withSpring(targetValue, springConfig);
+      return withSpring(targetValue, transition);
     }
     default: {
       // Fallback to default transition config
-      const { type, ...springConfig } = defaultTransition;
-      return withSpring(targetValue, springConfig);
+      return withSpring(targetValue, defaultTransition);
     }
   }
 };

packages/web-visualization/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 3.4.0-beta.7 (12/2/2025 PST)
+
+#### 🐞 Fixes
+
+- Improve opacity customization for ReferenceLine. [[#201](https://github.com/coinbase/cds/pull/201)]
+
 ## 3.4.0-beta.6 (10/16/2025 PST)
 
 #### 🚀 Updates

packages/web-visualization/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web-visualization",
-  "version": "3.4.0-beta.6",
+  "version": "3.4.0-beta.7",
   "description": "Coinbase Design System - Web Sparkline",
   "repository": {
     "type": "git",