Recorded on 26 October 2026, unchanged since

{
  "ai": {
    "apps": [
      "Claude"
    ],
    "models": [
      "Claude Opus 5.5"
    ]
  },
  "article": "fluid-tab-bar-a-liquid-tab-bar-for-react-native-and-six-reanimated-and-svg-t",
  "author": {
    "account": "a_9d470b566acab5f65bdc",
    "handle": "ramin-valadan"
  },
  "body": "Fluid Tab Bar is a floating bottom navigation for React Native and Expo whose highlight moves like a drop of liquid: its leading edge darts to the tab you pick, its trailing edge follows, so it stretches and thins on the way and settles round on arrival. Icons it passes light up, badges pop when their count grows, and in the `expand` style the focused tab opens to show its label. It works in light and dark, with a finger and with the mouse.\n\n::preview\n\nThis article is for anyone animating layout with Reanimated 4 who wants it to run in a browser through React Native Web as well as on a phone. It explains the two springs and the layout that runs on the UI thread, then six traps: two met on Fluid Tab Bar itself and four on its siblings in the same kit (Swipe Deck, Morph Text and Choice Chips), all about Reanimated or SVG on the web.\n\n## Two edges, two springs\n\nEverything is three shared values, each a fractional tab index: `pos`, where the focus is, and `left` and `right`, the pill's two edges. When the focused tab changes, all three spring to the new index, but not with the same spring: the edge on the side of travel uses `LEAD`, the other `TRAIL`.\n\n::file{path=\"components/fluid-tab-bar/fluid-tab-bar.tsx\" lines=\"120-138\"}\n\nThe constants are a spring's physical terms (stiffness `k`, damping `c`, mass `m`), and two numbers tell how each one moves: its natural frequency `ω₀ = √(k / m)` and its damping ratio `ζ = c / (2·√(k·m))`.\n\n- `LEAD` (k 420, c 22, m 0.6): ω₀ ≈ 26.5 rad/s, ζ ≈ 0.69, quick and slightly bouncy.\n- `TRAIL` (k 150, c 24, m 0.9): ω₀ ≈ 12.9 rad/s, ζ ≈ 1.03, half as fast and critically damped, so it never overshoots.\n- `BODY` (k 240, c 20, m 0.7), for `pos`: ω₀ ≈ 18.5 rad/s, ζ ≈ 0.77.\n\nThe leading edge arrives first and the trailing one catches up, which is the stretch. With reduce motion on, all three glide with the same 180 ms timing and the pill never stretches.\n\n## A layout computed in worklets\n\nThe pill's edges are fractional indices, so turning them into points needs the tabs' layout on every frame. That layout is a handful of small worklet functions: `tabWidth` (an equal share in `pill`; in `expand`, the icon plus its label in proportion to how focused the tab is), `tabX` (where a tab starts, with the room left over spread between them), `boxAt` (the box at a fractional index, interpolated between two tabs) and `cover` (how much the pill covers a tab's icon: 1 once the icon's centre is 14 points inside both edges, 0 outside).\n\n::file{path=\"components/fluid-tab-bar/fluid-tab-bar.tsx\" lines=\"238-296\"}\n\nBecause `tabWidth` reads `pos`, the tabs in `expand` re-flow every frame as the focus moves, with no React render: the labels' widths are measured once, off screen, into a shared value.\n\n:::lesson{title=\"On the web a module-level worklet sees helpers defined after it as uninitialized: define helpers first\" kind=\"not-in-docs\" by=\"ai\" packages=\"react-native-worklets@0.10, react-native-reanimated@4.5\"}\n**I assumed:** module-level helpers could be written in any order, as plain JavaScript function declarations can, since they are hoisted.\n**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 initialized yet.\n**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.\n**Evidence:** the build log (\"Worklet helpers are closed over at definition, so `cover` must come after `boxAt`\"); commit d9a27d5; fluid-tab-bar.tsx lines 274–296; the kit README's note on writing worklet helpers at a module's top level.\n:::\n\nThe pill's own style reads those helpers. Stretched, the pill thins a little, as a drop does: its height drops by `0.09 × (width ÷ width at rest − 1)`, never by more than 14%.\n\n::file{path=\"components/fluid-tab-bar/fluid-tab-bar.tsx\" lines=\"162-170\"}\n\n## Icons and badges that change under the pill\n\nEach tab draws its icon twice, in the muted colour and in the colour on the pill, and cross-fades them by `max(weight(pos), cover)`, so an icon lights up while the pill sweeps over it on its way, not only on arrival. A badge does the same with its colours: its ring is the bar's colour on the bar and the pill's colour on the pill, so no grey ring sits on the pill, and on the pill it turns the pill's text colour with digits in the pill's colour, so it still reads. The first version of the badge took that `cover` as a function.\n\n:::lesson{title=\"Reanimated can't see shared values hidden inside a function passed as a prop: pass the shared values themselves\" kind=\"my-mistake\" by=\"ai\" packages=\"react-native-reanimated@4.5\"}\n**I assumed:** the badge could take `covered`, a worklet that returns `cover(g, at)`, and call it inside its animated style, since the function reads the right shared values.\n**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 style didn't follow them.\n**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.\n**Evidence:** the build log (\"The ring now matches the pill\"); fluid-tab-bar.tsx lines 401–407; the build notes, which record the rule.\n:::\n\n::file{path=\"components/fluid-tab-bar/fluid-tab-bar.tsx\" lines=\"401-407\"}\n\n## SVG on the web\n\nThe icons and the demos' pictures are `react-native-svg`. On the web its `<Svg>` is a real `<svg>` element in the page, which brings two things a phone never shows. Gradient ids belong to the whole page, so the travel demo, which draws several landscapes on one screen, builds each landscape's ids from its name. And layering follows CSS, which the sibling Choice Chips found out.\n\n:::lesson{title=\"React Native Web positions every View but not react-native-svg's svg: an absolute sibling paints over the icon\" kind=\"not-in-docs\" by=\"ai\" packages=\"react-native-web@0.21, react-native-svg@15.15\"}\n**I assumed:** 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.\n**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.\n**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.\"\n**Evidence:** Choice Chips' chip.tsx line 280; the kit README, \"Positioned layers paint over bare SVG on the web\".\n:::\n\n:::lesson{title=\"A React Native Web Pressable with the checkbox role answers Enter but not Space: handle Space in onKeyDown\" kind=\"not-in-docs\" by=\"ai\" packages=\"react-native-web@0.21\"}\n**I assumed:** a `Pressable` chip with `accessibilityRole=\"checkbox\"` would toggle from the keyboard like a native checkbox, with Space as well as Enter.\n**What happened:** in a keyboard test of the chips in Chrome, Tab moved the focus and Enter toggled a chip, but Space didn't.\n**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.\n**Evidence:** the build log of the keyboard test; Choice Chips' chip.tsx lines 194–203.\n:::\n\n## Two more Reanimated traps from the same kit\n\nBoth are about timings, and both showed up only when frames were sampled one by one.\n\n:::lesson{title=\"On the web, a Reanimated timing's first frame can have negative progress: stock easings extrapolate, clamp your own\" kind=\"not-in-docs\" by=\"ai\" packages=\"react-native-reanimated@4.5\"}\n**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.\n**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.)\n**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.\n**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\".\n:::\n\nSwipe Deck, a card stack, throws each card off with two timings, one per axis, and tells the deck first that a card is leaving and then that it's gone.\n\n```ts\n// Said first, so the deck hears \"leaving\" before \"gone\", whatever finishes first.\nscheduleOnRN(onStart, direction);\ndrag.value = withTiming(1, { duration });\n// It's gone when the axis it leaves along gets there (the other may not move at all).\nconst done = (finished?: boolean) => {\n  'worklet';\n  if (finished) scheduleOnRN(onGone);\n};\nx.value = withTiming(target.x, timing, direction === 'up' ? undefined : done);\ny.value = withTiming(target.y, timing, direction === 'up' ? done : undefined);\n```\n\n:::lesson{title=\"Put a fling's finish callback on the axis the card leaves along, and say it's leaving before either timing starts\" kind=\"my-mistake\" by=\"ai\" packages=\"react-native-reanimated@4.5\"}\n**I assumed:** a card is gone when its x timing finishes, so the \"gone\" callback could ride on x for every direction, with \"leaving\" announced after both timings had started.\n**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.\n**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 upward fling, and the card sprang back from where it had left.\n**Evidence:** the build log (\"Undo now works after an upward fling, and the card springs back from where it left\"); Swipe Deck's swipe-deck.tsx lines 280 and 283–292.\n:::\n\n## Checked\n\n- The kit's check, `npm run check -- fluid-tab-bar`: its rules, TypeScript, a web export of the product alone, and 421 KB of JavaScript gzipped, within the kit's 600 KB budget.\n- UpFork's own preview build of it, with its posters, and the install check in a fresh Expo app.\n- Both demos shot in Chrome as a phone (375 × 812 at 2×), in light and dark, including frames in the middle of a move, which is how the stretch, the icons that light up on the way and the badge's ring were checked.\n\n## Make it yours\n\n- `variant=\"expand\"` makes the focused tab grow to show its label; `pill` (the default) keeps the tabs equal and the pill round the icon.\n- `tint` is the pill's colour and `onTint` the focused icon's and label's colour on it.\n- `height` (64) sets the bar, and the pill and icons follow.\n- A tab's `icon` is any component that takes `color`, `size` and `focused`; `TabIcons` has nine to start with. `badge` is a count (99+ past 99) or `true` for a dot.\n- For a different feel, change `LEAD` and `TRAIL`: the bigger the gap between their natural frequencies, the longer the stretch.\n\n::install",
  "bodySha256": "57029382a7507b472df1785130ca031229c4fd111134814ce8b9f4ccef4f3475",
  "kind": "behind-the-build",
  "product": "fluid-tab-bar-react-native",
  "productRevision": 1,
  "publishedAt": "2026-10-26T13:26:36.863Z",
  "revision": 1,
  "site": "https://upfork.dev",
  "summary": "How Fluid Tab Bar stretches a pill between tabs with two springs and a layout computed in worklets, and six traps of Reanimated and SVG on the web.",
  "title": "Fluid Tab Bar: a liquid tab bar for React Native, and six Reanimated and SVG traps on the web",
  "type": "article-version",
  "url": "https://upfork.dev/articles/fluid-tab-bar-a-liquid-tab-bar-for-react-native-and-six-reanimated-and-svg-t"
}