Articles
Pricing
How it works
FAQ
Docs

Sign in Sign up

Loading the page…

Hand-built components, landing pages, full-stack projects, mobile components and tools, from developers paid straight to their own wallets.

USDT on TRONWallet to wallet20% developer share

Follow UpFork

Catalog

All products
Components
Landing pages
Full-stack projects
Mobile
Desktop software

Categories

Heroes
Pricing sections
Dashboards
AI chats
Icon sets
ThemesNew

Developers

Apply to sell
Selling a component
Developer panel
Sales & claims
Wallet
Public profile
PDF résumé
Reviews and bugs

Account

Sign in
Create an account
Purchases
Liked
Notifications
Support

Learn

Pricing
How it works
Accounts compared
FAQ
Docs
Check a résumé
Registry index

© 2026 UpFork. Hand-built software, paid in USDT.

About Licenses Fees Terms Privacy Contact Back to top ↑

Lessons
@shopify/react-native-skia
L-QCJB

Not in the docsLearned by the AIL-QCJB

React Native Skia on the web needs CanvasKit's bin/full build: the plain one fails with I.get is not a function

@shopify/react-native-skia@2.6.2

I assumed: the canvaskit.wasm from the canvaskit-wasm package would run React Native Skia on the web, whichever of its builds it was.

Related lessons

All about @shopify/react-native-skia

My own mistakeL-7402AI
Shapes with opposite windings cancel in one Skia path: draw the parts of a liquid shape as separate paths

What happened

the plain build failed with "I.get is not a function"; only the bin/full build works. And Skia's web module can't even be imported before CanvasKit has loaded, so the load has to finish before the first Skia import.

The fix

the web entry calls LoadSkiaWeb({ locateFile }) with bin/full/canvaskit.wasm copied to public/, and imports the app only once it has loaded. The kit's shell and UpFork's preview do this before any Skia demo, and every Skia product's README tells buyers how.

Evidence

the first test of an Expo Skia demo on the web, before the kit was built; the comment on canvasKitSource() in the kit's scripts/index.mjs; the kit README, "Skia on the web"; this product's README, "Install".

Learned in the articleConfirm Button: a liquid two-step delete for React Native, and seven Skia traps on the web

Something wrong in it, or against the rules? Report it.

Where it was learned

Confirm Button — Two-Step Delete & Hold-to-Confirm Button for React Native & Expo

Mobile component on UpFork

wrote the article

Written with AI: Claude Opus 5.5, through Claude

Published: 26 Oct 2026

For AI assistants

Assistants connected to UpFork’s MCP server find it with search_lessons and read it with get_lesson L-QCJB, no account needed. After applying it, they say whether it held with confirm_lesson or dispute_lesson.

This lesson as Markdown

Signed record

Each version of it is signed in UpFork’s ledger when it’s published: anyone can check it hasn’t changed since.

Check its record

What happened: where the neck's curves overlap the pill's end cap and the bubble, the contours wind in opposite directions, and under the default (nonzero) fill rule an overlap of opposite windings counts as outside: the liquid had holes where its parts…
The fix: three paths, pillShape, neckShape and bubbleShape, drawn inside one Group whose layer carries the shadow. They are filled in one colour and shadowed once, as a single shape, and nothing cancels.

@shopify/react-native-skia@2.6.2

Confirm Button — Two-Step Delete & Hold-to-Confirm Button for React Native & Expo · Ramin Valadan · 26 Oct 2026

The tools and the machineL-4MEFAI

The first concave path, circle and round-capped stroke each stall for a WebGL program: draw them unseen at mount

What happened: in Chrome on an Intel Iris Plus laptop, the first press that armed the button took one 66 ms frame; a second round on the same page had none. With a small concave path drawn from the start, the worst frames were still 66.1 and 49.5 ms, and…
The fix: three small shapes are drawn under the opaque pill from the first frame, where no one sees them: a concave path, a circle and a round-capped arc. Three runs of the first arm then had worst frames of 17.1, 17.2 and 17.5 ms, none over 25 ms.

@shopify/react-native-skia@2.6.2

Confirm Button — Two-Step Delete & Hold-to-Confirm Button for React Native & Expo · Ramin Valadan · 26 Oct 2026

Not in the docsL-D7H0AI

React Native Skia's web canvas is Display P3 but draws the sRGB numbers it gets: saturated colours come out stronger

What happened: the danger red D7343A, (215, 52, 58), came out as (234, 20, 49) in the screenshot, while the greys were exact. A plain square filled with the literal colour did the same, so it wasn't the blending or the shadow. On the web, React Native…
The fix: on the web, Confirm Button turns its OKLab colours into linear sRGB, converts them with the linear sRGB to linear Display P3 matrix, and encodes the result; the same sample then read (215, 52, 58). Goal Ring and Gooey Tab Bar later got a…

@shopify/react-native-skia@2.6.2

Confirm Button — Two-Step Delete & Hold-to-Confirm Button for React Native & Expo · Ramin Valadan · 26 Oct 2026

Not in the docsL-QKV5AI

On the web, React Native Skia's canvas ignores pointerEvents none: a canvas past its box takes clicks beside it

What happened: in the transfer demo, the canvas's margin covered the switch that makes the next send fail. A click on the switch did nothing, and document.elementFromPoint at that spot returned the <canvas.
The fix: the canvas sits inside a View with pointerEvents="none", which React Native Web does pass to the page. The click then toggled the switch, and elementFromPoint returned its <input role="switch". Gooey Tab Bar had the same bug: its canvas's…

@shopify/react-native-skia@2.6.2
react-native-web@0.21

Confirm Button — Two-Step Delete & Hold-to-Confirm Button for React Native & Expo · Ramin Valadan · 26 Oct 2026

The tools and the machineL-6YQNAI

A 22 KB SkSL shader took 21 s to compile in Chrome on Windows: render art that never changes offline instead

What happened: in Chrome on Windows, where WebGL runs through ANGLE on Direct3D 11, the first picture took 21,228 ms and the other thirteen 13 to 34 ms each: nearly all of it was compiling the 22,108-character shader before its first use.
The fix: art that never changes is rendered once, offline. Filmstrip's art/render.mjs runs the same shader on the CPU with CanvasKit in Node (2 to 11 s a picture), and art/webp.py turns the results into WebP files of at most 120 KB. The demos ship…

@shopify/react-native-skia@2.6.2
canvaskit-wasm@0.41.0

Confirm Button — Two-Step Delete & Hold-to-Confirm Button for React Native & Expo · Ramin Valadan · 26 Oct 2026

Not in the docsL-8P7AAI

React Native Skia's MakeOffscreen makes a new WebGL context on every web call: reuse one surface

What happened: reading the package's web code before writing the camera demo showed that Skia.Surface.MakeOffscreen creates a new OffscreenCanvas, gets a WebGL context for it and makes a CanvasKit GPU context on that, every time it's called…
The fix: one surface for all nine thumbnails, one kept per size for the photos (frameSurface), and the scene's snapshot turned into a plain image with makeNonTextureImage(), which any canvas can draw.

@shopify/react-native-skia@2.6.2

Arc Picker — Curved Dial Carousel & Filter Picker for React Native & Expo · Ramin Valadan · 26 Oct 2026