How to Implement Dynamic Dropdown in React native?

Hi Guys,

Today, I will let you know example of how to implement dynamic dropdown in react native. you can understand a concept of how to create dynamic dropdown in react native. you can understand a concept of how to use dynamic dropdown in react native. step by step explain dynamic dropdown example in react native. Here, Creating a basic example of react native dynamic dropdown example.

Let's start following example:

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

expo init ExampleApp

First, you need to install axois them in your project:

npm install axios

In this step, you need to install dropdown them in your project:

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

You install vector icons to set the icon in the Dropdown:

npm i react-native-vector-icons

You have use any bundled Icon:

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

In this step, You will open the App.js file and put the code.

import React, { useState, useEffect } from 'react';
import { Button, ScrollView, StatusBar, StyleSheet, Text, View } from 'react-native';
import { Dropdown } from 'react-native-element-dropdown';
import { TextInput } from 'react-native-paper';
import AntDesign from 'react-native-vector-icons/AntDesign';
import axios from 'axios';

const App = () => {

    // TextInput Field Hooks
    const [title, setTitle] = useState('');
    const [category_id, setCategoryId] = useState('');
    const [description, setDescription] = useState('');
    const [category, setCategory] = useState([]);
    const [Focus, setFocus] = useState(false);
    const [loading, setLoading] = useState(true);

    // Store Data  
    const [post, setPost] = useState([]);
    const [sucessMsg, setSucessMsg] = useState('');

    // Validation Error Hooks
    const [categoryIdErr, setCategoryIdErr] = useState(null);
    const [titleErr, setTitleErr] = useState(null);
    const [descriptionErr, setDescriptionErr] = useState(null);

    useEffect(() => {
        setLoading(true);
        axios.get('http://tuts-station.com/api/post/create')
            .then(response => {
                var count = Object.keys(response.data).length;
                let dropDownData = [];
                for (var i = 0; i < count; i++) {
                    dropDownData.push({ value: response.data[i].id, label: response.data[i].name }); // Create your array of data
                }
                setCategory(dropDownData);
            }).catch(error => {
                console.log(error.response);
            }).finally(() => setLoading(false));
    }, []);

    const createPostHandler = () => {
        setLoading(true);
        axios.post('http://tuts-station.com/api/post', {
            category_id,
            title,
            description,
        }).then(response => {
            console.log(response.data);
            setPost(response.data.post);
            setSucessMsg(response.data.message);
        }).catch(error => {
            setCategoryIdErr(error.response.data.errors.category_id);
            setTitleErr(error.response.data.errors.title);
            setDescriptionErr(error.response.data.errors.description);
            console.log(error.response);
        }).finally(() => setLoading(false));
    }

    return (
        <ScrollView style={styles.container}>
            <View style={styles.container}>
                <View style={styles.innerContainer}>
                    <Text style={[styles.success, sucessMsg ? styles.bgSuccess: null  ]}>{sucessMsg}</Text>
                    <Dropdown
                        data={category}
                        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 Category' : '...'}
                        searchPlaceholder="Search..."
                        value={category_id}
                        onFocus={() => setFocus(true)}
                        onBlur={() => setFocus(false)}
                        onChange={item => {
                            setCategoryId(item.value);
                            setFocus(false);
                        }}
                        renderLeftIcon={() => (
                            <AntDesign
                                style={styles.icon}
                                color={Focus ? 'blue' : 'black'}
                                name="Safety"
                                size={20}
                            />
                        )}
                    />
                    {categoryIdErr &&
                        <Text style={{ color: 'red' }}>{categoryIdErr}</Text>
                    }
                    <View style={styles.inputContainer}>
                        <Text style={styles.inputLabel}>Title:<Text style={{ color: 'red' }}>*</Text></Text>
                        <TextInput
                            label='Enter Title'
                            mode='outlined'
                            onChangeText={text => setTitle(text)}
                            value={title}
                        />
                        {titleErr &&
                            <Text style={{ color: 'red' }}>{titleErr}</Text>
                        }
                    </View>
                    <View style={styles.inputContainer}>
                        <Text style={styles.inputLabel}>Description: <Text style={{ color: 'red' }}>*</Text></Text>
                        <TextInput
                            label='Enter Description'
                            mode='outlined'
                            multiline
                            style={{ minHeight: 150 }}
                            onChangeText={text => setDescription(text)}
                            value={description}
                        />
                        {descriptionErr &&
                            <Text style={{ color: 'red' }}>{descriptionErr}</Text>
                        }
                    </View>
                    <View style={styles.inputContainer}>
                        <Button
                            title='submit'
                            onPress={createPostHandler}
                        />
                    </View>
                    <StatusBar />
                </View>
            </View>
        </ScrollView>
    );
}

const styles = StyleSheet.create({
    container: {
        paddingTop: 70,
        paddingHorizontal: 5,
        flex: 1,
        backgroundColor: '#40d6ea'
    },
    innerContainer: {
        borderRadius: 20,
        paddingVertical: 60,
        paddingHorizontal: 20,
        backgroundColor: 'white'
    },
    dropdown: {
        height: 50,
        borderColor: 'gray',
        borderWidth: 0.5,
        borderRadius: 8,
        paddingHorizontal: 8,
        backgroundColor: 'white'
    },
    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,
    },
    inputContainer: {
        marginTop: 10,
    },
    inputLabel: {
        fontSize: 17,
    },
    success: {
        textAlign:'center',
        marginBottom:10, 
        padding:10,
        color:'white',
        borderRadius:10, 
    },
    bgSuccess: {
        backgroundColor:'#228822d6',
    }
});

export default App;

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

expo start

You can QR code scan in Expo Go Application on mobile.

It will help you...