One package. One API. Every picker.
Built for real apps
No native modules to link, no marking logic to write, and the same behavior on iOS, Android and the web.
Why this library →Zero native code
Pure JavaScript. Runs in Expo Go, bare React Native and React Native Web with no pod install or rebuild.
Themeable to the pixel
Design tokens, automatic dark mode, a typed style slot for every part, and render props when you need full control.
Ranges, built in
Single, range and multiple date selection with min/max nights, disabled days, prices and dots, all with no marking logic to write.
Any locale, RTL
Month, weekday and AM/PM names, the 12/24h clock, week start and date order all come from Intl. Layouts mirror for RTL.
Accessible
Adjustable wheels for VoiceOver and TalkBack, fully labelled days, and selected and disabled states everywhere.
Fast
Native-driver animations, virtualized fixed-layout lists and memoized rows keep it at 60 fps.
Play with the pickers
Switch pickers on the phone, try a few of their props, and copy the code it writes for you.
import { DatePicker } from '@elik56a/react-native-pickers';
<DatePicker
mode="range"
value={range}
onChange={setRange}
minDate={new Date()}
markedDates={prices}
/>
Feels native. Isn't.
The same value / onChange API everywhere, typed down to the selection mode. Sheets keep a draft and commit on Done, just like the system pickers, but they match your design on every platform.
- Controlled or uncontrolled
- Light and dark themes that follow the OS
- No Reanimated, Gesture Handler or SVG
- Full TypeScript types
import { DatePicker, DatePickerSheet } from '@elik56a/react-native-pickers';
// inline calendar
<DatePicker value={date} onChange={setDate} minDate={new Date()} />
// range in a bottom sheet: commits on Done
<DatePickerSheet
visible={open}
onClose={() => setOpen(false)}
mode="range"
value={range}
onConfirm={setRange}
/>
How it compares to other React Native pickers
Most apps combine a native date picker, a calendar library and a select wrapper. Here is what one package covers instead.
| React Native Pickersthis library | Native OS pickers@react-native-community/datetimepicker, @react-native-picker/picker | Calendar librariesreact-native-calendars | Select wrappersreact-native-picker-select | |
|---|---|---|---|---|
| Wheel, time and date pickers | Yes | OS styling (Yes) | Calendar only (Partly) | No |
| Date ranges and multiple dates | Built in (Yes) | No | Manual marking (Partly) | No |
| Searchable select and multi-select | Yes | No | No | Varies (Partly) |
| Emoji picker | Yes | No | No | No |
| Bottom sheets | Built in (Yes) | No | No | No |
| Same UI on iOS, Android and web | Yes | No | Yes | No |
| Theming and dark mode | Tokens + slots (Yes) | Limited (Partly) | Yes | Limited (Partly) |
| No native code | Yes | No | Usually (Yes) | No |
React Native picker FAQ
Does it work in Expo Go?
Yes. There is no native code, so it runs in Expo Go, dev builds, bare React Native and the web without a rebuild or a pod install.
Does it need Reanimated or Gesture Handler?
No. It uses only React Native core: Animated with the native driver, PanResponder, FlatList and Modal. Nothing to install next to it.
Does it work with React Native Web?
Yes, with the same components and props. On wide browser windows, sheets open as a centered modal and SelectPicker opens as a dropdown under the field.
Can users pick a date range or several dates?
Yes. Set mode="range" for check-in / check-out with min and max nights, or mode="multiple" for separate days. See Date range & multiple.
Is it accessible?
Wheels are adjustable for VoiceOver and TalkBack, days announce their full date, and selected and disabled states are exposed everywhere. See Accessibility.
How big is it?
It has no dependencies. The emoji table, about 134 KB of source, is the largest part, and on the web it is tree-shaken away if you never import EmojiPicker.
Docs your AI can read, too
The whole API is available as llms.txt and llms-full.txt. Drop it into Cursor, Claude or Copilot and get correct code on the first try.