Version: Next 🚧

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 / ranges
`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

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
`WheelPickerField<T>`	Field + WheelPickerSheet; shows the item's label
`EmojiPickerField`	Field + EmojiPickerSheet; shows `value`

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

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

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

/** 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` / `Cancel`
SelectPicker, fields	`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
`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

Components​

Sheets​

Fields​

Theme​

Date utilities​

Emoji utilities​

Select utilities​

Types​

Default strings​

Default values at a glance​