React Native Skia

https://shopify.github.io/react-native-skia/docs/
Admin
React Native Skia is a high-performance 2D graphics library that enables developers to create fast...
Tokens:62,152
Snippets:465
Trust Score:8.3
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install Graphite experimental preview

Source: https://shopify.github.io/react-native-skia/docs/getting-started/installation

Use the @next distribution channel to install the experimental Graphite backend.

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

--------------------------------

### Install React Native Skia and Setup Web

Source: https://shopify.github.io/react-native-skia/docs/getting-started/web

Install the React Native Skia package and run the setup script to make the CanvasKit WASM file accessible. This script should be run after upgrading the package.

```bash
$ npx expo install @shopify/react-native-skia  
$ yarn setup-skia-web  
```

--------------------------------

### Headless Hello World Example

Source: https://shopify.github.io/react-native-skia/docs/getting-started/headless

This example demonstrates basic headless rendering in Node.js using React Native Skia. It requires specific imports for the commonjs build and Node.js environment. The drawing is executed on the CPU by default.

```javascript
import { LoadSkiaWeb } from "@shopify/react-native-skia/lib/commonjs/web/LoadSkiaWeb";  
import { Circle, drawOffscreen, getSkiaExports, Group, makeOffscreenSurface } from "@shopify/react-native-skia/lib/commonjs/headless";  
  
(async () => {  
  const width = 256;  
  const height = 256;  
  const size = 60;  
  const r = size * 0.33;  
  await LoadSkiaWeb();  
  // Once that CanvasKit is loaded, you can access Skia via getSkiaExports()  
  // Alternatively you can do const {Skia} = require("@shopify/react-native-skia")  
  const {Skia} = getSkiaExports();  
  using surface = makeOffscreenSurface(width, height);  
  using image = await drawOffscreen(surface,  
    <Group blendMode="multiply">  
      <Circle cx={r} cy={r} r={r} color="cyan" />  
      <Circle cx={size - r} cy={r} r={r} color="magenta" />  
      <Circle  
        cx={size/2}  
        cy={size - r}  
        r={r}  
        color="yellow"  
      />  
    </Group>);  
  console.log(image.encodeToBase64());  
})();  


```

--------------------------------

### Trim Path using Start and End Props

Source: https://shopify.github.io/react-native-skia/docs/shapes/path

This example shows how to trim a path by specifying 'start' and 'end' values between 0 and 1. This is useful for creating animations or partial path visualizations.

```typescript
import {Canvas, Path} from "@shopify/react-native-skia";

const SVGNotation = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Path
        path="M 128 0 L 168 80 L 256 93 L 192 155 L 207 244 L 128 202 L 49 244 L 64 155 L 0 93 L 88 80 L 128 0 Z"
        color="lightblue"
        style="stroke"
        strokeJoin="round"
        strokeWidth={5}
        // We trim the first and last quarter of the path
        start={0.25}
        end={0.75}
      />
    </Canvas>
  );
};

```

--------------------------------

### System Font Output Examples

Source: https://shopify.github.io/react-native-skia/docs/text/text

Example output arrays for system font families on Android and iOS platforms.

```json
["sans-serif", "arial", "helvetica", "tahoma", "verdana", ...]
```

```json
["Academy Engraved LET", "Al Nile", "American Typewriter", "Apple Color Emoji", ...]
```

--------------------------------

### PathBuilder Methods Reference

Source: https://shopify.github.io/react-native-skia/docs/shapes/path-migration

A quick reference guide for `PathBuilder` methods used in path construction.

```APIDOC
## Quick Reference

### PathBuilder Methods

Construction:
  * `moveTo(x, y)`, `lineTo(x, y)`, `quadTo(...)`, `cubicTo(...)`, `conicTo(...)`
  * `rMoveTo(...)`, `rLineTo(...)`, `rQuadTo(...)`, `rCubicTo(...)`, `rConicTo(...)`
  * `arcTo(...)`, `arcToOval(...)`, `arcToRotated(...)`
  * `addRect(...)`, `addOval(...)`, `addCircle(...)`, `addRRect(...)`, `addArc(...)`, `addPath(...)`
  * `close()`, `reset()`
  * `setFillType(...)`, `setIsVolatile(...)`
  * `build()` → returns immutable `SkPath`
```

--------------------------------

### SkPath Instance Methods Reference

Source: https://shopify.github.io/react-native-skia/docs/shapes/path-migration

A quick reference guide for instance methods available on `SkPath` objects for querying and transforming paths.

```APIDOC
### SkPath Instance Methods (Immutable)

Query:
  * `getBounds()`, `computeTightBounds()`, `contains(x, y)`
  * `getFillType()`, `isVolatile()`, `isEmpty()`
  * `countPoints()`, `getPoint(index)`, `getLastPt()`
  * `toSVGString()`, `toCmds()`, `equals(other)`, `copy()`
  * `isInterpolatable(other)`

Transform (returns new path):
  * `transform(matrix)` → `SkPath`
  * `offset(dx, dy)` → `SkPath`
```

--------------------------------

### SkPath Static Methods Reference

Source: https://shopify.github.io/react-native-skia/docs/shapes/path-migration

A quick reference guide for static methods available on `SkPath` for creating and manipulating paths.

