How to use Dropdown in React Native?

Hello dev’s today now in this article i will give you an example of How to use Dropdown in React Native? Here i will provide you an example of react native dropdown example.So in this example i will be help you how we can use dropdown in react native. From here you can understand a concept of how we can create dropdown in react native. if you have any question about dropdown example in react native then i hope you are in right location. here I will give you a simple example with solution. just need to Follow bellow tutorial step of how to implement dropdown in react native.

Now in this example I will create a dropdown. I will at first create an object to render data in the dropdown. Then I will be use the dropdown component. Now in this component i will store the object in data props. After then drowdown component listing a data.

Let’s start and see the following example:

Step 1: Download Project

Now In the first step need to run the following command to create a project.

expo init ExampleApp

Step 2: Installation and Setup

At First, we need to install them in our project:

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

we will install a 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 will open the App.js file and put the code.

import React from 'react';
import { StatusBar, StyleSheet, Text, View } from 'react-native';
import { Dropdown } 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 [value, setValue] = React.useState(null);
    const [Focus, setFocus] = React.useState(false);

    const renderLabelItem = () => {
        if (value || Focus) {
            return (
                <Text style={[styles.label, Focus && { color: 'blue' }]}>
                    Dropdown label
                </Text>
            );
        }
        return null;
    };

    return (
        <View style={styles.container}>
            {renderLabelItem()}
            <Dropdown
                data={DATA}
                style={[styles.dropdown, Focus && { borderColor: 'blue' }]}
                placeholderStyle={styles.placeholderStyle}
                selectedTextStyle={styles.selectedTextStyle}
                inputSearchStyle={styles.inputSearchStyle}
                iconStyle={styles.iconStyle}
                search
                maxHeight={300}
                labelField="label"
                valueField="value"
                placeholder={!Focus ? 'Select item' : '...'}
                searchPlaceholder="Search..."
                value={value}
                onFocus={() => setFocus(true)}
                onBlur={() => setFocus(false)}
                onChange={item => {
                    setValue(item.value);
                    setFocus(false);
                }}
                renderLeftIcon={() => (
                    <AntDesign
                        style={styles.icon}
                        color={Focus ? 'blue' : 'black'}
                        name="Safety"
                        size={20}
                    />
                )}
            />
            <StatusBar />
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'white',
        paddingTop: 30,
    },
    dropdown: {
        height: 50,
        borderColor: 'gray',
        borderWidth: 0.5,
        borderRadius: 8,
        paddingHorizontal: 8,
    },
    icon: {
        marginRight: 5,
    },
    label: {
        position: 'absolute',
        backgroundColor: 'white',
        left: 22,
        top: 20,
        zIndex: 999,
        paddingHorizontal: 8,
        fontSize: 14,
    },
    placeholderStyle: {
        fontSize: 16,
    },
    selectedTextStyle: {
        fontSize: 16,
    },
    iconStyle: {
        width: 20,
        height: 20,
    },
    inputSearchStyle: {
        height: 40,
        fontSize: 16,
    },
});

export default App;

Run Project

Now at the last step the run our project by using the below command.

expo start

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