Skip to main content
Version: v0.23.1

React Native Pickers

One dependency-free package for every picker a React Native app needs — wheel, time, duration, date (calendar, range, multiple, wheel), month, week strip, date & time, select / dropdown, segmented control and chips, emoji, color, the bottom sheets to put them in, and the form fields that open them. Each one looks native on iOS, Android and the web, and every detail is yours to customize.

React Native date range picker, time picker, emoji picker, select picker and date-time pickerReact Native date range picker, time picker, emoji picker, select picker and date-time picker 
npm install @elik56a/react-native-pickers

It is 100% JavaScript with zero native code, so it runs unchanged in Expo Go, bare React Native and React Native Web. There's no pod install, no rebuild and no config plugin.

Loading…
<DatePicker value={date} onChange={setDate} minDate={new Date()} />
Every example on this site is live

Edit the code and the result updates instantly. Each example is a complete file you can copy into your app as-is, imports included.

What's included​

ComponentWhat it is
WheelPicker3D scrolling wheel with infinite loop, disabled items, tap-to-type, custom rows
MultiWheelPickerSeveral wheels sharing one selection band (durations, units, anything multi-column)
TimePickerWheels, a Material clock dial or columns to click; 12h / 24h from locale, minute & second steps, min / max time
DatePickerCalendar with single, range and multiple selection, or a day/month/year wheel
MonthPickerA month and year, like a card's expiry: wheels on iOS, a grid of months in Material and on the web
WeekStripOne week of days in a row, with marked days; swipe or arrows to change weeks
DurationPickerA length of time, like a timer or a workout: wheels, Material number boxes or columns to click, the value in seconds
DateTimePickerDay and time together: one row of wheels, or a calendar with the time under or beside it
SelectPickerForm field that opens a searchable bottom sheet, modal or dropdown; single or multi-select with chips, groups, icons; search a server with loadOptions
SelectListThe same list, inline
CountryPickerAbout 250 countries with flags and dialing codes, localized names, preferred countries on top
PhoneFieldPhone number input: a country code button, the number formatted as it's typed, an E.164 value
TimeZonePickerEvery IANA time zone with its GMT offset, sorted by offset, the device's zone on top
HorizontalListSegmented control or chips that scroll sideways and reveal the next item
EmojiPicker1,923 emojis, categories, search, skin tones, recents, version filtering
ColorPickeriOS's Grid / Spectrum / Sliders, Google's swatch circles, or the browser's spectrum; hex with opacity and a copy button
BottomSheetAnimated sheet with drag-to-dismiss, for your own content
DatePickerSheet, TimePickerSheet, DateTimePickerSheet, DurationPickerSheet, MonthPickerSheet, ColorPickerSheet, WheelPickerSheet, EmojiPickerSheetReady-made pickers in a sheet with Cancel / Done and draft state
DatePickerField, TimePickerField, DateTimePickerField, DurationPickerField, MonthPickerField, ColorPickerField, WheelPickerField, EmojiPickerField, PickerFieldForm fields that open a picker sheet and show the picked value, styled like SelectPicker

Why this library​

  • No native code. Works in Expo Go and on the web with nothing to link, and ships in OTA updates.
  • Native on every platform. iOS on iPhone, Material Design on Android, a web design in the browser, all from one code path. Prefer one look everywhere? <PickersProvider design="ios"> and the iOS design runs on Android and the web too.
  • One consistent API. Every picker takes value + onChange (controlled) or defaultValue (uncontrolled), a theme, a styles object for each visual part, and render props for full control.
  • Yours to customize. Light and dark themes are built in and follow the OS automatically. Override any token (colors, radius, spacing, fonts) globally with PickersProvider or per component, style any part through styles, and replace rows, days or triggers with render props. Your settings always win over the design.
  • International. Month, weekday and AM/PM names, the 12/24-hour clock, the first day of the week and the date-wheel order all come from Intl for any locale. Layouts flip for RTL.
  • Accessible. Wheels are adjustable (VoiceOver / TalkBack swipe up and down). Days announce their full date, and selected / disabled states are exposed.
  • Fast. Animations use the native driver. Wheels and the emoji grid are virtualized with fixed row layouts, and rows are memoized.
  • Typed. Written in TypeScript, with generics for value types and discriminated unions for selection modes, so mode="range" gives you a typed { start, end }.

Requirements​

Version
react>= 18
react-native>= 0.72
ExpoAny SDK (works in Expo Go)
react-native-webSupported

No other peer dependencies: no Reanimated, no Gesture Handler, no SVG.

Where to next​

  • Installation: install and optional setup
  • Quick start: every picker in five minutes
  • Core concepts: controlled vs uncontrolled, sheets and drafts, designs, theming, slots
  • Designs: the iOS, Material and web looks, and how to pick or customize one
  • Showcase: real app screens built with the pickers, live on iOS, Android and the web
  • API reference: every export in one page