Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 328 Commits
.github		.github
example		example
scripts		scripts
src		src
.editorconfig		.editorconfig
.gitattributes		.gitattributes
.gitignore		.gitignore
.nvmrc		.nvmrc
.watchmanconfig		.watchmanconfig
.yarnrc		.yarnrc
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
babel.config.js		babel.config.js
lefthook.yml		lefthook.yml
package.json		package.json
tsconfig.build.json		tsconfig.build.json
tsconfig.json		tsconfig.json
yarn.lock		yarn.lock

Repository files navigation

react-native-element-dropdown

React Native Element Dropdown is a library that provides a customizable dropdown component for React Native applications. This library simplifies the process of creating dropdown menus and provides a variety of options to customize the dropdown to match the design and functionality of your application.

Features

Dropdown and Multiselect in one package
Easy to use
Consistent look and feel on iOS and Android
Customizable font size, colors and animation duration
Implemented with typescript

Ifyoulovethislibrary,giveusastar,youwillbearayofsunshineinourlives :)

Free React Native Boilerplate

React Native Template with a beautiful UI.

Getting started

npminstallreact-native-element-dropdown--save

yarnaddreact-native-element-dropdown

Demo

Dropdown Props

Props	Params	isRequire	Description
mode	'default' or 'modal' of 'auto'	No	Mode 'modal' is show the dropdown in the middle of the screen.
data	Array	Yes	Data is a plain array
labelField	String	Yes	Extract the label from the data item
valueField	String	Yes	Extract the primary key from the data item
searchField	String	No	Specify the field of data list you want to search
onChange	(item: object) => void	Yes	Selection callback
onChangeText	(search: string) => void	No	Callback that is called when the text input's text changes
value	Item	No	Set default value
placeholder	String	No	The string that will be rendered before dropdown has been selected
placeholderStyle	TextStyle	No	Styling for text placeholder
selectedTextStyle	TextStyle	No	Styling for selected text
selectedTextProps	TextProps	No	Text Props for selected text. Ex: numberOfLines={1}
style	ViewStyle	No	Styling for view container
containerStyle	ViewStyle	No	Styling for list container
maxHeight	Number	No	Customize max height for list container
minHeight	Number	No	Customize min height for list container
fontFamily	String	No	Customize font style
iconStyle	ImageStyle	No	Styling for icon
iconColor	String	No	Color of icons
itemContainerStyle	TextStyle	No	Styling for item container in list
itemTextStyle	TextStyle	No	Styling for text item in list
activeColor	String	No	Background color for item selected in list container
search	Boolean	No	Show or hide input search
searchQuery	(keyword: string, labelValue: string) => Boolean	No	Callback used to filter the list of items
inputSearchStyle	ViewStyle	No	Styling for input search
searchPlaceholder	String	No	The string that will be rendered before text input has been entered
searchPlaceholderTextColor	String	No	The text color of the placeholder string
renderInputSearch	(onSearch: (text:string) => void) => JSX.Element	No	Customize TextInput search
disable	Boolean	No	Specifies the disabled state of the Dropdown
dropdownPosition	'auto' or 'top' or 'bottom'	No	Dropdown list position. Default is 'auto'
autoScroll	Boolean	No	Auto scroll to index item selected, default is true
showsVerticalScrollIndicator	Boolean	No	When true, shows a vertical scroll indicator, default is true
renderLeftIcon	(visible?: boolean) => JSX.Element	No	Customize left icon for dropdown
renderRightIcon	(visible?: boolean) => JSX.Element	No	Customize right icon for dropdown
renderItem	(item: object, selected: Boolean) => JSX.Element	No	Takes an item from data and renders it into the list
flatListProps	FlatListProps	No	Customize FlatList element
inverted	Boolean	No	Reverses the direction of scroll on top position mode. Default is true
onFocus	() => void	No	Callback that is called when the dropdown is focused
onBlur	() => void	No	Callback that is called when the dropdown is blurred
keyboardAvoiding	Boolean	No	keyboardAvoiding default is true
backgroundColor	String	No	Set background color
confirmSelectItem	Boolean	No	Turn On confirm select item. Refer example/src/dropdown/example3
onConfirmSelectItem	(item: object) => void	No	Selection callback. Refer example/src/dropdown/example3
testID	String	No	Used to locate this view in end-to-end tests
itemTestIDField	String	No	Add this field to the input data. Ex: DATA = [{itemTestIDField: '', label: '', value:: ''}]
accessibilityLabel	String	No	Set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected
itemAccessibilityLabelField	String	No	Add this field to the input data. Ex: DATA = [{itemAccessibilityLabelField: '', label: '', value:: ''}]
closeModalWhenSelectedItem	Boolean	No	By default, closeModalWhenSelectedItem is set to true. When closeModalWhenSelectedItem is set to false, the Modal won't close when an item is selected.
excludeItems	Item[]	No	The array containing the items to be excluded.
excludeSearchItems	Item[]	No	The array containing the items to be excluded.

