Skip to main content
In Skia, paths are semantically identical to SVG Paths. They allow you to draw complex shapes.

​
Properties

NameTypeDescription
pathSkPath or stringPath to draw. Can be an SVG path string or a path object
startnumberTrims the start of the path. Range: [0, 1] (default: 0)
endnumberTrims the end of the path. Range: [0, 1] (default: 1)
strokeStrokeOptionsConverts the path into its filled equivalent

​
Using SVG Notation

You can use SVG path notation directly: 
import { Canvas, Path } from "@shopify/react-native-skia";

const SVGNotation = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Path
        path="M 128 0 L 168 80 L 256 93 L 192 155 L 207 244 L 128 202 L 49 244 L 64 155 L 0 93 L 88 80 L 128 0 Z"
        color="lightblue"
      />
    </Canvas>
  );
};

​
Using Path Object

Create paths programmatically using the Skia Path API: 
import { Canvas, Path, Skia } from "@shopify/react-native-skia";

const path = Skia.Path.Make();
path.moveTo(128, 0);
path.lineTo(168, 80);
path.lineTo(256, 93);
path.lineTo(192, 155);
path.lineTo(207, 244);
path.lineTo(128, 202);
path.lineTo(49, 244);
path.lineTo(64, 155);
path.lineTo(0, 93);
path.lineTo(88, 80);
path.lineTo(128, 0);
path.close();

const PathDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Path path={path} color="lightblue" />
    </Canvas>
  );
};

​
Trim

You can trim the path using start and end properties: 
import { Canvas, Path } from "@shopify/react-native-skia";

const TrimDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Path
        path="M 128 0 L 168 80 L 256 93 L 192 155 L 207 244 L 128 202 L 49 244 L 64 155 L 0 93 L 88 80 L 128 0 Z"
        color="lightblue"
        style="stroke"
        strokeJoin="round"
        strokeWidth={5}
        start={0.25}
        end={0.75}
      />
    </Canvas>
  );
};

​
Fill Type

The fillType property defines the algorithm to determine the inside of a shape. Possible values:
  • winding (default)
  • evenOdd
  • inverseWinding
  • inverseEvenOdd
import { Canvas, Skia, Fill, Path } from "@shopify/react-native-skia";

const star = () => {
  const R = 115.2;
  const C = 128.0;
  const path = Skia.Path.Make();
  path.moveTo(C + R, C);
  for (let i = 1; i < 8; ++i) {
    const a = 2.6927937 * i;
    path.lineTo(C + R * Math.cos(a), C + R * Math.sin(a));
  }
  return path;
};

export const FillTypeDemo = () => {
  const path = star();
  return (
    <Canvas style={{ flex: 1 }}>
      <Fill color="white" />
      <Path 
        path={path} 
        style="stroke" 
        strokeWidth={4} 
        color="#3EB489"
      />
      <Path 
        path={path} 
        color="lightblue" 
        fillType="evenOdd" 
      />
    </Canvas>
  );
};

​
Path Commands

When using the Path API programmatically, you have access to many commands:
  • moveTo(x, y) - Move to a point
  • lineTo(x, y) - Draw a line to a point
  • cubicTo(x1, y1, x2, y2, x3, y3) - Draw a cubic bezier curve
  • quadTo(x1, y1, x2, y2) - Draw a quadratic bezier curve
  • arcTo(rx, ry, xAxisRotate, useSmallArc, sweep, x, y) - Draw an arc
  • close() - Close the current contour
  • addCircle(x, y, r) - Add a circle
  • addRect(rect) - Add a rectangle
  • addRRect(rrect) - Add a rounded rectangle

Build docs developers (and LLMs) love

Get started for freeTalk to us