React Native Skia

While React Native Skia typically works in retained mode, you should use the Picture API when you need to execute a variable number of drawing commands each frame (immediate mode).

A Picture (type SkPicture) contains an immutable list of drawing operations that can be reused multiple times on any canvas.

To create a picture, use Skia.PictureRecorder() to begin recording to a canvas, perform your drawing operations, and then call recorder.finishRecordingAsPicture().

import React, { useEffect } from "react";
import { Canvas, Picture, Skia } from "@shopify/react-native-skia";
import {
  useDerivedValue,
  useSharedValue,
  withRepeat,
  withTiming,
} from "react-native-reanimated";

const size = 256;
const n = 20;

const paint = Skia.Paint();
const recorder = Skia.PictureRecorder();

export const HelloWorld = () => {
  const progress = useSharedValue(0);

  useEffect(() => {
    progress.value = withRepeat(withTiming(1, { duration: 3000 }), -1, true);
  }, [progress]);

  const picture = useDerivedValue(() => {
    "worklet";
    const canvas = recorder.beginRecording(Skia.XYWHRect(0, 0, size, size));
    const numberOfCircles = Math.floor(progress.value * n);
    for (let i = 0; i < numberOfCircles; i++) {
      const alpha = ((i + 1) / n) * 255;
      const r = ((i + 1) / n) * (size / 2);
      paint.setColor(Skia.Color(`rgba(0, 122, 255, ${alpha / 255})`));
      canvas.drawCircle(size / 2, size / 2, r, paint);
    }
    return recorder.finishRecordingAsPicture();
  });

  return (
    <Canvas style={{ flex: 1 }}>
      <Picture picture={picture} />
    </Canvas>
  );
};

React Native Skia can run on Node.js using its offscreen capabilities, allowing you to use the Skia API to draw, encode, and save images.

When running in Node, you must use the CommonJS build and import from specific entry points to avoid dependencies on pure React Native APIs:

1. Use @shopify/react-native-skia/lib/commonjs/web/LoadSkiaWeb to load the environment.
2. Use @shopify/react-native-skia/lib/commonjs/headless for the headless Skia APIs.

After calling LoadSkiaWeb(), you can access the Skia APIs via getSkiaExports() or by using require("@shopify/react-native-skia").

import { LoadSkiaWeb } from "@shopify/react-native-skia/lib/commonjs/web/LoadSkiaWeb";
import { Circle, drawOffscreen, getSkiaExports, Group, makeOffscreenSurface } from "@shopify/react-native-skia/lib/commonjs/headless";

(async () => {
  const width = 256;
  const height = 256;
  const size = 60;
  const r = size * 0.33;
  
  await LoadSkiaWeb();
  
  // Access Skia via getSkiaExports()
  const {Skia} = getSkiaExports();
  
  using surface = makeOffscreenSurface(width, height);
  using image = await drawOffscreen(surface,
    <Group blendMode="multiply">
      <Circle cx={r} cy={r} r={r} color="cyan" />
      <Circle cx={size - r} cy={r} r={r} color="magenta" />
      <Circle
        cx={size/2}
        cy={size - r}
        r={r}
        color="yellow"
      />
    </Group>);
    
  console.log(image.encodeToBase64());
})();

The Picture component does not follow standard painting rules. To apply effects like blurs to a Picture, wrap it in a Group and use the layer property to provide a Paint object containing the desired effect (e.g., Blur).

import React, { useMemo } from "react";
import { Canvas, Skia, Group, Paint, Blur, BlendMode, Picture } from "@shopify/react-native-skia";

export const Demo = () => {
  const picture = useMemo(() => {
    const recorder = Skia.PictureRecorder();
    const size = 256;
    const canvas = recorder.beginRecording(Skia.XYWHRect(0, 0, size, size));
    const r = 0.33 * size;
    const paint = Skia.Paint();
    paint.setBlendMode(BlendMode.Multiply);

    paint.setColor(Skia.Color("cyan"));
    canvas.drawCircle(r, r, r, paint);

    paint.setColor(Skia.Color("magenta"));
    canvas.drawCircle(size - r, r, r, paint);

    paint.setColor(Skia.Color("yellow"));
    canvas.drawCircle(size / 2, size - r, r, paint);

    return recorder.finishRecordingAsPicture();
  }, []);
  return (
    <Canvas style={{ flex: 1 }}>
      <Group layer={<Paint><Blur blur={10} /></Paint>}>
        <Picture picture={picture} />
      </Group>
    </Canvas>
  );
};

If an SVG's root dimensions are in absolute units, the width and height props on ImageSVG will not scale it. To scale an SVG to fit a specific area (like the canvas size), use the fitbox function within a Group component's transform prop.

Example of scaling an SVG to fit a 256x256 area:

const src = rect(0, 0, svg.width(), svg.height());
const dst = rect(0, 0, 256, 256);

<Group transform={fitbox("contain", src, dst)}>
  <ImageSVG svg={svg} x={0} y={0} width={svg.width()} height={svg.height()} />
</Group>

import React from "react";
import { Canvas, ImageSVG, Skia, rect, fitbox, Group } from "@shopify/react-native-skia";

const svg = Skia.SVG.MakeFromString(
  `<svg viewBox='0 0 20 20' width="20" height="20" xmlns='http://www.w3.org/2000/svg'>
    <circle cx='10' cy='10' r='10' fill='#00ffff'/>
  </svg>`
)!;

const width = 256;
const height = 256;
const src = rect(0, 0, svg.width(), svg.height());
const dst = rect(0, 0, width, height);

export const SVG = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Group transform={fitbox("contain", src, dst)}>
        <ImageSVG svg={svg} x={0} y={0} width={20} height={20} />
      </Group>
    </Canvas>
  );
};

Because ImageSVG uses the Skia SVG module, it doesn't follow standard component painting rules. To apply effects like opacity or blur, wrap the ImageSVG in a Group and use the layer property with a Paint object.

Opacity Example: Use ColorMatrix with OpacityMatrix inside a Paint component.

Blur Example: Use the Blur component inside a Paint component.

<Group
  transform={fitbox("contain", src, dst)}
  layer={<Paint><Blur blur={10} /></Paint>}
>
  <ImageSVG svg={tiger} ... />
</Group>

import { Canvas, ImageSVG, Skia, rect, fitbox, useSVG, Group, Paint, Blur } from "@shopify/react-native-skia";

// ... setup src and dst

export const SVG = () => {
  const tiger = useSVG(require("./tiger.svg"));
  if (!tiger) return null;

  return (
    <Canvas style={{ flex: 1 }}>
      <Group 
        transform={fitbox("contain", src, dst)} 
        layer={<Paint><Blur blur={10} /></Paint>}
      >
        <ImageSVG svg={tiger} x={0} y={0} width={800} height={800} />
      </Group>
    </Canvas>
  );
};