MultiSelect Props

Props	Params	isRequire	Description
mode	'default' or 'modal' of 'auto'	No	Mode 'modal' is show the dropdown in the middle of the screen.
data	Array	Yes	Data is a plain array
labelField	String	Yes	Extract the label from the data item
valueField	String	Yes	Extract the primary key from the data item
searchField	String	No	Specify the field of data list you want to search
onChange	(value[]) => void	Yes	Selection callback. A array containing the "valueField".
onChangeText	(search: string) => void	No	Callback that is called when the text input's text changes
value	Item[]	No	Set default value. A array containing the "valueField".
placeholder	String	No	The string that will be rendered before dropdown has been selected
placeholderStyle	TextStyle	No	Styling for text placeholder
style	ViewStyle	No	Styling for view container
containerStyle	ViewStyle	No	Styling for list container
maxHeight	Number	No	Customize max height for list container
minHeight	Number	No	Customize min height for list container
maxSelect	Number	No	maximum number of items that can be selected
fontFamily	String	No	Customize font style
iconStyle	ImageStyle	No	Styling for icon
iconColor	String	No	Color of icons
activeColor	String	No	Background color for item selected in list container
itemContainerStyle	TextStyle	No	Styling for item container in list
itemTextStyle	TextStyle	No	Styling for text item in list
selectedStyle	ViewStyle	No	Styling for selected view
selectedTextStyle	TextStyle	No	Styling for selected text
selectedTextProps	TextProps	No	Text Props for selected text. Ex: numberOfLines={1}
renderSelectedItem	(item: object, unSelect?: () => void) => JSX.Element	No	Takes an item from data and renders it into the list selected
alwaysRenderSelectedItem	Boolean	No	Always show the list of selected items
visibleSelectedItem	Boolean	No	Option to hide selected item list, Ẽx: visibleSelectedItem={false}
search	Boolean	No	Show or hide input search
searchQuery	(keyword: string, labelValue: string) => Boolean	No	Callback used to filter the list of items
inputSearchStyle	ViewStyle	No	Styling for input search
searchPlaceholder	String	No	The string that will be rendered before text input has been entered
searchPlaceholderTextColor	String	No	The text color of the placeholder string
renderInputSearch	(onSearch: (text:string) => void) => JSX.Element	No	Customize TextInput search
disable	Boolean	No	Specifies the disabled state of the Dropdown
dropdownPosition	'auto' or 'top' or 'bottom'	No	Dropdown list position. Default is 'auto'
showsVerticalScrollIndicator	Boolean	No	When true, shows a vertical scroll indicator, default is true
renderLeftIcon	(visible?: boolean) => JSX.Element	No	Customize left icon for dropdown
renderRightIcon	(visible?: boolean) => JSX.Element	No	Customize right icon for dropdown
renderItem	(item: object, selected: Boolean) => JSX.Element	No	Takes an item from data and renders it into the list
flatListProps	FlatListProps	No	Customize FlatList element
inverted	Boolean	No	Reverses the direction of scroll on top position mode. Default is true
onFocus	() => void	No	Callback that is called when the dropdown is focused
onBlur	() => void	No	Callback that is called when the dropdown is blurred
keyboardAvoiding	Boolean	No	keyboardAvoiding default is true
inside	Boolean	No	inside default is false
backgroundColor	String	No	Set background color
confirmSelectItem	Boolean	No	Turn On confirm select item. Refer example/src/dropdown/example7
confirmUnSelectItem	Boolean	No	Turn On confirm un-select item. Refer example/src/dropdown/example7
onConfirmSelectItem	(item: any) => void	No	Selection callback. Refer example/src/dropdown/example7
testID	String	No	Used to locate this view in end-to-end tests
itemTestIDField	String	No	Add this field to the input data. Ex: DATA = [{itemTestIDField: '', label: '', value:: ''}]
accessibilityLabel	String	No	Set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected
itemAccessibilityLabelField	String	No	Add this field to the input data. Ex: DATA = [{itemAccessibilityLabelField: '', label: '', value:: ''}]
excludeItems	Item[]	No	The array containing the items to be excluded.
excludeSearchItems	Item[]	No	The array containing the items to be excluded.

