Skip to main content

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.

NameTypeDescription.
style?ViewStyleView style
ref?Ref<SkiaView>Reference to the SkiaView object
onTouch?TouchHandlerTouch handler for the Canvas (see touch handler)
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:

  • In React components, using the onLayout prop like you would on any regular React Native View.
  • In Skia animations, using useCanvas().

Getting a Canvas Snapshot

You can save your drawings as an image, using makeImageSnapshot. This method will return an Image instance. This instance can be used to draw it via the <Image> component, or be saved or shared using binary or base64 encoding.

Example

tsx
import {useEffect} from "react";
import {Canvas, Image, 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, Image, 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>
);
};