DEV Community

Cover image for Creating a multi-value select box or dropdown menu in React Native without using the Picker component
Mustafa Onur Çelik
Mustafa Onur Çelik

Posted on • Updated on

Creating a multi-value select box or dropdown menu in React Native without using the Picker component

To create a multi-value select box or dropdown menu in React Native without using the Picker component, you can use the Dropdown component from the react-native-material-dropdown package and set the multiple prop to true. Here's an example of how you can use this component to create a multi-value select box:

import React, { useState } from 'react';
import { View } from 'react-native';
import Dropdown from 'react-native-material-dropdown';

const App = () => {
  const [value, setValue] = useState([]);

  const options = [
    { value: 'option1', label: 'Option 1' },
    { value: 'option2', label: 'Option 2' },
    { value: 'option3', label: 'Option 3' },
  ];

  return (
    <View>
      <Dropdown
        value={value}
        onChangeText={setValue}
        data={options}
        multiple
      />
    </View>
  );
};

export default App;

Enter fullscreen mode Exit fullscreen mode

This code will render a multi-value select box with three options. When the user selects multiple options, the value state will be updated with an array of the selected values, and the component will re-render to show the selected options.

Top comments (0)