How to Create Dynamic Dropdown in React Native?

Jun 23, 2022

.

Admin

How to Create Dynamic Dropdown in React Native?

Hi Guys,

In this example, you will learn how to create dynamic dropdown in react native. we will help you to give example of react native dynamic dropdown example. I would like to show you how to implement dynamic dropdown in react native. this example will help you dynamic dropdown example in react native. You just need to some step to done how to use dynamic dropdown in react native.

Let's start following example:

Step 1: Download Project


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

expo init ExampleApp

Step 2: Install Axios

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

npm install axios

Step 3: Install Dropdown

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 this:

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

Step 4: App.js

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('//nicesnippets.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('//nicesnippets.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;

Run Project

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

expo start

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

Output :

It will help you...

#React Native