### Install and Start Web App

Source: https://github.com/shopify/react-native-skia/blob/main/apps/web-app/README.md

Navigate to the web app directory, install dependencies, and start the development server.

```bash
cd apps/web-app
yarn install
yarn start
```

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

### Running Example App for Testing

Source: https://github.com/shopify/react-native-skia/blob/main/packages/skia/CONTRIBUTING.md

Start the example app on iOS or Android to prepare for end-to-end testing.

```sh
cd example
yarn ios # or yarn android for Android testing
```

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

### Install Cocoapods

Source: https://github.com/shopify/react-native-skia/blob/main/packages/skia/CONTRIBUTING.md

Install Cocoapods dependencies in the example app's iOS directory.

```shell
cd example/ios && pod install && cd ..
```

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

### Install React Native Skia and Setup Web

Source: https://github.com/shopify/react-native-skia/blob/main/apps/docs/docs/getting-started/web.mdx

Install the React Native Skia package and run the setup script to make CanvasKit WASM accessible in your Expo project.

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

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

### Build Example App Locally on Android

Source: https://github.com/shopify/react-native-skia/blob/main/packages/skia/CONTRIBUTING.md

Compile the example application for Android using Gradle.

```shell
cd apps/example/android && ./gradlew :app:assembleDebug
```

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

### Start Local Development Server

Source: https://github.com/shopify/react-native-skia/blob/main/apps/docs/README.md

Starts a local development server for live previewing of changes. Changes are reflected live without server restarts.

```bash
$ yarn start
```

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

### Install Project Dependencies

Source: https://github.com/shopify/react-native-skia/blob/main/apps/docs/README.md

Run this command to install all necessary project dependencies using Yarn.

```bash
$ yarn
```

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

### Install Dependencies

Source: https://github.com/shopify/react-native-skia/blob/main/apps/headless/README.md

Installs all project dependencies using yarn.

```console
yarn install
```

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

### Build Example App Locally on iOS Simulator

Source: https://github.com/shopify/react-native-skia/blob/main/packages/skia/CONTRIBUTING.md

Compile the example application for the iOS simulator using xcodebuild.

```shell
cd apps/example/ios
xcodebuild -workspace example.xcworkspace -scheme example -sdk iphonesimulator \
  -configuration Debug -destination 'generic/platform=iOS Simulator' \
  build CODE_SIGNING_ALLOWED=NO
```

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

### Install Remotion Dependencies

Source: https://github.com/shopify/react-native-skia/blob/main/apps/remotion/README.md

Installs all necessary packages for your Remotion project. Run this after cloning the repository or when setting up a new project.

```bash
npm i
```

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

### Create Example Component

Source: https://github.com/shopify/react-native-skia/blob/main/apps/example/README.md

Create a basic React Native component for an individual example within a category.

```typescript
import React from "react";
import { View, StyleSheet } from "react-native";

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#f0f0f0",
  },
});

export const Example1 = () => {
  return <View style={styles.container} />;
};
```

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

### Start Remotion Preview Server

Source: https://github.com/shopify/react-native-skia/blob/main/apps/remotion/README.md

Launches the development server to preview your Remotion videos in real-time. Useful for iterating on video content.

```bash
npm start
```

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

### Install Skia Pre-built Binaries

Source: https://github.com/shopify/react-native-skia/blob/main/packages/skia/CONTRIBUTING.md

Installs Skia headers needed to compile against prebuilt binaries. This command is used for both standard and Graphite builds.

```bash
yarn install-skia
```

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

### Install iOS CocoaPods Dependencies

Source: https://github.com/shopify/react-native-skia/blob/main/apps/example/README.md

Navigate to the iOS directory and install CocoaPods dependencies.

```bash
cd ios && pod install && cd ..
```

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

### Generate Texture on UI Thread with runOnUI

Source: https://github.com/shopify/react-native-skia/blob/main/apps/docs/docs/animations/textures.md

This example demonstrates creating a texture directly on the UI thread using `runOnUI` from `react-native-reanimated`. It shows how to draw on an offscreen surface and capture it as an image snapshot. Ensure Reanimated 2 and `@shopify/react-native-skia` are installed and configured.