```APIDOC
### SkPath Static Methods

Factories:
  * `Skia.Path.Circle(x, y, r)`
  * `Skia.Path.Rect(rect)`
  * `Skia.Path.Oval(rect)`
  * `Skia.Path.RRect(rrect)`
  * `Skia.Path.Line(p1, p2)`
  * `Skia.Path.Polygon(points, close)`

Operations:
  * `Skia.Path.Stroke(path, opts)` → `SkPath | null`
  * `Skia.Path.Trim(path, start, end, complement)` → `SkPath | null`
  * `Skia.Path.Simplify(path)` → `SkPath | null`
  * `Skia.Path.Dash(path, on, off, phase)` → `SkPath | null`
  * `Skia.Path.AsWinding(path)` → `SkPath | null`
  * `Skia.Path.Interpolate(start, end, weight)` → `SkPath | null`
```

--------------------------------

### Install React Native Skia package

Source: https://shopify.github.io/react-native-skia/docs/getting-started/installation

Use a package manager to add the library to an existing React Native project.

```bash
yarn add @shopify/react-native-skia  
# or  
npm install @shopify/react-native-skia  
```

--------------------------------

### Displacement Map with Turbulence Example

Source: https://shopify.github.io/react-native-skia/docs/image-filters/displacement-map

This example demonstrates using a Turbulence filter as a displacement map for an image. It requires importing Canvas, Image, Turbulence, and DisplacementMap components.

```jsx
import { Canvas, Image, Turbulence, DisplacementMap, useImage } from "@shopify/react-native-skia";  
  
const Filter = () => {  
  const image = useImage(require("./assets/oslo.jpg"));  
  if (!image) {  
    return null;  
  }  
  return (  
    <Canvas style={{ width: 256, height: 256 }}>  
      <Image  
        image={image}  
        x={0}  
        y={0}  
        width={256}  
        height={256}  
        fit="cover"  
      >  
        <DisplacementMap channelX="g" channelY="a" scale={20}>  
          <Turbulence freqX={0.01} freqY={0.05} octaves={2} seed={2} />  
        </DisplacementMap>  
      </Image>  
    </Canvas>  
  );  
};

```

--------------------------------

### Offset Example Usage

Source: https://shopify.github.io/react-native-skia/docs/image-filters/offset

Example demonstrating how to use the Offset ImageFilter within a React Native Skia Canvas.

```APIDOC
## Offset Example Usage

### Description
This example shows how to apply the Offset filter to an Image component within a Skia Canvas.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
N/A (Component Usage)

### Request Example
```javascript
import { Canvas, Image, Offset, useImage, Fill } from "@shopify/react-native-skia";

const Filter = () => {
  const image = useImage(require("./assets/oslo.jpg"));
  if (!image) {
    return null;
  }
  return (
    <Canvas style={{ width: 256, height: 256 }}>
      <Fill color="lightblue" />
      <Image
        image={image}
        x={0}
        y={0}
        width={256}
        height={256}
        fit="cover"
      >
        <Offset x={64} y={64} />
      </Image>
    </Canvas>
  );
};
```

### Response
N/A (Component Usage)

#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### Configure jest.config.js

Source: https://shopify.github.io/react-native-skia/docs/getting-started/installation

Set the test environment and setup files to ensure CanvasKit is loaded and Skia is properly mocked.

```javascript
// jest.config.js  
module.exports = {  
  // Other values  
  testEnvironment: "@shopify/react-native-skia/jestEnv.js",  
  setupFilesAfterEnv: [  
    "@shopify/react-native-skia/jestSetup.js",  
  ],  
};  
```

--------------------------------

### Deferred Skia Loading with LoadSkiaWeb()

Source: https://shopify.github.io/react-native-skia/docs/getting-started/web

This example demonstrates using LoadSkiaWeb() to defer the registration of the root component until Skia has loaded. This is suitable for scenarios where Skia needs to be initialized before the main application logic runs.

```javascript
import { LoadSkiaWeb } from "@shopify/react-native-skia/lib/module/web";  
  
LoadSkiaWeb().then(async () => {  
  const App = (await import("./src/App")).default;  
  AppRegistry.registerComponent("Example", () => App);  
});  
```

--------------------------------

### Control Video Playback with Seek and Loop

Source: https://shopify.github.io/react-native-skia/docs/video

This example shows how to control video playback using the `seek` and `looping` options from the `useVideo` hook. Tapping the screen seeks the video to 2 seconds. Requires Reanimated.

```typescript
import React from "react";  
import {  
  Canvas,  
  Fill,  
  Image,  
  useVideo  
} from "@shopify/react-native-skia";  
import { Pressable, useWindowDimensions } from "react-native";  
import { useSharedValue } from "react-native-reanimated";  
  
export const VideoExample = () => {  
  const seek = useSharedValue<null | number>(null);  
  // Set this value to true to pause the video  
  const paused = useSharedValue(false);  
  const { width, height } = useWindowDimensions();  
  const {currentFrame, currentTime} = useVideo(  
    "https://bit.ly/skia-video",  
    {  
      seek,  
      paused,  
      looping: true  
    }  
  );  
  return (  
    <Pressable  
      style={{ flex: 1 }}  
      onPress={() => (seek.value = 2000)}  
    >  
      <Canvas style={{ flex: 1 }}>  
        <Image  
          image={currentFrame}  
          x={0}  
          y={0}  
          width={width}  
          height={height}  
          fit="cover"  
        />  
      </Canvas>  
    </Pressable>  
  );  
};  

