@remotion/skia
This package provides utilities useful for integrating React Native Skia with Remotion.
Installation
Install, @remotion/skia
as well as @shopify/react-native-skia
.
- npm
- yarn
- pnpm
- bun
npm i --save-exact @remotion/skia@4.0.236 @shopify/react-native-skia
npm i --save-exact @remotion/skia@4.0.236 @shopify/react-native-skia
pnpm i @remotion/skia@4.0.236 @shopify/react-native-skia
pnpm i @remotion/skia@4.0.236 @shopify/react-native-skia
bun i @remotion/skia@4.0.236 @shopify/react-native-skia
bun i @remotion/skia@4.0.236 @shopify/react-native-skia
yarn --exact add @remotion/skia@4.0.236 @shopify/react-native-skia
yarn --exact add @remotion/skia@4.0.236 @shopify/react-native-skia
Also update
remotion
and all `@remotion/*`
packages to the same version.Remove all
^
character in front of the version numbers of it as it can lead to a version conflict.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
- bun
- pnpm
- yarn
bash
npx create-video --skia
bash
npx create-video --skia
bash
bun create video --skia
bash
bun 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