Usage | React Native Dropdown Picker (2024)

Examples​ Single item​ Multiple items​ Class Components​ Props​ items​ value​ open​ props​ itemProps​ containerProps​ labelProps​ min​ max​ disabled​ maxHeight​ disableBorderRadius​ stickyHeader​ autoScroll​ testID​ zIndex​ zIndexInverse​ Callbacks​ setOpen​ setItems​ setValue​ onChangeValue​ onSelectItem​ onPress​ onOpen​ onClose​ Styling​ style​ containerStyle​ disabledStyle​ textStyle​ labelStyle​ FAQs

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}
 />
 );
}

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

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

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}
 ...
 />
 );
 }
}

items={items}

value={value}

open={open}

props={{
 //
}}

itemProps={{
 //
}}

containerProps={{
 //
}}

labelProps={{
 numberOfLines: 1
}}

min={0}

max={10}

disabled={true}

maxHeight={200}

disableBorderRadius={true}

stickyHeader={true}

autoScroll={true}

testID="picker-testid"

zIndex={1000}

zIndexInverse={1000}

setOpen={setOpen}

setItems={setItems}

setValue={setValue}

onChangeValue={(value) => {
 console.log(value);
}}

onSelectItem={(item) => {
 console.log(item);
}}

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

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

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

style={{
 backgroundColor: "crimson"
}}

containerStyle={{

}}

disabledStyle={{
 opacity: 0.5
}}

textStyle={{
 fontSize: 15
}}

labelStyle={{
 fontWeight: "bold"
}}