Version: Next 🚧

Picker fields

In a form, a picker usually isn't on screen. The user taps a field, picks in a bottom sheet (a dropdown under the field on the web), and sees the value in the field once it closes. Each picker has a field that does this, with the same look as SelectPicker's field:

Field	Opens	Shows
`DatePickerField`	`DatePickerSheet`	`Oct 5, 2026`, a range `Oct 5, 2026 – Oct 9, 2026` or a list of dates
`TimePickerField`	`TimePickerSheet`	`9:30 AM` or `09:30`, following `format` and `locale`
`DateTimePickerField`	`DateTimePickerSheet`	`Oct 26, 2026, 9:30 AM`
`DurationPickerField`	`DurationPickerSheet`	`1 h 30 min`
`MonthPickerField`	`MonthPickerSheet`	`October 2026`
`ColorPickerField`	`ColorPickerSheet`	A swatch and `#E4572E`
`WheelPickerField`	`WheelPickerSheet`	The selected item's `label`
`EmojiPickerField`	`EmojiPickerSheet`	`value`, the emoji you pass
`PickerField`	Any sheet you render	`displayValue`

import { DatePickerField, TimePickerField, DateTimePickerField, WheelPickerField, EmojiPickerField, PickerField } from '@elik56a/react-native-pickers';

Loading…

<View style={{ gap: 14 }}>
  <DatePickerField
    label="Stay"
    placeholder="Add dates"
    mode="range"
    value={stay}
    onConfirm={setStay}
    minDate={new Date()}
  />
  <TimePickerField
    label="Arrival time"
    placeholder="Choose a time"
    value={arrival}
    onConfirm={setArrival}
    minuteInterval={15}
  />
  <WheelPickerField
    label="Guests"
    placeholder="How many?"
    items={guests}
    value={guestCount}
    onConfirm={setGuestCount}
  />
  <SelectPicker
    label="Room"
    placeholder="Choose a room"
    options={rooms}
    value={room}
    onChange={setRoom}
  />
  <DateTimePickerField
    label="Reminder"
    placeholder="Set a reminder"
    value={reminder}
    onConfirm={setReminder}
    clearable
    onClear={() => setReminder(undefined)}
  />
  <EmojiPickerField
    label="Mood"
    placeholder="Pick an emoji"
    value={mood}
    onSelect={setMood}
  />
</View>

Each field takes the props of the sheet it opens, without visible, plus the field props. The field owns the open state; you keep the value. As with the sheets, onConfirm fires only on Done, so your state changes only when the user confirms. On the web they open as dropdowns; switch presentation in the panel to see the same form with bottom sheets or modals.

Try the props

Platform

mode

display

presentation

clearableconfirmOnSelectdisabled

<DatePickerField
  label="Dates"
  placeholder="Pick dates"
  value={value}
  onConfirm={setValue}
/>

presentation sets where the picker opens:

`presentation`	Opens
`'auto'` (default)	A dropdown on the web, a bottom sheet on native.
`'dropdown'`	Under the field, like a menu, or above it when there's more room there. Cancel and Done sit below the picker; a tap outside cancels. It's at least 320 px wide, so a calendar fits under a narrow field. It opens on the side with room for the whole picker; in a window too short for it, the dropdown scrolls.
`'bottomSheet'`	A bottom sheet with the title and buttons in its header.
`'modal'`	A centered dialog.

<DatePickerField label="Stay" mode="range" value={stay} onConfirm={setStay} />
<DatePickerField label="Stay" mode="range" value={stay} onConfirm={setStay} presentation="dropdown" />

sheetProps and title apply to the bottom sheet and the modal; the dropdown has no header. SelectPicker takes the same values and the same 'auto' default.

What the field shows

Dates and times are formatted with Intl for the field's locale (the device locale by default). TimePickerField and DateTimePickerField follow format ('12h', '24h' or 'auto') and showSeconds.

For your own wording, pass displayValue:

<DatePickerField
  label="Delivery"
  value={day}
  onConfirm={setDay}
  displayValue={day ? formatDate(day, undefined, { weekday: 'long', day: 'numeric', month: 'long' }) : undefined}
/>

When displayValue is empty and there's no value, the field shows placeholder (default 'Select…').

Label and sheet title

label is drawn above the field, used as its accessibility label and, unless you set title, as the sheet's title (a bottom sheet or modal; the dropdown has no title).

<TimePickerField label="Alarm" title="Wake me up at" value={alarm} onConfirm={setAlarm} />

Clearing

clearable shows a × button while the field has a value. Reset your state in onClear:

<DatePickerField label="Due" value={due} onConfirm={setDue} clearable onClear={() => setDue(null)} />

Custom trigger

renderTrigger replaces the field box, and gets { open, displayValue, disabled }. The label still renders above it, and the sheet still opens from the field.

Loading…

