React Native Pickers

Every picker a React Native app needs, in one package with zero native code. Wheel, time, duration, date, month, week strip, expandable calendar, date range, date & time, select, country, phone number, time zone, segmented control, emoji and color pickers, a slider, a star rating and an OTP code input, plus bottom sheets, action sheets, menus and the form fields to put pickers in. Native on iOS, Android and the web, and every detail is yours to customize.

Documentation & live examples · Showcase · Quick start · llms-full.txt · Changelog

Why this one

• Native on every platform. The iOS design on iPhone, Material Design on Android and a web design in the browser, from one code path. Prefer one look everywhere? Set design="ios" once.
• Zero native code. Pure JavaScript on React Native core APIs. Works in Expo Go, bare React Native and React Native Web, ships in OTA updates. No Reanimated, Gesture Handler or SVG.
• Yours to customize. Theme tokens with automatic dark mode, a style slot for every visual part, and render props for full control. Your settings always win over the design.
• Built for forms. Every picker comes inline, in a bottom sheet or modal with Cancel / Done, and as a form field that opens it and shows the value, with error and helper text from React Hook Form, Formik or Zod.
• Real features built in. Date ranges with min/max nights, multiple dates, marked dates and prices, searchable selects with server search, a country picker with flags and dialing codes, a phone number field, a time zone picker, 1,923 emojis with skin tones and recents.
• International and accessible. Names, the 12/24h clock and the week start come from Intl for any locale; layouts flip for RTL. VoiceOver and TalkBack support throughout, and full keyboard use on the web.
• Typed. Generic value types and mode-discriminated unions: mode="range" gives you a typed { start, end }.

Install

npm install @elik56a/react-native-pickers

Or yarn add, pnpm add, npx expo install. Needs react >= 18 and react-native >= 0.72. Nothing else: no pod install, no rebuild, no config plugin.

Quick start

import { useState } from 'react';
import { View } from 'react-native';
import {
  DatePickerField,
  SelectPicker,
  TimePickerField,
} from '@elik56a/react-native-pickers';
import type { DateRange } from '@elik56a/react-native-pickers';

const ROOMS = [
  { label: 'Single', value: 'single' },
  { label: 'Double', value: 'double' },
  { label: 'Suite', value: 'suite' },
];

export default function Booking() {
  const [stay, setStay] = useState<DateRange>({ start: null, end: null });
  const [arrival, setArrival] = useState<Date | undefined>();
  const [room, setRoom] = useState<string | null>(null);

  return (
    <View style={{ gap: 16, padding: 16 }}>
      <DatePickerField
        label="Stay"
        mode="range"
        value={stay}
        onConfirm={setStay}
        minDate={new Date()}
        placeholder="Add dates"
      />
      <TimePickerField
        label="Arrival"
        value={arrival}
        onConfirm={setArrival}
        minuteInterval={15}
      />
      <SelectPicker
        label="Room"
        options={ROOMS}
        value={room}
        onChange={setRoom}
      />
    </View>
  );
}

Each field opens its picker in a bottom sheet on iOS and Android and in a dropdown on the web, in that platform's design, and shows the confirmed value formatted for the locale.

Components

Inline, in a sheet, or behind a field

Every picker comes three ways, with the same props.

// Inline: changes as the user scrolls or taps
<DatePicker value={date} onChange={setDate} />

// In a sheet: keeps a draft, commits on Done, discards on Cancel
<DatePickerSheet
  visible={open}
  onClose={() => setOpen(false)}
  value={date}
  onConfirm={setDate}
/>

// Behind a field: owns the open state, shows the confirmed value
<DatePickerField label="Date" value={date} onConfirm={setDate} />

Sheets open as a bottom sheet, or as a centered modal on wide web windows (presentation="bottomSheet" | "modal"). Fields and SelectPicker also open as a dropdown under the field, their default on the web (presentation="dropdown"), or expand inline under it, pushing the content below, like the iOS Settings app (presentation="inline"). PickerField wraps any sheet of your own in a field.

Button text is yours too: confirmLabel, cancelLabel and showCancel on any sheet or field.

Designs: native on each platform

By default each platform gets its own design (design="auto"). A design changes shapes and layout, never your colors:

Pick one design for the whole app, or for one component:

// The iOS look on Android and the web too
<PickersProvider design="ios">
  <App />
</PickersProvider>

