Installation

React Native Skia brings the Skia Graphics Library to React Native. Skia serves as the graphics engine for Google Chrome and Chrome OS, Android, Flutter, Mozilla Firefox, Firefox OS, and many other products.

Version compatibility: react-native@>=0.79 and react@>=19 are required.
In addition you should make sure you're on at least iOS 14 and Android API level 21 or above.
To use React Native Skia with video support, Android API level 26 or above is required.

For react-native@<=0.78 and react@<=18, you need to use @shopify/react-native-skia version 1.12.4 or below.

tvOS, macOS, and macOS Catalyst are also supported platforms.

yarn add @shopify/react-native-skia
# or
npm install @shopify/react-native-skia

Postinstall Script

React Native Skia uses a postinstall script to download prebuilt Skia binaries. This script must run for the library to work. If you see build errors about missing Skia libraries, the postinstall script likely didn't run.

npm / yarn classic

Postinstall scripts run automatically. If you encounter issues, you can manually trigger it:

npm rebuild @shopify/react-native-skia
# or
yarn rebuild @shopify/react-native-skia

bun

Bun requires explicit trust for packages with lifecycle scripts:

bun add --trust @shopify/react-native-skia

Or add to your package.json:

{
  "trustedDependencies": ["@shopify/react-native-skia"]
}

pnpm

pnpm v10+ requires explicit permission for lifecycle scripts. Add to your package.json:

{
  "pnpm": {
    "onlyBuiltDependencies": ["@shopify/react-native-skia"]
  }
}

Then reinstall:

pnpm install

For older pnpm versions, you may need:

pnpm add --allow-build=@shopify/react-native-skia @shopify/react-native-skia

Yarn Berry (v2+)

Yarn Berry doesn't run postinstall scripts by default. You need to enable them:

yarn config set enableScripts true

Or add to .yarnrc.yml:

enableScripts: true

Then reinstall:

yarn install

Using Expo

Expo provides a with-skia template, which you can use to create a new project.

yarn create expo-app my-app -e with-skia
# or
npx create-expo-app my-app -e with-skia

Bundle Size

Below is the app size increase to be expected when adding React Native Skia to your project (learn more).

iOS	Android	Web
6 MB	4 MB	2.9 MB

iOS

Run pod install on the ios/ directory.

Android

Currently, you will need Android NDK to be installed. If you have Android Studio installed, make sure $ANDROID_NDK is available. ANDROID_NDK=/Users/username/Library/Android/sdk/ndk/<version> for instance.

If the NDK is not installed, you can install it via Android Studio by going to the menu File > Project Structure

And then the SDK Location section. It will show you the NDK path, or the option to download it if you don't have it installed.

Proguard

If you're using Proguard, make sure to add the following rule at proguard-rules.pro:

-keep class com.shopify.reactnative.skia.** { *; }

TroubleShooting

For error CMake 'X.X.X' was not found in SDK, PATH, or by cmake.dir property.

open Tools > SDK Manager, switch to the SDK Tools tab. Find CMake and click Show Package Details and download compatiable version 'X.X.X', and apply to install.

Web

To use this library in the browser, see these instructions.

TV

Starting from version 1.9.0 React Native Skia supports running on TV devices using React Native TVOS. Currently both Android TV and Apple TV are supported.

info

Not all features have been tested yet, so please report any issues you encounter when using React Native Skia on TV devices.

Debugging

We recommend using React Native DevTools to debug your JS code — see the React Native docs. Alternatively, you can debug both JS and platform code in VS Code and via native IDEs. If using VS Code, we recommend Expo Tools, Radon IDE, or Microsoft's React Native Tools.

Testing with Jest

React Native Skia test mocks use a web implementation that depends on loading CanvasKit.

The very first step is to make sure that your Skia files are not being transformed by jest, for instance, we can add it the transformIgnorePatterns directive:

"transformIgnorePatterns": [
  "node_modules/(?!(react-native|react-native.*|@react-native.*|@?react-navigation.*|@shopify/react-native-skia)/)"
]

You also need to add the following to your jest.config.js file:

// jest.config.js
module.exports = {
  // Other values
  testEnvironment: "@shopify/react-native-skia/jestEnv.js",
  setupFilesAfterEnv: [
    "@shopify/react-native-skia/jestSetup.js",
  ],
};

The jestEnv.js will load CanvasKit for you and jestEnv.js mocks React Native Skia. You can also have a look at the example app to see how Jest tests are enabled there.

Playground

We have example projects you can play with here. It would require you first to build Skia locally first.