```tsx
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>
  );
};

```

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

### Install Experimental Graphite Backend

Source: https://github.com/shopify/react-native-skia/blob/main/apps/docs/docs/getting-started/installation.md

Use this command to install the experimental Graphite backend for Skia. Note that Graphite support is highly experimental and requires Android API Level 26 or above.

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

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

### Start Metro Bundler

Source: https://github.com/shopify/react-native-skia/blob/main/apps/example/README.md

Start the Metro JavaScript bundler to run the React Native app.

```bash
yarn start
```

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

### Basic RuntimeShader Example

Source: https://github.com/shopify/react-native-skia/blob/main/apps/docs/docs/image-filters/runtime-shader.md

This example demonstrates a basic RuntimeShader that manipulates the RGBA channels of an image. It's useful for simple color transformations or effects.

```tsx
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>
  );
};

```

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

### Install Graphite Skia Build

Source: https://github.com/shopify/react-native-skia/blob/main/packages/skia/CONTRIBUTING.md

Downloads and installs the Graphite build of Skia binaries. This command also writes a marker file to indicate the Graphite build is active.

```bash
yarn install-skia-graphite
```

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

### Create Category Navigation

Source: https://github.com/shopify/react-native-skia/blob/main/apps/example/README.md

Set up the native stack navigator for a category, including screens for the list and individual examples.

```typescript
import React from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

import type { Routes } from "./Routes";
import { List } from "./List";
import { Example1 } from "./Example1";
import { Example2 } from "./Example2";

const Stack = createNativeStackNavigator<Routes>();
export const CategoryName = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="List"
        component={List}
        options={{
          title: "🌊 Category Name",
          header: () => null,
        }}
      />
      <Stack.Screen
        name="Example1"
        component={Example1}
        options={{
          title: "🌊 Example 1",
        }}
      />
      <Stack.Screen
        name="Example2"
        component={Example2}
        options={{
          title: "💧 Example 2",
        }}
      />
      // Add more screens as needed
    </Stack.Navigator>
  );
};
```

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

### Seek to Specific Time in Video

Source: https://github.com/shopify/react-native-skia/blob/main/apps/docs/docs/video.md

This example demonstrates how to control video playback by seeking to a specific timestamp. Tapping the screen will set the video's seek value to 2000 milliseconds (2 seconds). The video will loop continuously. Ensure Reanimated is installed and configured.

```tsx
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>
  );
};
```

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

### Run End-to-End Tests

Source: https://github.com/shopify/react-native-skia/blob/main/packages/skia/CONTRIBUTING.md

Execute end-to-end tests, which require the example app to be running on a simulator or device.

```shell
yarn e2e
```

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

### Create List Component

Source: https://github.com/shopify/react-native-skia/blob/main/apps/example/README.md

Create the main list component for a category, displaying examples and handling navigation.

```typescript
import * as React from "react";
import { ScrollView, StyleSheet, Text, View, Pressable } from "react-native";
import { useNavigation } from "@react-navigation/native";
import type { NativeStackNavigationProp } from "@react-navigation/native-stack";

import type { Routes } from "./Routes";

export const examples = [
  {
    screen: "Example1",
    title: "🌊 Example 1",
  },
  {
    screen: "Example2", 
    title: "💧 Example 2",
  },
] as const;

const styles = StyleSheet.create({
  container: {},
  content: {
    paddingBottom: 32,
  },
  thumbnail: {
    backgroundColor: "white",
    padding: 32,
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
  title: {
    color: "black",
  },
});

export const List = () => {
  const { navigate } = 
    useNavigation<NativeStackNavigationProp<Routes, "List">>();
  return (
    <ScrollView style={styles.container} contentContainerStyle={styles.content}>
      {examples.map((thumbnail) => (
        <Pressable
          key={thumbnail.screen}
          onPress={() => {
            navigate(thumbnail.screen);
          }}
          testID={thumbnail.screen}
        >
          <View style={styles.thumbnail}>
            <Text style={styles.title}>{thumbnail.title}</Text>
          </View>
        </Pressable>
      ))}
    </ScrollView>
  );
};
```

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

