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

testID

Used to locate the picker in end-to-end tests.

testID="picker-testid"

Type
string

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

onSelectItem

Callback that returns the selected item / items.

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

Type
(item: ItemType) => void | (items: ItemType[]) => 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"
}}