@coinbase/cds-mobile-visualization 3.4.0-beta.11 → 3.4.0-beta.12

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 3.4.0-beta.12 (1/8/2026 PST)
+
+#### 🐞 Fixes
+
+- Fix pulse with spread operator broken on new react-native architecture. [[#296](https://github.com/coinbase/cds/pull/296)]
+
 ## 3.4.0-beta.11 (1/7/2026 PST)
 
 #### 🐞 Fixes

package/dts/chart/scrubber/DefaultScrubberBeacon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultScrubberBeacon.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/DefaultScrubberBeacon.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAkBzE,MAAM,MAAM,0BAA0B,GAAG,mBAAmB,CAAC;AAE7D,eAAO,MAAM,qBAAqB,wJAgLjC,CAAC"}
+{"version":3,"file":"DefaultScrubberBeacon.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/DefaultScrubberBeacon.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAkBzE,MAAM,MAAM,0BAA0B,GAAG,mBAAmB,CAAC;AAE7D,eAAO,MAAM,qBAAqB,wJAmLjC,CAAC"}

package/esm/chart/scrubber/DefaultScrubberBeacon.js

@@ -1,6 +1,5 @@
-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); }
-import { forwardRef, memo, useImperativeHandle, useMemo } from 'react';
-import { cancelAnimation, Easing, useAnimatedReaction, useDerivedValue, useSharedValue, withRepeat, withSequence } from 'react-native-reanimated';
+import { forwardRef, memo, useEffect, useImperativeHandle, useMemo } from 'react';
+import { cancelAnimation, Easing, useAnimatedReaction, useDerivedValue, useSharedValue, withDelay, withRepeat, withSequence, withTiming } from 'react-native-reanimated';
 import { useTheme } from '@coinbase/cds-mobile';
 import { Circle, Group } from '@shopify/react-native-skia';
 import { useCartesianChartContext } from '../ChartProvider';
@@ -60,6 +59,14 @@ export const DefaultScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((
   }, [transitions == null ? void 0 : transitions.pulseRepeatDelay]);
   const pulseOpacity = useSharedValue(0);
   const pulseRadius = useSharedValue(pulseRadiusStart);
+
+  // Convert idlePulse prop to SharedValue so useAnimatedReaction can detect changes.
+  // In the new React Native architecture, regular JS props are captured by value in worklets
+  // and won't update when the prop changes.
+  const idlePulseShared = useSharedValue(idlePulse != null ? idlePulse : false);
+  useEffect(() => {
+    idlePulseShared.value = idlePulse != null ? idlePulse : false;
+  }, [idlePulse, idlePulseShared]);
   const animatedX = useSharedValue(0);
   const animatedY = useSharedValue(0);
 
@@ -103,41 +110,34 @@ export const DefaultScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((
   useImperativeHandle(ref, () => ({
     pulse: () => {
       // Only trigger manual pulse when idlePulse is not enabled
-      if (!idlePulse) {
+      if (!idlePulseShared.value) {
         cancelAnimation(pulseOpacity);
         cancelAnimation(pulseRadius);
 
         // Manual pulse without delay
-        const immediatePulseTransition = _extends({}, pulseTransition, {
-          delay: 0
-        });
         pulseOpacity.value = pulseOpacityStart;
         pulseRadius.value = pulseRadiusStart;
-        pulseOpacity.value = buildTransition(pulseOpacityEnd, immediatePulseTransition);
-        pulseRadius.value = buildTransition(pulseRadiusEnd, immediatePulseTransition);
+        pulseOpacity.value = buildTransition(pulseOpacityEnd, pulseTransition);
+        pulseRadius.value = buildTransition(pulseRadiusEnd, pulseTransition);
       }
     }
-  }), [idlePulse, pulseOpacity, pulseRadius, pulseTransition]);
+  }), [idlePulseShared, pulseOpacity, pulseRadius, pulseTransition]);
 
   // Watch idlePulse changes and control continuous pulse
-  useAnimatedReaction(() => idlePulse, (current, previous) => {
+  useAnimatedReaction(() => idlePulseShared.value, (current, previous) => {
     if (!animate) return;
     if (current) {
       // Start continuous pulse when idlePulse is enabled
-      // Create instant transition to reset pulse after delay
-      const instantTransition = {
-        type: 'timing',
-        duration: 0
-      };
-      const resetWithDelay = _extends({}, instantTransition, {
-        delay: pulseRepeatDelay
-      });
       pulseOpacity.value = pulseOpacityStart;
       pulseRadius.value = pulseRadiusStart;
-      pulseOpacity.value = withRepeat(withSequence(buildTransition(pulseOpacityEnd, pulseTransition), buildTransition(pulseOpacityStart, resetWithDelay)), -1,
+      pulseOpacity.value = withRepeat(withSequence(buildTransition(pulseOpacityEnd, pulseTransition), withDelay(pulseRepeatDelay, withTiming(pulseOpacityStart, {
+        duration: 0
+      }))), -1,
       // infinite loop
       false);
-      pulseRadius.value = withRepeat(withSequence(buildTransition(pulseRadiusEnd, pulseTransition), buildTransition(pulseRadiusStart, resetWithDelay)), -1,
+      pulseRadius.value = withRepeat(withSequence(buildTransition(pulseRadiusEnd, pulseTransition), withDelay(pulseRepeatDelay, withTiming(pulseRadiusStart, {
+        duration: 0
+      }))), -1,
       // infinite loop
       false);
     } else {

package/package.json

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