Rectangles

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>
  );
};

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>
  );
};

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>
  );
};

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>
  );
};

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>
  );
};