Skip to main content

​
React Native Skia

React Native Skia brings the Skia Graphics Library to React Native. Skia serves as the graphics engine for Google Chrome and Chrome OS, Android, Flutter, Mozilla Firefox, Firefox OS, and many other products.

​
Key Features

  • Declarative 2D graphics rendering - Build complex graphics using React components
  • 60+ FPS high-performance animations - Smooth animations powered by Reanimated
  • Extensive shape and path drawing - Circles, rectangles, paths, and custom shapes
  • Image processing and effects - Filters, shaders, and transformations
  • Shader and gradient support - Custom shaders and beautiful gradients
  • Text rendering and typography - Advanced text layout and custom fonts
  • Reanimated 3 integration - Seamless animation with zero FFI cost
  • Web support via CanvasKit - Run your graphics on web platforms
  • SVG and Lottie (Skottie) support - Import and render vector graphics

​
Example

Here’s a simple example showing the power of React Native Skia: 
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>
  );
};

​
Getting Started

Ready to start building? Check out the Installation guide or jump straight to the Hello World example.

​
Community

React Native Skia is maintained by Shopify and the open-source community. Visit our GitHub repository to contribute, report issues, or explore examples.

Build docs developers (and LLMs) love

Get started for freeTalk to us