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}

Type	Required
ItemType[]	true

• See: Item Schema and List and items

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

props

Adds native props for the container TouchableOpacity.

props={{

//

}}

itemProps

Adds native props for the TouchableOpacity of each item.

itemProps={{

//

}}

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

stickyHeader

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

stickyHeader={true}

Type
boolean

autoScroll

Automatically scrolls to the first selected item.

autoScroll={true}

Type
boolean

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
(callback: SetStateAction[]) => void

setValue

State callback that is called when the value changes.

setValue={setValue}

• See: Class Components

Type	Required
(callback: SetStateAction) => void	true

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"

}}