Comparison
React Native apps usually combine several single-purpose packages for pickers. This page shows how one pure-JS package compares with each category, and when another tool is the better choice.
At a glanceβ
| React Native Pickers | Native OS pickersΒΉ | Calendar librariesΒ² | Select wrappersΒ³ | |
|---|---|---|---|---|
| Wheel picker (any data) | β | β iOS Β· β οΈ Android dropdown | β | β (native) |
| Time picker | β | β | β | β |
| Calendar | β | β οΈ OS dialog | β | β |
| Date range selection | β built in | β | β οΈ via manual marking | β |
| Multiple dates | β | β | β οΈ manual | β |
| Searchable select / multi-select | β | β | β | β οΈ varies |
| Emoji picker | β | β | β | β |
| Bottom sheets | β built in | β | β | β |
| Identical UI on iOS / Android / web | β | β | β | β |
| Full theming + dark mode | β tokens + slots | β οΈ limited | β | β οΈ limited |
| Native code | None | Yes | Usually none | Yes |
| Extra peer dependencies | None | β | Varies | Native picker module |
ΒΉ e.g. @react-native-community/datetimepicker, @react-native-picker/picker. Β² e.g. react-native-calendars. Β³ e.g. react-native-picker-select.
Choose React Native Pickers whenβ
- you want one consistent design across iOS, Android and web, matching your brand
- you need ranges, multiple dates, marked dates or prices in a calendar
- you need several kinds of pickers and want one API, one theme and one dependency
- you ship through Expo Go / OTA updates or want to avoid native modules
- you want sheets without pulling in Reanimated and Gesture Handler
Choose something else whenβ
- You must use the OS-native UI, for example for strict platform conformance. Use
@react-native-community/datetimepickeror@react-native-picker/picker. - You need an agenda / timeline / week calendar with events laid out by hour. That's a scheduling component, not a picker.
- You need a full-featured gesture bottom sheet (snap points, scrollable content interplay, detents) for non-picker screens. A dedicated sheet library such as
@gorhom/bottom-sheetfits that; ourBottomSheetcovers simple modal sheets.
Migratingβ
See Migration for side-by-side prop mappings from the most common packages.