### Configure Jest Environment and Setup

Source: https://github.com/shopify/react-native-skia/blob/main/apps/docs/docs/getting-started/installation.md

Set up your Jest environment to use the React Native Skia specific test environment and setup files. This loads CanvasKit and mocks React Native Skia.

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

```

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

### Export Category

Source: https://github.com/shopify/react-native-skia/blob/main/apps/example/README.md

Export the newly created category from the examples index file.

```typescript
export * from "./CategoryName";
```

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

### Deferred Component Registration with LoadSkiaWeb

Source: https://github.com/shopify/react-native-skia/blob/main/apps/docs/docs/getting-started/web.mdx

Example of an index.web.js file that defers the registration of the root component until CanvasKit WASM is loaded.

```js
import { LoadSkiaWeb } from "@shopify/react-native-skia/lib/module/web";

LoadSkiaWeb().then(async () => {
  const App = (await import("./src/App")).default;
  AppRegistry.registerComponent("Example", () => App);
});
```

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

### Android SDK and NDK Configuration

Source: https://github.com/shopify/react-native-skia/blob/main/packages/skia/android/README.md

Configure the `local.properties` file with the correct paths to your Android SDK and NDK installations. This is crucial for building and publishing the library.

```properties
ndk.dir=/Users/{username}/Library/Android/sdk/ndk-bundle
sdk.dir=/Users/{username}/Library/Android/sdk
```

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

### Displaying a Text Blob

Source: https://github.com/shopify/react-native-skia/blob/main/apps/docs/docs/text/blob.md

This example shows how to create a TextBlob from text and a font, and then render it on a Canvas. Ensure you have a font file (e.g., SF-Pro.ttf) available in your project.

```tsx
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>
  );
};

```

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

### ImageShader Example

Source: https://github.com/shopify/react-native-skia/blob/main/apps/docs/docs/shaders/images.md

Demonstrates how to use the ImageShader component to render an image within a Circle. Ensure the image path is correct and the image is loaded successfully before rendering.

```tsx
import {
  Canvas,
  Circle,
  ImageShader,
  Skia,
  Shader,
  useImage
} from "@shopify/react-native-skia";

const ImageShaderDemo = () => {
  const image = useImage(require("../../assets/oslo.jpg"));
  if (image === null) {
    return null;
  }
  return (
    <Canvas style={{ flex: 1 }}>
      <Circle cx={128} cy={128} r={128}>
        <ImageShader
          image={image}
          fit="cover"
          rect={{ x: 0, y: 0, width: 256, height: 256 }}
        />
      </Circle>
    </Canvas>
  );
};

```

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

### Deferred CanvasKit Loading with LoadSkiaWeb

Source: https://github.com/shopify/react-native-skia/blob/main/apps/docs/docs/getting-started/web.mdx

This example demonstrates deferred component registration by loading CanvasKit asynchronously. It's useful for scenarios where you want to control the loading process more granularly.

```tsx
import { LoadSkiaWeb } from "@shopify/react-native-skia/lib/module/web";
import { version } from 'canvaskit-wasm/package.json';

LoadSkiaWeb({
  locateFile: (file) => `https://cdn.jsdelivr.net/npm/canvaskit-wasm@${version}/bin/full/${file}`
}).then(async () => {
  const App = (await import("./src/App")).default;
  AppRegistry.registerComponent("Example", () => App);
});
```

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

### BlurMask Example

Source: https://github.com/shopify/react-native-skia/blob/main/apps/docs/docs/mask-filters.md

Demonstrates how to use the BlurMask filter to apply a Gaussian blur to a circle. Requires importing Canvas, Fill, Circle, BlurMask, and vec from '@shopify/react-native-skia'.

```tsx
import {Canvas, Fill, Circle, BlurMask, vec} from "@shopify/react-native-skia";

