# React Native Skia — High-Performance 2D Graphics

> A React Native wrapper around Google's Skia graphics engine from Shopify, enabling GPU-accelerated 2D drawing, shaders, image filters, path animations, and rich visual effects directly in mobile applications.

## Install

Save in your project root:

# React Native Skia — High-Performance 2D Graphics

## Quick Use
```bash
npm install @shopify/react-native-skia
npx pod-install
```
```jsx
import { Canvas, Circle, Group } from '@shopify/react-native-skia';
<Canvas style={{ width: 256, height: 256 }}>
  <Group blendMode="multiply">
    <Circle cx={128} cy={128} r={100} color="cyan" />
    <Circle cx={100} cy={160} r={100} color="magenta" />
  </Group>
</Canvas>
```

## 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/

---
Source: https://tokrepo.com/en/workflows/asset-768d3550
Author: AI Open Source