Picker - Selector

Effect demonstration

1. Single column pop-up window

const [visible, setVisible] = React.useState(false);
const [value, setValue] = React.useState<Array<string | number>>();
 const singleData = [
    {label: 'One', value: 1},
    {label: 'Two', value: 2},
    {label: 'Three', value: 3},
  ];
...
<Button title="Open" onPress={() => setVisible(true)} />
<Text variant={'h3'}>{value}</Text>
<Picker
  title="Please select"
  visible={visible}
  cols={1}
  onClose={() => setVisible(false)}
  data={singleData}
  value={value}
  onChange={val => setValue(val)}
/>

2. Multi-column pop-up window

 const multiData = [
    [
      {label: 'One', value: 1},
      {label: 'Two', value: 2},
      {label: 'Three', value: 3},
    ],
    [
      {label: 'Four', value: 4},
      {label: 'Five', value: 5},
      {label: 'Six', value: 6},
    ],
  ];
...
<Button title="Open" onPress={() => setVisible(true)} />
<Text variant={'h3'}>{value?.map(e=> `${e} value `)}</Text>
<Picker
  title="Please select"
  visible={visible}
  cols={1}
  onClose={() => setVisible(false)}
  data={multiData}
  value={value}
  onChange={val => setValue(val)}
/>

3. Cascading pop-up windows

 const cascadeData = [
    [
      {label: 'One', value: 1},
      {label: 'Two', value: 2},
      {label: 'Three', value: 3},
    ],
    [
      {label: 'Four', value: 4},
      {label: 'Five', value: 5},
      {label: 'Six', value: 6},
    ],
    [
      {label: 'Seven', value: 7},
      {label: 'Eight', value: 8},
      {label: 'Nine', value: 9},
    ],
  ];
...
<Picker
  title="Please select a number"
  visible={visible}
  cols={3}
  cascade
  onClose={() => setVisible(false)}
  data={cascadeData}
  value={value}
  onChange={(val) => setValue(val)}
/>

API

Picker properties

Properties	Required	Description	Type	Default Value
data	true	Selection data	CascadePickerItemProps[] | Array<CascadePickerItemProps[]>	[]
cascade	false	Whether to cascade selection	boolean	false
cols	false	Select the number of columns	number	3
value	false	selected value	ItemValue[]
onChange	false	Selection callback	(value?: ItemValue[]) => void
title	false	Selector title	string
displayType	false	Selector display type	view | modal	modal
visible	false	Control pop-up window display	boolean
onClose	false	Pop-up window closing event	() => void
cancelText	false	Cancel button text	string	Cancel
okText	false	Confirm button text	string	OK
activeOpacity	false	Opacity when pressed	number	0.6

_CascadePickerItemProps Inherited from @react-native-picker/picker of PickerItemProps Attributes

export interface CascadePickerItemProps extends PickerItemProps {
  children?: CascadePickerItemProps[];
}

export interface PickerItemProps {
  label?: string;
  value: ItemValue;
  color?: string;
  testID?: string;
}

export type ItemValue = number | string;