const MaskFilterDemo = () => {
  return (
    <Canvas style={{ flex: 1}}>
      <Circle c={vec(128)} r={128} color="lightblue">
        <BlurMask blur={20} style="normal" />
      </Circle>
    </Canvas>
  );
};

```

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

### Invert Clip Example

Source: https://github.com/shopify/react-native-skia/blob/main/apps/docs/docs/group.md

Demonstrates the 'invertClip' prop, which reverses the clipping behavior, showing content outside the specified clip path and hiding content inside.

```tsx
import {
  Canvas,
  Group,
  Image,
  useImage,
  Skia,
} from "@shopify/react-native-skia";

const Clip = () => {
  const image = useImage(require("./assets/oslo.jpg"));
  const star = Skia.Path.MakeFromSVGString(
    "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"
  )!;

  return (
    <Canvas style={{ flex: 1 }}>
      <Group clip={star} invertClip>
        <Image image={image} x={0} y={0} width={256} height={256} fit="cover" />
      </Group>
    </Canvas>
  );
};

```

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

### Serialize and Deserialize Skia Picture

Source: https://github.com/shopify/react-native-skia/blob/main/apps/docs/docs/pictures.md

This example demonstrates how to create a Skia Picture, serialize it into a byte array, and then deserialize it to create a copy. Serialized pictures are only compatible with the Skia version they were created with.

```tsx
import React, { useMemo } from "react";
import {
  Canvas,
  Picture,
  Skia,
  Group,
} from "@shopify/react-native-skia";

export const PictureExample = () => {
  // Create picture
  const picture = useMemo(() => {
    const recorder = Skia.PictureRecorder();
    const canvas = recorder.beginRecording(Skia.XYWHRect(0, 0, 100, 100));

    const paint = Skia.Paint();
    paint.setColor(Skia.Color("pink"));
    canvas.drawRect({ x: 0, y: 0, width: 100, height: 100 }, paint);

    const circlePaint = Skia.Paint();
    circlePaint.setColor(Skia.Color("orange"));
    canvas.drawCircle(50, 50, 50, circlePaint);

    return recorder.finishRecordingAsPicture();
  }, []);

  // Serialize the picture
  const serialized = useMemo(() => picture.serialize(), [picture]);

  // Create a copy from serialized data
  const copyOfPicture = useMemo(
    () => (serialized ? Skia.Picture.MakePicture(serialized) : null),
    [serialized]
  );

  return (
    <Canvas style={{ flex: 1 }}>
      <Picture picture={picture} />
      <Group transform={[{ translateX: 200 }]}>
        {copyOfPicture && <Picture picture={copyOfPicture} />}
      </Group>
    </Canvas>
  );
};

```

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

### Render a Simple Shader

Source: https://github.com/shopify/react-native-skia/blob/main/apps/docs/docs/shaders/language.md

This example shows how to render a simple SKSL shader using the `Shader` component within a `Fill` component on a `Canvas`. The shader colors pixels based on their normalized position.

```tsx
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>
  );
};

```

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

### Sweep Gradient Example

Source: https://github.com/shopify/react-native-skia/blob/main/apps/docs/docs/shaders/gradients.md

Use SweepGradient to create a gradient that sweeps around a center point. You can specify start and end angles to control the sweep range.

```tsx
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>
  );
};

```

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

### Atlas Hello World Example

Source: https://github.com/shopify/react-native-skia/blob/main/apps/docs/docs/shapes/atlas.md

Renders a simple cyan and blue rectangle as an image and then displays 150 instances of this image with calculated transformations. This demonstrates the efficient rendering capabilities of the Atlas component for numerous similar objects.

```tsx
import {Skia, drawAsImage, Group, Rect, Canvas, Atlas, rect} from "@shopify/react-native-skia";

const size = { width: 25, height: 11.25 };
const strokeWidth = 2;
const imageSize = {
    width: size.width + strokeWidth,
    height: size.height + strokeWidth,
};
const image = await drawAsImage(
    <Group>
    <Rect
        rect={rect(strokeWidth / 2, strokeWidth / 2, size.width, size.height)}
        color="cyan"
    />
    <Rect
        rect={rect(strokeWidth / 2, strokeWidth / 2, size.width, size.height)}
        color="blue"
        style="stroke"
        strokeWidth={strokeWidth}
    />
    </Group>,
    imageSize
);

