The select dropdown feature is useful for presenting users with a list of predefined options which they can select from.
To achieve this in React Native, we make use of the react-native-select-dropdown
The react-native-select-dropdown is a highly customized dropdown | select | picker | menu for react native that works for andriod and iOS platforms.
First, we install this dependency in our application.
yarn add react-native-select-dropdown
Then we can use in any of the following ways:
import React from 'react';
import {View, Text, SafeAreaView, StatusBar, Dimensions, StyleSheet, ScrollView, Image} from 'react-native';
const {width} = Dimensions.get('window');
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import Ionicons from 'react-native-vector-icons/Ionicons';
import SelectDropdown from 'react-native-select-dropdown';
export default Demo1 = () => {
const countries = [
'Egypt',
'Canada',
'Australia',
'Ireland',
'Brazil',
'England',
'Dubai',
'France',
'Germany',
'Saudi Arabia',
'Argentina',
'India',
];
const countriesWithFlags = [
{title: 'Egypt', image: require('./Images/Egypt.png')},
{title: 'Canada', image: require('./Images/Canada.png')},
{title: 'Australia', image: require('./Images/Australia.png')},
{title: 'Ireland', image: require('./Images/Ireland.png')},
{title: 'Brazil', image: require('./Images/Brazil.png')},
{title: 'England', image: require('./Images/England.jpg')},
{title: 'Dubai', image: require('./Images/Dubai.png')},
];
const renderHeader = () => {
return (
<View style={[styles.header, styles.shadow]}>
<Text style={styles.headerTitle}>{'Demo 1'}</Text>
</View>
);
};
return (
<SafeAreaView style={styles.saveAreaViewContainer}>
<StatusBar backgroundColor="#FFF" barStyle="dark-content" />
<View style={styles.viewContainer}>
{renderHeader()}
<ScrollView
showsVerticalScrollIndicator={false}
alwaysBounceVertical={false}
contentContainerStyle={styles.scrollViewContainer}>
<SelectDropdown
data={countries}
// defaultValueByIndex={1} // use default value by index or default value
// defaultValue={'Canada'} // use default value by index or default value
onSelect={(selectedItem, index) => {
console.log(selectedItem, index);
}}
buttonTextAfterSelection={(selectedItem, index) => {
return selectedItem;
}}
rowTextForSelection={(item, index) => {
return item;
}}
/>
<SelectDropdown
data={countries}
// defaultValueByIndex={1}
// defaultValue={'Egypt'}
onSelect={(selectedItem, index) => {
console.log(selectedItem, index);
}}
defaultButtonText={'Select country'}
buttonTextAfterSelection={(selectedItem, index) => {
return selectedItem;
}}
rowTextForSelection={(item, index) => {
return item;
}}
buttonStyle={styles.dropdown1BtnStyle}
buttonTextStyle={styles.dropdown1BtnTxtStyle}
renderDropdownIcon={isOpened => {
return <FontAwesome name={isOpened ? 'chevron-up' : 'chevron-down'} color={'#444'} size={18} />;
}}
dropdownIconPosition={'right'}
dropdownStyle={styles.dropdown1DropdownStyle}
rowStyle={styles.dropdown1RowStyle}
rowTextStyle={styles.dropdown1RowTxtStyle}
/>
<SelectDropdown
data={countries}
// defaultValueByIndex={1}
// defaultValue={'England'}
onSelect={(selectedItem, index) => {
console.log(selectedItem, index);
}}
defaultButtonText={'Select country'}
buttonTextAfterSelection={(selectedItem, index) => {
return selectedItem;
}}
rowTextForSelection={(item, index) => {
return item;
}}
buttonStyle={styles.dropdown2BtnStyle}
buttonTextStyle={styles.dropdown2BtnTxtStyle}
renderDropdownIcon={isOpened => {
return <FontAwesome name={isOpened ? 'chevron-up' : 'chevron-down'} color={'#FFF'} size={18} />;
}}
dropdownIconPosition={'right'}
dropdownStyle={styles.dropdown2DropdownStyle}
rowStyle={styles.dropdown2RowStyle}
rowTextStyle={styles.dropdown2RowTxtStyle}
/>
<SelectDropdown
data={countriesWithFlags}
// defaultValueByIndex={1}
// defaultValue={{
// title: 'England',
// image: require('./Images/England.jpg'),
// }}
onSelect={(selectedItem, index) => {
console.log(selectedItem, index);
}}
buttonStyle={styles.dropdown3BtnStyle}
renderCustomizedButtonChild={(selectedItem, index) => {
return (
<View style={styles.dropdown3BtnChildStyle}>
{selectedItem ? (
<Image source={selectedItem.image} style={styles.dropdown3BtnImage} />
) : (
<Ionicons name="md-earth-sharp" color={'#444'} size={32} />
)}
<Text style={styles.dropdown3BtnTxt}>{selectedItem ? selectedItem.title : 'Select country'}</Text>
<FontAwesome name="chevron-down" color={'#444'} size={18} />
</View>
);
}}
dropdownStyle={styles.dropdown3DropdownStyle}
rowStyle={styles.dropdown3RowStyle}
renderCustomizedRowChild={(item, index) => {
return (
<View style={styles.dropdown3RowChildStyle}>
<Image source={item.image} style={styles.dropdownRowImage} />
<Text style={styles.dropdown3RowTxt}>{item.title}</Text>
</View>
);
}}
/>
<SelectDropdown
data={countriesWithFlags}
// defaultValueByIndex={1}
// defaultValue={'India'}
onSelect={(selectedItem, index) => {
console.log(selectedItem, index);
}}
defaultButtonText={'Select country'}
buttonTextAfterSelection={(selectedItem, index) => {
return selectedItem.title;
}}
rowTextForSelection={(item, index) => {
return item.title;
}}
buttonStyle={styles.dropdown4BtnStyle}
buttonTextStyle={styles.dropdown4BtnTxtStyle}
renderDropdownIcon={isOpened => {
return <FontAwesome name={isOpened ? 'chevron-up' : 'chevron-down'} color={'#444'} size={18} />;
}}
dropdownIconPosition={'left'}
dropdownStyle={styles.dropdown4DropdownStyle}
rowStyle={styles.dropdown4RowStyle}
rowTextStyle={styles.dropdown4RowTxtStyle}
/>
</ScrollView>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
shadow: {
shadowColor: '#000',
shadowOffset: {width: 0, height: 6},
shadowOpacity: 0.1,
shadowRadius: 10,
elevation: 10,
},
header: {
flexDirection: 'row',
width,
height: 50,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#F6F6F6',
},
headerTitle: {color: '#000', fontWeight: 'bold', fontSize: 16},
saveAreaViewContainer: {flex: 1, backgroundColor: '#FFF'},
viewContainer: {flex: 1, width, backgroundColor: '#FFF'},
scrollViewContainer: {
flexGrow: 1,
justifyContent: 'space-between',
alignItems: 'center',
paddingVertical: '10%',
paddingBottom: '20%',
},
dropdown1BtnStyle: {
width: '80%',
height: 50,
backgroundColor: '#FFF',
borderRadius: 8,
borderWidth: 1,
borderColor: '#444',
},
dropdown1BtnTxtStyle: {color: '#444', textAlign: 'left'},
dropdown1DropdownStyle: {backgroundColor: '#EFEFEF'},
dropdown1RowStyle: {backgroundColor: '#EFEFEF', borderBottomColor: '#C5C5C5'},
dropdown1RowTxtStyle: {color: '#444', textAlign: 'left'},
dropdown2BtnStyle: {
width: '80%',
height: 50,
backgroundColor: '#444',
borderRadius: 8,
},
dropdown2BtnTxtStyle: {
color: '#FFF',
textAlign: 'center',
fontWeight: 'bold',
},
dropdown2DropdownStyle: {
backgroundColor: '#444',
borderBottomLeftRadius: 12,
borderBottomRightRadius: 12,
},
dropdown2RowStyle: {backgroundColor: '#444', borderBottomColor: '#C5C5C5'},
dropdown2RowTxtStyle: {
color: '#FFF',
textAlign: 'center',
fontWeight: 'bold',
},
dropdown3BtnStyle: {
width: '80%',
height: 50,
backgroundColor: '#FFF',
paddingHorizontal: 0,
borderWidth: 1,
borderRadius: 8,
borderColor: '#444',
},
dropdown3BtnChildStyle: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingHorizontal: 18,
},
dropdown3BtnImage: {width: 45, height: 45, resizeMode: 'cover'},
dropdown3BtnTxt: {
color: '#444',
textAlign: 'center',
fontWeight: 'bold',
fontSize: 24,
marginHorizontal: 12,
},
dropdown3DropdownStyle: {backgroundColor: 'slategray'},
dropdown3RowStyle: {
backgroundColor: 'slategray',
borderBottomColor: '#444',
height: 50,
},
dropdown3RowChildStyle: {
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
paddingHorizontal: 18,
},
dropdownRowImage: {width: 45, height: 45, resizeMode: 'cover'},
dropdown3RowTxt: {
color: '#F1F1F1',
textAlign: 'center',
fontWeight: 'bold',
fontSize: 24,
marginHorizontal: 12,
},
dropdown4BtnStyle: {
width: '50%',
height: 50,
backgroundColor: '#FFF',
borderRadius: 8,
borderWidth: 1,
borderColor: '#444',
},
dropdown4BtnTxtStyle: {color: '#444', textAlign: 'left'},
dropdown4DropdownStyle: {backgroundColor: '#EFEFEF'},
dropdown4RowStyle: {backgroundColor: '#EFEFEF', borderBottomColor: '#C5C5C5'},
dropdown4RowTxtStyle: {color: '#444', textAlign: 'left'},
});
To use the dropdown icon, you need to add react-native-vector-icons to your project.
How to use Google Places Autocomplete Search in React Native
In modern web development, dynamically manipulating HTML elements is essential for creating interactive and responsive…
If you've ever encountered the puzzling behavior of parseInt('09') returning 0 in JavaScript, you're not…
If you’ve ever built an interactive web application, you may have encountered a puzzling issue:…
Arrays are the backbone of programming, used in nearly every application. Whether you're manipulating data,…
If you've ever tried to learn JavaScript, you’ve probably heard about the "Event Loop"—that mysterious,…
JavaScript can sometimes behave in unexpected ways, especially when comparing arrays and objects. If you've…