Skip to main content
Version: Next 🚧

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

ComponentSlots
WheelPickercontainer item itemText selectedItemText disabledItemText indicator
MultiWheelPicker / TimePicker / DateWheelPicker / DurationPickercontainer indicator separator item itemText selectedItemText disabledItemText
Calendar / DatePickercontainer header headerTitle arrow arrowText weekdays weekdayText week day dayInner dayText selectedDay selectedDayText todayDay todayDayText disabledDayText outsideDayText rangeBand dot dayLabel gridCell gridCellText
MonthPickerthe wheel slots, or the grid's header headerTitle arrow arrowText gridCell gridCellText
WeekStripthe Calendar slots
ColorPickercontainer swatch pad slider sliderThumb sliderLabel hexInput preview
SelectListcontainer search searchInput list groupHeader groupHeaderText option selectedOption optionLabel selectedOptionLabel optionDescription check empty emptyText loading loadingText
SelectPickerall SelectList slots + trigger triggerText placeholder label chip chipText chevron clear
HorizontalListcontainer content item selectedItem itemLabel selectedItemLabel thumb arrow arrowText
EmojiPickercontainer header searchInput skinToneButton skinToneMenu categoryBar categoryTab activeCategoryTab categoryIndicator sectionHeader sectionHeaderText emojiCell emojiText empty emptyText
BottomSheetbackdrop 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…
<DatePicker mode="range" value={r} onChange={setR} styles={square} />

Example: outlined select field​

Loading…
<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.