SelectCountry extends Dropdown

Props	Params	isRequire	Description
imageField	String	Yes	Extract the image from the data item
imageStyle	ImageStyle	No	Styling for image

Method

API	Params	Description
open	() => void	Open dropdown list
close	() => void	Close dropdown list

Dropdown example

importReact,{useState}from'react';import{StyleSheet,Text,View}from'react-native';import{Dropdown}from'react-native-element-dropdown';importAntDesignfrom'@expo/vector-icons/AntDesign';constdata=[{label:'Item 1',value:'1'},{label:'Item 2',value:'2'},{label:'Item 3',value:'3'},{label:'Item 4',value:'4'},{label:'Item 5',value:'5'},{label:'Item 6',value:'6'},{label:'Item 7',value:'7'},{label:'Item 8',value:'8'},];constDropdownComponent=()=>{const[value,setValue]=useState(null);const[isFocus,setIsFocus]=useState(false);constrenderLabel=()=>{if(value||isFocus){return(<Textstyle={[styles.label,isFocus&&{color:'blue'}]}>            Dropdown label</Text>);}returnnull;};return(<Viewstyle={styles.container}>{renderLabel()}<Dropdownstyle={[styles.dropdown,isFocus&&{borderColor:'blue'}]}placeholderStyle={styles.placeholderStyle}selectedTextStyle={styles.selectedTextStyle}inputSearchStyle={styles.inputSearchStyle}iconStyle={styles.iconStyle}data={data}searchmaxHeight={300}labelField="label"valueField="value"placeholder={!isFocus ?'Select item' :'...'}searchPlaceholder="Search..."value={value}onFocus={()=>setIsFocus(true)}onBlur={()=>setIsFocus(false)}onChange={item=>{setValue(item.value);setIsFocus(false);}}renderLeftIcon={()=>(<AntDesignstyle={styles.icon}color={isFocus ?'blue' :'black'}name="Safety"size={20}/>)}/></View>);};exportdefaultDropdownComponent;conststyles=StyleSheet.create({container:{backgroundColor:'white',padding:16,},dropdown:{height:50,borderColor:'gray',borderWidth:0.5,borderRadius:8,paddingHorizontal:8,},icon:{marginRight:5,},label:{position:'absolute',backgroundColor:'white',left:22,top:8,zIndex:999,paddingHorizontal:8,fontSize:14,},placeholderStyle:{fontSize:16,},selectedTextStyle:{fontSize:16,},iconStyle:{width:20,height:20,},inputSearchStyle:{height:40,fontSize:16,},});

Dropdown example 1

importReact,{useState}from'react';import{StyleSheet}from'react-native';import{Dropdown}from'react-native-element-dropdown';importAntDesignfrom'@expo/vector-icons/AntDesign';constdata=[{label:'Item 1',value:'1'},{label:'Item 2',value:'2'},{label:'Item 3',value:'3'},{label:'Item 4',value:'4'},{label:'Item 5',value:'5'},{label:'Item 6',value:'6'},{label:'Item 7',value:'7'},{label:'Item 8',value:'8'},];constDropdownComponent=()=>{const[value,setValue]=useState(null);return(<Dropdownstyle={styles.dropdown}placeholderStyle={styles.placeholderStyle}selectedTextStyle={styles.selectedTextStyle}inputSearchStyle={styles.inputSearchStyle}iconStyle={styles.iconStyle}data={data}searchmaxHeight={300}labelField="label"valueField="value"placeholder="Select item"searchPlaceholder="Search..."value={value}onChange={item=>{setValue(item.value);}}renderLeftIcon={()=>(<AntDesignstyle={styles.icon}color="black"name="Safety"size={20}/>)}/>);};exportdefaultDropdownComponent;conststyles=StyleSheet.create({dropdown:{margin:16,height:50,borderBottomColor:'gray',borderBottomWidth:0.5,},icon:{marginRight:5,},placeholderStyle:{fontSize:16,},selectedTextStyle:{fontSize:16,},iconStyle:{width:20,height:20,},inputSearchStyle:{height:40,fontSize:16,},});

Dropdown example 2

