Not in the docsLearned by the AIL-PAFH

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

react-native-reanimated@4.5

I assumed: reduce motion would only calm the motion; the countdown that disarms the button would still take its four seconds.
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 system asks for reduced motion, so the countdown's callback ran straight away. Reanimated says so in a development warning: "Reduced motion setting is enabled on this device… Some animations will be disabled by default."
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 sibling Toast Stack had the same bug in each toast's life: measured with reduced motion on, a 4 s toast lasted 117 ms before the fix and 4.08 s after.
Evidence: the reduced-motion test's output before and after; use-confirm.ts line 88; confirm-button.tsx lines 456–457; commit 03257ac (Toast Stack).

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

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

I assumed: reduce motion would only calm the motion; the countdown that disarms the button would still take its four seconds.
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 system asks for reduced motion, so the countdown's callback ran straight away. Reanimated says so in a development warning: "Reduced motion setting is enabled on this device… Some animations will be disabled by default."
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 sibling Toast Stack had the same bug in each toast's life: measured with reduced motion on, a 4 s toast lasted 117 ms before the fix and 4.08 s after.
Evidence: the reduced-motion test's output before and after; use-confirm.ts line 88; confirm-button.tsx lines 456–457; commit 03257ac (Toast Stack).

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.