Path Operations

/**
 * Represents a complete SVG path
 */
interface Path {
  /** Starting point of the path */
  move: Vector;
  /** Array of cubic Bézier curves */
  curves: Curve[];
  /** Whether the path is closed */
  close: boolean;
}

/**
 * Represents a cubic Bézier curve segment
 */
interface Curve {
  /** End point of the curve */
  to: Vector;
  /** First control point */
  c1: Vector;
  /** Second control point */
  c2: Vector;
}

/**
 * Extrapolation behavior for animations
 */
enum Extrapolation {
  CLAMP = "clamp",
  EXTEND = "extend",
  IDENTITY = "identity"
}

/**
 * Create a new path with starting point
 * @param move - Starting point vector
 * @returns New empty path
 */
function createPath(move: Vector): Path;

/**
 * Add a cubic Bézier curve to path
 * @param path - Target path to modify
 * @param curve - Curve to add
 */
function addCurve(path: Path, curve: Curve): void;

/**
 * Add a straight line to path
 * @param path - Target path to modify
 * @param to - End point of line
 */
function addLine(path: Path, to: Vector): void;

/**
 * Add a quadratic Bézier curve to path
 * @param path - Target path to modify
 * @param cp - Control point
 * @param to - End point
 */
function addQuadraticCurve(path: Path, cp: Vector, to: Vector): void;

/**
 * Add an arc to path
 * @param path - Target path to modify
 * @param corner - Arc corner point
 * @param to - End point
 */
function addArc(path: Path, corner: Vector, to: Vector): void;

/**
 * Close the path
 * @param path - Path to close
 */
function close(path: Path): void;

import { createPath, addLine, addCurve, close, vec2 } from "react-native-redash";

// Create a complex path
const path = createPath(vec2(50, 50));

// Add a line
addLine(path, vec2(100, 50));

// Add a curved segment
addCurve(path, {
  c1: vec2(120, 30),
  c2: vec2(130, 70),
  to: vec2(150, 50)
});

// Close the path
close(path);

/**
 * Parse SVG path string into Path object
 * ⚠️ This function must run on the JS thread (not UI thread)
 * @param d - SVG path string
 * @returns Parsed Path object
 */
function parse(d: string): Path;

/**
 * Serialize Path object to SVG path string
 * @param path - Path to serialize
 * @returns SVG path string
 */
function serialize(path: Path): string;

import { parse, serialize } from "react-native-redash";

// Parse SVG path (on JS thread)
const svgPath = "M150,0 C150,0 0,75 200,75 C75,200 200,225 200,225";
const path = parse(svgPath);

// Later serialize back to string (can run on UI thread)
const pathString = serialize(path);

/**
 * Interpolate between multiple paths
 * @param value - Animation value
 * @param inputRange - Input range for interpolation
 * @param outputRange - Array of paths to interpolate between
 * @param extrapolate - Extrapolation behavior (default: CLAMP)
 * @returns Interpolated SVG path string
 */
function interpolatePath(
  value: number,
  inputRange: number[],
  outputRange: Path[],
  extrapolate?: Extrapolation
): string;

/**
 * Mix between two paths (0 to 1)
 * @param value - Mix factor (0 = p1, 1 = p2)
 * @param p1 - First path
 * @param p2 - Second path
 * @param extrapolate - Extrapolation behavior (default: CLAMP)
 * @returns Interpolated SVG path string
 */
function mixPath(
  value: number,
  p1: Path,
  p2: Path,
  extrapolate?: Extrapolation
): string;

import React from "react";
import Svg, { Path as SvgPath } from "react-native-svg";
import { interpolatePath, parse } from "react-native-redash";
import Animated, {
  useSharedValue,
  useDerivedValue,
  useAnimatedProps
} from "react-native-reanimated";

const AnimatedSvgPath = Animated.createAnimatedComponent(SvgPath);

export const MorphingPath = () => {
  const progress = useSharedValue(0);
  
  // Parse paths on JS thread
  const path1 = parse("M50,50 L100,50 L75,100 Z");
  const path2 = parse("M50,50 C80,30 120,30 150,50 C150,80 120,120 100,150 C80,120 50,80 50,50 Z");
  
  const animatedProps = useAnimatedProps(() => ({
    d: interpolatePath(
      progress.value,
      [0, 1],
      [path1, path2]
    )
  }));
  
  return (
    <Svg width="200" height="200">
      <AnimatedSvgPath
        animatedProps={animatedProps}
        fill="blue"
      />
    </Svg>
  );
};

/**
 * Get curve at specific x coordinate
 * @param path - Path to analyze
 * @param x - X coordinate
 * @returns Curve information or null
 */
function selectCurve(path: Path, x: number): {
  from: Vector;
  curve: Curve;
} | null;

/**
 * Get Y coordinate for X coordinate on path
 * @param path - Path to analyze
 * @param x - X coordinate
 * @param precision - Calculation precision (default: 2)
 * @returns Y coordinate or null if not found
 */
function getYForX(path: Path, x: number, precision?: number): number | null;

/**
 * Create smooth curves through points
 * @param points - Array of points to connect
 * @param smoothing - Smoothing factor
 * @param strategy - Curve generation strategy
 * @returns Path with smooth curves
 */
function curveLines(
  points: Vector<number>[],
  smoothing: number,
  strategy: "complex" | "bezier" | "simple"
): Path;

import { curveLines, serialize, vec2 } from "react-native-redash";

// Create smooth path through points
const points = [
  vec2(50, 100),
  vec2(100, 50),
  vec2(150, 100),
  vec2(200, 50),
  vec2(250, 100)
];

const smoothPath = curveLines(points, 0.3, "complex");
const pathString = serialize(smoothPath);

// Use with SVG
<SvgPath d={pathString} stroke="blue" fill="none" />

import React, { useEffect } from "react";
import Svg, { Path as SvgPath } from "react-native-svg";
import {
  parse,
  interpolatePath,
  curveLines,
  serialize,
  vec2
} from "react-native-redash";
import Animated, {
  useSharedValue,
  useAnimatedProps,
  withRepeat,
  withTiming
} from "react-native-reanimated";

const AnimatedSvgPath = Animated.createAnimatedComponent(SvgPath);

export const AnimatedPath = () => {
  const progress = useSharedValue(0);
  
  useEffect(() => {
    progress.value = withRepeat(
      withTiming(1, { duration: 2000 }),
      -1,
      true
    );
  }, []);
  
  // Create multiple paths
  const straightPath = parse("M50,150 L250,150");
  
  const wavePath = curveLines([
    vec2(50, 150),
    vec2(100, 100),
    vec2(150, 200),
    vec2(200, 100),
    vec2(250, 150)
  ], 0.4, "complex");
  
  const animatedProps = useAnimatedProps(() => ({
    d: interpolatePath(
      progress.value,
      [0, 1],
      [straightPath, wavePath]
    )
  }));
  
  return (
    <Svg width="300" height="300">
      <AnimatedSvgPath
        animatedProps={animatedProps}
        stroke="purple"
        strokeWidth="3"
        fill="none"
      />
    </Svg>
  );
};