One package. One API. Every picker.
Built for real apps
No native modules to link, no marking logic to write, and a native look on iOS, Android and the web.
Why this library →Native on every platform
iOS on iPhone, Material Design on Android, a web design in the browser, from one code path. Want one look everywhere? Set design="ios".
Zero native code
Pure JavaScript. Runs in Expo Go, bare React Native and React Native Web with no pod install or rebuild.
Yours to customize
Design tokens, automatic dark mode, a typed style slot for every part, and render props when you need full control. Your settings always win over the design.
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.
Search anything
Searchable selects and multi-selects, or search your server as the user types, with a loader, debounce and paging.
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, arrow keys on the web, 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.
Tap a field on the phone to see its code.
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, in each platform's design and your brand's colors.
- Controlled or uncontrolled
- iOS, Material and web designs
- 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 | Local or server (Yes) | No | No | Varies (Partly) |
| Emoji picker | Yes | No | No | No |
| Bottom sheets | Built in (Yes) | No | No | No |
| Native look on iOS, Android and web | Or one look everywhere (Yes) | Yes | No | No web (Partly) |
| Theming and dark mode | Tokens + slots (Yes) | Limited (Partly) | Yes | Limited (Partly) |
| Zero 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 look native on iOS and Android?
Yes. Each platform gets its own design: iOS on iOS, Material Design on Android and a web design in the browser. For one look everywhere, set design="ios" on PickersProvider. See Designs.
Can I customize the look?
Fully. Colors, radius, spacing and fonts are theme tokens with light and dark variants, every part takes a style through styles, and render props replace rows, days and triggers. Your settings always win over the design. See Theming.
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, in a web design. Fields and SelectPicker open a dropdown under the field, and sheets open as a centered modal on wide windows.
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. On the web, arrow keys move through calendars, lists and grids and step wheels and sliders. 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.