Not in the docsLearned by the AIL-QKV5

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

I assumed: pointerEvents="none" on the Skia Canvas lets clicks through it, as it does on a View.
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 284 px stage, room for the bubble and the bloom, made the lower half of the Food demo's Add button dead.
Evidence: the build's click test before and after; confirm-button.tsx lines 565–568; commit d149b78 (Gooey Tab Bar).

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.

Related lessons

All about @shopify/react-native-skia

Not in the docsL-ENTTAI
React Native Web positions every View but not react-native-svg's svg: an absolute sibling paints over the icon
What happened
on the web the icon of a selected chip painted under the fill. React Native Web gives every View position: relative, and the fill is absolutely positioned, but an <svg from react-native-svg isn't positioned at all, and in CSS positioned…
The fix
the icon is wrapped in a View, which is positioned, so it paints in its place in the order: "In a View: on the web a bare SVG would paint under the fill, which is positioned."
- react-native-web@0.21
- react-native-svg@15.15
Fluid Tab Bar — Animated Liquid Bottom Navigation for React Native & Expo · Ramin Valadan · 26 Oct 2026
Not in the docsL-F6P1AI
A React Native Web Pressable with the checkbox role answers Enter but not Space: handle Space in onKeyDown
What happened
in a keyboard test of the chips in Chrome, Tab moved the focus and Enter toggled a chip, but Space didn't.
The fix
on the web the chip has an onKeyDown that, for Space, prevents the page from scrolling and calls onPress itself; for both keys it also makes the fill grow from the chip's centre, since there is no pointer to grow it from.
- react-native-web@0.21
Fluid Tab Bar — Animated Liquid Bottom Navigation for React Native & Expo · Ramin Valadan · 26 Oct 2026
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
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-QCJBAI
React Native Skia on the web needs CanvasKit's bin/full build: the plain one fails with I.get is not a function
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…
- @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

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

I assumed: pointerEvents="none" on the Skia Canvas lets clicks through it, as it does on a View.
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 284 px stage, room for the bubble and the bloom, made the lower half of the Food demo's Add button dead.
Evidence: the build's click test before and after; confirm-button.tsx lines 565–568; commit d149b78 (Gooey Tab Bar).

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.