How to use Multiple Select Dropdown in React Native ?

Hello Dev’s today now in this post i will show you How to use Multiple Select Dropdown in React Native ? Here I will explain all step by step tutorial how we can use multiple select dropdown in react native application . Here we will learn how to create the multiple select dropdown in react native. Here i will learn the multiple select dropdown example in react native. Now in this article i will give you a very simple example of how to implement the multiple select dropdown in react native.

Multiple Select Dropdown in React Native

We will do this in the following things for react native multiple select dropdown example. So in this example I will be create a multiple select dropdown. Now i will first create an object for render data in the dropdown. And then I will be use the MultiSelect component. So this component will be store the object in data props. So after then MultiSelect component is listing a data and select the multiple items.

Let’s start and follow the following example:

Step 1: Download Project

At the first step need to run the following command for create a new project.

expo init ExampleApp

Step 2: Installation and Setup

First, we have to install them in our project:

npm install react-native-element-dropdown --save

We also need to install vector icons to set the icon in the Dropdown:

npm i react-native-vector-icons

We need to use any bundled Icon:

import this:

import AntDesign from 'react-native-vector-icons/AntDesign';

Step 3: App.js

Now in this step, we need to open the App.js file and then put the code.

import React from 'react';
import { StatusBar, StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { MultiSelect } from 'react-native-element-dropdown';
import AntDesign from 'react-native-vector-icons/AntDesign';

const DATA = [
    { label: 'React Naive', value: '1' },
    { label: 'Javascript', value: '2' },
    { label: 'Laravel', value: '3' },
    { label: 'PHP', value: '4' },
    { label: 'jQuery', value: '5' },
    { label: 'Bootstrap', value: '6' },
    { label: 'HTML', value: '7' },
    { label: 'CSS', value: '8' },
];

const App = () => {
    const [selected, setSelected] = React.useState([]);

    const renderDataItem = (item) => {
        return (
            <View style={styles.item}>
                <Text style={styles.selectedTextStyle}>{item.label}</Text>
                <AntDesign style={styles.icon} color="black" name="Safety" size={20} />
            </View>
        );
    };

    return (
        <View style={styles.container}>
            <MultiSelect
                style={styles.dropdown}
                placeholderStyle={styles.placeholderStyle}
                selectedTextStyle={styles.selectedTextStyle}
                inputSearchStyle={styles.inputSearchStyle}
                iconStyle={styles.iconStyle}
                data={DATA}
                labelField="label"
                valueField="value"
                placeholder="Multi Select item"
                value={selected}
                search
                searchPlaceholder="Search..."
                onChange={item => {
                    setSelected(item);
                }}
                renderLeftIcon={() => (
                    <AntDesign
                        style={styles.icon}
                        color="black"
                        name="Safety"
                        size={20}
                    />
                )}
                renderItem={renderDataItem}
                renderSelectedItem={(item, unSelect) => (
                    <TouchableOpacity onPress={() => unSelect && unSelect(item)}>
                        <View style={styles.selectedStyle}>
                            <Text style={styles.textSelectedStyle}>{item.label}</Text>
                            <AntDesign color="black" name="delete" size={17} />
                        </View>
                    </TouchableOpacity>
                )}
            />
            <StatusBar />
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#37d5d2a2',
        paddingTop: 30,
        flex:1
    },
    dropdown: {
        height: 50,
        backgroundColor: 'white',
        borderRadius: 12,
        padding: 12,
        shadowColor: '#000',
        shadowOffset: {
            width: 0,
            height: 1,
        },
        shadowOpacity: 0.2,
        shadowRadius: 1.41,

        elevation: 2,
    },
    placeholderStyle: {
        fontSize: 16,
    },
    selectedTextStyle: {
        fontSize: 14,
    },
    iconStyle: {
        width: 20,
        height: 20,
    },
    inputSearchStyle: {
        height: 40,
        fontSize: 16,
    },
    icon: {
        marginRight: 5,
    },
    item: {
        padding: 17,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    selectedStyle: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 14,
        backgroundColor: 'white',
        shadowColor: '#000',
        marginTop: 8,
        marginRight: 12,
        paddingHorizontal: 12,
        paddingVertical: 8,
        shadowOffset: {
            width: 0,
            height: 1,
        },
        shadowOpacity: 0.2,
        shadowRadius: 1.41,

        elevation: 2,
    },
    textSelectedStyle: {
        marginRight: 5,
        fontSize: 16,
    },
});

export default App;

Run Project

In the last step run your project using the below command.

expo start

Read Also:

Read Also: How to Create Random String in React Native?

Thanks for read. I hope it help you. For more you can follow us on facebook