@remotion/skia
This package provides utilities useful for integrating React Native Skia with Remotion.
It may change in minor version updates. Monitor this documentation page to see breaking changes when upgrading.
Installation
Install, @remotion/skia
as well as @shopify/react-native-skia
.
- npm
- yarn
- pnpm
bash
npm i @remotion/skia @shopify/react-native-skia
bash
npm i @remotion/skia @shopify/react-native-skia
bash
yarn add @remotion/skia @shopify/react-native-skia
bash
yarn add @remotion/skia @shopify/react-native-skia
bash
pnpm i @remotion/skia @shopify/react-native-skia
bash
pnpm i @remotion/skia @shopify/react-native-skia
Since Remotion v3.3.93
and React Native Skia 0.1.191
, react-native-web
is not a dependency anymore. You may remove it from your project.
Also update all the other Remotion packages to have the same version: remotion
, @remotion/cli
and others.
Make sure no package version number has a ^
character in front of it as it can lead to a version conflict.
Override the Webpack config by using enableSkia()
.
remotion.config.tsts
import {Config } from "@remotion/cli/config";import {enableSkia } from "@remotion/skia/enable";Config .overrideWebpackConfig ((currentConfiguration ) => {returnenableSkia (currentConfiguration );});
remotion.config.tsts
import {Config } from "@remotion/cli/config";import {enableSkia } from "@remotion/skia/enable";Config .overrideWebpackConfig ((currentConfiguration ) => {returnenableSkia (currentConfiguration );});
Prior to v3.3.39
, the option was called Config.Bundling.overrideWebpackConfig()
.
Next, you need to refactor the entry point file to first load the Skia WebAssembly binary before calling registerRoot():
src/index.tsts
import {LoadSkia } from "@shopify/react-native-skia/src/web";import {registerRoot } from "remotion";(async () => {awaitLoadSkia ();const {RemotionRoot } = await import("./Root");registerRoot (RemotionRoot );})();
src/index.tsts
import {LoadSkia } from "@shopify/react-native-skia/src/web";import {registerRoot } from "remotion";(async () => {awaitLoadSkia ();const {RemotionRoot } = await import("./Root");registerRoot (RemotionRoot );})();
You can now start using the <SkiaCanvas>
in your Remotion project.
Templates
You can find the starter template here or install it using:
- npm
- yarn
- pnpm
bash
npx create-video --skia
bash
npx create-video --skia
bash
yarn create video --skia
bash
yarn create video --skia
bash
pnpm create video --skia
bash
pnpm create video --skia
Rendering
By default Remotion rendering are done on the CPU. Some Skia effects rely on advanced GPU features, which may be slow to run on the CPU depending on the kind of effect you are using. If your Skia export is extremely slow, we found that enabling the GPU via the --gl=angle
option improves things substantially. Please check out the documentation on GPU rendering.
sh
remotion render Main out/video.mp4 --gl=angle
sh
remotion render Main out/video.mp4 --gl=angle