Installation

React Native Canvas Kit renders with React Native Skia and drives its gestures with Reanimated and Gesture Handler. These are peer dependencies: install them alongside the library.

Install

# with expo
npx expo install react-native-canvas-kit @shopify/react-native-skia react-native-gesture-handler react-native-reanimated

# with npm
npm install react-native-canvas-kit @shopify/react-native-skia react-native-gesture-handler react-native-reanimated

# with yarn
yarn add react-native-canvas-kit @shopify/react-native-skia react-native-gesture-handler react-native-reanimated

Peer dependency versions

Package	Version
@shopify/react-native-skia	>= 1.0.0
react-native-gesture-handler	>= 2.0.0
react-native-reanimated	^3.0.0

Canvas Kit ships no native code of its own, so it runs wherever these peers run, including both React Native's New Architecture and the legacy architecture.

Configure Reanimated

Add the Reanimated Babel plugin to babel.config.js as the last plugin:

babel.config.js

module.exports = {
  presets: ['babel-preset-expo'], // or 'module:@react-native/babel-preset'
  plugins: [
    // ...other plugins
    'react-native-reanimated/plugin', // must be last
  ],
};

If you use babel-preset-expo (SDK 50+), the Reanimated plugin is included automatically, so you can skip this step.

Wrap your app in GestureHandlerRootView

Gesture Handler requires a root view at the top of your tree. Wrap your app once:

App.tsx

import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      {/* your canvas + screens */}
    </GestureHandlerRootView>
  );
}

Rebuild the app

Skia, Reanimated, and Gesture Handler include native code, so after installing you must rebuild; a fast-refresh reload is not enough:

npx expo prebuild        # if using a bare/expo-dev-client workflow
npx expo run:ios         # or run:android

You're ready. Head to the Quick Start.