API reference

Every export from @elik56a/react-native-pickers, grouped. Each name links to its full documentation.

Components

Export	Description
WheelPicker<T>	Single scrolling wheel
MultiWheelPicker	Several wheels in one band
TimePicker	Hour / minute / second / AM-PM wheels
TimeRangePicker	A start and an end time: opening hours, shifts, overnight ranges
DurationPicker	A length of time in seconds: wheels, number boxes or columns
DatePicker	Calendar (display="calendar") or wheel (display="wheel")
Calendar	Month calendar: single / range / multiple / ranges
DateWheelPicker	Day / month / year wheels
MonthPicker	Month and year: wheels (iOS) or a grid of months (Material, web)
WeekStrip	One week of days in a row, swipe or arrows to page
ExpandableCalendar	A week that opens into its month with a drag down or its handle
DateTimePicker	Day + time wheels (display="wheel") or calendar + time (display="calendar")
SelectPicker<T>	Field + searchable sheet
SelectList<T>	Inline searchable list
CountryPicker	Country field: flags, dialing codes, localized names
LanguagePicker	Language field: each language in itself, its name in the user's language below
PhoneField	Phone number input: country code button, formats as you type, E.164 value
CurrencyPicker	Currency field: flags, ISO codes and symbols, localized names
AmountField	Money input: grouped as you type, the currency's decimals, a number value
TimeZonePicker	Time zone field: GMT offsets, sorted by offset, the device's zone on top
HorizontalList<T>	Segmented control or chips that scroll sideways
EmojiPicker	Emoji keyboard
ColorPicker	iOS's tabs, Google's swatch circles or the browser's spectrum; hex with opacity
Slider	iOS's knob, Material 3's handle or a range input; one value or a range
OtpField	One-time code in a box per character, with SMS autofill and paste
Rating	Stars to tap or drag, whole or half steps, or a read-only score
BottomSheet	Animated sheet
Menu	A dropdown or long-press context menu of actions by its trigger, or an action sheet
ActionSheet	A list of actions in a sheet: iOS cards or Material rows, destructive, disabled and selected actions

Sheets

Export	Description
PickerSheet	BottomSheet with Cancel / Done
DatePickerSheet	Calendar or date wheel in a sheet
TimePickerSheet	TimePicker in a sheet
TimeRangePickerSheet	TimeRangePicker in a sheet
DateTimePickerSheet	DateTimePicker in a sheet
DurationPickerSheet	DurationPicker in a sheet
MonthPickerSheet	MonthPicker in a sheet
WheelPickerSheet<T>	WheelPicker in a sheet
EmojiPickerSheet	EmojiPicker in a sheet
ColorPickerSheet	ColorPicker in a sheet
useDraft(value, visible, { resetKey?, commit? })	Draft state that resets on open; commits each change inline
useActionSheet()	{ show, hide, actionSheet }: show an ActionSheet from a call, no provider

Fields

Export	Description
PickerField	Labelled field that opens the sheet its child renders
DatePickerField	Field + DatePickerSheet; shows the date, range or dates
TimePickerField	Field + TimePickerSheet; shows the time
TimeRangePickerField	Field + TimeRangePickerSheet; shows the range, such as 9:00 AM – 5:00 PM
DateTimePickerField	Field + DateTimePickerSheet; shows the date and time
DurationPickerField	Field + DurationPickerSheet; shows 1 h 30 min
MonthPickerField	Field + MonthPickerSheet; shows October 2026
WheelPickerField<T>	Field + WheelPickerSheet; shows the item's label
EmojiPickerField	Field + EmojiPickerSheet; shows value
ColorPickerField	Field + ColorPickerSheet; shows a swatch and the hex code

Theme

Export	Description
PickersProvider	App-wide theme, colour scheme, platform and design
usePickerTheme(override?)	Resolved active theme
createTheme(overrides, base?)	Full theme from overrides
mergeTheme(base, override?)	Deep merge
lightTheme / darkTheme	Built-in themes
DESIGN / DESIGN_TOKENS / resolveDesign(preference, platform)	The iOS, Material and web designs
textStyle(theme, size, weight?)	Text style from tokens