<EmojiPickerField
  label="Project icon"
  value={icon}
  onSelect={setIcon}
  renderTrigger={({ open, displayValue }) => (
    <Pressable
      onPress={open}
      accessibilityRole="button"
      accessibilityLabel="Change project icon"
      style={{
        width: 64,
        height: 64,
        borderRadius: 16,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#F4F2EE',
      }}
    >
      <Text style={{ fontSize: 34 }}>{displayValue}</Text>
    </Pressable>
  )}
/>

renderChevron swaps only the chevron icon and keeps its rotation, as in SelectPicker.

Your own sheet: `PickerField`

PickerField is the field without a picker. Its child is a function that gets { visible, onClose } for the sheet you render, so any BottomSheet or PickerSheet can open from a field. A PickerSheet inside follows the field's presentation, so it opens as a dropdown on the web; a presentation set on the PickerSheet itself wins.

Loading…

<PickerField label="Notifications" displayValue={summary}>
  {(sheet) => (
    <NotificationsSheet {...sheet} prefs={prefs} onSave={setPrefs} />
  )}
</PickerField>

Styling

style styles the wrapper (label and field). styles takes the field's slots and the slots of the picker inside the sheet, so one object styles both:

<DatePickerField
  label="Check-in"
  value={day}
  onConfirm={setDay}
  styles={{
    trigger: { borderRadius: 999 },
    triggerText: { fontWeight: '600' },
    selectedDay: { borderRadius: 8 },
  }}
/>

Slot	Element
`label`	Label text above the field
`trigger`	The field box
`triggerText`	The value
`placeholder`	Placeholder text
`chevron`	The drawn chevron (a bordered `View`: `borderColor` sets its color, `width` / `height` its size)
`clear`	× button text

The theme (theme prop or PickersProvider) applies to the field and the sheet.

Props

Every field takes these, plus its sheet's props without visible: value, onConfirm (onSelect for emoji), title, confirmLabel, sheetProps, the picker's own props (mode, minDate, locale, items, minuteInterval…). The picker's own style and testID aren't available on a field; style and testID belong to the field.

Prop	Type	Default	Description
`label`	`string`	—	Label above the field. Also its accessibility label, and the sheet title unless `title` is set.
`placeholder`	`string`	`'Select…'`	Shown while there's no value.
`displayValue`	`string`	the value, formatted for `locale`	Text shown in the field.
`disabled`	`boolean`	`false`	The field doesn't open.
`clearable`	`boolean`	`false`	Show a × button while there's a value.
`onClear`	`() => void`	—	Called by ×. Reset your value here.
`renderTrigger`	`(info: { open, displayValue, disabled }) => ReactNode`	—	Replace the field box.
`renderChevron`	`(info: { open, theme }) => ReactNode`	—	Custom chevron icon. It still rotates on open and close.
`presentation`	`'auto' \| 'dropdown' \| 'bottomSheet' \| 'modal'`	`'auto'`	Where the picker opens: a dropdown on the web, a bottom sheet on native. See Dropdown, bottom sheet or modal.
`onOpen` / `onClose`	`() => void`	—	The picker opened / closed (Done, Cancel or dismiss).
`style`	`StyleProp<ViewStyle>`	—	Wrapper style (label + field).
`styles`	`SlotStyles<PickerFieldSlot \| …>`	—	Field slots plus the picker's slots.
`theme`	`DeepPartial<PickerTheme>`	—	Theme for the field and the sheet.
`design`	`'ios' \| 'material' \| 'web'`	from `PickersProvider`	The look to follow, over the provider's: iOS, Material or web. Passed on to the sheet it opens.
`testID`	`string`	—	Test ID on the field box.

EmojiPickerField also takes value?: string, the emoji to show. PickerField takes the props above (no sheet props), children: (sheet: { visible, onClose }) => ReactNode, and icon, a node shown before the value such as a colour swatch or a flag.

Types

import type {
  DatePickerFieldProps,
  TimePickerFieldProps,
  DateTimePickerFieldProps,
  WheelPickerFieldProps,
  EmojiPickerFieldProps,
  PickerFieldProps,
  PickerFieldBaseProps,
  PickerFieldSlot,
  PickerFieldTriggerInfo,
  FieldPresentation,
  WithPickerField,
} from '@elik56a/react-native-pickers';

WithPickerField<SheetProps, Slot> turns a sheet's props into a field's, for wrapping your own sheet the same way.

Accessibility

The field is a button labelled with label (or the placeholder), with the current value as its hint and an expanded state while the picker is open. The dropdown closes on a tap outside it and on the Android back button. The × button is labelled Clear.

Picker sheets: the sheets on their own, when you control visible
SelectPicker: the select field these match
Forms: React Hook Form and Formik

Try the props​

Dropdown, bottom sheet or modal​

What the field shows​

Label and sheet title​

Clearing​

Custom trigger​

Your own sheet: PickerField​

Styling​

Props​

Types​

Accessibility​

Related​

Try the props

Dropdown, bottom sheet or modal

What the field shows

Label and sheet title

Clearing

Custom trigger

Your own sheet: `PickerField`

Styling

Props

Types

Accessibility

Related