MultiWheelPicker

MultiWheelPicker puts several React Native WheelPickers side by side, sharing one selection band, the way iOS shows time and date wheels. TimePicker and DateWheelPicker are built on it. Use it for durations, heights, weights, currency + amount, or anything multi-column.

import { MultiWheelPicker } from '@elik56a/react-native-pickers';

Loading…

Props

variant

<MultiWheelPicker
  separator=":"
  columns={[
    { key: 'h', items: range(24), value: h, onChange: setH },
    { key: 'm', items: range(60), value: m, onChange: setM, loop: true },
    { key: 's', items: range(60), value: s, onChange: setS, loop: true },
  ]}
/>

Try the props

variant

visibleItems

itemHeight

<MultiWheelPicker columns={columns} separator=":" />

Columns

Each entry in columns is a WheelPicker's props (minus the shared ones below) plus layout keys:

type WheelColumn<T> = Omit<WheelPickerProps<T>, 'itemHeight' | 'visibleItems' | 'variant' | 'showIndicator' | 'theme'> & {
  key: string;     // React key, required
  flex?: number;   // flex weight, default 1
  width?: number;  // fixed width instead of flex
  suffix?: string; // text after the column at the selection band, such as a unit
};

So every column has its own items, value, onChange, onValueChanging, loop, renderItem, keyboardInput, isEqual, textAlign, disabled, styles and so on. itemHeight, visibleItems, variant and theme are set once on the MultiWheelPicker so all columns line up.

Labels and separators

separator is placed between every pair of columns. A string is rendered as bold text (style it with the separator slot), and any React node is rendered as-is. Pass a function to choose per gap: it gets the index of the column on the left and can return null to skip that gap.

Loading…

Props

variant

<>
  <MultiWheelPicker
    columns={[
      {
        key: 'ft',
        items: feet,
        value: ft,
        onChange: setFt,
        textAlign: 'right',
      },
      {
        key: 'in',
        items: inches,
        value: inch,
        onChange: setInch,
        textAlign: 'left',
      },
    ]}
  />
  <Text style={{ textAlign: 'center', color: '#6E685E' }}>
    {ft}′{inch}″ = {Math.round((ft * 12 + inch) * 2.54)} cm
  </Text>
</>

For a unit after each column, such as min, set the column's suffix instead: it's shown after the column at the selection band in the theme's secondary text color, and the separator slot styles it too. DurationPicker labels its wheels this way.

Column widths

Use flex for proportional columns and width for fixed ones:

Loading…

Props

variant

<MultiWheelPicker
  variant="flat"
  columns={[
    {
      key: 'cur',
      items: ['USD', 'EUR', 'GBP', 'ILS'],
      value: cur,
      onChange: setCur,
      width: 90,
    },
    {
      key: 'amount',
      items: amounts,
      value: amount,
      onChange: setAmount,
      flex: 2,
    },
  ]}
/>

Dependent columns

Columns are plain props, so derive one from another in render. Here the model list depends on the brand:

Loading…

Props

variant

<MultiWheelPicker
  columns={[
    {
      key: 'brand',
      items: Object.keys(models),
      value: brand,
      onChange: (b) => {
        setBrand(b);
        setModel(models[b][0]);
      },
    },
    {
      key: 'model',
      items: models[brand],
      value: model,
      onChange: setModel,
      flex: 1.4,
    },
  ]}
/>

Props

Prop	Type	Default	Description
columns	WheelColumn[]	required	One entry per wheel; see Columns.
separator	ReactNode | ((leftIndex: number) => ReactNode)	—	Content between columns. Strings use the separator slot style.
itemHeight	number	40	Row height shared by all columns.
visibleItems	number	5	Visible rows (odd) shared by all columns.
variant	'3d' | 'flat'	'3d'	Wheel style for all columns.
style	StyleProp<ViewStyle>	—	Outer container style.
styles	SlotStyles<MultiWheelSlot>	—	Slot styles, applied to every column (a column's own styles win).
theme	DeepPartial<PickerTheme>	—	Theme override for all columns.
design	'ios' | 'material' | 'web'	from PickersProvider	The look to follow, over the provider's: iOS, Material or web.
testID	string	—	Test ID on the container.

Slots

Slot	Element
container	Outer view
indicator	The shared selection band
separator	String separators
item, itemText, selectedItemText, disabledItemText	Forwarded to every column's wheel

type MultiWheelSlot = 'container' | 'indicator' | 'separator' | WheelPickerSlot;

Related

• TimePicker and DateWheelPicker are pre-built MultiWheelPickers
• Duration recipe