Styling with slots

Theme tokens set colours and sizes everywhere. Slots let you style one specific part of one component. Every component takes a styles prop: an object of slot name → style.

Loading…

Platform

Props

variant

loop

<WheelPicker
  items={['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']}
  value={v}
  onChange={setV}
  styles={{
    indicator: { backgroundColor: '#111827', borderRadius: 999 },
    selectedItemText: {
      color: '#FFFFFF',
      fontWeight: '800',
      letterSpacing: 1,
    },
    itemText: { fontSize: 17 },
  }}
/>

Rules

• Slot styles are merged last, after the built-in and theme styles, so they always win.
• State slots stack on top of base slots: selectedItemText is applied after itemText, and selectedDay after dayInner.
• Slots accept any StyleProp: objects, arrays or StyleSheet.create entries.
• Types are exact. SlotStyles<CalendarSlot> autocompletes valid names and flags typos.
• style (singular) styles the outer container; styles (plural) are the slots.

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

All slots

Component	Slots
WheelPicker	container item itemText selectedItemText disabledItemText indicator
MultiWheelPicker / TimePicker / TimeRangePicker / DateWheelPicker / DurationPicker	container indicator separator item itemText selectedItemText disabledItemText
Calendar / DatePicker	container header headerTitle arrow arrowText weekdays weekdayText week day dayInner dayText selectedDay selectedDayText todayDay todayDayText disabledDayText outsideDayText rangeBand dot dayLabel gridCell gridCellText
MonthPicker	the wheel slots, or the grid's header headerTitle arrow arrowText gridCell gridCellText
WeekStrip	the Calendar slots
ColorPicker	container swatch pad slider sliderThumb sliderLabel hexInput preview
Slider	container track activeTrack thumb mark markLabel valueLabel valueLabelText
OtpField	container cell focusedCell filledCell cellText caret helperText
Rating	container item icon
SelectList	container search searchInput list groupHeader groupHeaderText option selectedOption optionLabel selectedOptionLabel optionDescription check empty emptyText loading loadingText createOption createOptionLabel
SelectPicker, CountryPicker, CurrencyPicker, TimeZonePicker	all SelectList slots + label trigger triggerText placeholder chevron clear helperText chip chipText
Picker fields	label trigger triggerText placeholder chevron clear helperText, plus the slots of the picker they open
PhoneField	label field input countryButton dialCode chevron helperText
AmountField	label field input symbol amount caret currencyButton currencyCode chevron helperText
HorizontalList	container content item selectedItem itemLabel selectedItemLabel thumb arrow arrowText
EmojiPicker	container header searchInput skinToneButton skinToneMenu skinTonePopover categoryBar categoryTab activeCategoryTab categoryIndicator sectionHeader sectionHeaderText emojiCell emojiText empty emptyText
Menu	trigger menu header title message action actionLabel actionDescription check
ActionSheet	group header title message action actionLabel actionDescription check cancel cancelLabel
BottomSheet	backdrop sheet handle header title content footer

Picker sheets style their BottomSheet through sheetProps={{ styles: { … } }} and their picker through the picker's own styles.

Example: square calendar

Loading…

Platform

Props

weekdayFormat

showOutsideDays

<DatePicker mode="range" value={r} onChange={setR} styles={square} />

Example: outlined select field

Loading…

Platform

Props

presentation

disabled

<SelectPicker
  multiple
  label="TEAMS"
  options={['Design', 'Engineering', 'Marketing', 'Sales'].map((t) => ({
    label: t,
    value: t.toLowerCase(),
  }))}
  value={v}
  onChange={setV}
  styles={{
    label: { fontSize: 11, letterSpacing: 1.2, fontWeight: '700' },
    trigger: { borderWidth: 2, borderRadius: 4, minHeight: 56 },
    chip: { borderRadius: 4, backgroundColor: '#111827' },
    chipText: { color: '#FFFFFF' },
  }}
/>

Reusing styles

Define slot objects once and share them app-wide:

pickerStyles.ts

import type { SlotStyles, CalendarSlot, SelectSlot, SelectTriggerSlot } from '@elik56a/react-native-pickers';

export const calendarStyles: SlotStyles<CalendarSlot> = { headerTitle: { fontFamily: 'Inter-Bold' } };
export const selectStyles: SlotStyles<SelectSlot | SelectTriggerSlot> = { trigger: { minHeight: 52 } };

→ When a slot isn't enough, replace the part with a render prop.