```

--------------------------------

### Display Video Frame with Color Matrix

Source: https://shopify.github.io/react-native-skia/docs/video

This example demonstrates loading a video frame and displaying it within a Canvas. It applies a ColorMatrix for visual effects and allows pausing/playing the video by tapping the screen. Requires Reanimated.

```typescript
import React from "react";  
import {  
  Canvas,  
  ColorMatrix,  
  Fill,  
  ImageShader,  
  useVideo  
} from "@shopify/react-native-skia";  
import { Pressable, useWindowDimensions } from "react-native";  
import { useSharedValue } from "react-native-reanimated";  
  
export const VideoExample = () => {  
  const paused = useSharedValue(false);  
  const { width, height } = useWindowDimensions();  
  const { currentFrame } = useVideo(  
    "https://bit.ly/skia-video",  
    {  
      paused,  
    }  
  );  
  return (  
    <Pressable  
      style={{ flex: 1 }}  
      onPress={() => (paused.value = !paused.value)}  
    >  
      <Canvas style={{ flex: 1 }}>  
        <Fill>  
          <ImageShader  
            image={currentFrame}  
            x={0}  
            y={0}  
            width={width}  
            height={height}  
            fit="cover"  
          />  
          <ColorMatrix  
            matrix={[  
              0.95, 0, 0, 0, 0.05, 0.65, 0, 0, 0, 0.15, 0.15, 0, 0, 0, 0.5, 0,  
              0, 0, 1, 0,  
            ]}  
          />  
        </Fill>  
      </Canvas>  
    </Pressable>  
  );  
};  

```

--------------------------------

### Immediate Mode Dynamic Drawing Example

Source: https://shopify.github.io/react-native-skia/docs/canvas/rendering-modes

Illustrates Immediate Mode for dynamic drawing where the number of circles changes based on animation progress. Requires Reanimated for animation.

```typescript
import { Canvas, Picture, Skia } from "@shopify/react-native-skia";  
import { useDerivedValue, useSharedValue, withRepeat, withTiming } from "react-native-reanimated";  
import { useEffect } from "react";  
  
const size = 256;  
  
export const ImmediateModeExample = () => {  
  const progress = useSharedValue(0);  
  const recorder = Skia.PictureRecorder();  
  const paint = Skia.Paint();  
  
  useEffect(() => {  
    progress.value = withRepeat(withTiming(1, { duration: 2000 }), -1, true);  
  }, [progress]);  
  
  const picture = useDerivedValue(() => {  
    "worklet";  
    const canvas = recorder.beginRecording(Skia.XYWHRect(0, 0, size, size));  
  
    // Variable number of circles based on progress  
    const count = Math.floor(progress.value * 20);  
    for (let i = 0; i < count; i++) {  
      const r = (i + 1) * 6;  
      paint.setColor(Skia.Color(`rgba(0, 122, 255, ${(i + 1) / 20})`));  
      canvas.drawCircle(size / 2, size / 2, r, paint);  
    }  
  
    return recorder.finishRecordingAsPicture();  
  });  
  
  return (  
    <Canvas style={{ flex: 1 }}>  
      <Picture picture={picture} />  
    </Canvas>  
  );  
};  


```

--------------------------------

### Linear Gradient Example in React Native Skia

Source: https://shopify.github.io/react-native-skia/docs/shaders/gradients

Demonstrates how to create a linear gradient using the LinearGradient component. Ensure you import necessary components from '@shopify/react-native-skia'.

```typescript
import React from "react";
import {
  Canvas,
  Rect,
  LinearGradient,
  Skia,
  Shader,
  vec
} from "@shopify/react-native-skia";

export const LinearGradientDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Rect x={0} y={0} width={256} height={256}>
        <LinearGradient
          start={vec(0, 0)}
          end={vec(256, 256)}
          colors={["blue", "yellow"]}
        />
      </Rect>
    </Canvas>
  );
};

```

--------------------------------

### Create a RuntimeShader with a Custom Shader

Source: https://shopify.github.io/react-native-skia/docs/image-filters/runtime-shader

This example demonstrates creating a RuntimeShader with a custom Skia shader. The shader manipulates the RGBA channels of the input image. Ensure the `source` is a valid `SkRuntimeEffect`.

```typescript
import {Canvas, Text, RuntimeShader, Skia, Group, Circle} from "@shopify/react-native-skia";  
  
const source = Skia.RuntimeEffect.Make(`  
uniform shader image;  
  
half4 main(float2 xy) {  
  return image.eval(xy).rbga;  
}  
`)!;
  
export const RuntimeShaderDemo = () => {  
  const r = 128;  
  return (  
    <Canvas style={{ flex: 1 }}>  
      <Group>  
        <RuntimeShader source={source} />  
        <Circle cx={r} cy={r} r={r} color="lightblue" />  
      </Group>  
    </Canvas>  
  );
};

```

--------------------------------

### Blend Shader Example

Source: https://shopify.github.io/react-native-skia/docs/shaders/colors

Combines two shaders using a specified blend mode. Ensure all necessary components like Canvas, Rect, and the shaders themselves are imported.

```typescript
import React from "react";
import {
  Canvas,
  Rect,
  Turbulence,
  Skia,
  Shader,
  Fill,
  RadialGradient,
  Blend,
  vec
} from "@shopify/react-native-skia";

export const BlendDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Rect x={0} y={0} width={256} height={256}>
        <Blend mode="difference">
          <RadialGradient 
            r={128}
            c={vec(128, 128)}
            colors={["blue", "yellow"]}
          />
          <Turbulence freqX={0.05} freqY={0.05} octaves={4} />
        </Blend>
      </Rect>
    </Canvas>
  );
};

