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 • Edited on

3 2

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.

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more