Usage

Examples

Single item

In the following example you can select only one item.

import DropDownPicker from 'react-native-dropdown-picker';

function App() {
  const [open, setOpen] = useState(false);
  const [value, setValue] = useState(null);
  const [items, setItems] = useState([
    {label: 'Apple', value: 'apple'},
    {label: 'Banana', value: 'banana'}
  ]);

  return (
    <DropDownPicker
      open={open}
      value={value}
      items={items}
      setValue={setValue}
      setItems={setItems}
      setOpen={setOpen}
    />
  );
}

Multiple items

In the following example you can select multiple items.

const [value, setValue] = useState([]);

<DropDownPicker
  multiple={true}
  min={0}
  max={5}
  ...
/>

Props

items

State variable that holds the items.

items={items}

Type	Required
ItemType[]	true

value

State variable that specifies the value of the selected item. It's an array of values for multiple item pickers.

value={value}

Type	Required
ValueType | ValueType[]	true

open

State variable that specifies whether the picker is open.

open={open}

Type	Required
boolean	true

containerProps

Adds native props for the container.

containerProps={{
  //
}}

Type
ViewProps

labelProps

Adds native props for the Text element of the selected item.

labelProps={{
  numberOfLines: 1
}}

Type
TextProps

min

Specifies the minimum number of items.

min={0}

note

This only works with multiple item pickers.

Type	Default
number	null

max

Specifies the maximum number of items.

max={10}

note

This only works with multiple item pickers.

Type	Default
number	null

disabled

Disables the picker.

disabled={true}

Type	Default
boolean	false

maxHeight

Max height of the drop-down box.

maxHeight={200}

Type	Default
number	200

disableBorderRadius

Disables changing the border radius when opening.

disableBorderRadius={true}

Type	Default
boolean	false

zIndex

Specifies the stack order.

zIndex={1000}

Type	Default
number	5000

• See: Multiple Pickers

zIndexInverse

Specifies the inverse stack order.

zIndexInverse={1000}

Type	Default
number	6000

• See: Multiple Pickers

Callbacks

setOpen

State callback that is called when the user presses the picker.

setOpen={setOpen}

Type	Required
(open: boolean) => void	true

setItems

State callback that is called to modify or add new items.

setItems={setItems}

Type	Required
(callback: SetStateAction) => void	true

setValue

State callback that is called when the value changes.

setValue={setValue}

Type	Required
(callback: SetStateAction) => void	true

onPress

Callback that is called as soon as the user presses the picker.

onPress={(open) => console.log('was the picker open?', open)}

Type
(open: boolean) => void

onOpen

Callback that is called when the user opens the picker.

onOpen={() => console.log('hi!')}

Type
() => void

onClose

Callback that is called when the user closes the picker.

onClose={() => console.log('bye!')}

Type
() => void

Styling

style

style={{
  backgroundColor: "crimson"
}}

containerStyle

containerStyle={{

}}

disabledStyle

disabledStyle={{
  opacity: 0.5
}}

textStyle

textStyle={{
  fontSize: 15
}}

labelStyle

labelStyle={{
  fontWeight: "bold"
}}