```

--------------------------------

### Load and Render Skottie Animation with Dynamic Properties

Source: https://shopify.github.io/react-native-skia/docs/skottie

This example demonstrates loading a Skottie animation, modifying its color properties and slots, and rendering it with smooth playback using Reanimated. Ensure the animation JSON is correctly imported and Skia is initialized.

```typescript
import React from "react";  
import {   
  Canvas,   
  Skia,   
  useClock,  
  Group,  
  Skottie  
} from "@shopify/react-native-skia";  
import { useDerivedValue } from "react-native-reanimated";  
  
const animationJSON = require("./assets/fingerprint.json");  
  
// Create animation and set properties outside the component  
const animation = Skia.Skottie.Make(JSON.stringify(animationJSON));  
if (!animation) {  
  throw new Error("Failed to create animation");  
}  
  
// Get animation properties and modify them  
const colorProps = animation.getColorProps();  
if (colorProps.length > 0) {  
  // Change the first color property  
  animation.setColor(colorProps[0].key, Skia.Color("rgb(60, 120, 255)"));  
}
  
// Set color slots if available  
const slotInfo = animation.getSlotInfo();  
if (slotInfo.colorSlotIDs.length > 0) {  
  animation.setColorSlot(slotInfo.colorSlotIDs[0], Skia.Color("magenta"));  
}
  
const SkottiePlayer = () => {  
  const clock = useClock();  
  
  const frame = useDerivedValue(() => {  
    const fps = animation.fps();  
    const duration = animation.duration();  
    const currentFrame =  
      Math.floor((clock.value / 1000) * fps) % (duration * fps);  
    return currentFrame;  
  });  
  
  return (  
    <Canvas style={{ width: 400, height: 400 }}>  
      <Group transform={[{ scale: 0.5 }]}>  
        <Skottie animation={animation} frame={frame} />  
      </Group>  
    </Canvas>  
  );  
};

```

--------------------------------

### Color Shader Example

Source: https://shopify.github.io/react-native-skia/docs/shaders/colors

Applies a solid color to a shape. This shader requires the Canvas and Fill components, along with the ColorShader.

```typescript
import React from "react";
import {
  Canvas,
  Skia,
  Fill,
  ColorShader
} from "@shopify/react-native-skia";

export const BlendDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Fill>
        <ColorShader color="lightBlue" />
      </Fill>
    </Canvas>
  );
};

```

--------------------------------

### Using `its-fine` for Context Sharing

Source: https://shopify.github.io/react-native-skia/docs/canvas/contexts

This example demonstrates how to use the `its-fine` library to make a React context available within a React Native Skia drawing. Ensure `its-fine` and the necessary theme provider are imported and correctly structured.

```typescript
import React from "react";  
import { Canvas, Fill } from "@shopify/react-native-skia";  
import {useTheme, ThemeProvider, ThemeContext} from "./docs/getting-started/Theme";  
import { useContextBridge, FiberProvider } from "its-fine";  
  
const MyDrawing = () => {  
  const { primary } = useTheme();  
  return <Fill color={primary} />;  
};
  
export const Layer = () => {  
  const ContextBridge = useContextBridge();  
  return (
    <Canvas style={{ flex: 1 }}>  
      <ContextBridge>  
        <Fill color="black" />  
        <MyDrawing />  
      </ContextBridge>  
    </Canvas>  
  );
};
  
export const App = () => {  
  return (
    <FiberProvider>  
      <ThemeProvider primary="red">  
        <Layer />  
      </ThemeProvider>  
    </FiberProvider>  
  );
};

```

--------------------------------

### Configure index.web.tsx for Deferred Skia Loading

Source: https://shopify.github.io/react-native-skia/docs/getting-started/web

This example shows how to configure your index.web.tsx file to load Skia asynchronously using LoadSkiaWeb() before rendering the main App component with Expo Router.

```typescript
import '@expo/metro-runtime';  
import { App } from 'expo-router/build/qualified-entry';  
import { renderRootComponent } from 'expo-router/build/renderRootComponent';  
  
import { LoadSkiaWeb } from '@shopify/react-native-skia/lib/module/web';  
  
LoadSkiaWeb().then(async () => {  
  renderRootComponent(App);  
});  
```

--------------------------------

### Create Texture on UI Thread with runOnUI

Source: https://shopify.github.io/react-native-skia/docs/animations/textures

Demonstrates creating a texture on the UI thread using Reanimated's `runOnUI` function. This example creates an offscreen surface, draws a color onto it, and captures it as an image snapshot.

```typescript
import { useEffect } from "react";  
import { runOnUI, useSharedValue } from "react-native-reanimated";  
import type { SharedValue } from "react-native-reanimated";  
import { Skia, Canvas, Image } from "@shopify/react-native-skia";  
import type { SkImage } from "@shopify/react-native-skia";  
  
const createTexture = (image: SharedValue<SkImage | null>) => {  
  "worklet";  
  const surface = Skia.Surface.MakeOffscreen(200, 200)!;  
  const canvas = surface.getCanvas();  
  canvas.drawColor(Skia.Color("cyan"));  
  surface.flush();  
  image.value = surface.makeImageSnapshot();  
}  
  
const Demo = () => {  
  const image = useSharedValue<SkImage | null>(null);  
  useEffect(() => {  
    runOnUI(createTexture)(image);  
  }, []);  
    
  return (  
    <Canvas style={{ flex: 1 }}>  
      <Image image={image} x={0} y={0} width={200} height={200} />  
    </Canvas>  
  );  
};


