ContextQMD
Back to Remotion

Skia Canvas

packages/docs/docs/skia/skia-canvas.mdx

4.0.463901 B
Original Source

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>
  );
};

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