@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

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.

Checkout the full documentation here.

yarn add @shopify/react-native-skia

Or using npm:

npm install @shopify/react-native-skia

iOS

Run pod install on the ios/ directory.

Android

Version compatibility: react-native@>=0.66 is required.

Currently, you will need Android NDK to be installed. If you have Android Studio installed, make sure $ANDROID_NDK is available. ANDROID_NDK=/Users/username/Library/Android/sdk/ndk-bundle for instance.

If the NDK is not installed, you can install it via Android Studio by going to the menu File > Project Structure

And then the SDK Location section. It will show you the NDK path, or the option to download it if you don't have it installed.

Playground

We have an example project you can play with here.

yarn
cd package && yarn && cd ..
cd example && yarn && yarn start

To run the example project on iOS, you will need to run pod install, and on Android, you will also need Android NDK to be installed (see here).