@coinbase/cds-mobile 8.66.2 → 9.0.0-rc.2

package/esm/visualizations/chart/utils/scale.js

@@ -0,0 +1,288 @@
+import { scaleBand, scaleLinear, scaleLog } from 'd3-scale';
+
+// https://d3js.org/d3-scale - ideal next scale would be time
+
+export const isCategoricalScale = scale => {
+  return scale !== undefined && 'bandwidth' in scale && typeof scale.bandwidth === 'function';
+};
+export const isNumericScale = scale => {
+  return scale !== undefined && !isCategoricalScale(scale);
+};
+
+/**
+ * Type guard to check if a scale is logarithmic.
+ */
+export const isLogScale = scale => {
+  return scale !== undefined && 'base' in scale && typeof scale.base === 'function';
+};
+
+/**
+ * Type guard to check if a scale is a SerializableScale.
+ * This can be used in worklets to differentiate between scale objects and scale functions.
+ */
+export const isSerializableScale = scale => {
+  'worklet';
+
+  return typeof scale === 'object' && scale !== null && 'type' in scale && 'domain' in scale && 'range' in scale;
+};
+
+/**
+ * Create a numeric scale (linear or logarithmic)
+ * @returns A numeric scale function
+ */
+export const getNumericScale = _ref => {
+  let {
+    scaleType,
+    domain,
+    range
+  } = _ref;
+  const scale = scaleType === 'log' ? scaleLog() : scaleLinear();
+  return scale.domain([domain.min, domain.max]).range([range.min, range.max]);
+};
+
+/**
+ * Create a categorical scale (band)
+ * @returns A categorical scale function
+ */
+export const getCategoricalScale = _ref2 => {
+  let {
+    domain,
+    range,
+    padding = 0.1
+  } = _ref2;
+  const domainArray = Array.from({
+    length: domain.max - domain.min + 1
+  }, (_, i) => i);
+  const scale = scaleBand().domain(domainArray).range([range.min, range.max]).paddingInner(padding).paddingOuter(padding / 2);
+  return scale;
+};
+
+/**
+ * Anchor position for points on a scale. Currently used only for band scales.
+ *
+ * For band scales, this determines where within the band to position a point:
+ * - `'stepStart'` - At the start of the step
+ * - `'bandStart'` - At the start of the band
+ * - `'middle'` - At the center of the band
+ * - `'bandEnd'` - At the end of the band
+ * - `'stepEnd'` - At the end of the step
+ */
+
+/**
+ * Convert a D3 scale to a serializable scale configuration that can be used in worklets
+ */
+export function convertToSerializableScale(d3Scale) {
+  if (!d3Scale) return undefined;
+  const domain = d3Scale.domain();
+  const range = d3Scale.range();
+
+  // Handle band/categorical scales
+  if (isCategoricalScale(d3Scale)) {
+    var _step;
+    const bandScale = d3Scale;
+    const bandwidth = bandScale.bandwidth();
+    const step = (_step = bandScale.step == null ? void 0 : bandScale.step()) != null ? _step : (range[1] - range[0]) / domain.length;
+    return {
+      type: 'band',
+      domain: [domain[0], domain[domain.length - 1]],
+      range: [range[0], range[range.length - 1]],
+      bandwidth,
+      step
+    };
+  }
+
+  // Handle log scales
+  if (isLogScale(d3Scale)) {
+    var _base;
+    const logScale = d3Scale;
+    // D3 log scales default to base 10
+    const base = (_base = logScale.base == null ? void 0 : logScale.base()) != null ? _base : 10;
+    return {
+      type: 'log',
+      domain: [domain[0], domain[domain.length - 1]],
+      range: [range[0], range[range.length - 1]],
+      base
+    };
+  }
+
+  // Handle linear scales (default)
+  if (isNumericScale(d3Scale)) {
+    return {
+      type: 'linear',
+      domain: [domain[0], domain[domain.length - 1]],
+      range: [range[0], range[range.length - 1]]
+    };
+  }
+  return undefined;
+}
+
+/**
+ * Convert multiple D3 scales to serializable scales
+ */
+export function convertScalesToSerializableScales(xScale, yScales) {
+  const result = {
+    yScales: {}
+  };
+
+  // Convert X scale
+  if (xScale) {
+    result.xScale = convertToSerializableScale(xScale);
+  }
+
+  // Convert Y scales
+  if (yScales) {
+    yScales.forEach((scale, id) => {
+      const serializableScale = convertToSerializableScale(scale);
+      if (serializableScale) {
+        result.yScales[id] = serializableScale;
+      }
+    });
+  }
+  return result;
+}
+
+/**
+ * Serializable scale implementations based on D3 scale concepts.
+ * These scales can be used directly on the UI thread in Reanimated worklets.
+ */
+
+/**
+ * Serializable linear scale function
+ */
+export function applyLinearScale(value, scale) {
+  'worklet';
+
+  const [d0, d1] = scale.domain;
+  const [r0, r1] = scale.range;
+  const t = (value - d0) / (d1 - d0); // normalize to [0, 1]
+  return r0 + t * (r1 - r0); // interpolate in range
+}
+
+/**
+ * Serializable log scale function
+ */
+export function applyLogScale(value, scale) {
+  'worklet';
+
+  var _scale$base;
+  const [d0, d1] = scale.domain;
+  const [r0, r1] = scale.range;
+  const base = (_scale$base = scale.base) != null ? _scale$base : 10;
+  const logBase = base === 10 ? Math.log10 : base === Math.E ? Math.log : x => Math.log(x) / Math.log(base);
+  const t = (logBase(value) - logBase(d0)) / (logBase(d1) - logBase(d0));
+  return r0 + t * (r1 - r0);
+}
+
+/**
+ * Serializable band scale function
+ */
+export function applyBandScale(value, scale) {
+  'worklet';
+
+  const [r0, r1] = scale.range;
+  const [domainMin, domainMax] = scale.domain;
+  const n = domainMax - domainMin + 1;
+  const step = scale.step;
+  const index = value - domainMin;
+  if (index < 0 || index >= n) {
+    return r0;
+  }
+  const paddingOffset = (step - scale.bandwidth) / 2;
+  const bandStart = r0 + step * index + paddingOffset;
+  return bandStart;
+}
+
+/**
+ * Universal serializable scale function that handles any scale type
+ */
+export function applySerializableScale(value, scale) {
+  'worklet';
+
+  switch (scale.type) {
+    case 'linear':
+      return applyLinearScale(value, scale);
+    case 'log':
+      return applyLogScale(value, scale);
+    case 'band':
+      return applyBandScale(value, scale);
+    default:
+      return 0;
+  }
+}
+
+/**
+ * Get bandwidth for band scales (returns 0 for other scale types)
+ */
+export function getScaleBandwidth(scale) {
+  'worklet';
+
+  if (scale.type === 'band') {
+    return scale.bandwidth;
+  }
+  return 0;
+}
+
+/**
+ * Invert a linear scale - convert from range value back to domain value
+ */
+export function invertLinearScale(rangeValue, scale) {
+  'worklet';
+
+  const [d0, d1] = scale.domain;
+  const [r0, r1] = scale.range;
+  const t = (rangeValue - r0) / (r1 - r0); // normalize to [0, 1]
+  return d0 + t * (d1 - d0); // interpolate in domain
+}
+
+/**
+ * Invert a log scale - convert from range value back to domain value
+ */
+export function invertLogScale(rangeValue, scale) {
+  'worklet';
+
+  var _scale$base2;
+  const [d0, d1] = scale.domain;
+  const [r0, r1] = scale.range;
+  const base = (_scale$base2 = scale.base) != null ? _scale$base2 : 10;
+  const logBase = base === 10 ? Math.log10 : base === Math.E ? Math.log : x => Math.log(x) / Math.log(base);
+  const t = (rangeValue - r0) / (r1 - r0); // normalize to [0, 1]
+  const logValue = logBase(d0) + t * (logBase(d1) - logBase(d0));
+
+  // Convert back from log space
+  return base === 10 ? Math.pow(10, logValue) : base === Math.E ? Math.exp(logValue) : Math.pow(base, logValue);
+}
+
+/**
+ * Invert a band scale - convert from range value back to domain index
+ */
+export function invertBandScale(rangeValue, scale) {
+  'worklet';
+
+  const [r0, r1] = scale.range;
+  const n = scale.domain.length;
+  const step = (r1 - r0) / n;
+
+  // Find which band this range value falls into
+  const index = Math.floor((rangeValue - r0) / step);
+
+  // Clamp to valid range
+  return Math.max(0, Math.min(index, n - 1));
+}
+
+/**
+ * Universal serializable scale invert function that handles any scale type
+ */
+export function invertSerializableScale(rangeValue, scale) {
+  'worklet';
+
+  switch (scale.type) {
+    case 'linear':
+      return invertLinearScale(rangeValue, scale);
+    case 'log':
+      return invertLogScale(rangeValue, scale);
+    case 'band':
+      return invertBandScale(rangeValue, scale);
+    default:
+      return 0;
+  }
+}