```

--------------------------------

### Create a Simple Shader with React Native Skia

Source: https://shopify.github.io/react-native-skia/docs/shaders/overview

This example shows how to create a simple shader and use it within a Skia Canvas component. The shader maps normalized canvas coordinates to RGBA values.

```typescript
import {Skia, Canvas, Shader, Fill} from "@shopify/react-native-skia";  
  
const source = Skia.RuntimeEffect.Make(`  
vec4 main(vec2 pos) {  
  // normalized x,y values go from 0 to 1, the canvas is 256x256  
  vec2 normalized = pos/vec2(256);
  return vec4(normalized.x, normalized.y, 0.5, 1);
}`)!;  
  
const SimpleShader = () => {  
  return (  
    <Canvas style={{ width: 256, height: 256 }}>  
      <Fill>  
        <Shader source={source} />  
      </Fill>  
    </Canvas>  
  );
};

```

--------------------------------

### Basic Skottie Rendering to Canvas

Source: https://shopify.github.io/react-native-skia/docs/skottie

This snippet demonstrates basic rendering of a Skottie animation to an offscreen surface. It involves creating a surface, getting a canvas, seeking to a frame, rendering, and flushing the surface.

```typescript
import { Skia, Canvas } from "@shopify/react-native-skia";
const animation = {} as any;
// ---cut---
const surface = Skia.Surface.MakeOffscreen(800, 600);
if (!surface) {
  throw new Error("Failed to create surface");
}
const canvas = surface.getCanvas();

// Seek to a specific frame
animation.seekFrame(41);

// Render the animation
animation.render(canvas);

surface.flush();
const image = surface.makeImageSnapshot();

```

--------------------------------

### Apply RuntimeShader with Supersampling for Pixel Density

Source: https://shopify.github.io/react-native-skia/docs/image-filters/runtime-shader

This example shows how to use RuntimeShader while accounting for pixel density by applying supersampling. The drawing is scaled up by the pixel density, filtered, and then scaled back down. This requires using the `layer` property on a Skia group.

```typescript
import {Canvas, Text, RuntimeShader, Skia, Group, Circle, Paint, Fill, useFont} from "@shopify/react-native-skia";  
import {PixelRatio} from "react-native";  
  
const pd = PixelRatio.get();  
const source = Skia.RuntimeEffect.Make(`  
uniform shader image;  
  
half4 main(float2 xy) {  
  if (xy.x < 256 * ${pd}/2) {  
    return color;  
  }
  return image.eval(xy).rbga;  
}  
`)!;
  
export const RuntimeShaderDemo = () => {  
  const r = 128;  
  const font = useFont(require("./SF-Pro.ttf"), 24);
  return (  
    <Canvas style={{ flex: 1 }}>  
      <Group transform={[{ scale: 1 / pd }]}>  
        <Group  
          layer={  
            <Paint>  
              <RuntimeShader source={source} />  
            </Paint>  
          }  
          transform={[{ scale: pd }]}>  
          <Fill color="#b7c9e2" />  
          <Text  
            text="Hello World"  
            x={16}  
            y={32}  
            color="#e38ede"  
            font={font}
          />  
        </Group>  
      </Group>  
    </Canvas>  
  );
};

```

--------------------------------

### Create a new Expo project with Skia

Source: https://shopify.github.io/react-native-skia/docs/getting-started/installation

Initialize a new project using the provided Expo template for immediate Skia support.

```bash
yarn create expo-app my-app -e with-skia  
# or  
npx create-expo-app my-app -e with-skia  
```

--------------------------------

### Sweep Gradient Example in React Native Skia

Source: https://shopify.github.io/react-native-skia/docs/shaders/gradients

Demonstrates how to use the SweepGradient component to create a gradient that sweeps around a center point. You can specify start and end angles for the sweep.

```typescript
import React from "react";
import {
  Canvas,
  Rect,
  SweepGradient,
  Skia,
  Shader,
  vec
} from "@shopify/react-native-skia";

export const SweepGradientDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Rect x={0} y={0} width={256} height={256}>
        <SweepGradient
          c={vec(128, 128)}
          colors={["cyan", "magenta", "yellow", "cyan"]}
        />
      </Rect>
    </Canvas>
  );
};

```

--------------------------------

### Initialize and Match Fonts

Source: https://shopify.github.io/react-native-skia/docs/text/text

Demonstrates how to access the system font manager and create a custom font provider. Use matchFamilyStyle to retrieve a typeface for font creation.

```typescript
import {Platform} from "react-native";  
import {Skia, FontStyle} from "@shopify/react-native-skia";  
   
const familyName = Platform.select({ ios: "Helvetica", default: "serif" });  
const fontSize = 32;  
// Get the system font manager  
const fontMgr = Skia.FontMgr.System();  
// The custom font manager is available via Skia.TypefaceFontProvider.Make()  
const customFontMgr = Skia.TypefaceFontProvider.Make();  
// typeface needs to be loaded via Skia.Data and instanciated via  
// Skia.Typeface.MakeFreeTypeFaceFromData()  
// customFontMgr.registerTypeface(customTypeFace, "Roboto");  
  
// Matching a font  
const typeface =  fontMgr.matchFamilyStyle(familyName, FontStyle.Bold);  
const font = Skia.Font(typeface, fontSize);
```

--------------------------------

### Luminance Mask Example

Source: https://shopify.github.io/react-native-skia/docs/mask

This example shows a luminance mask where white pixels in the mask layer are visible and black pixels are invisible. The mask is created using two circles with specified colors.

```jsx
import {Canvas, Mask, Group, Circle, Rect} from "@shopify/react-native-skia";
  
