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.

npm

npm install @elik56a/react-native-pickers

yarn

yarn add @elik56a/react-native-pickers

pnpm

pnpm add @elik56a/react-native-pickers

Expo

npx expo 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…

Platform

Props

weekdayFormat

showOutsideDays

<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

Component	What it is
WheelPicker	3D scrolling wheel with infinite loop, disabled items, tap-to-type, custom rows
MultiWheelPicker	Several wheels sharing one selection band (durations, units, anything multi-column)
TimePicker	Wheels, a Material clock dial or columns to click; 12h / 24h from locale, minute & second steps, min / max time
DatePicker	Calendar with single, range and multiple selection, or a day/month/year wheel
MonthPicker	A month and year, like a card's expiry: wheels on iOS, a grid of months in Material and on the web
WeekStrip	One week of days in a row, with marked days; swipe or arrows to change weeks
DurationPicker	A length of time, like a timer or a workout: wheels, Material number boxes or columns to click, the value in seconds
DateTimePicker	Day and time together: one row of wheels, or a calendar with the time under or beside it
SelectPicker	Form field that opens a searchable bottom sheet, modal or dropdown; single or multi-select with chips, groups, icons; search a server with loadOptions
SelectList	The same list, inline
CountryPicker	About 250 countries with flags and dialing codes, localized names, preferred countries on top
PhoneField	Phone number input: a country code button, the number formatted as it's typed, an E.164 value
HorizontalList	Segmented control or chips that scroll sideways and reveal the next item
EmojiPicker	1,923 emojis, categories, search, skin tones, recents, version filtering
ColorPicker	iOS's Grid / Spectrum / Sliders, Google's swatch circles, or the browser's spectrum; hex with opacity and a copy button
BottomSheet	Animated sheet with drag-to-dismiss, for your own content
DatePickerSheet, TimePickerSheet, DateTimePickerSheet, DurationPickerSheet, MonthPickerSheet, ColorPickerSheet, WheelPickerSheet, EmojiPickerSheet	Ready-made pickers in a sheet with Cancel / Done and draft state
DatePickerField, TimePickerField, DateTimePickerField, DurationPickerField, MonthPickerField, ColorPickerField, WheelPickerField, EmojiPickerField, PickerField	Form 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
Expo	Any SDK (works in Expo Go)
react-native-web	Supported

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