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
opaque?	boolean	By default, the canvas is transparent but on Android, you can make it opaque to improve performance.
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>
  );
};

Accessibilty

The Canvas component supports the same properties as a View component including its accessibility properties. You can make elements inside the canvas accessible as well by overlayings views on top of your canvas. This is the same recipe used for applying gestures on specific canvas elements.