☕

William Candillon wcandillon

☕

Maker of the “Can it be done in React Native?” YouTube series ⚛️📺

wcandillon / Example.tsx

Created January 29, 2025 11:55

	import React, { useMemo, useState } from "react";
	import type { StyleProp, ViewStyle } from "react-native";
	import {
	Button,
	StatusBar,
	Text,
	TouchableOpacity,
	useWindowDimensions,
	View,
	StyleSheet,

wcandillon / Canvas.tsx

Created November 30, 2024 17:47

	import type {
	SkData,
	SkImage,
	SkTypeface,
	SkTypefaceFontProvider,
	} from "@shopify/react-native-skia";
	import { Canvas as SkCanvas, Skia } from "@shopify/react-native-skia";
	import type { ReactNode } from "react";
	import { useContext, createContext, useState, useEffect } from "react";
	import { Internals } from "remotion";

wcandillon / Bitmap.tsx

Created September 10, 2024 17:26

	import { PixelRatio } from "react-native";
	import { Canvas, useCanvasEffect } from "react-native-wgpu";

	export interface Bitmap {
	width: number;
	height: number;
	colorType: "rgba8unorm" \| "bgra8unorm";
	data: Uint8Array;
	}

wcandillon / CMakeLists.txt

Created June 27, 2024 12:23

	cmake_minimum_required(VERSION 3.22.1)
	cmake_policy(SET CMP0048 NEW)
	project(webgpu VERSION 1.1.0 LANGUAGES CXX)

	include(${CMAKE_CURRENT_LIST_DIR}/BundleLibraries.cmake)

	set(DAWN_BUILD_ANDROID_SAMPLES OFF)
	set(DAWN_BUILD_SAMPLES OFF)
	set(TINT_BUILD_TESTS OFF)
	set(TINT_BUILD_CMD_TOOLS OFF)

wcandillon / OffscreenCanvas.ts

Created December 18, 2023 08:54

	// 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 / ExampleWithSkia.tsx

Created November 4, 2023 10:21

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

wcandillon / gn-gen-args

Created May 20, 2023 11:30

	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 / start.tsx

Created January 7, 2023 18:07

Skia Shader Line SDF Starter

	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 / line-sdf.tsx

Last active February 18, 2025 20:00

React Native Line SDF

wcandillon / skia-tests.tsx

Created December 14, 2022 06:23

	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>