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

AWS GenAI LIVE!

GenAI LIVE! is a dynamic live-streamed show exploring how AWS and our partners are helping organizations unlock real value with generative AI.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️