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
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
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
PhoneField	Phone number input: country code button, formats as you type, E.164 value
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
BottomSheet	Animated sheet

Sheets

Export	Description
PickerSheet	BottomSheet with Cancel / Done
DatePickerSheet	Calendar or date wheel in a sheet
TimePickerSheet	TimePicker 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)	Draft state that resets on open

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
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

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

Country utilities

getCountry · getAllCountries · getCountryFlag

Phone utilities

parsePhone · formatNationalNumber · isValidPhone · toE164

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 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, or a dropdown under the field. Its `auto` (the default) is a dropdown on the web. */
type FieldPresentation = SheetPresentation | 'dropdown';

/** 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';

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

interface ThemableProps { theme?: DeepPartial<PickerTheme> }

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
CountryPicker	placeholder / searchPlaceholder / preferredLabel / allCountriesLabel	Select a country / Search countries / Suggested / All countries
PhoneField	label / countrySheetTitle	none (read as Phone number) / Country code
EmojiPicker	searchPlaceholder / emptyText	Search emoji / No emoji found
TimePicker	dayPeriodLabels	from locale (AM / PM)
ColorPicker	labels	Grid, Spectrum, Sliders, Hue, Opacity, Red, Green, Blue, Hex, Copy, Copied, Custom colour…
DurationPicker	labels	{ hours: 'h', minutes: 'min', seconds: 's' }

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
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
columns / height	8 / 380 (420 in sheet)	EmojiPicker
maxRecent	24	EmojiPicker
maxHeightRatio	0.9	BottomSheet
bottomInset	24 iOS · 12 other	BottomSheet