// One component
<TimePicker design="material" value={time} onChange={setTime} />

Or keep the design and change one choice with its own prop: display="wheel" on TimePicker, timeDisplay and timePosition on DateTimePicker, confirmLabel on any sheet. See the designs guide.

Upgrading from 0.10? Android and the web now get the Material and web designs. Set <PickersProvider design="ios"> to keep the previous look everywhere.

Upgrading from 0.12? EmojiPicker follows the design too: on iOS and Android its category bar moves to the bottom, like the platform's emoji keyboard. Set categoryBarPosition="top" to keep it on top.

Customize anything

Theme your whole app once. It's optional: light and dark defaults follow the OS.

import { PickersProvider } from '@elik56a/react-native-pickers';

<PickersProvider
  colorScheme="auto" // 'auto' | 'light' | 'dark'
  design="auto" // 'auto' | 'ios' | 'material' | 'web'
  theme={{
    colors: { primary: '#FF5A5F' },
    radius: { md: 8 },
    typography: { fontFamily: 'Inter' },
  }}
  darkTheme={{
    colors: { primary: '#FF8A8E', background: '#000' },
  }}
>
  <App />
</PickersProvider>

Any component also takes theme and design for a local override.

Slot styles reach every visual part, so you never fork:

<DatePicker
  styles={{
    selectedDay: { borderRadius: 8 },
    dayText: { fontFamily: 'Inter' },
    rangeBand: { backgroundColor: '#FFE4E6' },
  }}
/>

Render props replace a part and keep its behavior and accessibility:

Good to know

• Controlled or uncontrolled. Pass value + onChange, or defaultValue. SelectPicker, SelectList and HorizontalList are controlled-only: update value in onChange.

• onChange is for user changes only. Setting value in code moves the picker silently. Wheels fire onChange when they settle and onValueChanging on every row, and Slider on release and on every step, which is the place for haptics.

• Sheets commit on Done. onConfirm gets the value; Cancel, the backdrop and dragging down discard the draft.

• Fast under load. Drags, scrolls and animations run on the UI thread, so they stay at 60 fps while JavaScript is busy. See the benchmarks against @gorhom/bottom-sheet, Quidone's wheel picker and react-native-calendars.

• Dates are local time. Days are compared by local year, month and day. Serialize them with toDateKey(date) ('YYYY-MM-DD'), not toISOString().

• Smaller native bundles. Metro doesn't tree-shake, so on native, import from a feature subpath (React Native 0.79+):

  import { DatePicker } from '@elik56a/react-native-pickers/date';
  

  Subpaths: /wheel /time /duration /date /calendar /month /datetime /select /country /timezone /list /emoji /color /slider /rating /otp /action /sheet /core.

API at a glance

The full API reference lists every prop. These are the ones you'll reach for.

WheelPicker<T>

MultiWheelPicker takes columns: { key, items, value, onChange, flex?, width?, loop?, suffix? }[] and an optional separator.

TimePicker

MonthPicker, WeekStrip and ExpandableCalendar

MonthPicker picks a month and year; the value is a Date on the first of the month. Wheels on iOS, a grid of months under the year in Material and on the web (display), with minDate / maxDate, yearRange, monthFormat and locale. MonthPickerField shows October 2026.

WeekStrip is one week of days in a row: value, onChange(date), swipe or arrows to page, onWeekChange(weekStart), and the calendar's markedDates, minDate / maxDate, isDateDisabled, firstDayOfWeek and renderDay.

ExpandableCalendar is a WeekStrip that opens into its month with a drag down or the handle under it, and folds back into the week of the day picked: the same props, plus expanded / defaultExpanded / onExpandedChange and onMonthChange.

Timeline and Agenda

Both take one flat array of events, { id, title, start: Date, end: Date, allDay?, color?, subtitle? }, extended with your own fields as you like.

Timeline is a calendar's day view, or up to a week side by side (numberOfDays): events placed by the hour, side by side where they overlap, all-day events over the grid and a line at the current time. A swipe pages by days (date / onDateChange), onEventPress opens an event and onSlotPress({ start, end }) adds one where the grid was tapped. startHour, endHour, hourHeight, format and renderEvent shape it.

Agenda lists the same events day by day: a sticky band per day on iOS, the date beside each day's events in Material and on the web. It scrolls to selectedDate and reports the day at the top with onVisibleDateChange, so it stays in step with an ExpandableCalendar above it.

