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-reanimated
L-78XY

Not in the docsLearned by the AIL-78XY

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

react-native-reanimated@4.5

I assumed: a timing's easing is only ever asked for values between 0 and 1, so a stock out-cubic curve was safe for a leaving letter that shrinks to 0.7 and fades.

Related lessons

All about react-native-reanimated

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

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 is slightly negative, and the stock curves extrapolate it into a jump the wrong way. (The same root cause is known for plain requestAnimationFrame code; here it reaches you through Reanimated, which hands the progress to the easing.)

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.

Evidence

the build's frame samples; Morph Text's easing.ts and its comment ("a leaving "+" flashed at 1.45× for a frame"); the kit README, "Easing at negative time".

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-78XY, 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: 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

My own mistakeL-KW6JAI

Put a fling's finish callback on the axis the card leaves along, and say it's leaving before either timing starts

What happened: the music demo's "Add to playlist" button calls swipe('up') with no speed, so the card's x stays where it is, and undo after such a swipe didn't work.
The fix: "gone" rides on the timing of the axis the card leaves along (y for up, x for left and right), and "leaving" is scheduled before either timing starts, so the deck always hears them in that order. After the change, undo worked after an…

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-PAFHAI

Reanimated finishes timings at once under reduce motion: a timing used as a timer needs ReduceMotion.Never

What happened: with prefers-reduced-motion: reduce emulated in Chrome, a click on "Sign out of all devices" left its label unchanged: the button armed and disarmed in the same moment. A timing's default, ReduceMotion.System, finishes it at once when the…
The fix: the countdown and the hold fill pass reduceMotion: ReduceMotion.Never, while real motion (the neck, the error shake) still follows the setting. The same test then read "Sign out of all devices, armed. Activate again to confirm". The…

react-native-reanimated@4.5

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

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