Recorded on 26 October 2026, unchanged since

{
  "ai": {
    "apps": [
      "Claude"
    ],
    "models": [
      "Claude Opus 5.5"
    ]
  },
  "article": "arc-picker-a-curved-dial-for-react-native-and-expo-and-eight-traps-on-the-we",
  "author": {
    "account": "a_9d470b566acab5f65bdc",
    "handle": "ramin-valadan"
  },
  "body": "Arc Picker is a curved dial carousel for React Native and Expo. Its items ride a true circle, like the lens dial of a camera app, and the one under the fixed ring is the choice. It turns with a finger, a mouse drag or the mouse wheel, has momentum and detents, lands exactly under the ring, and reports a fractional index every frame so the screen above can blend between neighbours.\n\n::preview\n\nThis article is for anyone building a gesture-driven control with Reanimated 4 and Gesture Handler that has to work on phones and in a browser, through React Native Web. It explains how the dial places its items and turns, then the eight traps it met on the web while it was built, each with its fix. Several of them also hit its siblings in the same kit (Slide to Confirm, Clockface, Ambient Carousel), so they aren't one component's quirks.\n\n## One shared value, one circle\n\nThe whole dial is one Reanimated shared value, `p`: a fractional place. `p = 2` puts item 2 under the ring; `p = 2.5` is halfway to item 3. Every item's position, scale, fade and stacking order are derived from `p` on the UI thread, in worklets, so React renders only when the chosen item changes (and, for lists of more than 40 items, when the window of items mounted round the ring moves).\n\nAn item `d` places from the ring sits a distance `s` along the arc, and the arc is part of a circle of radius `r`:\n\n- `s = d · step + clamp(d, −1, 1) · push`, where `step` is the item size plus the gap, and `push` is extra room either side of the ring, so the chosen item can grow 1.28× into it without touching its neighbours;\n- `θ = s / r`, the item's angle on the circle, in radians;\n- `x = cx + dir · r · sin θ` and `y = apexY + sign · r · (1 − cos θ)`, where `dir` flips for right-to-left layouts and `sign` flips between a bottom arc (the ends fall away) and a top one (they rise).\n\n::file{path=\"components/arc-picker/geometry.ts\" lines=\"29-52\"}\n\n`placesAt` is the inverse of the first line, and the drag uses it: a pointer that has moved `s` points along the arc has turned the dial `placesAt(s)` places. The radius defaults to 1.6 × the dial's width, a shallow curve. Past the `span` (110° by default) or the screen's edge, items shrink and fade out instead of popping.\n\n## One pan for drag, fling and tap\n\nA single `Gesture.Pan` does everything. `onBegin` stops a spinning dial, like a hand on a wheel; `onUpdate` turns it; `onEnd` throws it; and `onFinalize` after a pan that never activated (it didn't move 6 points) is a tap, sent to whichever visible item is nearest the touch.\n\n::file{path=\"components/arc-picker/arc-picker.tsx\" lines=\"380-428\"}\n\nThe throw follows a decelerating wheel. The release speed is converted to places a second, `v`. With `withDecay`'s deceleration of 0.995, the dial would travel `v × 0.995 / (1 − 0.995) / 1000` places before it stopped (`DECAY_TRAVEL`), so the target is that point rounded to the nearest item, and a spring that starts at the same velocity carries the dial there. A hard fling crosses many items, a gentle one exactly one, and a flick faster than 1.2 places a second always moves at least one. Without `loop`, a drag past either end is damped to 35% (a rubber band) and springs back.\n\nThree of the eight traps live in those lines.\n\n:::lesson{title=\"Gesture Handler on the web counts translationX from activation: measure from absoluteX kept in onBegin\" kind=\"not-in-docs\" by=\"ai\" packages=\"react-native-gesture-handler@2.32\"}\n**I assumed:** a pan's `translationX` is how far the pointer has moved since it went down.\n**What happened:** on the web it counts from where the pan *activated*, after the pointer had already crossed the activation distance, so a quick mouse move lost its first jump and the dragged thumb stopped short of the pointer. It was found on Slide to Confirm, one of the kit's two original samples.\n**The fix:** keep `event.absoluteX` from `onBegin` and measure every update from it. Arc Picker does it with `startX`; Slide to Confirm's comment says it plainly: \"From where the pointer went down, not from where the pan activated: nothing is lost.\"\n**Evidence:** arc-picker.tsx lines 389 and 403; slide-to-confirm.tsx line 213; the kit README, \"A drag from pointer-down, not from activation\".\n:::\n\n:::lesson{title=\"On the web, Gesture Handler's release velocity lingers after the pointer stops: treat a late release as still\" kind=\"not-in-docs\" by=\"ai\" packages=\"react-native-gesture-handler@2.32\"}\n**I assumed:** `velocityX` at `onEnd` is the pointer's speed as it lets go, so a drag that stops and then lets go has none.\n**What happened:** on the web, Gesture Handler reports the last movement's velocity at release even after the pointer has stood still, so a drag that stopped on an item and let go a moment later still flung the dial onward.\n**The fix:** `onUpdate` notes the time of the last real move (`lastMove`), and a release more than 80 ms after it counts as a velocity of 0: the dial springs onto the nearest item and stays there.\n**Evidence:** commit 91ea4a9; arc-picker.tsx lines 411–414; the kit README, \"A pointer that rests keeps its speed\".\n:::\n\n:::lesson{title=\"Gesture Handler's velocityX can be 0 at the end of a quick web flick: measure the speed from your own samples\" kind=\"not-in-docs\" by=\"ai\" packages=\"react-native-gesture-handler@2.32\"}\n**I assumed:** with the resting case handled, `velocityX` could be trusted for a real flick.\n**What happened:** in the sibling Ambient Carousel, a quick mouse flick moved only two covers. Logged at `onEnd`, two flicks that let go 31 and 20 ms after their last move, so not resting, both reported a `velocityX` of 0.\n**The fix:** the pan keeps its last positions with their times, and when `velocityX` is 1 or less (either way) the speed is measured from them, from the newest sample back to the oldest one within 100 ms of it (`trackedSpeed`). The same commit gave it to Arc Picker and Clockface.\n**Evidence:** commit 84f8595; the build's log lines `[kit] end 0 false 31` and `[kit] end 0 false 20`; arc-picker.tsx lines 143–157 and 413.\n:::\n\n::file{path=\"components/arc-picker/arc-picker.tsx\" lines=\"143-157\"}\n\nTesting any of this needed real input, which was a trap of its own.\n\n:::lesson{title=\"Synthetic PointerEvents can't drive Gesture Handler on the web: setPointerCapture throws without a real pointer\" kind=\"tools\" by=\"ai\" packages=\"react-native-gesture-handler@2.32\"}\n**I assumed:** dispatching `PointerEvent`s from a script would be enough to test drags in the browser.\n**What happened:** Gesture Handler calls `setPointerCapture`, and with no real pointer behind the events Chrome threw: \"Uncaught NotFoundError: Failed to execute 'setPointerCapture' on 'Element': No active pointer with the given id is found.\"\n**The fix:** every drag, flick and wheel test drives the installed Chrome with Puppeteer's own mouse, which goes through the DevTools protocol's input and reaches the page as a real pointer. Touch is left to a real phone.\n**Evidence:** the console output in the kit's first build session; the kit README, \"Real input only\".\n:::\n\n## The ring is the shutter, but the dial owns every touch\n\nIn the camera demo the ring is the shutter. The first version put a `Pressable` inside the ring, over the dial's `GestureDetector`.\n\n:::lesson{title=\"A Pressable over a GestureDetector takes the touches that start on it: a drag from there never reaches the pan\" kind=\"my-mistake\" by=\"ai\" packages=\"react-native-gesture-handler@2.32\"}\n**I assumed:** a shutter button inside the ring and the pan under it could share the spot: a tap would press the button and a drag would turn the dial.\n**What happened:** taps worked, but a drag that started on the ring didn't turn the dial. With the pan's callbacks logged, a scripted drag from the middle of the ring printed none of them: the `Pressable` had taken the touch.\n**The fix:** the gesture owns the whole area. `renderCenter` only draws (its `View` has `pointerEvents=\"none\"`); a still touch on the item under the ring calls `onPressSelected`; and a `pressed` shared value, set in `onBegin` when the touch lands inside the ring and cleared in `onStart` once it becomes a drag, gives the shutter its press feedback.\n**Evidence:** commit 91ea4a9; `renderCenter`'s doc comment, \"The dial keeps every touch (so a drag can start on the ring)\"; arc-picker.tsx lines 384–397 and 587–598.\n:::\n\n::file{path=\"components/arc-picker/arc-picker.tsx\" lines=\"587-598\"}\n\n## Drawing the camera scene once\n\nThe camera demo's viewfinder is a lakeside sunset drawn by a Skia runtime shader. Running that shader every frame would be wasted work, since only the filter changes as the dial turns. So the scene is drawn once, into an image. The viewfinder draws that image through a colour matrix (20 numbers) blended between the two filters on either side of `progress`, and the nine thumbnails are the scene's crop through each filter, rendered once to JPEG data URIs.\n\n::file{path=\"lib/camera-scene.ts\" lines=\"175-228\"}\n\n:::lesson{title=\"React Native Skia's MakeOffscreen makes a new WebGL context on every web call: reuse one surface\" kind=\"not-in-docs\" by=\"ai\" packages=\"@shopify/react-native-skia@2.6.2\"}\n**I assumed:** an offscreen surface is a cheap bitmap that a render can make whenever it needs one: for the scene, for each thumbnail, for every photo the shutter takes.\n**What happened:** reading the package's web code before writing the camera demo showed that `Skia.Surface.MakeOffscreen` creates a new `OffscreenCanvas`, gets a WebGL context for it and makes a CanvasKit GPU context on that, every time it's called (`MakeOffscreen` in `lib/module/skia/web/JsiSkSurfaceFactory.js`), and that a snapshot of the surface is tied to that context.\n**The fix:** one surface for all nine thumbnails, one kept per size for the photos (`frameSurface`), and the scene's snapshot turned into a plain image with `makeNonTextureImage()`, which any canvas can draw.\n**Evidence:** the package source, read during the build; camera-scene.ts lines 175–228; the kit README, \"Drawing once, offscreen\".\n:::\n\n## Haptics and screen readers on the web\n\nThe dial ticks as each item passes the ring (no closer than 45 ms apart, so a fast spin doesn't buzz) and gives a firmer tick when it settles. It is also an adjustable control for screen readers: \"Filter, Vivid, 2 of 9\", with increment and decrement actions, and the arrow keys and the wheel on the web. Both needed a change for the browser.\n\n:::lesson{title=\"expo-haptics on the web calls navigator.vibrate, which Chrome blocks with a console error until the first tap\" kind=\"tools\" by=\"ai\" packages=\"expo-haptics@57.0\"}\n**I assumed:** haptics on the web would at worst do nothing, so the dial could tick on every platform.\n**What happened:** turning the dial with the mouse wheel and the arrow keys, before any click on the page, logged this console error: \"Blocked call to navigator.vibrate because user hasn't tapped on the frame or any embedded frame yet\".\n**The fix:** `CAN_BUZZ = Platform.OS !== 'web'`, so the ticks run on phones only. Desktops can't vibrate anyway.\n**Evidence:** the console errors from the build's wheel and keyboard test; arc-picker.tsx lines 139–140.\n:::\n\n::file{path=\"components/arc-picker/arc-picker.tsx\" lines=\"520-531\"}\n\n:::lesson{title=\"React Native Web doesn't pass accessibilityValue to the DOM: give a slider aria-valuetext and the other aria-value props\" kind=\"not-in-docs\" by=\"ai\" packages=\"react-native-web@0.21\"}\n**I assumed:** `accessibilityValue` with a `text` would reach the browser as the slider's `aria-valuetext`, the way `accessibilityRole=\"adjustable\"` reached it as `role=\"slider\"`.\n**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.\n**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` became `aria-live` for the same reason.\n**Evidence:** the test's output before and after the change; arc-picker.tsx lines 525–530.\n:::\n\n## Checked\n\n- Frame pacing while each demo's dial was turned with the mouse, in a production web build in Chrome on an Intel Iris Plus laptop (ANGLE on Direct3D 11), two rounds per demo: 60 fps in all three demos, a median frame of 16.6–16.7 ms, a 95th percentile of 16.9–17.1 ms, the longest frame 17.3 ms, none over 25 ms.\n- One wheel notch moves one item, the arrow keys step it, and the slider's value text follows: \"Warm, 3 of 9\", then \"Vivid, 2 of 9\" after one ArrowLeft.\n- The kit's own check, `npm run check -- arc-picker`: its rules, TypeScript, a web export of the product alone, and its size against the kit's budget of 600 KB of JavaScript gzipped.\n\n## Make it yours\n\n- `itemSize` (64) and `spacing` (14) set the step along the arc; the ring is 1.25× the item.\n- `radius` (1.6 × the width) and `span` (110°) set the curve: a smaller radius bends harder.\n- `position=\"top\"` makes a rising arc (the avatar demo's backdrops), and `orientation=\"tangent\"` turns the items along it.\n- `loop` turns without end, from the last item back to the first (six items or more).\n- `progress`: pass a shared value and blend anything with it on the UI thread. `lib/oklab.ts` mixes colours in OKLab, so a turn from teal to coral doesn't pass through grey.\n- `renderCenter` with `onPressSelected` makes the ring a button without giving up the drag.\n- `haptics={false}` turns the ticks off on phones too.\n\n::install",
  "bodySha256": "e96368c10c5628370d1192791a2826fefec79b2abf934c688dbc2106875b8a47",
  "kind": "behind-the-build",
  "product": "arc-picker-react-native",
  "productRevision": 1,
  "publishedAt": "2026-10-26T13:10:04.528Z",
  "revision": 1,
  "site": "https://upfork.dev",
  "summary": "How Arc Picker puts items on a true circle from one Reanimated shared value and one pan, and eight web traps in Gesture Handler, Skia, haptics and ARIA.",
  "title": "Arc Picker: a curved dial for React Native and Expo, and eight traps on the web",
  "type": "article-version",
  "url": "https://upfork.dev/articles/arc-picker-a-curved-dial-for-react-native-and-expo-and-eight-traps-on-the-we"
}