Date utilities

startOfDay · startOfMonth · daysInMonth · addDays · addMonths · isSameDay · isSameMonth · compareDay · isBetweenDays · isOutOfRange · clampDate · toDateKey · buildMonthGrid · getMonthNames · getWeekdayNames · formatMonthYear · formatDate · uses12HourClock · getFirstDayOfWeek · getDayPeriods

getRangePresets: Today, Yesterday, Last 7 days, Last 30 days, This month and Last month as presets for a range calendar.

CALENDAR_MODE: the calendar selection modes as constants (single, range, multiple, ranges), e.g. mode={CALENDAR_MODE.ranges}.

Emoji utilities

getAllEmojis · searchEmojis · findEmoji · withSkinTone · EMOJI_CATEGORIES · DEFAULT_CATEGORY_LABELS · DEFAULT_CATEGORY_ICONS

Color utilities

normalizeHex · hexToHsv · hsvToHex · withAlpha · DEFAULT_COLORS

COLOR_DISPLAY: the ColorPicker layouts as constants (tabs, swatches, spectrum), e.g. display={COLOR_DISPLAY.swatches}.

Country utilities

getCountry · getAllCountries · getCountryFlag

Language utilities

getLanguage · getAllLanguages · getLanguageName · isRtlLanguage

Phone utilities

parsePhone · formatNationalNumber · isValidPhone · toE164

Currency utilities

getCurrency · getAllCurrencies · getCurrencyName

Time zone utilities

getDeviceTimeZone · getTimeZoneOffset · formatGmtOffset · getTimeZoneName · normalizeTimeZone · getTimeZone · getAllTimeZones

Time range utilities

formatTimeRange(range, { format?, locale?, showSeconds? }): '9:00 AM – 5:00 PM', or '22:00 – 07:00 +1' overnight · getTimeRangeSeconds(range): the length, into the next day for an overnight range

Duration utilities

formatDuration(seconds, { showHours?, labels? }): 5400 → '1 h 30 min'

Select utilities

Export	Description
defaultFilter(option, query)	The default search: case-, accent- and niqqud-insensitive; every word must match label, description or keywords

Types

See TypeScript for the full list. The most used:

interface DateRange { start: Date | null; end: Date | null }

interface DateRangePreset { label: string; start: Date; end: Date }

interface TimeRange { start: Date; end: Date } // the end on the start's day, or the next day overnight

type RangePresetsListProps = Omit<HorizontalListProps<DateRange>, 'items' | 'value' | 'onChange' | 'isEqual'>

interface MarkedDate { dots?: string[]; disabled?: boolean; label?: string; textColor?: string }

interface SelectOption<T> {
  label: string; value: T; description?: string; disabled?: boolean;
  icon?: React.ReactNode; group?: string; keywords?: string[];
}

interface WheelItem<T> { label: string; value: T; disabled?: boolean; key?: string }

type SkinTone = 0 | 1 | 2 | 3 | 4 | 5;

/** Every sheet's `presentation`. */
type SheetPresentation = 'auto' | 'bottomSheet' | 'modal';

/** A field's `presentation`: a sheet presentation, a dropdown under the field, or inline: expanded in place under it. Its `auto` (the default) is a dropdown on the web. */
type FieldPresentation = SheetPresentation | 'dropdown' | 'inline';

/** SelectPicker's `presentation`; its `auto` is a dropdown on the web. */
type SelectPresentation = FieldPresentation;

/** The field slots every `*PickerField` and `PickerField` takes in `styles`. */
type PickerFieldSlot = 'label' | 'trigger' | 'triggerText' | 'placeholder' | 'chevron' | 'clear' | 'helperText';

/** A message shown under the field, or `true` to mark it invalid without one. */
type FieldError = string | boolean;

/** Validation shown on every field, SelectPicker, PhoneField, AmountField and OtpField (`error` and `helperText` only). Set from your form; the field doesn't check the value. */
interface FieldStatusProps {
  error?: FieldError;       // invalid: red border and label, the message under the field when it's a string
  helperText?: string;      // under the field, replaced by the error message
  required?: boolean;       // asterisk on the label, "required" for screen readers
}