const Demo = () => (
  <Canvas style={{ width: 256, height: 256 }}>
    <Mask  
      mode="luminance"  
      mask={  
        <Group>
          <Circle cx={128} cy={128} r={128} color="white" />
          <Circle cx={128} cy={128} r={64} color="black" />
        </Group>  
      }
    >
      <Rect x={0} y={0} width={256} height={256} color="lightblue" />
    </Mask>
  </Canvas>
);

```

--------------------------------

### Alpha Mask Example

Source: https://shopify.github.io/react-native-skia/docs/mask

This example demonstrates an alpha mask where opaque pixels in the mask layer are visible and transparent pixels are invisible. The mask is defined by two overlapping circles with different opacities.

```jsx
import {Canvas, Mask, Group, Circle, Rect} from "@shopify/react-native-skia";
  
const Demo = () => (
  <Canvas style={{ width: 256, height: 256 }}>
    <Mask  
      mask={  
        <Group>
          <Circle cx={128} cy={128} r={128} opacity={0.5} />
          <Circle cx={128} cy={128} r={64} />
        </Group>  
      }
    >
      <Rect x={0} y={0} width={256} height={256} color="lightblue" />
    </Mask>
  </Canvas>
);

```

--------------------------------

### SVG Path Definition

Source: https://shopify.github.io/react-native-skia/docs/group

This is an example of an SVG path definition with its bounding source rectangle.

```svg
<svg width="664" height="308" viewBox="0 0 664 308" fill="none" xmlns="http://www.w3.org/2000/svg">  
  <path d="M 170.1 215.5 C 165 222.3..." fill="black"/>  
</svg>  

```

--------------------------------

### Manual Image Creation

Source: https://shopify.github.io/react-native-skia/docs/images

Demonstrates how to create `SkImage` instances manually using `MakeImageFromEncoded` with base64 data or `MakeImage` with raw pixel data and format specifications.

```APIDOC
## Manual Image Creation

### MakeImageFromEncoded
Creates an image instance from base64 encoded data.

### Usage
```javascript
import { Skia } from "@shopify/react-native-skia";

// A sample base64-encoded pixel
const data = Skia.Data.fromBase64("iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==");
const image = Skia.Image.MakeImageFromEncoded(data);
```

### MakeImage
Creates an image by providing pixel data and specifying the format.

### Usage
```javascript
import { Skia, AlphaType, ColorType } from "@shopify/react-native-skia";

const pixels = new Uint8Array(256 * 256 * 4);
pixels.fill(255);
let i = 0;
for (let x = 0; x < 256; x++) {
  for (let y = 0; y < 256; y++) {
    pixels[i++] = (x * y) % 255;
  }
}
const data = Skia.Data.fromBytes(pixels);
const img = Skia.Image.MakeImage(
  {
    width: 256,
    height: 256,
    alphaType: AlphaType.Opaque,
    colorType: ColorType.RGBA_8888,
  },
  data,
  256 * 4
);
```

**Note**: The nested for-loops in the `MakeImage` example have corrected loop conditions to iterate up to `256` for both `x` and `y`.
```

--------------------------------

### Complex Path Construction with PathBuilder

Source: https://shopify.github.io/react-native-skia/docs/shapes/path-migration

Illustrates building a complex path programmatically using PathBuilder, including moveTo, lineTo, quadTo, cubicTo, and close.

```javascript
const builder = Skia.PathBuilder.Make();
builder.moveTo(0, 0);
builder.lineTo(100, 0);
builder.quadTo(150, 50, 100, 100);
builder.cubicTo(50, 150, 0, 100, 0, 50);
builder.close();

// Get the immutable path
const path = builder.build();
```

--------------------------------

### Render "Hello World!" with TextBlob

Source: https://shopify.github.io/react-native-skia/docs/text/blob

Use TextBlob to render text with specified font and color. Ensure the font is loaded before rendering.

```typescript
import {Canvas, TextBlob, Skia, useFont} from "@shopify/react-native-skia";  
  
  
export const HelloWorld = () => {  
  const font = useFont(require("./SF-Pro.ttf"), 24);  
  if (font === null) {  
    return null;  
  }  
  const blob = Skia.TextBlob.MakeFromText("Hello World!", font);  
  return (  
      <Canvas style={{ flex: 1 }}>  
        <TextBlob  
          blob={blob}  
          color="blue"  
        />  
      </Canvas>  
  );  
};  

```

--------------------------------

### Normalize line height with ParagraphBuilder

Source: https://shopify.github.io/react-native-skia/docs/text/paragraph

Example of using heightMultiplier to ensure consistent line heights when mixing different fonts and sizes.

```typescript
import { useMemo } from "react";  
import { Paragraph, Skia, useFonts, Canvas } from "@shopify/react-native-skia";  
  
