React Native Skia: Skia 2D Graphics Inside React Native

What React Native Skia solves, and who ends up using it

React Native's default rendering path is built from platform views. That is fine until you need something the view layer does not express: a custom chart with per-point styling, a shader-driven background, a canvas that redraws every frame during a gesture, or an effect that has to run identically on iOS and Android. React Native Skia answers that by bringing the Skia Graphics Library into React Native. The README notes that Skia is the graphics engine behind Google Chrome and Chrome OS, Android, Flutter, Mozilla Firefox and Firefox OS, so the drawing primitives you get are the same family of primitives those products draw with, wrapped in TypeScript components and hooks.

The audience is narrow and fairly easy to identify. It is React Native developers who have already hit the ceiling of the view system and are considering a native module or a WebView-based canvas as the alternative. If your screens are lists, text and buttons, this library is not the shortest path to anything. If your screens contain a canvas, it probably is.

The mechanism: Skia bindings, a canvas, and two backends

The library is a monorepo. The repository root holds packages/ and apps/, with Yarn workspaces and Turbo driving lint, tsc, test and the platform build scripts (build:android, build:ios, build:macos, build). The published package is @shopify/react-native-skia, written in TypeScript, with the native Skia side shipped as prebuilt libraries for the supported platforms. That split matters: the JavaScript you write is ordinary React, but the drawing happens in native Skia, not in the JavaScript thread's layout pass.

Skia itself has two backends, and the README is explicit about which one you get. Ganesh is the default backend. Graphite is offered as an experimental preview through the @next distribution channel. React Native Skia detects Graphite at runtime through a marker file included in the prebuilt libraries, so the backend is a property of the binary you installed rather than a runtime flag you set in application code. Graphite requires Android API Level 26 or above, which is a hard floor for that preview path.

That two-backend arrangement is the most consequential design detail in the repository, and it is also where the documentation is thinnest. The README states the default, states the experimental channel and states the Android API requirement. It does not describe a migration path between backends, and it does not document rollback if the @next build misbehaves in your app. Treat the backend as a build-time commitment until the documentation says otherwise.

Installing React Native Skia and drawing a first canvas

The README does not inline the installation steps. It points to the documentation site, specifically the installation page under docs/getting-started, and lists that page as the place to start. The package itself is distributed on npm as @shopify/react-native-skia, and the README's one concrete install command is the @next channel used for the Graphite preview:

yarn add @shopify/react-native-skia@next

That command pulls the experimental distribution, not the default release. Unless you are deliberately evaluating Graphite, install the regular package instead and follow the installation page for the native setup, which is where the React Native version, autolinking and platform-specific configuration are covered. Because the library ships native Skia code, expect the setup to touch your iOS and Android projects rather than being a JavaScript-only dependency.

If you would rather build Skia yourself with Graphite compiled in, the README gives the build command used inside the repository:

SK_GRAPHITE=1 yarn build-skia

The environment variable SK_GRAPHITE=1 is what selects Graphite during that build. This is a repository-level workflow, not something you run in an application project, so it only applies if you are building the Skia artifacts yourself rather than consuming the prebuilt ones.

Once the native side is installed, the working pattern is a canvas component that hosts drawing elements, with animation driven by values rather than by React state updates per frame. The documentation site is the reference for the component and hook names; the README itself does not enumerate them, so check the docs for the exact API surface of your installed version before writing the canvas.

Where React Native Skia is the wrong tool

The clearest limitation is stated by the project itself. The Graphite backend, the newer of the two, is described in the README as highly experimental and not recommended for production use, and it additionally requires Android API Level 26 or above. If your product supports older Android versions, that path is closed regardless of how the preview performs. The default Ganesh backend does not carry that warning, but the fact that the library ships two backends with different maturity levels means your graphics behaviour is tied to which prebuilt library you installed.

The second limitation is structural. This is a native dependency. It changes your build pipeline, it participates in your app binary, and it interacts with React Native versions and platform toolchains in ways a pure JavaScript library does not. The README routes installation to a documentation page rather than a short snippet, which is a fair signal that setup is not trivial.

The third is a mismatch problem rather than a defect. If the thing you need is a transition, a gesture-driven layout change or an animated style on an existing view, you are not drawing, and a drawing library adds cost without adding capability. Reach for Skia when pixels are the problem.

How it compares with SVG rendering and with Reanimated

The most common comparison is with an SVG-based approach in React Native. SVG renders declarative vector elements through the platform's own drawing, and it is a good fit for static or lightly animated icons, logos and simple illustrations. The difference in approach is where the drawing happens and what you can express: SVG gives you a fixed set of vector primitives, while React Native Skia gives you Skia's canvas, which is what you need for shaders, custom blur and image effects, and for redrawing a scene at frame rate. If your graphic is a shape that occasionally changes colour, SVG is the lighter answer. If it is a scene, Skia is the answer.

The other comparison is with Reanimated, and this one is frequently framed as a contest when it is not. Reanimated animates values and styles on the React Native view tree; it does not give you a canvas. React Native Skia draws. The two are used together, with Reanimated supplying the values that drive a Skia canvas each frame, and that combination is the pattern most animation-heavy React Native Skia code follows. Choosing between them only makes sense if you have already decided whether you are animating existing views or drawing new ones.

Maintenance, releases and the cost of upgrading

The repository is not archived, and the last push was on 2026-09-21. Recent releases listed for the project are v2.12.0 on 2026-09-16, skia-m154 on 2026-09-12 and skia-graphite-m154 on 2026-09-12. The presence of a release tagged with a Skia milestone number, and a separate one for Graphite at the same milestone, shows how upgrades actually arrive: the library tracks upstream Skia versions, so a Skia bump and a library bump are coupled events rather than independent ones.

That coupling is the real upgrade cost. When you move to a new React Native Skia release, you may be moving the underlying Skia milestone at the same time, and the prebuilt native libraries change with it. Your CI has to build or fetch those artifacts, and your QA has to re-check rendering on each platform you ship. The monorepo's Turbo scripts (build:android, build:ios, build:macos, pod:install) show the shape of that work inside the project itself; your application will have a smaller version of the same pipeline. Budget for it at release time, not at the moment something looks wrong on a device.

The licence is MIT, declared in the root package.json with LICENSE.md as the licence file. MIT is permissive, so it does not impose source-disclosure obligations on your application the way a copyleft licence would. That is a summary of what the repository declares, not legal advice; if your organisation has licence review, the file to hand over is LICENSE.md.

Editorial conclusion

Adopt React Native Skia when your interface needs custom drawing, shaders or per-frame animation that the standard React Native view layer cannot express, and when you can absorb native build tooling and a Skia build in CI. Do not adopt it for ordinary screens of lists, text and buttons, or if you need a stable, documented graphics backend: the README labels Graphite highly experimental and not recommended for production, and Ganesh remains the default. Verify first that the current installation page covers your React Native version and your target platforms, that your build pipeline can handle the native dependency, and that your animation requirements are actually drawing-bound rather than state-bound, since Reanimated covers the latter.

Frequently asked questions

Official sources

1. License: MIT
2. Project website
3. README
4. Releases
5. Shopify/react-native-skia on GitHub