export const Demo = () => {
  const numberOfBoxes = 150;
  const pos = { x: 128, y: 128 };
  const width = 256;
  const sprites = new Array(numberOfBoxes)
    .fill(0)
    .map(() => rect(0, 0, imageSize.width, imageSize.height));
  const transforms = new Array(numberOfBoxes).fill(0).map((_, i) => {
    const tx = 5 + ((i * size.width) % width);
    const ty = 25 + Math.floor(i / (width / size.width)) * size.width;
    const r = Math.atan2(pos.y - ty, pos.x - tx);
    return Skia.RSXform(Math.cos(r), Math.sin(r), tx, ty);
  });

  return (
    <Canvas style={{ flex: 1 }}>
      <Atlas image={image} sprites={sprites} transforms={transforms} />
    </Canvas>
  );
};
```

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

### Canvas Size on JS Thread with useLayoutEffect and measure

Source: https://github.com/shopify/react-native-skia/blob/main/apps/docs/docs/canvas/canvas.md

This example demonstrates how to get the canvas size on the JS thread using `useLayoutEffect` and the `measure()` method from a canvas ref. It manually sets up state to store the measured dimensions.

```tsx
import {useLayoutEffect, useState} from "react";
import {Fill, Canvas, Rect, useCanvasRef} from "@shopify/react-native-skia";

const Demo = () => {
  const ref = useCanvasRef();
  const [rect, setRect] = useState({ x: 0, y: 0, width: 0, height: 0 });
  useLayoutEffect(() => {
    ref.current?.measure((_x, _y, width, height) => {
      setRect({ x: 0, y: 0, width, height });
    });
  }, []);
  return (
    <Canvas style={{ flex: 1 }} ref={ref}>
      <Rect color="cyan" rect={rect} />
    </Canvas>
  );
};

```

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

### Run Project with Bun

Source: https://github.com/shopify/react-native-skia/blob/main/apps/headless/README.md

Executes the helloWorld.tsx script using the Bun runtime.

```console
bun ./src/helloWorld.tsx
```

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

### Bootstrap Depot Tools

Source: https://github.com/shopify/react-native-skia/blob/main/packages/skia/CONTRIBUTING.md

Initializes and updates the depot_tools, which are necessary for GN (Generate Ninja) to function correctly.

```bash
cd externals/depot_tools && ./update_depot_tools && cd ../..
```

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

### Deploy Website to GitHub Pages

Source: https://github.com/shopify/react-native-skia/blob/main/apps/docs/README.md

Builds the website and pushes it to the 'gh-pages' branch, suitable for hosting on GitHub Pages. Replace '<Your GitHub username>' with your actual GitHub username.

```bash
$ GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy
```

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

### Run Tests

Source: https://github.com/shopify/react-native-skia/blob/main/apps/example/README.md

Execute the test suite for the project.

```bash
yarn test
```

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

### Path Fill Type Example

Source: https://github.com/shopify/react-native-skia/blob/main/apps/docs/docs/shapes/path.md

Illustrates the use of the 'fillType' property to control how the inside of a path is determined. This example shows the 'evenOdd' fill type.

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

const star = () => {
  const R = 115.2;
  const C = 128.0;
  const builder = Skia.PathBuilder.Make();
  builder.moveTo(C + R, C);
  for (let i = 1; i < 8; ++i) {
    const a = 2.6927937 * i;
    builder.lineTo(C + R * Math.cos(a), C + R * Math.sin(a));
  }
  return builder.build();
};

export const HelloWorld = () => {
  const path = star();
  return (
    <Canvas style={{ flex: 1 }}>
      <Fill color="white" />
      <Path path={path} style="stroke" strokeWidth={4} color="#3EB489"/>
      <Path path={path} color="lightblue" fillType="evenOdd" />
    </Canvas>
  );
};

```

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

### Turbulence Perlin Noise Shader Example

