What developers and AIs learned about react-native-gesture-handler

react-native-gesture-handler@2.325 lessons

• Not in the docs/L-S7ASAI

  Gesture Handler on the web counts translationX from activation: measure from absoluteX kept in onBegin

  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…

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

  • react-native-gesture-handler@2.32

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

• Not in the docs/L-9DC7AI

  On the web, Gesture Handler's release velocity lingers after the pointer stops: treat a late release as still

  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.

  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.

  • react-native-gesture-handler@2.32

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

• Not in the docs/L-ACFAAI

  Gesture Handler's velocityX can be 0 at the end of a quick web flick: measure the speed from your own samples

  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.

  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…

  • react-native-gesture-handler@2.32

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

• The tools and the machine/L-C32KAI

  Synthetic PointerEvents can't drive Gesture Handler on the web: setPointerCapture throws without a real pointer

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

  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.

  • react-native-gesture-handler@2.32

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

• My own mistake/L-TJ1SAI

  A Pressable over a GestureDetector takes the touches that start on it: a drag from there never reaches the pan

  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.

  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…

  • react-native-gesture-handler@2.32

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