Drawing Shapes and Paths

Skia ships a handful of built-in shape components, and one flexible escape hatch, Path, for anything more custom.

Built-in shapes

import { Canvas, Circle, Rect, RoundedRect } from '@shopify/react-native-skia';

export function Shapes() {
  return (
    <Canvas style={{ flex: 1 }}>
      <Circle cx={60} cy={60} r={40} color="#f97316" />
      <Rect x={140} y={20} width={80} height={80} color="#22c55e" />
      <RoundedRect x={20} y={140} width={100} height={60} r={16} color="#a855f7" />
    </Canvas>
  );
}

Multiple shapes as siblings inside a Canvas are simply drawn in order, later children paint on top of earlier ones, exactly like layered Views.

Fill vs. stroke

By default every shape is filled. Pass style="stroke" and a strokeWidth to draw just an outline instead:

<Circle cx={100} cy={100} r={50} color="#22d3ee" style="stroke" strokeWidth={4} />

Paths, for anything custom

Path takes an SVG-style path string, and Skia gives you Skia.Path.Make() to build one programmatically:

import { Canvas, Path, Skia } from '@shopify/react-native-skia';

const triangle = Skia.Path.Make();
triangle.moveTo(50, 0);
triangle.lineTo(100, 100);
triangle.lineTo(0, 100);
triangle.close();

export function Triangle() {
  return (
    <Canvas style={{ flex: 1 }}>
      <Path path={triangle} color="#facc15" />
    </Canvas>
  );
}

moveTo lifts the "pen" to a starting point without drawing, lineTo draws a straight segment to the next point, and close() connects back to the start. Curves are available too, via cubicTo/quadTo, for anything that isn't made of straight lines.