const [day, setDay] = useState(new Date());

<ExpandableCalendar value={day} onChange={setDay} />
<Agenda events={events} selectedDate={day} onVisibleDateChange={setDay} style={{ flex: 1 }} />
// or a day view
<Timeline events={events} date={day} onDateChange={setDay} onSlotPress={addEvent} style={{ flex: 1 }} />

ColorPicker

ColorPickerField shows a swatch and the hex code.

Slider

OtpField

Rating

DurationPicker

A length of time, such as a timer or a workout, rather than a time of day. The value is a number of seconds.

DurationPickerField shows the confirmed duration as 1 h 30 min, and formatDuration(seconds) writes it the same way.

DatePicker

DateTimePicker

SelectPicker<T> and SelectList<T>

loadOptions waits for a pause in typing, shows a loader and ignores answers to older queries:

<SelectPicker
  label="City"
  loadOptions={(query) => api.searchCities(query)}
  value={city}
  onChange={setCity}
/>

CountryPicker

A SelectPicker with about 250 countries built in. The value is the ISO code ('IL'), and search matches English and native names, ISO codes and dialing codes.

getCountry('IL') returns { code, name, nativeName, dialCode, flag, keywords }.

LanguagePicker

A SelectPicker with 86 languages built in, for an app's language setting. Each shows under its own name, such as Español, with its name in the user's language below. The value is a BCP 47 tag ('es', 'pt-BR', 'zh-Hant').

isRtlLanguage('ar-EG') tells whether a language is written right to left, and getLanguage('he') returns { code, name, nativeName, country, rtl }.

PhoneField

A phone number input: a flag and calling code button that opens the country list, then the number, grouped the way the country writes it. The value is E.164 ('+972541234567'); a pasted +44… number switches the country.

parsePhone('+44 7911 123456') returns { country: 'GB', nationalNumber: '7911123456' }.

CurrencyPicker and AmountField

CurrencyPicker is a SelectPicker with 154 currencies built in, each with its flag, code and symbol; the value is an ISO 4217 code ('EUR'). AmountField is a money input: the amount grouped as it's typed in the locale's format ($1,234.50, 1.234,50 €), with the currency's decimal places. The value is a number, or null when empty.

getCurrency('JPY') returns { code, name, symbol, decimals, country }; decimals turns an amount into minor units.

TimeZonePicker

A SelectPicker with every IANA time zone built in, each with its city, GMT offset and name, sorted by offset with the device's zone on top. The value is the IANA name ('Europe/Lisbon'); old names like 'Asia/Calcutta' are accepted and reported as the new ones.

getDeviceTimeZone(), getTimeZoneOffset(id) (minutes) and formatGmtOffset(330) → 'GMT+5:30' are exported too.

HorizontalList<T>

EmojiPicker

Sheets, fields, BottomSheet, ActionSheet and Menu

Utilities

Platforms

To preview iOS or Android behavior in a browser (Storybook, a design system), set <PickersProvider platform="ios">.

For AI assistants

The complete documentation is one Markdown file, llms-full.txt, with an index at llms.txt. It also ships inside the package at node_modules/@elik56a/react-native-pickers/llms-full.txt, matching the installed version. A short cheat sheet for code generation is on the For AI assistants page.

Learn more

• Guides: designs · theming · styling with slots · render props · i18n & RTL · accessibility · haptics · forms · TypeScript
• Recipes: hotel booking range · birthday · alarm time · duration · country and phone number · server search · flight search form · chat emoji · filters sheet
• Coming from another library? Migration maps the props of @react-native-community/datetimepicker, react-native-date-picker, react-native-modal-datetime-picker, react-native-calendars, react-native-picker-select, react-native-dropdown-picker, react-native-element-dropdown, @react-native-picker/picker, the native segmented control, react-native-ui-datepicker, react-native-calendar-strip, react-native-modal-selector, reanimated-color-picker, react-native-country-picker-modal, react-native-phone-number-input, rn-emoji-keyboard, @react-native-community/slider, react-native-otp-entry, react-native-ratings, @gorhom/bottom-sheet, react-native-modal, @expo/react-native-action-sheet, zeego and more. Comparison shows when to choose something else.

Contributing

Issues and pull requests are welcome. See CONTRIBUTING.md for setup, the example app and the docs site.

Emoji data comes from emojibase (MIT).

License

MIT © Eliyahu Kriel