Source: https://github.com/shopify/react-native-skia/blob/main/apps/docs/docs/shaders/perlin-noise.md

Use Turbulence to generate a Perlin Turbulence shader. This example shows how to apply it within a Skia Canvas.

```tsx
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>
  );
};

```

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

### Update iOS Version Marker for Pod Install

Source: https://github.com/shopify/react-native-skia/blob/main/packages/skia/CONTRIBUTING.md

After building iOS binaries, update the .version file to prevent 'pod install' from overwriting them with published versions.

```shell
printf "$(node -p \"require('react-native-skia-apple-ios/package.json').version\")" \
  > packages/skia/libs/ios/.version
cd apps/example/ios && pod install && cd -
```

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

### Run Unit Tests

Source: https://github.com/shopify/react-native-skia/blob/main/packages/skia/CONTRIBUTING.md

Execute the unit test suite to verify existing functionality.

```shell
yarn test
```

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

### Trimming a Path

Source: https://github.com/shopify/react-native-skia/blob/main/apps/docs/docs/shapes/path.md

Demonstrates how to trim a path using the 'start' and 'end' properties. The 'start' and 'end' values range from 0 to 1, defining the portion of the path to be rendered.

```tsx
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>
  );
};

```

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

### Run on Android

Source: https://github.com/shopify/react-native-skia/blob/main/apps/example/README.md

Build and run the application on an Android emulator or device.

```bash
yarn android
```

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

### Build SKIA Prebuilt Binaries (Standard)

Source: https://github.com/shopify/react-native-skia/blob/main/packages/skia/CONTRIBUTING.md

Trigger the GitHub Actions workflow to build and upload prebuilt binaries for standard Skia builds.

```yaml
.github/workflows/build-skia.yml
```

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

### Run on iOS

Source: https://github.com/shopify/react-native-skia/blob/main/apps/example/README.md

Build and run the application on an iOS simulator or device.

```bash
yarn ios
```

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

### RuntimeShader with Supersampling

Source: https://github.com/shopify/react-native-skia/blob/main/apps/docs/docs/image-filters/runtime-shader.md

This example implements supersampling for RuntimeShader to ensure crisp output by upscaling the drawing to the app's pixel density and then scaling it back. This is crucial because RuntimeShader does not account for pixel density scaling.

```tsx
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>
  );
};

```

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

### Build Remotion Video for Production

Source: https://github.com/shopify/react-native-skia/blob/main/apps/remotion/README.md

Compiles your Remotion project into a production-ready video format. This command is used before deploying or distributing your video.

```bash
npm run build
```

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

### Inner Shadow Example

Source: https://github.com/shopify/react-native-skia/blob/main/apps/docs/docs/image-filters/shadows.md

Renders two inner shadows on a rounded rectangle. The 'inner' property is set to true for both shadows.

```tsx
import {
  Shadow,
  Fill,
  RoundedRect,
  Canvas
} from "@shopify/react-native-skia";

const Neumorphism = () => {
  return (
    <Canvas style={{ width: 256, height: 256 }}>
      <Fill color="lightblue" />
      <RoundedRect x={32} y={32} width={192} height={192} r={32} color="lightblue">
        <Shadow dx={12} dy={12} blur={25} color="#93b8c4" inner />
        <Shadow dx={-12} dy={-12} blur={25} color="#c7f8ff" inner />
      </RoundedRect>
    </Canvas>
  );
};

```

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

### Clip Rectangle Example

Source: https://github.com/shopify/react-native-skia/blob/main/apps/docs/docs/group.md

Shows how to use a rectangular clipping region to display only a portion of child elements within the specified rectangle.

```tsx
import {
  Canvas,
  Group,
  Image,
  useImage,
  rect,
  Fill,
} from "@shopify/react-native-skia";

const size = 256;
const padding = 32;

const Clip = () => {
  const image = useImage(require("./assets/oslo.jpg"));
  const rct = rect(padding, padding, size - padding * 2, size - padding * 2);

  return (
    <Canvas style={{ flex: 1 }}>
      <Fill color="lightblue" />
      <Group clip={rct}>
        <Image
          image={image}
          x={0}
          y={0}
          width={size}
          height={size}
          fit="cover"
        />
      </Group>
    </Canvas>
  );
};

```

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

