Polygons

Draw lines, points, and polygons

React Native Skia provides components for drawing lines and connected points.

Line

Draws a line between two points.

Name	Type	Description
p1	Point	Start point
p2	Point	End point

import { Canvas, Line, vec } from "@shopify/react-native-skia";

const LineDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Line
        p1={vec(0, 0)}
        p2={vec(256, 256)}
        color="lightblue"
        style="stroke"
        strokeWidth={4}
      />
    </Canvas>
  );
};

Points

Draws points and optionally connects them.

Name	Type	Description
points	Point[]	Points to draw
mode	PointMode	How to connect points: points, lines, or polygon (default: points)

Point Mode: points

Draws individual points without connections:

import { Canvas, Points, vec } from "@shopify/react-native-skia";

const PointsDemo = () => {
  const points = [
    vec(128, 0),
    vec(168, 80),
    vec(256, 93),
    vec(192, 155),
    vec(207, 244),
  ];
  
  return (
    <Canvas style={{ flex: 1 }}>
      <Points
        points={points}
        mode="points"
        color="lightblue"
        style="stroke"
        strokeWidth={10}
        strokeCap="round"
      />
    </Canvas>
  );
};

Point Mode: lines

Connects pairs of points with lines:

import { Canvas, Points, vec } from "@shopify/react-native-skia";

const LinesDemo = () => {
  const points = [
    vec(0, 0), vec(256, 256),  // Line 1
    vec(256, 0), vec(0, 256),  // Line 2
  ];
  
  return (
    <Canvas style={{ flex: 1 }}>
      <Points
        points={points}
        mode="lines"
        color="lightblue"
        style="stroke"
        strokeWidth={4}
      />
    </Canvas>
  );
};

Point Mode: polygon

Connects all points in sequence:

import { Canvas, Points, vec } from "@shopify/react-native-skia";

const PolygonDemo = () => {
  const points = [
    vec(128, 0),
    vec(168, 80),
    vec(256, 93),
    vec(192, 155),
    vec(207, 244),
    vec(128, 202),
    vec(49, 244),
    vec(64, 155),
    vec(0, 93),
    vec(88, 80),
    vec(128, 0),
  ];
  
  return (
    <Canvas style={{ flex: 1 }}>
      <Points
        points={points}
        mode="polygon"
        color="lightblue"
        style="stroke"
        strokeWidth={4}
      />
    </Canvas>
  );
};

Examples

Grid Pattern

import { Canvas, Line, vec } from "@shopify/react-native-skia";

const GridPattern = () => {
  const size = 256;
  const step = 32;
  const lines = [];
  
  // Vertical lines
  for (let x = 0; x <= size; x += step) {
    lines.push(
      <Line
        key={`v${x}`}
        p1={vec(x, 0)}
        p2={vec(x, size)}
        color="lightgray"
        style="stroke"
        strokeWidth={1}
      />
    );
  }
  
  // Horizontal lines
  for (let y = 0; y <= size; y += step) {
    lines.push(
      <Line
        key={`h${y}`}
        p1={vec(0, y)}
        p2={vec(size, y)}
        color="lightgray"
        style="stroke"
        strokeWidth={1}
      />
    );
  }
  
  return (
    <Canvas style={{ width: size, height: size }}>
      {lines}
    </Canvas>
  );
};

Related

• Paths - Draw complex shapes
• Circles - Draw circles
• Paint Properties - Styling options