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

package/esm/chart/axis/YAxis.js

@@ -1,15 +1,14 @@
-const _excluded = ["axisId", "position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "TickLabelComponent", "GridLineComponent", "LineComponent", "TickMarkLineComponent", "tickMarkLabelGap", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval", "label", "labelGap", "width"];
+const _excluded = ["axisId", "position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "TickLabelComponent", "GridLineComponent", "LineComponent", "TickMarkLineComponent", "tickMarkLabelGap", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval", "label", "labelGap", "width", "bandGridLinePlacement", "bandTickMarkPlacement"];
 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 { memo, useCallback, useEffect, useId, useMemo } from 'react';
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 import { Group, vec } from '@shopify/react-native-skia';
 import { useCartesianChartContext } from '../ChartProvider';
 import { DottedLine } from '../line/DottedLine';
-import { ReferenceLine } from '../line/ReferenceLine';
 import { SolidLine } from '../line/SolidLine';
 import { ChartText } from '../text/ChartText';
 import { ChartTextGroup } from '../text/ChartTextGroup';
-import { getAxisTicksData, isCategoricalScale, lineToPath } from '../utils';
+import { getAxisTicksData, getPointOnScale, isCategoricalScale, lineToPath, toPointAnchor } from '../utils';
 import { DefaultAxisTickLabel } from './DefaultAxisTickLabel';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const AXIS_WIDTH = 44;
@@ -34,13 +33,16 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
       tickInterval,
       label,
       labelGap = 4,
-      width = label ? AXIS_WIDTH + LABEL_SIZE : AXIS_WIDTH
+      width = label ? AXIS_WIDTH + LABEL_SIZE : AXIS_WIDTH,
+      bandGridLinePlacement = 'edges',
+      bandTickMarkPlacement = 'middle'
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
   const registrationId = useId();
   const {
     animate,
+    drawingArea,
     getYScale,
     getYAxis,
     registerAxis,
@@ -50,10 +52,6 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
   const yScale = getYScale(axisId);
   const yAxis = getYAxis(axisId);
   const axisBounds = getAxisBounds(registrationId);
-
-  // Note: gridOpacity not currently used in Skia version
-  // const gridOpacity = useSharedValue(1);
-
   useEffect(() => {
     registerAxis(registrationId, position, width);
     return () => unregisterAxis(registrationId);
@@ -102,6 +100,72 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
       tickInterval: tickInterval
     });
   }, [ticks, yScale, requestedTickCount, tickInterval, yAxis == null ? void 0 : yAxis.data]);
