Mastering the Ant Design Mobile Picker: API, Gestures, Performance & Accessibility

API Design

We start by defining the essential Picker properties: value, onConfirm, and columns. The columns prop is a two‑dimensional array where the first level represents each wheel and the second level contains the options for that wheel. The component is built on top of a Popup container, with header buttons, a wheel list rendered from columns, and a gradient mask that highlights the currently selected item.

Gestures & Animation

The Picker supports two interaction modes: direct tap and drag. Drag handling is implemented with the use-gesture library’s useDrag hook, which tracks the pointer’s x/y movement and updates a translateY value in real time. When the drag ends, the slider should spring back to its original position. While a simple CSS transition can animate this return, it cannot be applied during active dragging, so we conditionally add a grabbing class to disable the transition while dragging.

For more precise control we switch to a JavaScript‑based animation using react-spring. A spring is created with useSpring (initial y = 0) and bound to an animated.div. The drag handler updates the spring’s y value directly while dragging and resets it to 0 on release, preserving the current velocity and avoiding abrupt jumps.

Performance

Using React DevTools Profiler we discovered that every wheel re‑renders when any wheel is dragged, causing frame drops. The solution is to memoize the Wheel component and provide a custom prop‑comparison function, ensuring only the wheel whose data changed re‑renders. After this optimization, profiling shows a dramatic reduction in renders and no more dropped frames.

Accessibility

To make the Picker usable for screen‑reader users, the visual wheel is hidden from assistive technologies and a transparent overlay is added. This overlay displays the currently selected option as text and provides two invisible buttons for “previous” and “next” actions. The overlay is fully transparent but remains focusable, allowing blind users to navigate the Picker with a screen reader.

Finally, the talk thanks the Ant Design Mobile community: over six months the project received 325 pull requests, 460 commits, and 416 issues from 50 contributors, illustrating the power of open‑source collaboration.