8.7K ·GitHub
What is this?
React Native Skia brings Google's Skia graphics engine (the renderer used by Chrome and Android) to React Native, letting you write high-performance 2D graphics, shaders, and animations using a React component API.
React Native Skia brings Google's Skia graphics engine (the renderer used by Chrome and Android) to React Native, letting you write high-performance 2D graphics, shaders, and animations using a React component API.Is it a UI library or a low-level graphics engine?It's a library that exposes Skia's drawing primitives (paths, shaders, images, text) as declarative React components, so you build graphics by composing components rather than calling imperative canvas APIs directly.
It's a library that exposes Skia's drawing primitives (paths, shaders, images, text) as declarative React components, so you build graphics by composing components rather than calling imperative canvas APIs directly.How do I add it to a project?Install it via your package manager (e.g. yarn add @shopify/react-native-skia) into an existing React Native project, then import components like Canvas, Path, and Skia from the package to start drawing.
Install it via your package manager (e.g. yarn add @shopify/react-native-skia) into an existing React Native project, then import components like Canvas, Path, and Skia from the package to start drawing.Does it work with Expo and the New Architecture?It supports both Expo (managed and bare) and plain React Native projects, and is compatible with the New Architecture (Fabric/TurboModules).
It supports both Expo (managed and bare) and plain React Native projects, and is compatible with the New Architecture (Fabric/TurboModules).Does it work the same on web?Web support is provided via CanvasKit/WASM rather than native Skia, so behavior and performance on web can differ from the native iOS/Android implementations.
Web support is provided via CanvasKit/WASM rather than native Skia, so behavior and performance on web can differ from the native iOS/Android implementations.Which platforms does it run on?It targets iOS and Android as native React Native platforms, with experimental support for web via WebAssembly.
It targets iOS and Android as native React Native platforms, with experimental support for web via WebAssembly.What kind of graphics can it draw out of the box?It supports paths, shapes, images, text, gradients, shaders (SKSL), blend modes, filters, and complex animations, all driven by Reanimated-style shared values for smooth 60fps+ updates.
It supports paths, shapes, images, text, gradients, shaders (SKSL), blend modes, filters, and complex animations, all driven by Reanimated-style shared values for smooth 60fps+ updates.Why use this instead of react-native's built-in Views or SVG?Skia gives direct GPU-accelerated rendering with a much richer drawing API (custom shaders, complex paths, filters, blur effects) than standard RN views or react-native-svg can offer, closing the gap with native graphics performance.
Skia gives direct GPU-accelerated rendering with a much richer drawing API (custom shaders, complex paths, filters, blur effects) than standard RN views or react-native-svg can offer, closing the gap with native graphics performance.Can I animate graphics with Reanimated?Yes, the library is designed to integrate tightly with react-native-reanimated, letting you drive Skia drawings with shared values and worklets for smooth, native-thread animations.
Yes, the library is designed to integrate tightly with react-native-reanimated, letting you drive Skia drawings with shared values and worklets for smooth, native-thread animations.What are similar projects?react-native-skia, lottie-web, fabric.js, flutter_scene, lottie-react-native, pixijs, WebGL-Fluid-Simulation, react-canvas
react-native-skia, lottie-web, fabric.js, flutter_scene, lottie-react-native, pixijs, WebGL-Fluid-Simulation, react-canvasWhich topics is it in?skia, shaders, canvas, react-native, rendering, gpu-acceleration, svg, graphics, wasm, image-processing, animation, mobile
skia, shaders, canvas, react-native, rendering, gpu-acceleration, svg, graphics, wasm, image-processing, animation, mobile