Skip to main content
React Native Skia provides a declarative API using its own React Renderer. Let’s create your first drawing.

​
Basic Example

import React from "react";
import { Canvas, Circle, Group } from "@shopify/react-native-skia";

const App = () => {
  const width = 256;
  const height = 256;
  const r = width * 0.33;
  return (
    <Canvas style={{ width, height }}>
      <Group blendMode="multiply">
        <Circle cx={r} cy={r} r={r} color="cyan" />
        <Circle cx={width - r} cy={r} r={r} color="magenta" />
        <Circle cx={width / 2} cy={width - r} r={r} color="yellow" />
      </Group>
    </Canvas>
  );
};

export default App;
This example creates three overlapping circles with a multiply blend mode, demonstrating:
  • Canvas component - The root container for all Skia drawings
  • Group component - Groups elements and applies shared properties (like blend modes)
  • Circle component - Draws a circle at specified coordinates with a color

​
How It Works

  1. Canvas - Acts as the root component where all Skia drawing happens. It uses its own React renderer behind the scenes.
  2. Coordinates - The coordinate system starts at the top-left corner (0, 0). The cx and cy properties define the center of each circle.
  3. Blend Mode - The multiply blend mode creates color mixing where circles overlap, similar to how physical paint layers interact.

​
Next Steps

Now that you’ve created your first drawing, explore:
  • Canvas - Learn about canvas properties and capabilities
  • Shapes - Discover all available shape components
  • Paint & Styling - Apply colors, strokes, and effects
  • Animations - Bring your drawings to life

Build docs developers (and LLMs) love

Get started for freeTalk to us