package/esm/visualizations/chart/utils/scrubber.js

@@ -0,0 +1,146 @@
+/**
+ * Determines which side (left/right) to place scrubber labels based on available space.
+ * Honors the preferred side when there's enough space, otherwise switches to the opposite side.
+ */
+export const getLabelPosition = function (beaconX, maxLabelWidth, drawingArea, xOffset, preferredSide) {
+  'worklet';
+
+  // any regular functions in ui thread must be marked with 'worklet'
+  if (xOffset === void 0) {
+    xOffset = 16;
+  }
+  if (preferredSide === void 0) {
+    preferredSide = 'right';
+  }
+  if (drawingArea.width <= 0 || drawingArea.height <= 0) {
+    return preferredSide;
+  }
+  const requiredSpace = maxLabelWidth + xOffset;
+  if (preferredSide === 'right') {
+    const availableSpace = drawingArea.x + drawingArea.width - beaconX;
+    return requiredSpace <= availableSpace ? 'right' : 'left';
+  }
+  const availableSpace = beaconX - drawingArea.x;
+  return requiredSpace <= availableSpace ? 'left' : 'right';
+};
+/**
+ * Calculates Y positions for all labels avoiding overlaps while maintaining order.
+ */
+export const calculateLabelYPositions = (dimensions, drawingArea, labelHeight, minGap) => {
+  'worklet';
+
+  if (dimensions.length === 0) {
+    return new Map();
+  }
+
+  // Sort by preferred Y values and create working labels
+  const sortedLabels = [...dimensions].sort((a, b) => a.preferredY - b.preferredY).map(dim => ({
+    seriesId: dim.seriesId,
+    preferredY: dim.preferredY,
+    finalY: dim.preferredY
+  }));
+
+  // Initial bounds fitting
+  const minY = drawingArea.y + labelHeight / 2;
+  const maxY = drawingArea.y + drawingArea.height - labelHeight / 2;
+  const requiredDistance = labelHeight + minGap;
+  for (const label of sortedLabels) {
+    // Clamp each label to the drawing area
+    label.finalY = Math.max(minY, Math.min(maxY, label.preferredY));
+  }
+
+  // First pass: push down any overlapping labels
+  for (let i = 1; i < sortedLabels.length; i++) {
+    const prev = sortedLabels[i - 1];
+    const current = sortedLabels[i];
+    const minAllowedY = prev.finalY + requiredDistance;
+    if (current.finalY < minAllowedY) {
+      current.finalY = minAllowedY;
+    }
+  }
+
+  // Find collision groups - groups of labels that are tightly packed (gap < minGap between them)
+  const collisionGroups = [];
+  let currentGroup = [sortedLabels[0]];
+  for (let i = 1; i < sortedLabels.length; i++) {
+    const prev = sortedLabels[i - 1];
+    const current = sortedLabels[i];
+    const gap = current.finalY - prev.finalY - labelHeight;
+    if (gap < minGap + 0.01) {
+      // Labels are touching or very close - part of same collision group
+      currentGroup.push(current);
+    } else {
+      // Gap is large enough - start new group
+      collisionGroups.push(currentGroup);
+      currentGroup = [current];
+    }
+  }
+  collisionGroups.push(currentGroup);
+
+  // Process each collision group - optimize positioning to minimize displacement
+  for (const group of collisionGroups) {
+    if (group.length === 1) {
+      // Single label, already at best position
+      continue;
+    }
+    const groupLastLabel = group[group.length - 1];
+    const groupFirstLabel = group[0];
+    const groupOverflow = groupLastLabel.finalY + labelHeight / 2 - (drawingArea.y + drawingArea.height);
+
+    // Calculate the ideal center point for this group
+    const groupPreferredCenter = group.reduce((sum, label) => sum + label.preferredY, 0) / group.length;
+    const groupTotalNeeded = group.length * labelHeight + (group.length - 1) * minGap;
+    if (groupOverflow <= 0) {
+      // Group fits, but let's center it better if possible
+      // Calculate how much we can shift up/down to center around preferred positions
+      const currentCenter = (groupFirstLabel.finalY + groupLastLabel.finalY) / 2;
+      const desiredShift = groupPreferredCenter - currentCenter;
+
+      // Calculate max shift in each direction
+      const maxShiftUp = groupFirstLabel.finalY - minY;
+      const maxShiftDown = maxY - groupLastLabel.finalY;
+
+      // Apply the shift, constrained by boundaries
+      const actualShift = Math.max(-maxShiftUp, Math.min(maxShiftDown, desiredShift));
+      if (Math.abs(actualShift) > 0.01) {
+        for (const label of group) {
+          label.finalY += actualShift;
+        }
+      }
+    } else {
+      // Group overflows - need to adjust
+      const groupStartY = groupFirstLabel.finalY - labelHeight / 2;
+      const availableSpace = drawingArea.y + drawingArea.height - groupStartY;
+      const maxShiftUp = groupFirstLabel.finalY - minY;
+      if (maxShiftUp >= groupOverflow) {
+        // Can shift entire group up to fit
+        for (const label of group) {
+          label.finalY -= groupOverflow;
+        }
+      } else if (groupTotalNeeded <= availableSpace) {
+        // Can't shift enough, but there's room - redistribute with proper spacing
+        let currentY = Math.max(minY, groupFirstLabel.finalY - maxShiftUp);
+        const gap = (availableSpace - group.length * labelHeight) / Math.max(1, group.length - 1);
+        for (const label of group) {
+          label.finalY = currentY;
+          currentY += labelHeight + gap;
+        }
+      } else {
+        // Not enough space even with compression - compress gaps and fit to bottom
+        const compressedGap = Math.max(1, (availableSpace - group.length * labelHeight) / Math.max(1, group.length - 1));
+        // Position so last label is at maxY
+        let currentY = maxY - (group.length - 1) * (labelHeight + compressedGap);
+        currentY = Math.max(minY, currentY);
+        for (const label of group) {
+          label.finalY = currentY;
+          currentY += labelHeight + compressedGap;
+        }
+      }
+    }
+  }
+  const result = new Map();
+  for (const label of sortedLabels) {
+    result.set(label.seriesId, label.finalY);
+  }
+  return result;
+};

