@coinbase/cds-mobile-visualization 3.4.0-beta.7 → 3.4.0-beta.8

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.8 (12/2/2025 PST)
+
+#### 🐞 Fixes
+
+- Fix reanimated animation warning. [[#211](https://github.com/coinbase/cds/pull/211)]
+
 ## 3.4.0-beta.7 (12/2/2025 PST)
 
 #### 🐞 Fixes

package/dts/chart/Path.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Path.d.ts","sourceRoot":"","sources":["../../src/chart/Path.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EACL,KAAK,YAAY,EAGjB,KAAK,SAAS,IAAI,aAAa,EAGhC,MAAM,4BAA4B,CAAC;AAEpC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAKrD;;GAEG;AACH,eAAO,MAAM,2BAA2B,MAAM,CAAC;AAE/C,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,aAAa,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,aAAa,GACnC,IAAI,CACF,aAAa,EACX,WAAW,GACX,WAAW,GACX,UAAU,GACV,QAAQ,GACR,YAAY,GACZ,QAAQ,GACR,QAAQ,GACR,WAAW,GACX,YAAY,GACZ,aAAa,GACb,aAAa,GACb,OAAO,GACP,WAAW,CACd,GAAG;IACF;;OAEG;IACH,CAAC,CAAC,EAAE,YAAY,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACrC;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB;;;;;;;;;;OAUG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;AAmEJ,eAAO,MAAM,IAAI,iDAwJf,CAAC"}
+{"version":3,"file":"Path.d.ts","sourceRoot":"","sources":["../../src/chart/Path.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EACL,KAAK,YAAY,EAGjB,KAAK,SAAS,IAAI,aAAa,EAGhC,MAAM,4BAA4B,CAAC;AAEpC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAKrD;;GAEG;AACH,eAAO,MAAM,2BAA2B,MAAM,CAAC;AAE/C,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,aAAa,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,aAAa,GACnC,IAAI,CACF,aAAa,EACX,WAAW,GACX,WAAW,GACX,UAAU,GACV,QAAQ,GACR,YAAY,GACZ,QAAQ,GACR,QAAQ,GACR,WAAW,GACX,YAAY,GACZ,aAAa,GACb,aAAa,GACb,OAAO,GACP,WAAW,CACd,GAAG;IACF;;OAEG;IACH,CAAC,CAAC,EAAE,YAAY,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACrC;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB;;;;;;;;;;OAUG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;AAqEJ,eAAO,MAAM,IAAI,iDAwJf,CAAC"}

package/dts/chart/utils/transition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"transition.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/transition.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,WAAW,EAIhB,KAAK,gBAAgB,EAErB,KAAK,gBAAgB,EACtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAsB,KAAK,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAG7E;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,UAAU,GAClB,CAAC;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAAG,gBAAgB,CAAC,GACvC,CAAC;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAAG,gBAAgB,CAAC,CAAC;AAE5C;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,UAI/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,+BAA+B,MAAM,CAAC;AAEnD;;GAEG;AACH,eAAO,MAAM,4BAA4B,MAAM,CAAC;AAEhD;;;;;;;;GAQG;AACH,eAAO,MAAM,sBAAsB,GACjC,UAAU,WAAW,CAAC,MAAM,CAAC,EAC7B,UAAU,MAAM,EAChB,QAAQ,MAAM,KACb,WAAW,CAAC,MAAM,CA2BpB,CAAC;AAGF;;GAEG;AACH,KAAK,YAAY,CAAC,CAAC,IAAI,CACrB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EAAE,EACf,MAAM,EAAE,CAAC,EAAE,EACX,OAAO,EAAE,iBAAiB,EAC1B,MAAM,EAAE,CAAC,KACN,CAAC,CAAC;AAEP,eAAO,MAAM,eAAe,GAAI,CAAC,EAC/B,SAAS,MAAM,CAAC,EAChB,OAAO,WAAW,CAAC,MAAM,CAAC,EAC1B,cAAc,YAAY,CAAC,CAAC,CAAC,EAC7B,OAAO,MAAM,EAAE,EACf,QAAQ,CAAC,EAAE,EACX,UAAU,iBAAiB,mBAc5B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,eAAe,GAAI,aAAa,MAAM,EAAE,YAAY,UAAU,KAAG,MAc7E,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,iBAAiB,GAAI,2CAI/B;IACD;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,KAAG,WAAW,CAAC,MAAM,CAyDrB,CAAC"}
+{"version":3,"file":"transition.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/transition.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,WAAW,EAIhB,KAAK,gBAAgB,EAErB,KAAK,gBAAgB,EACtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAsB,KAAK,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAG7E;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,UAAU,GAClB,CAAC;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAAG,gBAAgB,CAAC,GACvC,CAAC;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAAG,gBAAgB,CAAC,CAAC;AAE5C;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,UAI/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,+BAA+B,MAAM,CAAC;AAEnD;;GAEG;AACH,eAAO,MAAM,4BAA4B,MAAM,CAAC;AAEhD;;;;;;;;GAQG;AACH,eAAO,MAAM,sBAAsB,GACjC,UAAU,WAAW,CAAC,MAAM,CAAC,EAC7B,UAAU,MAAM,EAChB,QAAQ,MAAM,KACb,WAAW,CAAC,MAAM,CA2BpB,CAAC;AAGF;;GAEG;AACH,KAAK,YAAY,CAAC,CAAC,IAAI,CACrB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EAAE,EACf,MAAM,EAAE,CAAC,EAAE,EACX,OAAO,EAAE,iBAAiB,EAC1B,MAAM,EAAE,CAAC,KACN,CAAC,CAAC;AAEP,eAAO,MAAM,eAAe,GAAI,CAAC,EAC/B,SAAS,MAAM,CAAC,EAChB,OAAO,WAAW,CAAC,MAAM,CAAC,EAC1B,cAAc,YAAY,CAAC,CAAC,CAAC,EAC7B,OAAO,MAAM,EAAE,EACf,QAAQ,CAAC,EAAE,EACX,UAAU,iBAAiB,mBAc5B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,eAAe,GAAI,aAAa,MAAM,EAAE,YAAY,UAAU,KAAG,MAc7E,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,iBAAiB,GAAI,2CAI/B;IACD;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,KAAG,WAAW,CAAC,MAAM,CAwBrB,CAAC"}

package/esm/chart/Path.js

@@ -15,7 +15,6 @@ import { unwrapAnimatedValue } from './utils';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export const pathEnterTransitionDuration = 500;
 const AnimatedPath = /*#__PURE__*/memo(_ref => {
-  var _d$value;
   let {
       d = '',
       initialPath,
@@ -31,8 +30,11 @@ const AnimatedPath = /*#__PURE__*/memo(_ref => {
     } = _ref,
     pathProps = _objectWithoutPropertiesLoose(_ref, _excluded);
   const isDAnimated = typeof d !== 'string';
+
+  // When d is animated, usePathTransition handles static path transitions.
+  // For animated d values, we skip usePathTransition and use useDerivedValue directly.
   const animatedPath = usePathTransition({
-    currentPath: isDAnimated ? (_d$value = d.value) != null ? _d$value : '' : d,
+    currentPath: isDAnimated ? '' : d,
     initialPath,
     transition
   });
@@ -40,8 +42,8 @@ const AnimatedPath = /*#__PURE__*/memo(_ref => {
   const isStroked = stroke !== undefined && stroke !== 'none';
   const activePath = useDerivedValue(() => {
     if (isDAnimated) {
-      var _d$value2;
-      return (_d$value2 = d.value) != null ? _d$value2 : Skia.Path.Make();
+      var _d$value;
+      return (_d$value = d.value) != null ? _d$value : Skia.Path.Make();
     }
     return animatedPath.value;
   });

package/esm/chart/utils/transition.js

@@ -162,53 +162,24 @@ export const usePathTransition = _ref => {
     initialPath,
     transition = defaultTransition
   } = _ref;
-  const isInitialRender = useRef(true);
+  // Track the previous path - updated in useEffect AFTER render,
+  // so during render it naturally holds the "from" path value
   const previousPathRef = useRef(initialPath != null ? initialPath : currentPath);
-  const targetPathRef = useRef(currentPath);
   const progress = useSharedValue(0);
-  const {
-    fromPath,
-    toPath
-  } = useMemo(() => {
-    const isNewPath = targetPathRef.current !== currentPath;
-    if (!isNewPath) {
-      return {
-        fromPath: previousPathRef.current,
-        toPath: targetPathRef.current
-      };
-    }
-    const currentProgress = progress.value;
-    const isInterrupting = currentProgress > 0 && currentProgress < 1;
-    if (isInterrupting) {
-      // Animation was interrupted - capture current interpolated path
-      const pathInterpolator = interpolatePath(previousPathRef.current, targetPathRef.current);
-      const currentInterpolatedPath = pathInterpolator(currentProgress);
-      return {
-        fromPath: currentInterpolatedPath,
-        toPath: currentPath
-      };
-    }
 
-    // Normal transition (from completed position to new target)
-    const startPath = isInitialRender.current && initialPath ? initialPath : targetPathRef.current;
-    return {
-      fromPath: startPath,
-      toPath: currentPath
-    };
-  }, [currentPath, initialPath, progress]);
+  // During render: previousPathRef still has old value, currentPath is new
+  const fromPath = previousPathRef.current;
+  const toPath = currentPath;
   useEffect(() => {
-    const isPathChange = targetPathRef.current !== currentPath;
-    const isInitialAnimation = isInitialRender.current && initialPath;
+    const shouldAnimate = previousPathRef.current !== currentPath;
+    if (shouldAnimate) {
+      // Update ref for next path change (happens after this render)
+      previousPathRef.current = currentPath;
 
-    // Trigger animation if path changed OR if this is the initial render with an initialPath
-    if (isPathChange || isInitialAnimation) {
-      // Update refs for next render
-      previousPathRef.current = fromPath;
-      targetPathRef.current = toPath;
+      // Animate from old path to new path
       progress.value = 0;
       progress.value = buildTransition(1, transition);
-      isInitialRender.current = false;
     }
-  }, [currentPath, initialPath, transition, fromPath, toPath, progress]);
+  }, [currentPath, transition, progress]);
   return useD3PathInterpolation(progress, fromPath, toPath);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile-visualization",
-  "version": "3.4.0-beta.7",
+  "version": "3.4.0-beta.8",
   "description": "Coinbase Design System - Mobile Visualization Native",
   "repository": {
     "type": "git",
@@ -32,9 +32,9 @@
     "CHANGELOG"
   ],
   "peerDependencies": {
-    "@coinbase/cds-common": "^8.25.1",
+    "@coinbase/cds-common": "^8.27.2",
     "@coinbase/cds-lottie-files": "^3.3.3",
-    "@coinbase/cds-mobile": "^8.25.1",
+    "@coinbase/cds-mobile": "^8.27.2",
     "@coinbase/cds-utils": "^2.3.4",
     "@shopify/react-native-skia": "^1.12.4 || ^2.0.0",
     "react": "^18.3.1",
@@ -53,9 +53,9 @@
     "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@coinbase/cds-common": "^8.25.1",
+    "@coinbase/cds-common": "^8.27.2",
     "@coinbase/cds-lottie-files": "^3.3.3",
-    "@coinbase/cds-mobile": "^8.25.1",
+    "@coinbase/cds-mobile": "^8.27.2",
     "@coinbase/cds-utils": "^2.3.4",
     "@figma/code-connect": "^1.3.4",
     "@shopify/react-native-skia": "1.12.4",