importReact,{useState}from'react';import{StyleSheet,View,Text}from'react-native';import{Dropdown}from'react-native-element-dropdown';importAntDesignfrom'@expo/vector-icons/AntDesign';constdata=[{label:'Item 1',value:'1'},{label:'Item 2',value:'2'},{label:'Item 3',value:'3'},{label:'Item 4',value:'4'},{label:'Item 5',value:'5'},{label:'Item 6',value:'6'},{label:'Item 7',value:'7'},{label:'Item 8',value:'8'},];constDropdownComponent=()=>{const[value,setValue]=useState(null);constrenderItem=item=>{return(<Viewstyle={styles.item}><Textstyle={styles.textItem}>{item.label}</Text>{item.value===value&&(<AntDesignstyle={styles.icon}color="black"name="Safety"size={20}/>)}</View>);};return(<Dropdownstyle={styles.dropdown}placeholderStyle={styles.placeholderStyle}selectedTextStyle={styles.selectedTextStyle}inputSearchStyle={styles.inputSearchStyle}iconStyle={styles.iconStyle}data={data}searchmaxHeight={300}labelField="label"valueField="value"placeholder="Select item"searchPlaceholder="Search..."value={value}onChange={item=>{setValue(item.value);}}renderLeftIcon={()=>(<AntDesignstyle={styles.icon}color="black"name="Safety"size={20}/>)}renderItem={renderItem}/>);};exportdefaultDropdownComponent;conststyles=StyleSheet.create({dropdown:{margin:16,height:50,backgroundColor:'white',borderRadius:12,padding:12,shadowColor:'#000',shadowOffset:{width:0,height:1,},shadowOpacity:0.2,shadowRadius:1.41,elevation:2,},icon:{marginRight:5,},item:{padding:17,flexDirection:'row',justifyContent:'space-between',alignItems:'center',},textItem:{flex:1,fontSize:16,},placeholderStyle:{fontSize:16,},selectedTextStyle:{fontSize:16,},iconStyle:{width:20,height:20,},inputSearchStyle:{height:40,fontSize:16,},});

MultiSelect example 1

importReact,{useState}from'react';import{StyleSheet,View}from'react-native';import{MultiSelect}from'react-native-element-dropdown';importAntDesignfrom'@expo/vector-icons/AntDesign';constdata=[{label:'Item 1',value:'1'},{label:'Item 2',value:'2'},{label:'Item 3',value:'3'},{label:'Item 4',value:'4'},{label:'Item 5',value:'5'},{label:'Item 6',value:'6'},{label:'Item 7',value:'7'},{label:'Item 8',value:'8'},];constMultiSelectComponent=()=>{const[selected,setSelected]=useState([]);return(<Viewstyle={styles.container}><MultiSelectstyle={styles.dropdown}placeholderStyle={styles.placeholderStyle}selectedTextStyle={styles.selectedTextStyle}inputSearchStyle={styles.inputSearchStyle}iconStyle={styles.iconStyle}searchdata={data}labelField="label"valueField="value"placeholder="Select item"searchPlaceholder="Search..."value={selected}onChange={item=>{setSelected(item);}}renderLeftIcon={()=>(<AntDesignstyle={styles.icon}color="black"name="Safety"size={20}/>)}selectedStyle={styles.selectedStyle}/></View>);};exportdefaultMultiSelectComponent;conststyles=StyleSheet.create({container:{padding:16},dropdown:{height:50,backgroundColor:'transparent',borderBottomColor:'gray',borderBottomWidth:0.5,},placeholderStyle:{fontSize:16,},selectedTextStyle:{fontSize:14,},iconStyle:{width:20,height:20,},inputSearchStyle:{height:40,fontSize:16,},icon:{marginRight:5,},selectedStyle:{borderRadius:12,},});

MultiSelect example 2

