- A new React Native drum picker built from scratch is the first to fully support the New Architecture Fabric renderer.
- The React Native drum picker uses native Kotlin and Swift under the hood, not JavaScript scroll simulation.
- Eight CI jobs run on every pull request, including Espresso and XCTest suites on real emulators.
- Virtualization support lets the picker handle lists of 10,000-plus items without a performance hit.
The React Native Drum Picker Problem Nobody Talks About
Every serious React Native project eventually hits the same wall. You need a React Native drum picker — that satisfying, cylindrical scroll selector that iOS users have felt thousands of times on native apps — and the existing options are either abandoned, architecturally outdated, or quietly faking it. Umar, a developer based in Tashkent, hit that wall building a production app, worked through every available library, and decided none of them were good enough. The result is react-native-drum-picker, an open-source React Native drum picker library that makes a fairly bold claim: it’s the most feature-complete wheel picker in the React Native ecosystem, and the only one with full New Architecture support.
That’s a big statement. But the technical case behind it is harder to dismiss than most library launch posts.
Why JavaScript-Only Pickers Fall Short
The dominant approach in existing React Native drum picker libraries is to wrap a standard ScrollView and simulate snap behavior in JavaScript. It works — sort of. Libraries like @quidone/react-native-wheel-picker have shipped this way and accumulated real adoption. But Umar’s argument is that no amount of JavaScript physics can fully replicate what the platform gives you for free.
On Android, the native drum picker is a RecyclerView paired with a LinearSnapHelper. On iOS, it’s UIPickerView. These aren’t just UI patterns — they’re components that have been refined over years, optimized at the OS level, and tuned to match the exact momentum curves users expect. When you scroll a date picker on a native iOS app, the deceleration, the micro-snap at the end, the haptic alignment — all of that comes from UIPickerView, not from a developer trying to approximate it in a ScrollView’s onScroll handler.
The gap is subtle on a good day and jarring on a bad one. Any React Native drum picker that relies purely on JavaScript scroll simulation will exhibit this gap. Umar chose to skip the approximation entirely.
What Makes This React Native Drum Picker Different
React-native-drum-picker is built with native Kotlin on Android using RecyclerView and LinearSnapHelper, and native Swift on iOS using UIPickerView. Critically, it’s wired to React Native’s New Architecture via Fabric — the new rendering system that Meta has been pushing the ecosystem toward since React Native 0.71. Most existing picker libraries haven’t made this transition. Many of them haven’t been meaningfully updated in years.
The feature list is where things get genuinely interesting, though. This React Native drum picker isn’t just a basic component with better scroll physics. The library ships with:
- DateDrumPicker and TimeDrumPicker — pre-built date and time pickers with configurable min/max ranges and multiple display modes, including day-month-year ordering
- Custom item rendering — pass a renderItem function and you can display anything inside each picker cell, including emoji flags, icons, or styled text that reacts to selection state
- Picker groups — coordinate multiple pickers together using the usePickerGroup hook, so when a user changes the month column in a date picker, the days column updates automatically
- Imperative scrolling via refs — programmatically scroll to a specific date or index with animated or instant transitions, useful for “Jump to today” buttons
- Virtualization — a withVirtualized higher-order component wraps the React Native drum picker for lists that would otherwise be impractical, with a configurable windowSize for rendering only nearby items
- Circular/infinite scroll — minutes that wrap from 59 back to 00, hours that loop continuously, the kind of behavior a clock picker demands
- Dual change events — onValueChanging fires on every tick while the user is scrolling; onChange fires once after the picker settles. This matters for live preview UIs where you want to update a display in real time without committing the value
- Full TypeScript generics — DrumPicker typed to your data model means onChange events carry the correct type, not a generic any
Production-Grade CI for an Open Source Library
One of the more impressive aspects of this project isn’t the feature set — it’s the engineering discipline behind the release process. Umar has set up eight CI jobs that run on every pull request: linting, typechecking, Jest unit tests (90-plus test cases), Android build, iOS build, Android instrumented tests via Espresso on a real emulator, iOS XCTest via pod lib lint, and full Detox end-to-end tests on both iOS and Android simulators.
Branch protection is enforced, meaning nothing merges to main without all eight checks passing. Releases are automated through release-please — merge a conventional commit prefixed with feat: and a release pull request appears automatically. Merge that and npm publishes without manual intervention.
This is a higher bar than many commercial React Native component libraries clear, let alone open-source weekend projects. It signals that react-native-drum-picker is built to be maintained, not just launched.
New Architecture Support Is the Real Story Here
The React Native ecosystem is in the middle of an awkward transition. Meta’s New Architecture — which includes Fabric for UI rendering and JSI for native module bridging — has been available for production use since React Native 0.71, and it’s the default from 0.73 onward. But the library ecosystem hasn’t caught up. A huge portion of commonly used React Native packages still run on the old bridge, and many maintainers haven’t found the time or motivation to migrate.
For a React Native drum picker specifically, this creates a real problem. If you’re starting a new project today with New Architecture enabled — which Meta strongly recommends — your picker options are limited. The most popular alternatives either don’t support Fabric at all or haven’t been tested against it. Umar’s React Native drum picker requires React Native 0.73 or higher with New Architecture enabled. That’s not a soft recommendation — it’s a hard requirement, which also means it’s been properly architected around Fabric from the ground up rather than bolted on afterward.
As the ecosystem completes its migration over the next year or two, libraries that were built native-first for the New Architecture will have a significant advantage. The ones still running on the legacy bridge will accumulate technical debt that gets harder to pay down with each React Native release.
Getting Started
Installation is standard: npm install react-native-drum-picker or yarn add react-native-drum-picker. The library exports DrumPicker, DateDrumPicker, TimeDrumPicker, the withVirtualized HOC, and the usePickerGroup family of hooks. TypeScript types and refs ship alongside the components.
The React Native drum picker package is live on npm as react-native-drum-picker and the source is public under the handle scrollDynasty on GitHub. For teams building anything that involves date selection, time input, or list-based scroll pickers in React Native — especially on the New Architecture — it’s worth evaluating seriously before defaulting to a library that hasn’t seen a commit in eighteen months.
The bigger picture here is that the React Native library ecosystem is quietly bifurcating: libraries built for the old bridge on one side, and a new generation of Fabric-native components on the other. Pickers, modals, gesture handlers, navigation — the foundational UI layer of mobile apps is being rebuilt. React-native-drum-picker is an early, well-engineered entry in that second wave, and the architectural decisions Umar made building it are the kind that tend to age well.