### Glob for Prebuilt Libraries and Headers

Source: https://github.com/shopify/react-native-skia/blob/main/packages/skia/android/CMakeLists.txt

Uses file globbing to find directories for prebuilt libraries and headers based on the build directory and ABI. This dynamically locates necessary components for the build.

```cmake
set(build_DIR ${CMAKE_SOURCE_DIR}/build)
file(GLOB LIBRN_DIR "${PREBUILT_DIR}/${ANDROID_ABI}")
file(GLOB libfbjni_link_DIRS "${build_DIR}/fbjni*.aar/jni/${ANDROID_ABI}")
file(GLOB libfbjni_include_DIRS "${build_DIR}/fbjni-*-headers.jar/")
```

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

### Linear Gradient Example

Source: https://github.com/shopify/react-native-skia/blob/main/apps/docs/docs/shaders/gradients.md

Use LinearGradient to create a gradient between two specified points. Ensure the Canvas, Rect, and LinearGradient components are imported.

```tsx
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>
  );
};

```

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

### Build Android Binaries

Source: https://github.com/shopify/react-native-skia/blob/main/packages/skia/CONTRIBUTING.md

Build the prebuilt Android binaries for the react-native-skia package.

```shell
yarn build-skia-android
```

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

### Luminance Mask Example

Source: https://github.com/shopify/react-native-skia/blob/main/apps/docs/docs/mask.md

Demonstrates a luminance mask where white pixels are visible and black pixels are invisible. Use this for masking based on brightness.

```tsx
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://github.com/shopify/react-native-skia/blob/main/apps/docs/docs/mask.md

Demonstrates an alpha mask where opaque pixels are visible and transparent pixels are invisible. Use this for masking based on transparency.

```tsx
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>
);
```

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

### Transform Origin Example

Source: https://github.com/shopify/react-native-skia/blob/main/apps/docs/docs/group.md

Demonstrates how to apply transformations relative to a specific origin point using the 'origin' and 'transform' props on the Group component.

```tsx
import { Canvas, Fill, Group, RoundedRect } from "@shopify/react-native-skia";

const SimpleTransform = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Fill color="#e8f4f8" />
      <Group
        color="lightblue"
        origin={{ x: 128, y: 128 }}
        transform={[{ skewX: Math.PI / 6 }]
      }>
        <RoundedRect x={64} y={64} width={128} height={128} r={10} />
      </Group>
    </Canvas>
  );
};

```

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

### Building a Path (Mutable API)

Source: https://github.com/shopify/react-native-skia/blob/main/apps/docs/docs/shapes/path-migration.md

Demonstrates how to build and modify a path using the older mutable API.

```tsx
const path = Skia.Path.Make();
path.moveTo(0, 0);
path.lineTo(100, 100);
path.close();

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

path.transform(matrix);

path.stroke({ width: 2 });
path.simplify();
```

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

### Upgrade Remotion Version

Source: https://github.com/shopify/react-native-skia/blob/main/apps/remotion/README.md

Updates your Remotion installation to the latest version. It's recommended to run this periodically to benefit from new features and bug fixes.

```bash
npm run upgrade
```

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

### Build NPM Package

Source: https://github.com/shopify/react-native-skia/blob/main/packages/skia/CONTRIBUTING.md

Create the npm package for react-native-skia, with the output located in the 'dist' folder.

```shell
yarn build-npm
```

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

### Radial Gradient Example

Source: https://github.com/shopify/react-native-skia/blob/main/apps/docs/docs/shaders/gradients.md

Use RadialGradient to generate a gradient from a center point with a given radius. This is useful for creating circular or spherical gradient effects.

```tsx
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>
  );
};