const MyParagraph = () => {  
  const customFontMgr = useFonts({  
    Roboto: [require("path/to/Roboto-Regular.ttf")],  
    "Noto Sans SC": [require("path/to/NotoSansSC-Regular.otf")],  
  });  
  
  const paragraph = useMemo(() => {  
    if (!customFontMgr) {  
      return null;  
    }  
    // Every line will be exactly 40px tall, like lineHeight: 40 in CSS  
    const lineHeight = 40;  
    const paragraphBuilder = Skia.ParagraphBuilder.Make({}, customFontMgr);  
    paragraphBuilder  
      .pushStyle({  
        color: Skia.Color("black"),  
        fontFamilies: ["Roboto"],  
        fontSize: 24,  
        heightMultiplier: lineHeight / 24,  
      })  
      .addText("Hello\n")  
      .pop()  
      .pushStyle({  
        color: Skia.Color("black"),  
        fontFamilies: ["Noto Sans SC"],  
        fontSize: 16,  
        heightMultiplier: lineHeight / 16,  
      })  
      .addText("你好")  
      .pop();  
    return paragraphBuilder.build();  
  }, [customFontMgr]);  
  
  return (  
    <Canvas style={{ width: 256, height: 256 }}>  
      <Paragraph paragraph={paragraph} x={0} y={0} width={256} />  
    </Canvas>  
  );  
};  
```

--------------------------------

### Get Skottie Animation Color Properties

Source: https://shopify.github.io/react-native-skia/docs/skottie

Retrieve all color properties of a Skottie animation, each with a key and its current value. This allows for inspection before modification.

```typescript
import { Skia } from "@shopify/react-native-skia";  
const animation = {} as any;  
// ---cut---  
// Get all color properties  
const colorProps = animation.getColorProps();  
// Returns array of: { key: string, value: Float32Array }  
```

--------------------------------

### Create and Compile a RuntimeEffect Shader

Source: https://shopify.github.io/react-native-skia/docs/shaders/overview

This snippet demonstrates how to create a shader using `RuntimeEffect.Make` and compile it. Ensure the shader source is valid to avoid errors.

```typescript
import {Skia} from "@shopify/react-native-skia";  
  
const source = Skia.RuntimeEffect.Make(`  
vec4 main(vec2 pos) {  
  // The canvas is 256x256  
  vec2 canvas = vec2(256);  
  // normalized x,y values go from 0 to 1  
  vec2 normalized = pos/canvas;  
  return vec4(normalized.x, normalized.y, 0.5, 1);
}`);  
  
if (!source) {  
  throw new Error("Couldn't compile the shader")  
}
```

--------------------------------

### Build Path (Immutable API with PathBuilder)

Source: https://shopify.github.io/react-native-skia/docs/shapes/path-migration

Illustrates building a path using the new immutable API with PathBuilder. The build() method returns a new immutable path.

```javascript
const path = Skia.PathBuilder.Make()
  .moveTo(0, 0)
  .lineTo(100, 100)
  .close()
  .build();

const circle = Skia.Path.Circle(50, 50, 25);

const transformed = path.transform(matrix);

const stroked = Skia.Path.Stroke(path, { width: 2 });
const simplified = Skia.Path.Simplify(path);
```

--------------------------------

### Get Skottie Animation Opacity Properties

Source: https://shopify.github.io/react-native-skia/docs/skottie

Retrieve all opacity properties of a Skottie animation, each with a key and its current numerical value. This allows for inspection of opacity settings.

```typescript
const animation = {} as any;  
// ---cut---  
// Get all opacity properties  
const opacityProps = animation.getOpacityProps();  
// Returns array of: { key: string, value: number }  
```

--------------------------------

### Nested Shaders with ImageShader in React Native Skia

Source: https://shopify.github.io/react-native-skia/docs/shaders/overview

This example shows how to nest shaders, using an `ImageShader` as a uniform. The shader manipulates the UV coordinates before sampling the image.

```typescript
import {Canvas, Skia, ImageShader, Shader, Fill, useImage} from "@shopify/react-native-skia";  
  
const source = Skia.RuntimeEffect.Make(`  
uniform shader image;  
  
half4 main(float2 xy) {     
  xy.x += sin(xy.y / 3) * 4;
  return image.eval(xy).rbga;
}`)!;  
  
const NestedShader = () => {  
  const image = useImage(require("./assets/oslo.jpg"));  
  if (!image) {  
    return null;
  }
  return (  
    <Canvas style={{ width: 256, height: 256 }}>  
      <Fill>  
        <Shader source={source}>  
          <ImageShader  
            image={image}
            fit="cover"
            rect={{ x: 0, y: 0, width: 256, height: 256 }}
          />  
        </Shader>  
      </Fill>  
    </Canvas>  
  );
};

```

--------------------------------

### Radial Gradient Example in React Native Skia

Source: https://shopify.github.io/react-native-skia/docs/shaders/gradients

Shows how to implement a radial gradient with a specified center and radius. This component is useful for creating circular color transitions.

```typescript
import React from "react";
import {
  Canvas,
  Rect,
  RadialGradient,
  Skia,
  Shader,
  vec
} from "@shopify/react-native-skia";

export const RadialGradientDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Rect x={0} y={0} width={256} height={256}>
        <RadialGradient
          c={vec(128, 128)}
          r={128}
          colors={["blue", "yellow"]}
        />
      </Rect>
    </Canvas>
  );
};

```

--------------------------------

### Interoperate Skia and WebGPU

Source: https://shopify.github.io/react-native-skia/docs/getting-started/installation

Demonstrates sharing a Dawn instance between Skia and WebGPU to enable zero-copy texture interop.

```typescript
import { Skia } from "@shopify/react-native-skia";  
import { importDevice, adoptTexture } from "react-native-webgpu";  
  
// A WebGPU device backed by Skia's Graphite device  
const device = importDevice(Skia.getNativeDevice());  
  