+  const isBandScale = useMemo(() => {
+    if (!yScale) return false;
+    return isCategoricalScale(yScale);
+  }, [yScale]);
+
+  // Compute grid line positions (including bounds closing line for band scales)
+  const gridLinePositions = useMemo(() => {
+    if (!yScale) return [];
+    return ticksData.flatMap((tick, index) => {
+      if (!isBandScale) {
+        return [{
+          y: tick.position,
+          key: "grid-" + tick.tick + "-" + index
+        }];
+      }
+      const bandScale = yScale;
+      const isLastTick = index === ticksData.length - 1;
+      const isEdges = bandGridLinePlacement === 'edges';
+      const startY = getPointOnScale(tick.tick, bandScale, toPointAnchor(bandGridLinePlacement));
+      const positions = [{
+        y: startY,
+        key: "grid-" + tick.tick + "-" + index
+      }];
+
+      // For edges on last tick, add the closing line at stepEnd
+      if (isLastTick && isEdges) {
+        const endY = getPointOnScale(tick.tick, bandScale, 'stepEnd');
+        positions.push({
+          y: endY,
+          key: "grid-" + tick.tick + "-" + index + "-end"
+        });
+      }
+      return positions;
+    });
+  }, [ticksData, yScale, isBandScale, bandGridLinePlacement]);
+
+  // Compute tick mark positions (including bounds closing tick for band scales)
+  const tickMarkPositions = useMemo(() => {
+    if (!yScale) return [];
+    return ticksData.flatMap((tick, index) => {
+      if (!isBandScale) {
+        return [{
+          y: tick.position,
+          key: "tick-mark-" + tick.tick + "-" + index
+        }];
+      }
+      const bandScale = yScale;
+      const isLastTick = index === ticksData.length - 1;
+      const isEdges = bandTickMarkPlacement === 'edges';
+      const startY = getPointOnScale(tick.tick, bandScale, toPointAnchor(bandTickMarkPlacement));
+      const positions = [{
+        y: startY,
+        key: "tick-mark-" + tick.tick + "-" + index
+      }];
+
+      // For edges on last tick, add the closing tick mark at stepEnd
+      if (isLastTick && isEdges) {
+        const endY = getPointOnScale(tick.tick, bandScale, 'stepEnd');
+        positions.push({
+          y: endY,
+          key: "tick-mark-" + tick.tick + "-" + index + "-end"
+        });
+      }
+      return positions;
+    });
+  }, [ticksData, yScale, isBandScale, bandTickMarkPlacement]);
   const chartTextData = useMemo(() => {
     if (!axisBounds) return null;
     return ticksData.map(tick => {
@@ -122,17 +186,29 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
   if (!yScale || !axisBounds) return;
   const labelX = position === 'left' ? axisBounds.x + LABEL_SIZE / 2 : axisBounds.x + axisBounds.width - LABEL_SIZE / 2;
   const labelY = axisBounds.y + axisBounds.height / 2;
+
+  // Pre-compute tick mark X coordinates
+  const tickXLeft = axisBounds.x;
+  const tickXRight = axisBounds.x + axisBounds.width;
+  const tickXStart = position === 'left' ? tickXRight : tickXLeft;
+  const tickXEnd = position === 'left' ? tickXRight - tickMarkSize : tickXLeft + tickMarkSize;
+
+  // Note: Unlike web, mobile renders grid lines and tick marks immediately without fade animation.
+  // This is because Skia can measure text dimensions synchronously, so there's no need to hide
+  // elements while waiting for measurements (web uses async ResizeObserver).
   return /*#__PURE__*/_jsxs(Group, {
     children: [showGrid && /*#__PURE__*/_jsx(Group, {
-      children: ticksData.map((tick, index) => {
-        const horizontalLine = /*#__PURE__*/_jsx(ReferenceLine, {
-          LineComponent: GridLineComponent,
-          dataY: tick.tick,
-          yAxisId: axisId
-        });
-        return /*#__PURE__*/_jsx(Group, {
-          children: horizontalLine
-        }, "grid-" + tick.tick + "-" + index);
+      children: gridLinePositions.map(_ref2 => {
+        let {
+          y,
+          key
+        } = _ref2;
+        return /*#__PURE__*/_jsx(GridLineComponent, {
+          animate: false,
+          clipPath: null,
+          d: lineToPath(drawingArea.x, y, drawingArea.x + drawingArea.width, y),
+          stroke: theme.color.bgLine
+        }, key);
       })
     }), chartTextData && /*#__PURE__*/_jsx(ChartTextGroup, {
       prioritizeEndLabels: true,
@@ -140,18 +216,19 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
       labels: chartTextData,
       minGap: minTickLabelGap
     }), axisBounds && showTickMarks && /*#__PURE__*/_jsx(Group, {
-      children: ticksData.map((tick, index) => {
-        const tickX = position === 'left' ? axisBounds.x + axisBounds.width : axisBounds.x;
-        const tickMarkSizePixels = tickMarkSize;
-        const tickX2 = position === 'left' ? axisBounds.x + axisBounds.width - tickMarkSizePixels : axisBounds.x + tickMarkSizePixels;
+      children: tickMarkPositions.map(_ref3 => {
+        let {
+          y,
+          key
+        } = _ref3;
         return /*#__PURE__*/_jsx(TickMarkLineComponent, {
           animate: false,
           clipPath: null,
-          d: lineToPath(tickX, tick.position, tickX2, tick.position),
+          d: lineToPath(tickXStart, y, tickXEnd, y),
           stroke: theme.color.fg,
           strokeCap: "square",
           strokeWidth: 1
-        }, "tick-mark-" + tick.tick + "-" + index);
+        }, key);
       })
     }), showLine && /*#__PURE__*/_jsx(LineComponent, {
       animate: false,

package/esm/chart/axis/__stories__/Axis.stories.js

@@ -2,6 +2,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import { memo, useCallback, useMemo } from 'react';
 import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { BarPlot } from '../../bar';
 import { CartesianChart } from '../../CartesianChart';
 import { LineChart, SolidLine } from '../../line';
 import { Line } from '../../line/Line';
@@ -194,6 +195,105 @@ const MultipleYAxesExample = () => /*#__PURE__*/_jsxs(CartesianChart, {
     seriesId: "log"
   }), /*#__PURE__*/_jsx(Scrubber, {})]
 });
+const AxesOnAllSides = () => {
+  const theme = useTheme();
+  const data = [30, 45, 60, 80, 55, 40, 65];
+  const labels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    height: defaultChartHeight,
+    series: [{
+      id: 'data',
+      data,
+      color: theme.color.accentBoldBlue
+    }],
+    xAxis: {
+      data: labels
+    },
+    yAxis: {
+      domain: {
+        min: 0,
+        max: 100
+      }
+    },
+    children: [/*#__PURE__*/_jsx(XAxis, {
+      showLine: true,
+      showTickMarks: true,
+      label: "Bottom Axis",
+      position: "bottom",
+      ticks: labels.map((label, index) => index)
+    }), /*#__PURE__*/_jsx(XAxis, {
+      showLine: true,
+      showTickMarks: true,
+      label: "Top Axis",
+      position: "top",
+      ticks: labels.map((label, index) => index)
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showLine: true,
+      showTickMarks: true,
+      label: "Left Axis",
+      position: "left"
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showLine: true,
+      showTickMarks: true,
+      label: "Right Axis",
+      position: "right"
+    }), /*#__PURE__*/_jsx(Line, {
+      curve: "natural",
+      seriesId: "data"
+    })]
+  });
+};
+const CustomTickMarkSizes = () => {
+  const theme = useTheme();
+  const data = [25, 50, 75, 60, 45, 80, 35];
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    height: 300,
+    series: [{
+      id: 'data',
+      data,
+      color: theme.color.accentBoldGreen
+    }],
+    xAxis: {
+      data: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
+    },
+    yAxis: {
+      domain: {
+        min: 0,
+        max: 100
+      }
+    },
+    children: [/*#__PURE__*/_jsx(XAxis, {
+      showLine: true,
+      showTickMarks: true,
+      label: "tickMarkSize=4 (default)",
+      tickMarkSize: 4
+    }), /*#__PURE__*/_jsx(XAxis, {
+      showLine: true,
+      showTickMarks: true,
+      height: 60,
+      label: "tickMarkSize=8",
+      position: "top",
+      tickMarkSize: 8
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showLine: true,
+      showTickMarks: true,
+      label: "tickMarkSize=16",
+      position: "left",
+      tickMarkSize: 16,
+      width: 76
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showLine: true,
+      showTickMarks: true,
+      label: "tickMarkSize=24",
+      position: "right",
+      tickMarkSize: 24,
+      width: 84
+    }), /*#__PURE__*/_jsx(Line, {
+      curve: "monotone",
+      seriesId: "data"
+    })]
+  });
+};
 const DomainLimitType = _ref => {
   let {
     limit
@@ -249,6 +349,97 @@ const DomainLimitType = _ref => {
     }), /*#__PURE__*/_jsx(Scrubber, {})]
   });
 };
+
+// Band scale with tick filtering - show every other tick
+const BandScaleTickFiltering = () => /*#__PURE__*/_jsxs(CartesianChart, {
+  height: defaultChartHeight,
+  inset: 8,
+  series: [{
+    id: 'data',
+    data: [10, 22, 29, 45, 98, 45, 22, 35, 42, 18, 55, 67]
+  }],
+  xAxis: {
+    scaleType: 'band',
+    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+  },
+  yAxis: {
+    domain: {
+      min: 0
+    }
+  },
+  children: [/*#__PURE__*/_jsx(XAxis, {
+    showGrid: true,
+    showLine: true,
+    showTickMarks: true,
+    label: "ticks={(i) => i % 2 === 0}",
+    ticks: i => i % 2 === 0
+  }), /*#__PURE__*/_jsx(BarPlot, {})]
+});
+
+// Band scale with explicit ticks array
+const BandScaleExplicitTicks = () => /*#__PURE__*/_jsxs(CartesianChart, {
+  height: defaultChartHeight,
+  inset: 8,
+  series: [{
+    id: 'data',
+    data: [10, 22, 29, 45, 98, 45, 22]
+  }],
+  xAxis: {
+    scaleType: 'band',
+    data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+  },
+  yAxis: {
+    domain: {
+      min: 0
+    }
+  },
+  children: [/*#__PURE__*/_jsx(XAxis, {
+    showGrid: true,
+    showLine: true,
+    showTickMarks: true,
+    label: "ticks={[0, 3, 6]} (first, middle, last)",
+    ticks: [0, 3, 6]
+  }), /*#__PURE__*/_jsx(BarPlot, {})]
+});
+
+// Line chart on band scale - comparing grid placements
+const LineChartOnBandScale = _ref2 => {
+  let {
+    bandGridLinePlacement
+  } = _ref2;
+  const theme = useTheme();
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    height: 180,
+    inset: 8,
+    series: [{
+      id: 'line1',
+      data: [10, 22, 29, 45, 98, 45, 22],
+      color: theme.color.accentBoldBlue
+    }],
+    xAxis: {
+      scaleType: 'band',
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    },
+    yAxis: {
+      domain: {
+        min: 0
+      }
+    },
+    children: [/*#__PURE__*/_jsx(XAxis, {
+      showGrid: true,
+      showLine: true,
+      showTickMarks: true,
+      bandGridLinePlacement: bandGridLinePlacement,
+      bandTickMarkPlacement: bandGridLinePlacement,
+      label: "bandGridLinePlacement: " + bandGridLinePlacement
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showGrid: true,
+      position: "left"
+    }), /*#__PURE__*/_jsx(Line, {
+      seriesId: "line1"
+    })]
+  });
+};
 const AxisStories = () => {
   return /*#__PURE__*/_jsxs(ExampleScreen, {
     children: [/*#__PURE__*/_jsx(Example, {
@@ -270,6 +461,74 @@ const AxisStories = () => {
       children: /*#__PURE__*/_jsx(DomainLimitType, {
         limit: "nice"
       })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Band Axis Grid Alignment",
+      children: /*#__PURE__*/_jsxs(CartesianChart, {
+        height: 350,
+        inset: 8,
+        series: [{
+          id: 'prices',
+          data: [10, 22, 29, 45, 98, 45, 22]
+        }],
+        xAxis: {
+          scaleType: 'band',
+          data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+        },
+        yAxis: {
+          domain: {
+            min: 0
+          }
+        },
+        children: [/*#__PURE__*/_jsx(XAxis, {
+          showGrid: true,
+          showLine: true,
+          showTickMarks: true,
+          label: "Default"
+        }), /*#__PURE__*/_jsx(XAxis, {
+          showLine: true,
+          showTickMarks: true,
+          bandTickMarkPlacement: "start",
+          label: "Start"
+        }), /*#__PURE__*/_jsx(XAxis, {
+          showLine: true,
+          showTickMarks: true,
+          bandTickMarkPlacement: "end",
+          label: "End"
+        }), /*#__PURE__*/_jsx(XAxis, {
+          showLine: true,
+          showTickMarks: true,
+          bandTickMarkPlacement: "middle",
+          label: "Middle"
+        }), /*#__PURE__*/_jsx(XAxis, {
+          showLine: true,
+          showTickMarks: true,
+          bandTickMarkPlacement: "edges",
+          label: "Edges"
+        }), /*#__PURE__*/_jsx(BarPlot, {})]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Band Scale - Tick Filtering",
+      children: /*#__PURE__*/_jsx(BandScaleTickFiltering, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Band Scale - Explicit Ticks",
+      children: /*#__PURE__*/_jsx(BandScaleExplicitTicks, {})
+    }), /*#__PURE__*/_jsxs(Example, {
+      title: "Line Chart on Band Scale - Grid Positions",
+      children: [/*#__PURE__*/_jsx(LineChartOnBandScale, {
+        bandGridLinePlacement: "edges"
+      }), /*#__PURE__*/_jsx(LineChartOnBandScale, {
+        bandGridLinePlacement: "start"
+      }), /*#__PURE__*/_jsx(LineChartOnBandScale, {
+        bandGridLinePlacement: "middle"
+      }), /*#__PURE__*/_jsx(LineChartOnBandScale, {
+        bandGridLinePlacement: "end"
+      })]
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Axes on All Sides",
+      children: /*#__PURE__*/_jsx(AxesOnAllSides, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Custom Tick Mark Sizes",
+      children: /*#__PURE__*/_jsx(CustomTickMarkSizes, {})
     })]
   });
 };

package/esm/chart/bar/__stories__/BarChart.stories.js

@@ -621,6 +621,34 @@ const ColorMapWithOpacity = () => {
     }
   });
 };
+const BandGridPositionExample = _ref6 => {
+  let {
+    position
+  } = _ref6;
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    height: 180,
+    inset: 4,
+    series: [{
+      id: 'data',
+      data: [30, 50, 40, 60, 35]
+    }],
+    xAxis: {
+      scaleType: 'band',
+      data: ['A', 'B', 'C', 'D', 'E']
+    },
+    yAxis: {
+      domain: {
+        min: 0
+      }
+    },
+    children: [/*#__PURE__*/_jsx(XAxis, {
+      showGrid: true,
+      showLine: true,
+      bandGridLinePlacement: position,
+      label: position
+    }), /*#__PURE__*/_jsx(BarPlot, {})]
+  });
+};
 const BarChartStories = () => {
   return /*#__PURE__*/_jsxs(ExampleScreen, {
     children: [/*#__PURE__*/_jsx(Example, {
@@ -662,6 +690,17 @@ const BarChartStories = () => {
     }), /*#__PURE__*/_jsx(Example, {
       title: "ColorMap with Opacity",
       children: /*#__PURE__*/_jsx(ColorMapWithOpacity, {})
+    }), /*#__PURE__*/_jsxs(Example, {
+      title: "Band Grid Position",
+      children: [/*#__PURE__*/_jsx(BandGridPositionExample, {
+        position: "edges"
+      }), /*#__PURE__*/_jsx(BandGridPositionExample, {
+        position: "start"
+      }), /*#__PURE__*/_jsx(BandGridPositionExample, {
+        position: "middle"
+      }), /*#__PURE__*/_jsx(BandGridPositionExample, {
+        position: "end"
+      })]
     })]
   });
 };

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 {