wcandillon

// For React Native Skia to use GPU acceleration on node,
// We need to provide a polyfill for the OffscreenCanvas API on node
// Below is our implementation using [headless-gl](https://github.com/stackgl/headless-gl).
// Here we use gl for headless webgl support.
import GL from "gl";

// Now we need to provide polyfill for WebGLRenderingContext and OffscreenCanvas 
// for Skia to be able to leverage WebGL
global.WebGLRenderingContext = GL.WebGLRenderingContext;
global.OffscreenCanvas = class OffscreenCanvasPolyfill

wcandillon

import {
  Canvas,
  Group,
  Rect,
  Skia,
  useClock,
} from "@shopify/react-native-skia";
import React from "react";
import { StyleSheet, View } from "react-native";
import Animated, {

wcandillon

target_os="ios"
target_cpu="arm64"
skia_use_piex=true
skia_use_sfntly=false
skia_use_system_expat=false
skia_use_system_libjpeg_turbo=false
skia_use_system_libpng=false
skia_use_system_libwebp=false
skia_use_system_zlib=false
skia_enable_tools=false

wcandillon

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

const source = Skia.RuntimeEffect.Make(`
uniform float4 colors[4];

vec4 main(vec2 xy) {
  return colors[1];
}`)!;

wcandillon

import React from "react";
import {
  Canvas,
  Skia,
  Shader,
  Fill,
  vec,
  useTouchHandler,
  useValue,
  useComputedValue,

wcandillon

describe("Drawings", () => {
  it("Should blend colors using multiplication", async () => {
    const { width, height } = surface;
    const r = width * 0.33;
    const image = await surface.draw(
      <Group blendMode="multiply">
        <Circle cx={r} cy={r} r={r} color="cyan" />
        <Circle cx={width - r} cy={r} r={r} color="magenta" />
        <Circle cx={width / 2} cy={height - r} r={r} color="yellow" />
      </Group>

wcandillon

/**
 * `Char` represents a single-byte character.
 */
// prettier-ignore
export type Char =
  | "\x00" | "\x01" | "\x02" | "\x03" | "\x04" | "\x05" | "\x06" | "\x07"
  | "\x08" | "\x09" | "\x0A" | "\x0B" | "\x0C" | "\x0D" | "\x0E" | "\x0F"
  | "\x10" | "\x11" | "\x12" | "\x13" | "\x14" | "\x15" | "\x16" | "\x17"
  | "\x18" | "\x19" | "\x1A" | "\x1B" | "\x1C" | "\x1D" | "\x1E" | "\x1F"
  | "\x20" | "\x21" | "\x22" | "\x23" | "\x24" | "\x25" | "\x26" | "\x27"

wcandillon

type CountTo<N extends number, S extends 0[] = []> = S["length"] extends N
  ? S
  : CountTo<N, [...S, 0]>;
type Inc<N extends number> = [...CountTo<N>, 0]["length"];
type Dec<N extends number> = CountTo<N> extends [infer _H, ...infer T]
  ? T["length"]
  : 0;

type Before<
  Memory extends number[],

wcandillon

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "lint": "eslint --ext .ts,.tsx . --max-warnings 0",
    "tsc": "tsc",

wcandillon

import Animated, {Easing} from 'react-native-reanimated';

// These are functions that we should ship from redash normally
// But we are not able to because the reanimated version supported by
// redash has bugs in proc() when used with clocks.
const {
  Clock,
  Value,
  block,
  clockRunning,