React Native Skia — High-Performance 2D Graphics

Introduction

React Native Skia brings Google's Skia 2D graphics engine to React Native with a declarative JSX API. It enables GPU-accelerated drawing of paths, text, images, gradients, shaders, and filters at native performance, going far beyond what the standard View and Image components offer.

What React Native Skia Does

• Renders 2D graphics using the Skia engine with GPU acceleration
• Provides declarative components for paths, circles, rectangles, text, and images
• Supports GLSL shader effects, image filters, color filters, and blend modes
• Enables Reanimated-driven animations of any Skia property
• Exports canvas content as images (PNG, JPEG, WebP) for sharing or saving

Architecture Overview

The library embeds a Skia rendering surface inside a native view and uses JSI (JavaScript Interface) for synchronous, zero-copy communication between JS and native. The declarative component tree is reconciled by a custom React renderer that maps JSX elements to Skia drawing commands. On each frame, the Skia backend composites the draw list onto a GPU-backed surface.

Self-Hosting & Configuration

• Install with npm and run pod-install for iOS native linking
• Use the Canvas component as the root drawing surface with explicit width and height
• Animate Skia properties by passing Reanimated shared values to component props
• Apply image filters (blur, drop shadow, displacement) via filter components
• Use the makeImageFromView API to snapshot native views into Skia images

Key Features

• GPU-accelerated rendering via Skia delivers high frame rates for complex scenes
• GLSL runtime shader support for custom visual effects (noise, gradients, distortions)
• Path interpolation and morphing for smooth shape transitions
• Paragraph API for rich text layout with multiple fonts and styles
• Atlas API for efficient sprite-sheet rendering in game-like UIs

Comparison with Similar Tools

• react-native-svg — SVG rendering via native APIs; Skia offers GPU shaders and richer effects
• Canvas (WebView) — HTML5 canvas in a WebView; Skia renders natively without WebView overhead
• expo-gl — OpenGL ES bindings; Skia provides a higher-level 2D-focused API
• Lottie — plays pre-made animations; Skia supports procedural and interactive graphics

FAQ

Q: Does it work with Expo? A: Yes. @shopify/react-native-skia works with Expo dev clients and bare workflows.

Q: Can I animate Skia drawings? A: Yes. Pass Reanimated shared values directly to Skia component props for 60 fps animations on the UI thread.

Q: How do I export a canvas as an image? A: Call makeImageSnapshot() on the canvas ref to get a SkImage, then encode it as PNG or JPEG.

Q: Is it suitable for charting? A: Yes. Libraries like Victory Native and react-native-graph use Skia for high-performance chart rendering.

Sources

• https://github.com/Shopify/react-native-skia
• https://shopify.github.io/react-native-skia/