@shopify/react-native-skia

What is @shopify/react-native-skia?

@shopify/react-native-skia is a powerful library for rendering high-performance 2D graphics in React Native applications. It leverages the Skia graphics library to provide a wide range of drawing and animation capabilities, making it suitable for creating complex visual effects, custom UI components, and interactive graphics.

What are @shopify/react-native-skia's main functionalities?

Drawing Shapes

This feature allows you to draw basic shapes like circles, rectangles, and lines. The code sample demonstrates how to draw a blue circle using the Canvas and Circle components.

import { Canvas, Circle, Paint } from '@shopify/react-native-skia';

const MyComponent = () => (
  <Canvas style={{ flex: 1 }}>
    <Circle cx={50} cy={50} r={25} color="blue" />
  </Canvas>
);

Custom Paint Effects

This feature allows you to apply custom paint effects to shapes. The code sample shows how to draw a red rectangle with a custom stroke width using the Paint class.

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

const MyComponent = () => (
  <Canvas style={{ flex: 1 }}>
    <Rect x={10} y={10} width={100} height={100} paint={new Paint().setColor('red').setStrokeWidth(5)} />
  </Canvas>
);

Animations

This feature supports animations for various properties. The code sample demonstrates how to animate the radius of a circle using the useValue and useTiming hooks.

import { Canvas, Circle, useValue, useTiming } from '@shopify/react-native-skia';

const MyComponent = () => {
  const radius = useValue(25);
  useTiming(radius, { to: 50, duration: 1000 });

  return (
    <Canvas style={{ flex: 1 }}>
      <Circle cx={50} cy={50} r={radius} color="green" />
    </Canvas>
  );
};

Other packages similar to @shopify/react-native-skia

react-native-svg

react-native-svg provides SVG support for React Native, allowing you to render SVG images and create complex vector graphics. While it is also used for drawing shapes and animations, it is more focused on SVG standards and may not offer the same level of performance as @shopify/react-native-skia for complex graphics.

react-native-reanimated

react-native-reanimated is a library for creating smooth animations in React Native. It provides a more comprehensive animation API compared to @shopify/react-native-skia, but it is not specifically designed for drawing and rendering graphics.

react-native-canvas

react-native-canvas is a wrapper around the HTML5 Canvas API for React Native. It allows you to draw 2D graphics using a familiar API, but it may not offer the same performance optimizations and advanced features as @shopify/react-native-skia.

README

React Native Skia

High-performance 2d Graphics for React Native using Skia

Checkout the full documentation here.

Documentation on the library development is available here.