importReact,{useState}from'react';import{StyleSheet,View,TouchableOpacity,Text}from'react-native';import{MultiSelect}from'react-native-element-dropdown';importAntDesignfrom'@expo/vector-icons/AntDesign';constdata=[{label:'Item 1',value:'1'},{label:'Item 2',value:'2'},{label:'Item 3',value:'3'},{label:'Item 4',value:'4'},{label:'Item 5',value:'5'},{label:'Item 6',value:'6'},{label:'Item 7',value:'7'},{label:'Item 8',value:'8'},];constMultiSelectComponent=()=>{const[selected,setSelected]=useState([]);constrenderItem=item=>{return(<Viewstyle={styles.item}><Textstyle={styles.selectedTextStyle}>{item.label}</Text><AntDesignstyle={styles.icon}color="black"name="Safety"size={20}/></View>);};return(<Viewstyle={styles.container}><MultiSelectstyle={styles.dropdown}placeholderStyle={styles.placeholderStyle}selectedTextStyle={styles.selectedTextStyle}inputSearchStyle={styles.inputSearchStyle}iconStyle={styles.iconStyle}data={data}labelField="label"valueField="value"placeholder="Select item"value={selected}searchsearchPlaceholder="Search..."onChange={item=>{setSelected(item);}}renderLeftIcon={()=>(<AntDesignstyle={styles.icon}color="black"name="Safety"size={20}/>)}renderItem={renderItem}renderSelectedItem={(item,unSelect)=>(<TouchableOpacityonPress={()=>unSelect&&unSelect(item)}><Viewstyle={styles.selectedStyle}><Textstyle={styles.textSelectedStyle}>{item.label}</Text><AntDesigncolor="black"name="delete"size={17}/></View></TouchableOpacity>)}/></View>);};exportdefaultMultiSelectComponent;conststyles=StyleSheet.create({container:{padding:16},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,},});

SelectCountry example 1

importReact,{useState}from'react';import{StyleSheet}from'react-native';import{SelectCountry}from'react-native-element-dropdown';constlocal_data=[{value:'1',lable:'Country 1',image:{uri:'https://www.vigcenter.com/public/all/images/default-image.jpg',},},{value:'2',lable:'Country 2',image:{uri:'https://www.vigcenter.com/public/all/images/default-image.jpg',},},{value:'3',lable:'Country 3',image:{uri:'https://www.vigcenter.com/public/all/images/default-image.jpg',},},{value:'4',lable:'Country 4',image:{uri:'https://www.vigcenter.com/public/all/images/default-image.jpg',},},{value:'5',lable:'Country 5',image:{uri:'https://www.vigcenter.com/public/all/images/default-image.jpg',},},];constSelectCountryScreen=_props=>{const[country,setCountry]=useState('1');return(<SelectCountrystyle={styles.dropdown}selectedTextStyle={styles.selectedTextStyle}placeholderStyle={styles.placeholderStyle}imageStyle={styles.imageStyle}inputSearchStyle={styles.inputSearchStyle}iconStyle={styles.iconStyle}searchmaxHeight={200}value={country}data={local_data}valueField="value"labelField="lable"imageField="image"placeholder="Select country"searchPlaceholder="Search..."onChange={e=>{setCountry(e.value);}}/>);};exportdefaultSelectCountryScreen;conststyles=StyleSheet.create({dropdown:{margin:16,height:50,borderBottomColor:'gray',borderBottomWidth:0.5,},imageStyle:{width:24,height:24,},placeholderStyle:{fontSize:16,},selectedTextStyle:{fontSize:16,marginLeft:8,},iconStyle:{width:20,height:20,},inputSearchStyle:{height:40,fontSize:16,},});

SelectCountry example 2

importReact,{useState}from'react';import{StyleSheet}from'react-native';import{SelectCountry}from'react-native-element-dropdown';constlocal_data=[{value:'1',lable:'Country 1',image:{uri:'https://www.vigcenter.com/public/all/images/default-image.jpg',},},{value:'2',lable:'Country 2',image:{uri:'https://www.vigcenter.com/public/all/images/default-image.jpg',},},{value:'3',lable:'Country 3',image:{uri:'https://www.vigcenter.com/public/all/images/default-image.jpg',},},{value:'4',lable:'Country 4',image:{uri:'https://www.vigcenter.com/public/all/images/default-image.jpg',},},{value:'5',lable:'Country 5',image:{uri:'https://www.vigcenter.com/public/all/images/default-image.jpg',},},];constSelectCountryScreen=_props=>{const[country,setCountry]=useState('1');return(<SelectCountrystyle={styles.dropdown}selectedTextStyle={styles.selectedTextStyle}placeholderStyle={styles.placeholderStyle}imageStyle={styles.imageStyle}iconStyle={styles.iconStyle}maxHeight={200}value={country}data={local_data}valueField="value"labelField="lable"imageField="image"placeholder="Select country"searchPlaceholder="Search..."onChange={e=>{setCountry(e.value);}}/>);};exportdefaultSelectCountryScreen;conststyles=StyleSheet.create({dropdown:{margin:16,height:50,width:150,backgroundColor:'#EEEEEE',borderRadius:22,paddingHorizontal:8,},imageStyle:{width:24,height:24,borderRadius:12,},placeholderStyle:{fontSize:16,},selectedTextStyle:{fontSize:16,marginLeft:8,},iconStyle:{width:20,height:20,},});