Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/shopify/react-native-skia/llms.txt

Use this file to discover all available pages before exploring further.

Draws a Coons patch, which allows you to create complex curved surfaces.

​
Properties

NameTypeDescription
patchCubicBezier[4]Four cubic Bezier curves starting at top-left, clockwise, sharing every fourth point
texturesPoint[]Texture coordinates for mapping
colors?string[]Optional colors for each corner
blendMode?BlendModeBlend mode for colors (default: dstOver with colors, srcOver without)

​
Example

import { Canvas, Patch, vec } from "@shopify/react-native-skia";

const PatchDemo = () => {
  const colors = ["#61dafb", "#fb61da", "#61fbcf", "#dafb61"];
  const C = 64;
  const width = 256;
  
  const topLeft = { 
    pos: vec(0, 0), 
    c1: vec(0, C), 
    c2: vec(C, 0) 
  };
  const topRight = {
    pos: vec(width, 0),
    c1: vec(width, C),
    c2: vec(width + C, 0),
  };
  const bottomRight = {
    pos: vec(width, width),
    c1: vec(width, width - 2 * C),
    c2: vec(width - 2 * C, width),
  };
  const bottomLeft = {
    pos: vec(0, width),
    c1: vec(0, width - 2 * C),
    c2: vec(-2 * C, width),
  };
  
  return (
    <Canvas style={{ flex: 1 }}>
      <Patch
        colors={colors}
        patch={[topLeft, topRight, bottomRight, bottomLeft]}
      />
    </Canvas>
  );
};

​
Use Cases

  • Surface modeling - Create smooth curved surfaces
  • Color gradients - Non-linear color transitions
  • Texture mapping - Map textures onto curved surfaces
  • 3D-like effects - Simulate three-dimensional appearance
  • Vertices - Draw vertices with texture mapping
  • Shaders - Image shaders for textures