Skip to main content

<SkiaCanvas />

A React Native Skia <Canvas /> component that wraps Remotion contexts.

You can place elements from @shopify/react-native-skia in it!

tsx
import { SkiaCanvas } from "@remotion/skia";
import { Fill } from "@shopify/react-native-skia";
import React from "react";
import { useVideoConfig } from "remotion";
 
const MySkiaVideo: React.FC = () => {
  const { width, height } = useVideoConfig();
  return (
    <SkiaCanvas width={width} height={height}>
      <Fill color="black" />
    </SkiaCanvas>
  );
};
tsx
import { SkiaCanvas } from "@remotion/skia";
import { Fill } from "@shopify/react-native-skia";
import React from "react";
import { useVideoConfig } from "remotion";
 
const MySkiaVideo: React.FC = () => {
  const { width, height } = useVideoConfig();
  return (
    <SkiaCanvas width={width} height={height}>
      <Fill color="black" />
    </SkiaCanvas>
  );
};

Props​

width​

The width of the canvas in pixels.

height​

The height of the canvas in pixels.

Inherited props​

All the props that are accepted by <Canvas> are accepted as well.

See also​