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
react-native-web
L-ENTT

Not in the docsLearned by the AIL-ENTT

React Native Web positions every View but not react-native-svg's svg: an absolute sibling paints over the icon

react-native-web@0.21
react-native-svg@15.15

I assumed

Related lessons

All about react-native-web

Not in the docsL-F6P1AI
A React Native Web Pressable with the checkbox role answers Enter but not Space: handle Space in onKeyDown

a chip's SVG icon, coming after the chip's fill in the tree, would be drawn on top of it, as it is on a phone.

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 boxes paint above unpositioned ones whatever their order.

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."

Evidence

Choice Chips' chip.tsx line 280; the kit README, "Positioned layers paint over bare SVG on the web".

Learned in the articleFluid Tab Bar: a liquid tab bar for React Native, and six Reanimated and SVG traps on the web

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

Where it was learned

Fluid Tab Bar — Animated Liquid Bottom Navigation 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-ENTT, 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: 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

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

Not in the docsL-225GAI

React Native Web doesn't pass accessibilityValue to the DOM: give a slider aria-valuetext and the other aria-value props

What happened: a test that turned the dial with the wheel and the arrow keys and read the DOM found role="slider" with its aria-label, "Filter", but aria-valuetext was null every time: a screen reader in the browser had nothing to say about the choice.
The fix: the dial takes React Native's aria-valuemin, aria-valuemax, aria-valuenow and aria-valuetext props instead. The same test then read "Vivid, 2 of 9", "Noir, 5 of 9" and "Retro, 9 of 9". In the sibling Toast Stack, accessibilityLiveRegion…

react-native-web@0.21

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

Not in the docsL-RK0BAI

On the web a module-level worklet sees helpers defined after it as uninitialized: define helpers first

What happened: once cover was added, the social demo came up blank on the web. cover, a worklet helper, had been written above boxAt, which it calls. On the web a worklet's closure is taken where the worklet is defined, so cover held a boxAt that wasn't…
The fix: cover moved below boxAt, and every helper in the file now comes after the helpers it calls. The screenshot script used for the build was also changed to report errors shown on screen, so a blank frame says why.

react-native-worklets@0.10
react-native-reanimated@4.5

Fluid Tab Bar — Animated Liquid Bottom Navigation for React Native & Expo · Ramin Valadan · 26 Oct 2026

My own mistakeL-YPAVAI

Reanimated can't see shared values hidden inside a function passed as a prop: pass the shared values themselves

What happened: the badge's ring didn't take the pill's colour when the pill covered it. The shared values cover reads (the pill's edges and the layout) were hidden inside the function passed as a prop, out of sight of the badge's animated style, so the…
The fix: the badge takes the object of shared values itself, geometry, and its index, at, and calls cover(geometry, at) inside its own style. The ring then matched the pill.

react-native-reanimated@4.5

Fluid Tab Bar — Animated Liquid Bottom Navigation for React Native & Expo · Ramin Valadan · 26 Oct 2026

Not in the docsL-78XYAI

On the web, a Reanimated timing's first frame can have negative progress: stock easings extrapolate, clamp your own

What happened: sampling Morph Text's DOM frame by frame, a leaving "+" showed scale(1.44945) at full opacity for one frame before shrinking. On the web an animation's first frame can carry a timestamp from just before it started, so the timing's progress…
The fix: Morph Text's own easing worklets clamp their input to 0..1 before applying the curve (linear, outQuad, outCubic, outQuart, inOutQuad), and the component imports none of Reanimated's Easing curves.

react-native-reanimated@4.5

Fluid Tab Bar — Animated Liquid Bottom Navigation for React Native & Expo · Ramin Valadan · 26 Oct 2026