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
DatePicker	Calendar (display="calendar") or wheel (display="wheel")
Calendar	Month calendar: single / range / multiple
DateWheelPicker	Day / month / year wheels
DateTimePicker	Day + time wheels (display="wheel") or calendar + time (display="calendar")
SelectPicker<T>	Field + searchable sheet
SelectList<T>	Inline searchable list
EmojiPicker	Emoji keyboard
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
WheelPickerSheet<T>	WheelPicker in a sheet
EmojiPickerSheet	EmojiPicker in a sheet
useDraft(value, visible)	Draft state that resets on open

Theme

Export	Description
PickersProvider	App-wide theme and colour scheme
usePickerTheme(override?)	Resolved active theme
createTheme(overrides, base?)	Full theme from overrides
mergeTheme(base, override?)	Deep merge
lightTheme / darkTheme	Built-in themes
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

Emoji utilities

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

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

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

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

interface ThemableProps { theme?: DeepPartial<PickerTheme> }

Default strings

Where	Prop	Default
Sheets	confirmLabel / cancelLabel	Done / Cancel
SelectPicker	placeholder	Select…
SelectList	searchPlaceholder / emptyText	Search / No results
EmojiPicker	searchPlaceholder / emptyText	Search emoji / No emoji found
TimePicker	dayPeriodLabels	from locale (AM / PM)

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, DateWheelPicker	wheels
keyboardInput	true	WheelPicker
minuteInterval / secondInterval	1	TimePicker
format	'auto'	TimePicker
dayHeight	44	Calendar
fixedWeeks / showOutsideDays	true	Calendar
enableSwipe / enableQuickJump	true	Calendar
weekdayFormat	'short'	Calendar
monthFormat	'long'	DateWheelPicker
searchable	options.length > 8 · true emoji	Select, Emoji
closeOnSelect	true	SelectPicker, EmojiPickerSheet
chips	true	SelectPicker
columns / height	8 / 380 (420 in sheet)	EmojiPicker
maxRecent	24	EmojiPicker
maxHeightRatio	0.9	BottomSheet
bottomInset	24 iOS · 12 other	BottomSheet