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"

}}