Vertices

import { 
  Canvas, 
  Group, 
  ImageShader, 
  Vertices, 
  vec, 
  useImage 
} from "@shopify/react-native-skia";

const VerticesDemo = () => {
  const image = useImage(require("./assets/squares.png"));
  const vertices = [vec(64, 0), vec(128, 256), vec(0, 256)];
  const colors = ["#61dafb", "#fb61da", "#dafb61"];
  const textures = [vec(0, 0), vec(0, 128), vec(64, 256)];
  
  if (!image) {
    return null;
  }
  
  return (
    <Canvas style={{ flex: 1 }}>
      <Group>
        <ImageShader image={image} tx="repeat" ty="repeat" />
        {/* With colors, default blendMode is dstOver */}
        <Vertices vertices={vertices} colors={colors} />
        <Group transform={[{ translateX: 128 }]}>
          {/* Without colors, default blendMode is srcOver */}
          <Vertices vertices={vertices} textures={textures} />
        </Group>
      </Group>
    </Canvas>
  );
};

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

const IndicesDemo = () => {
  const vertices = [
    vec(0, 0),      // 0: top-left
    vec(256, 0),    // 1: top-right
    vec(256, 256),  // 2: bottom-right
    vec(0, 256)     // 3: bottom-left
  ];
  const colors = ["#61DAFB", "#fb61da", "#dafb61", "#61fbcf"];
  
  // First triangle: 0, 1, 2 (top-left, top-right, bottom-right)
  const triangle1 = [0, 1, 2];
  // Second triangle: 0, 2, 3 (top-left, bottom-right, bottom-left)
  const triangle2 = [0, 2, 3];
  const indices = [...triangle1, ...triangle2];
  
  return (
    <Canvas style={{ flex: 1 }}>
      <Vertices 
        vertices={vertices} 
        colors={colors} 
        indices={indices} 
      />
    </Canvas>
  );
};

const vertices = [
  vec(0, 0), vec(50, 0), vec(25, 50),  // Triangle 1
  vec(50, 0), vec(100, 0), vec(75, 50), // Triangle 2
];

const vertices = [
  vec(0, 0), vec(50, 0), vec(0, 50),   // Triangle 1
  vec(50, 50),  // Triangle 2 uses previous 2 vertices
];

const vertices = [
  vec(50, 50),  // Center point (shared by all)
  vec(0, 0), vec(100, 0),   // Triangle 1
  vec(100, 100),  // Triangle 2
  vec(0, 100),    // Triangle 3
];