Skip to main content
Version: 5.1

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}
setOpen={setOpen}
setValue={setValue}
setItems={setItems}
/>
);
}

Multiple items

In the following example you can select multiple items.

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

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

Class Components

The following example shows how you can use the package in class components.

class App extends Component {
constructor(props) {
super(props);

this.state = {
open: false,
value: null,
items: [{...}, ...]
};

this.setValue = this.setValue.bind(this);
}

setOpen(open) {
this.setState({
open
});
}

setValue(callback) {
this.setState(state => ({
value: callback(state.value)
}));
}

setItems(callback) {
this.setState(state => ({
items: callback(state.items)
}));
}

render() {
const { open, value, items } = this.state;

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

Props

items

State variable that holds the items.

items={items}
TypeRequired
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}
TypeRequired
ValueType | ValueType[]true

open

State variable that specifies whether the picker is open.

open={open}
TypeRequired
booleantrue

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.

TypeDefault
numbernull

max

Specifies the maximum number of items.

max={10}
note

This only works with multiple item pickers.

TypeDefault
numbernull

disabled

Disables the picker.

disabled={true}
TypeDefault
booleanfalse

maxHeight

Max height of the drop-down box.

maxHeight={200}
TypeDefault
number200

disableBorderRadius

Disables changing the border radius when opening.

disableBorderRadius={true}
TypeDefault
booleanfalse

Makes categories stick to the top of the screen until the next one pushes it off.

stickyHeader={true}
Type
boolean

zIndex

Specifies the stack order.

zIndex={1000}
TypeDefault
number5000

zIndexInverse

Specifies the inverse stack order.

zIndexInverse={1000}
TypeDefault
number6000

Callbacks

setOpen

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

setOpen={setOpen}
TypeRequired
(open: boolean) => voidtrue

setItems

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

setItems={setItems}
Type
(callback: SetStateAction[]) => void

setValue

State callback that is called when the value changes.

setValue={setValue}
TypeRequired
(callback: SetStateAction) => voidtrue

onChangeValue

Callback that returns the current value.

onChangeValue={(value) => {
console.log(value);
}}
Type
(value: ValueType) => void | (value: ValueType[]) => void | null

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"
}}