// Use an SkImage as a WebGPU texture  
const texture = adoptTexture(Skia.Image.MakeNativeTextureFromImage(image));  
  
// Use a WebGPU texture as an SkImage  
const skImage = Skia.Image.MakeImageFromNativeTexture(texture.nativePointer);  
```

--------------------------------

### PathBuilder with Method Chaining

Source: https://shopify.github.io/react-native-skia/docs/shapes/path-migration

Shows how PathBuilder supports method chaining for concise path construction, including arcTo.

```javascript
const path = Skia.PathBuilder.Make()
  .moveTo(0, 0)
  .lineTo(100, 100)
  .arcTo(50, 50, 0, true, true, 100, 0)
  .close()
  .build();
```

--------------------------------

### Load Video from Asset using Expo

Source: https://shopify.github.io/react-native-skia/docs/video

This utility hook loads a video asset using `expo-asset` and then uses it with `useVideo` from React Native Skia. Ensure you have `expo-asset` installed.

```typescript
import { useVideo } from "@shopify/react-native-skia";  
import { useAssets } from "expo-asset";  
  
// Example usage:  
// const video = useVideoFromAsset(require("./BigBuckBunny.mp4"));  
export const useVideoFromAsset = (  
  mod: number,  
  options?: Parameters<typeof useVideo>[1]  
) => {  
  const [assets, error] = useAssets([mod]);  
  if (error) {  
    throw error;  
  }  
  return useVideo(assets ? assets[0].localUri : null, options);  
};  


```

--------------------------------

### Apply Blur Effect to Skottie Animation

Source: https://shopify.github.io/react-native-skia/docs/skottie

Apply effects to a Skottie animation using the 'layer' property within a Group. This example applies a blur filter to the Skottie animation.

```typescript
import React from "react";
import { Canvas, Skottie, Skia, Group, Paint, Blur } from "@shopify/react-native-skia";

const legoAnimationJSON = require("./assets/lego_loader.json");
const animation = Skia.Skottie.Make(JSON.stringify(legoAnimationJSON));

export const SVG = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Group layer={<Paint><Blur blur={10} /></Paint>}>
        <Skottie animation={animation} frame={41} />
      </Group>
    </Canvas>
  );
};

```

--------------------------------

### Retained Mode Animation Example

Source: https://shopify.github.io/react-native-skia/docs/canvas/rendering-modes

Demonstrates animating a circle's radius using Retained Mode with React Native Skia and Reanimated. Ensure Reanimated is set up correctly.

```typescript
import React, {useEffect} from "react";  
import { Canvas, Circle, Group } from "@shopify/react-native-skia";  
import { useSharedValue, withSpring, useDerivedValue } from "react-native-reanimated";  
  
export const RetainedModeExample = () => {  
  const radius = useSharedValue(50);  
  useEffect(() => {  
    radius.value = withSpring(radius.value === 50 ? 100 : 50);  
  }, []);  
  return (  
    <Canvas style={{ flex: 1 }}>  
      <Group>  
        <Circle cx={128} cy={128} r={radius} color="cyan" />  
      </Group>  
    </Canvas>  
  );  
};  


```

--------------------------------

### Combine Paths using PathBuilder

Source: https://shopify.github.io/react-native-skia/docs/shapes/path-migration

Demonstrates combining an existing path with new elements by creating a PathBuilder from an existing path and adding new segments.

```javascript
const basePath = Skia.Path.MakeFromSVGString("M10 10 L90 90")!;
const combined = Skia.PathBuilder.MakeFromPath(basePath)
  .lineTo(90, 10)
  .close()
  .build();
```

--------------------------------

### Animated Skottie Playback with Reanimated

Source: https://shopify.github.io/react-native-skia/docs/skottie

Combine Skottie with React Native Reanimated for smooth animation playback. This example uses useClock and useDerivedValue to control the animation frame based on time.

```typescript
import React from "react";
import {
  Skia,
  Canvas,
  useClock,
  Group,
  Skottie,
} from "@shopify/react-native-skia";
import { useDerivedValue } from "react-native-reanimated";

const legoAnimationJSON = require("./assets/lego_loader.json");
const animation = Skia.Skottie.Make(JSON.stringify(legoAnimationJSON));

const AnimatedSkottieExample = () => {
  const clock = useClock();
  const frame = useDerivedValue(() => {
    const fps = animation.fps();
    const duration = animation.duration();
    const currentFrame =
      Math.floor((clock.value / 1000) * fps) % (duration * fps);
    return currentFrame;
  });

  return (
    <Canvas style={{ flex: 1 }}>
      <Group transform={[{ scale: 0.5 }]}>
        <Skottie animation={animation} frame={frame} />
      </Group>
    </Canvas>
  );
};

```

--------------------------------

### Turbulence Perlin Noise Shader Example

Source: https://shopify.github.io/react-native-skia/docs/shaders/perlin-noise

Use Turbulence to create a shader with Perlin Turbulence. Ensure you import Canvas, Rect, Turbulence, Skia, Shader, Fill, and vec from '@shopify/react-native-skia'.

```typescript
import React from "react";
import {
  Canvas,
  Rect,
  Turbulence,
  Skia,
  Shader,
  Fill,
  vec
} from "@shopify/react-native-skia";

export const TurbulenceDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Fill color="white" />
      <Rect x={0} y={0} width={256} height={256}>
        <Turbulence freqX={0.05} freqY={0.05} octaves={4} />
      </Rect>
    </Canvas>
  );
};

```
Tokens:
Raw