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