package/esm/visualizations/chart/utils/transition.js

@@ -0,0 +1,268 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { useAnimatedReaction, useSharedValue, withDelay, withSpring, withTiming } from 'react-native-reanimated';
+import { notifyChange, Skia } from '@shopify/react-native-skia';
+import { interpolatePath } from 'd3-interpolate-path';
+
+/**
+ * Transition for animations.
+ * Supports timing and spring animation types.
+ * Used for paths, positions, opacity, and any other animated properties.
+ *
+ * @example
+ * // Spring animation
+ * { type: 'spring', damping: 10, stiffness: 100 }
+ *
+ * @example
+ * // Timing animation
+ * { type: 'timing', duration: 500, easing: Easing.inOut(Easing.ease) }
+ */
+
+/**
+ * Default update transition used across all chart components.
+ * `{ type: 'spring', stiffness: 900, damping: 120 }`
+ */
+export const defaultTransition = {
+  type: 'spring',
+  stiffness: 900,
+  damping: 120
+};
+
+/**
+ * Instant transition that completes immediately with no animation.
+ * Used when a transition is set to `null`.
+ */
+export const instantTransition = {
+  type: 'timing',
+  duration: 0
+};
+
+/**
+ * Duration in milliseconds for accessory elements to fade in.
+ */
+export const accessoryFadeTransitionDuration = 150;
+
+/**
+ * Delay in milliseconds before accessory elements fade in.
+ */
+export const accessoryFadeTransitionDelay = 350;
+
+/**
+ * Default enter transition for accessory elements (Point, Scrubber beacons).
+ * `{ type: 'timing', duration: 150, delay: 350 }`
+ */
+export const defaultAccessoryEnterTransition = {
+  type: 'timing',
+  duration: accessoryFadeTransitionDuration,
+  delay: accessoryFadeTransitionDelay
+};
+
+// Avoid exact endpoint samples, which can intermittently produce non-interpolatable
+// path pairs for SkPath.interpolate on complex morphs.
+// See https://github.com/wcandillon/can-it-be-done-in-react-native/blob/db8d6ee7024e37e8f8d2cb237c0b953b5fc766fe/season5/src/Headspace/Play.tsx
+const pathInterpolationEpsilon = 1e-3;
+
+/**
+ * Resolves a transition value based on the animation state and a default.
+ * @note Passing in null will disable an animation.
+ * @note Passing in undefined will use the provided default.
+ */
+export const getTransition = (value, animate, defaultValue) => {
+  if (!animate || value === null) return null;
+  return value != null ? value : defaultValue;
+};
+
+// Interpolator and useInterpolator are brought over from non exported code in @shopify/react-native-skia
+/**
+ * @worklet
+ */
+
+export const useInterpolator = (factory, value, interpolator, input, output, options) => {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const init = useMemo(() => factory(), []);
+  const result = useSharedValue(init);
+  useAnimatedReaction(() => value.value, val => {
+    result.value = interpolator(val, input, output, options, result.value);
+    notifyChange(result);
+  }, [input, output, options]);
+  return result;
+};
+
+/**
+ * Builds a react-native-reanimated animation based on the configuration.
+ *
+ * @param targetValue - The target value to animate to
+ * @param config - The transition configuration
+ * @returns The animation value to assign to a shared value
+ *
+ * @example
+ * // Use directly for animation
+ * progress.value = 0;
+ * progress.value = buildTransition(1, { type: 'spring', damping: 10, stiffness: 100 });
+ *
+ * @example
+ * // Coordinate animations
+ * animatedX.value = buildTransition(100, { type: 'spring', damping: 10, stiffness: 100 });
+ * animatedY.value = buildTransition(200, { type: 'spring', damping: 10, stiffness: 100 });
+ *
+ * @example
+ * // Timing animation
+ * progress.value = buildTransition(1, { type: 'timing', duration: 500 });
+ */
+export const buildTransition = (targetValue, transition) => {
+  'worklet';
+
+  if (transition === null) return targetValue;
+  const delayMs = transition.delay;
+  let animation;
+  switch (transition.type) {
+    case 'timing':
+      {
+        animation = withTiming(targetValue, transition);
+        break;
+      }
+    case 'spring':
+      {
+        animation = withSpring(targetValue, transition);
+        break;
+      }
+    default:
+      {
+        animation = withSpring(targetValue, defaultTransition);
+        break;
+      }
+  }
+  if (delayMs && delayMs > 0) {
+    return withDelay(delayMs, animation);
+  }
+  return animation;
+};
+
+/**
+ * Hook for path animation state and transitions.
+ *
+ * @param currentPath - Current target path to animate to
+ * @param initialPath - Initial path for enter animation. When provided, the first animation will go from initialPath to currentPath.
+ * @param transitions - Transition configuration for enter and update animations
+ * @returns Animated SkPath as a shared value
+ *
+ * @example
+ * // Simple path transition
+ * const path = usePathTransition({
+ *   currentPath: d ?? '',
+ *   transitions: {
+ *     update: { type: 'timing', duration: 3000 },
+ *   },
+ * });
+ *
+ * @example
+ * // Enter animation with different initial config (like DefaultBar)
+ * const path = usePathTransition({
+ *   currentPath: targetPath,
+ *   initialPath: baselinePath,
+ *   transitions: {
+ *     enter: { type: 'tween', duration: 500 },
+ *     update: { type: 'spring', stiffness: 900, damping: 120 },
+ *   },
+ * });
+ */
+export const usePathTransition = _ref => {
+  var _Skia$Path$MakeFromSV;
+  let {
+    currentPath,
+    initialPath,
+    transitions,
+    transition = defaultTransition
+  } = _ref;
+  const transitionRef = useRef({
+    enter: transitions == null ? void 0 : transitions.enter,
+    update: (transitions == null ? void 0 : transitions.update) !== undefined ? transitions.update : transition
+  });
+  transitionRef.current.enter = transitions == null ? void 0 : transitions.enter;
+  transitionRef.current.update = (transitions == null ? void 0 : transitions.update) !== undefined ? transitions.update : transition;
+  const targetPathRef = useRef(initialPath != null ? initialPath : currentPath);
+  const isFirstAnimation = useRef(!!initialPath);
+  const interpolatorRef = useRef(null);
+  const progress = useSharedValue(0);
+  const initialSkiaPath = (_Skia$Path$MakeFromSV = Skia.Path.MakeFromSVGString(initialPath != null ? initialPath : currentPath)) != null ? _Skia$Path$MakeFromSV : Skia.Path.Make();
+  const normalizedStartShared = useSharedValue(initialSkiaPath);
+  const normalizedEndShared = useSharedValue(initialSkiaPath);
+  const fallbackPathShared = useSharedValue(initialSkiaPath);
+  const result = useSharedValue(initialSkiaPath);
+  const animationFrameRef = useRef(null);
+  useEffect(() => {
+    var _Skia$Path$MakeFromSV3, _Skia$Path$MakeFromSV4, _Skia$Path$MakeFromSV5;
+    if (targetPathRef.current === currentPath) {
+      return;
+    }
+    let fromPath = targetPathRef.current;
+    if (interpolatorRef.current) {
+      const p = Math.min(Math.max(progress.value, 0), 1);
+      fromPath = interpolatorRef.current(p);
+    }
+    targetPathRef.current = currentPath;
+    const {
+      enter,
+      update
+    } = transitionRef.current;
+    const isFirstAnim = isFirstAnimation.current;
+    const activeTransition = isFirstAnim && enter !== undefined ? enter : update;
+    isFirstAnimation.current = false;
+    if (activeTransition === null) {
+      var _Skia$Path$MakeFromSV2;
+      const targetPath = (_Skia$Path$MakeFromSV2 = Skia.Path.MakeFromSVGString(currentPath)) != null ? _Skia$Path$MakeFromSV2 : Skia.Path.Make();
+      interpolatorRef.current = null;
+      normalizedStartShared.value = targetPath;
+      normalizedEndShared.value = targetPath;
+      fallbackPathShared.value = targetPath;
+      progress.value = 1;
+      result.value = targetPath;
+      notifyChange(result);
+      return;
+    }
+    const pathInterpolator = interpolatePath(fromPath, currentPath);
+    interpolatorRef.current = pathInterpolator;
+    normalizedStartShared.value = (_Skia$Path$MakeFromSV3 = Skia.Path.MakeFromSVGString(pathInterpolator(pathInterpolationEpsilon))) != null ? _Skia$Path$MakeFromSV3 : Skia.Path.Make();
+    normalizedEndShared.value = (_Skia$Path$MakeFromSV4 = Skia.Path.MakeFromSVGString(pathInterpolator(1 - pathInterpolationEpsilon))) != null ? _Skia$Path$MakeFromSV4 : Skia.Path.Make();
+    fallbackPathShared.value = (_Skia$Path$MakeFromSV5 = Skia.Path.MakeFromSVGString(currentPath)) != null ? _Skia$Path$MakeFromSV5 : Skia.Path.Make();
+    const kickoff = () => {
+      progress.value = 0;
+      progress.value = buildTransition(1, activeTransition);
+    };
+
+    // Initial enter: defer the kickoff one frame. In Reanimated v4 / worklets
+    // v0.5.2, valueSetter's rAF chain doesn't advance for animation builders
+    // assigned during the first React commit — the animation is set up but
+    // never ticks. Deferring to the next frame puts us in the "warm" state
+    // that updates already enjoy, and the rAF chain runs.
+    if (isFirstAnim) {
+      animationFrameRef.current = requestAnimationFrame(kickoff);
+      return;
+    }
+
+    // Cancel any deferred initial kickoff that hasn't fired yet so its stale
+    // enter transition doesn't overwrite this update animation.
+    if (animationFrameRef.current) {
+      cancelAnimationFrame(animationFrameRef.current);
+      animationFrameRef.current = null;
+    }
+
+    // Subsequent kickoff (data update or post-layout-settle re-render) — runs
+    // synchronously since the cold-state window only applies to the very first
+    // React commit.
+    kickoff();
+  }, [currentPath, progress, normalizedStartShared, normalizedEndShared, fallbackPathShared, result]);
+  useAnimatedReaction(() => ({
+    p: progress.value,
+    to: fallbackPathShared.value
+  }), _ref2 => {
+    'worklet';
+
+    var _normalizedEndShared$;
+    let {
+      p
+    } = _ref2;
+    result.value = (_normalizedEndShared$ = normalizedEndShared.value.interpolate(normalizedStartShared.value, p)) != null ? _normalizedEndShared$ : fallbackPathShared.value;
+    notifyChange(result);
+  }, []);
+  return result;
+};