Canvas

The Canvas component is the root of your Skia drawing. You can treat it as a regular React Native view and assign a view style. Behind the scenes, it is using its own React renderer.

Name	Type	Description.
style?	ViewStyle	View style
ref?	Ref<SkiaView>	Reference to the SkiaView object
mode?	default or continuous	By default, the canvas is only updated when the drawing tree or animation values change. With mode="continuous", the canvas will redraw on every frame
onSize?	SharedValue<Size>	Reanimated value to which the canvas size will be assigned (see canvas size)
onLayout?	NativeEvent<LayoutEvent>	Invoked on mount and on layout changes (see onLayout)

Getting the Canvas size

If the size of the Canvas is unknown, there are two ways to access it:

• On the JS thread, using the onLayout prop, like you would on any regular React Native View.
• On the UI thread, using the onSize prop with Reanimated.

Getting a Canvas Snapshot

You can save your drawings as an image by using the makeImageSnapshotAsync method. This method returns a promise that resolves to an Image. It executes on the UI thread, ensuring access to the same Skia context as your on-screen canvases, including textures.

If your drawing does not contain textures, you may also use the synchronous makeImageSnapshot method for simplicity.

Example

tsx
import {useEffect} from "react";
import {Canvas, useCanvasRef, Circle} from "@shopify/react-native-skia";
 
export const Demo = () => {
  const ref = useCanvasRef();
  useEffect(() => {
    setTimeout(() => {
      // you can pass an optional rectangle
      // to only save part of the image
      const image = ref.current?.makeImageSnapshot();
      if (image) {
        // you can use image in an <Image> component
        // Or save to file using encodeToBytes -> Uint8Array
        const bytes = image.encodeToBytes();
      }
    }, 1000)
  });
  return (
    <Canvas style={{ flex: 1 }} ref={ref}>
      <Circle r={128} cx={128} cy={128} color="red" />
    </Canvas>
  );
};

tsx
import {useEffect} from "react";
import {Canvas, useCanvasRef, Circle} from "@shopify/react-native-skia";
 
export const Demo = () => {
  const ref = useCanvasRef();
  useEffect(() => {
    setTimeout(() => {
      // you can pass an optional rectangle
      // to only save part of the image
      const image = ref.current?.makeImageSnapshot();
      if (image) {
        // you can use image in an <Image> component
        // Or save to file using encodeToBytes -> Uint8Array
        const bytes = image.encodeToBytes();
      }
    }, 1000)
  });
  return (
    <Canvas style={{ flex: 1 }} ref={ref}>
      <Circle r={128} cx={128} cy={128} color="red" />
    </Canvas>
  );
};