```

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

### Build Static Website Content

Source: https://github.com/shopify/react-native-skia/blob/main/apps/docs/README.md

Generates the static content for the website, typically placed in the 'build' directory, ready for hosting.

```bash
$ yarn build
```

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

### Clip Path Example

Source: https://github.com/shopify/react-native-skia/blob/main/apps/docs/docs/group.md

Illustrates clipping child elements to an arbitrary path defined by SVG data, enabling complex and custom clipping shapes.

```tsx
import {
  Canvas,
  Group,
  Image,
  useImage,
  Skia,
} from "@shopify/react-native-skia";

const Clip = () => {
  const image = useImage(require("./assets/oslo.jpg"));
  const star = Skia.Path.MakeFromSVGString(
    "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"
  )!;

  return (
    <Canvas style={{ flex: 1 }}>
      <Group clip={star}>
        <Image image={image} x={0} y={0} width={256} height={256} fit="cover" />
      </Group>
    </Canvas>
  );
};

```

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

### Fractal Noise Shader Example

Source: https://github.com/shopify/react-native-skia/blob/main/apps/docs/docs/shaders/perlin-noise.md

Use FractalNoise to generate a Perlin Fractal Noise shader. This snippet demonstrates its integration within a Canvas component.

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

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

```

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

### Clip Rounded Rectangle Example

Source: https://github.com/shopify/react-native-skia/blob/main/apps/docs/docs/group.md

Demonstrates clipping child elements within a rounded rectangular region, useful for creating soft-edged visible areas.

```tsx
import {
  Canvas,
  Group,
  Image,
  useImage,
  rrect,
  rect,
} from "@shopify/react-native-skia";

const size = 256;
const padding = 32;
const r = 8;

const Clip = () => {
  const image = useImage(require("./assets/oslo.jpg"));
  const roundedRect = rrect(
    rect(padding, padding, size - padding * 2, size - padding * 2),
    r,
    r
  );

  return (
    <Canvas style={{ flex: 1 }}>
      <Group clip={roundedRect}>
        <Image
          image={image}
          x={0}
          y={0}
          width={size}
          height={size}
          fit="cover"
        />
      </Group>
    </Canvas>
  );
};

```

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

### Load Images with useImage

Source: https://github.com/shopify/react-native-skia/blob/main/apps/docs/docs/image.md

Demonstrates loading images from local assets, network URLs, and the app bundle using the `useImage` hook. The hook returns null until the image is loaded.

```tsx
import { useImage } from "@shopify/react-native-skia";
// Loads an image from the JavaScript bundle
const image1 = useImage(require("./assets/oslo"));
// Loads an image from the network
const image2 = useImage("https://picsum.photos/200/300");
// Loads an image that was added to the Android/iOS bundle
const image3 = useImage("Logo");
```

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

### Expo Router Web Entry Point with LoadSkiaWeb

Source: https://github.com/shopify/react-native-skia/blob/main/apps/docs/docs/getting-started/web.mdx

Example of an index.web.tsx file for Expo Router that loads CanvasKit WASM before rendering the root component.

```tsx
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);
});
```

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

### Get Skottie Opacity Properties

Source: https://github.com/shopify/react-native-skia/blob/main/apps/docs/docs/skottie.md

Retrieves all opacity properties of a Lottie animation, returning an array of objects, each containing a `key` and its current `value` (a number).

```typescript
const opacityProps = animation.getOpacityProps();
```

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

### Getting Time with useClock Hook

Source: https://github.com/shopify/react-native-skia/blob/main/apps/docs/docs/animations/hooks.md

The useClock hook returns the time in milliseconds since the hook was activated. This can be used to drive animations based on time.

```tsx
import { Canvas, useClock, vec, Circle } from "@shopify/react-native-skia";
import { useDerivedValue } from "react-native-reanimated";

export default function App() {
  const t = useClock();

  const transform = useDerivedValue(() => {
    const scale = (2 / (3 - Math.cos(2 * t.value))) * 200;
    return [
      { translateX: scale * Math.cos(t.value) },
      { translateY: scale * (Math.sin(2 * t.value) / 2) },
    ];
  });

  return (
    <Canvas style={{ flex: 1 }}>
      <Circle c={vec(0, 0)} r={50} color="cyan" transform={transform} />
    </Canvas>
  );
}

```