type SlotStyles<K extends string> = Partial<Record<K, StyleProp<TextStyle>>>;

interface ThemableProps { theme?: DeepPartial<PickerTheme>; design?: Design }

Default strings

Where	Prop	Default
Sheets	confirmLabel / cancelLabel	Done (iOS, web) · OK (Material) / Cancel
SelectPicker, fields	placeholder	Select…
SelectList	searchPlaceholder / emptyText / loadingText / searchPrompt	Search / No results / Loading… / Type to search
SelectPicker, SelectList	createLabel	Add "…"
ActionSheet	cancelLabel	Cancel
CountryPicker	placeholder / searchPlaceholder / preferredLabel / allCountriesLabel	Select a country / Search countries / Suggested / All countries
LanguagePicker	placeholder / searchPlaceholder / preferredLabel / allLanguagesLabel	Select a language / Search languages / Suggested / All languages
PhoneField	label / countrySheetTitle	none (read as Phone number) / Country code
CurrencyPicker	placeholder / searchPlaceholder / preferredLabel / allCurrenciesLabel	Select a currency / Search currencies / Suggested / All currencies
AmountField	label / placeholder / currencySheetTitle	none (read as Amount) / zero in the currency's format (0.00) / Currency
TimeZonePicker	placeholder / searchPlaceholder / preferredLabel / allTimeZonesLabel	Select a time zone / Search time zones / Your time zone / All time zones
EmojiPicker	searchPlaceholder / emptyText	Search emoji / No emoji found
TimePicker	dayPeriodLabels	from locale (AM / PM)
TimeRangePicker	startLabel / endLabel	Start / End
OtpField	accessibilityLabel	Verification code
Rating	accessibilityLabel / formatValue	Rating / 3 of 5
ColorPicker	labels	Grid, Spectrum, Sliders, Hue, Opacity, Red, Green, Blue, Hex, Copy, Copied, Custom colour…
DurationPicker	labels	{ hours: 'h', minutes: 'min', seconds: 's' }
getRangePresets()	label	Today, Yesterday, Last 7 days, Last 30 days, This month, Last month

Default values at a glance

Prop	Default	Components
itemHeight	40	wheels
visibleItems	5	wheels
variant	'3d'	wheels
rotation / fadeTo	20 / 0.3	WheelPicker
loop	false WheelPicker · true TimePicker, DurationPicker, DateWheelPicker, MonthPicker	wheels
keyboardInput	true	WheelPicker
minuteInterval / secondInterval	1	TimePicker, DurationPicker
format	'auto'	TimePicker
display	'wheel' iOS · 'dial' Material · 'list' web	TimePicker
display	'wheel' iOS · 'input' Material · 'list' web	DurationPicker
display	'wheel' iOS · 'grid' Material, web	MonthPicker
display	'tabs' iOS · 'swatches' Material · 'spectrum' web	ColorPicker
min / max / step	0 / 100 / 1	Slider
valueLabel	'drag' Material · 'never' iOS, web	Slider
length / inputMode	6 / 'numeric'	OtpField
max / step / size	5 / 1 / 32	Rating
display / timeDisplay	'wheel' / 'wheel' iOS · 'calendar' / 'input' Material · 'calendar' / 'list' web	DateTimePicker
timePosition	'beside' web · 'below' other	DateTimePicker
dayHeight	44	Calendar
fixedWeeks / showOutsideDays	true	Calendar
enableSwipe / enableQuickJump	true	Calendar
weekdayFormat	'short' · 'narrow' Material	Calendar
monthFormat	'long'	DateWheelPicker, MonthPicker
searchable	options.length > 8 · true emoji	Select, Emoji
closeOnSelect	true	SelectPicker, EmojiPickerSheet
chips	true	SelectPicker
clearable / disabled	false	SelectPicker, fields
required	false	SelectPicker, fields, PhoneField, AmountField
columns / height	8 / 380 (420 in sheet)	EmojiPicker
maxRecent	24	EmojiPicker
maxHeightRatio	0.9	BottomSheet
bottomInset	24 iOS · 12 other	BottomSheet