Rectangles

Draw rectangles and rounded rectangles

React Native Skia provides components for drawing rectangles and rounded rectangles.

Rect

Draws a rectangle.

Name	Type	Description
x	number	X coordinate
y	number	Y coordinate
width	number	Width of the rectangle
height	number	Height of the rectangle

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

const RectDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Rect x={0} y={0} width={256} height={256} color="lightblue" />
    </Canvas>
  );
};

RoundedRect

Draws a rounded rectangle.

Name	Type	Description
x	number	X coordinate
y	number	Y coordinate
width	number	Width of the rectangle
height	number	Height of the rectangle
r?	number or Vector	Corner radius. Defaults to ry if specified or 0

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

const RoundedRectDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <RoundedRect
        x={0}
        y={0}
        width={256}
        height={256}
        r={25}
        color="lightblue"
      />
    </Canvas>
  );
};

Custom Corner Radii

You can set a different corner radius for each corner:

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

const CustomRadiiDemo = () => {
  const size = 256;
  const r = size * 0.2;
  const rrect = {
    rect: { x: 0, y: 0, width: size, height: size },
    topLeft: { x: 0, y: 0 },
    topRight: { x: r, y: r },
    bottomRight: { x: 0, y: 0 },
    bottomLeft: { x: r, y: r },
  };
  
  return (
    <Canvas style={{ width: size, height: size }}>
      <RoundedRect rect={rrect} color="lightblue" />
    </Canvas>
  );
};

DiffRect

Draws the difference between two rectangles, creating a frame or border effect.

Name	Type	Description
outer	RectOrRRect	Outer rectangle
inner	RectOrRRect	Inner rectangle

import { Canvas, DiffRect, rect, rrect } from "@shopify/react-native-skia";

const DiffRectDemo = () => {
  const outer = rrect(rect(0, 0, 256, 256), 25, 25);
  const inner = rrect(rect(50, 50, 156, 156), 50, 50);
  
  return (
    <Canvas style={{ flex: 1 }}>
      <DiffRect inner={inner} outer={outer} color="lightblue" />
    </Canvas>
  );
};

Paint Properties

All shape components support paint properties like color, style, strokeWidth, and more. See Paint Properties for details.

Stroke Example

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

const StrokeDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Rect
        x={50}
        y={50}
        width={156}
        height={156}
        color="blue"
        style="stroke"
        strokeWidth={4}
      />
    </Canvas>
  );
};

Related

• Circles - Draw circles and ovals
• Paths - Draw complex shapes
• Polygons - Draw lines and points