Package Exports
- react-native-element-dropdown
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-element-dropdown) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
react-native-element-dropdown
react-native-element-dropdown A react-native dropdown component easy to customize for both iOS and Android.
Getting started
npm install react-native-element-dropdown --saveor
yarn add react-native-element-dropdownRN Version < 0.60
react-native link react-native-element-dropdownIOS
cd ios && pod installDemo

Dropdown Props
| Props | Params | isRequire | Description |
|---|---|---|---|
| data | Array | Yes | |
| labelField | String | Yes | |
| valueField | String | Yes | |
| onChange | (item) => void | Yes | |
| value | Item | No | |
| placeholder | String | No | |
| placeholderStyle | TextStyle | No | |
| style | ViewStyle | No | |
| containerStyle | ViewStyle | No | |
| fontFamily | String | No | |
| iconColor | String | No | |
| activeColor | String | No | |
| search | Boolean | No | |
| inputSearchStyle | ViewStyle | No | |
| searchPlaceholder | String | No | |
| maxHeight | Number | No | |
| disable | Boolean | No | |
| renderLeftIcon | () => JSX.Element | No | |
| renderRightIcon | () => JSX.Element | No | |
| renderItem | (item) => JSX.Element | No |
MultiSelect Props
| Props | Params | isRequire | Description |
|---|---|---|---|
| data | Array | Yes | |
| labelField | String | Yes | |
| valueField | String | Yes | |
| onChange | (value[]) => void | Yes | |
| value | Item[] | No | |
| placeholder | String | No | |
| placeholderStyle | TextStyle | No | |
| style | ViewStyle | No | |
| containerStyle | ViewStyle | No | |
| fontFamily | String | No | |
| iconColor | String | No | |
| activeColor | String | No | |
| selectedStyle | ViewStyle | No | |
| selectedTextStyle | TextStyle | No | |
| search | Boolean | No | |
| inputSearchStyle | ViewStyle | No | |
| searchPlaceholder | String | No | |
| maxHeight | Number | No | |
| disable | Boolean | No | |
| renderLeftIcon | () => JSX.Element | No | |
| renderRightIcon | () => JSX.Element | No | |
| renderItem | (item) => JSX.Element | No |
Usage
import React, {useState} from 'react';
import {StyleSheet, View, Text, Image} from 'react-native';
import {Dropdown, MultiSelect} from 'react-native-element-dropdown';
const data = [
{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'},
];
const DropdownScreen = _props => {
const [dropdown, setDropdown] = useState(null);
const [selected, setSelected] = useState([]);
const _renderItem = item => {
return (
<View style={styles.item}>
<Text style={styles.textItem}>{item.label}</Text>
<Image style={styles.icon} source={require('./assets/tick.png')} />
</View>
);
};
return (
<View style={styles.container}>
<Dropdown
style={styles.dropdown}
data={data}
search
searchPlaceholder="Search"
labelField="label"
valueField="value"
placeholder="Select item"
value={dropdown}
onChange={item => {
setDropdown(item.value);
console.log('selected', item);
}}
renderLeftIcon={() => (
<Image style={styles.icon} source={require('./assets/account.png')} />
)}
renderItem={item => _renderItem(item)}
/>
<MultiSelect
style={styles.dropdown2}
data={data}
labelField="label"
valueField="value"
placeholder="Select item"
search
searchPlaceholder="Search"
value={selected}
onChange={item => {
setSelected(item);
console.log('selected', item);
}}
renderItem={item => _renderItem(item)}
/>
</View>
);
};
export default DropdownScreen;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
padding: 40,
},
dropdown: {
backgroundColor: 'white',
borderBottomColor: 'gray',
borderBottomWidth: 0.5,
marginTop: 20,
},
dropdown2: {
backgroundColor: 'white',
borderColor: 'gray',
borderWidth: 0.5,
marginTop: 20,
padding: 8,
},
icon: {
marginRight: 5,
width: 18,
height: 18,
},
item: {
paddingVertical: 17,
paddingHorizontal: 4,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
textItem: {
flex: 1,
fontSize: 16,
},
});Suggested Packages
- react-native-utils-scale Provide solutions to make your app flexible for different screen sizes, different devices.
- react-native-element-image Automatically calculate width or height based on input Image component for React Native.
- react-native-element-timer React Native Timer Countdown.
- react-native-vertical-swipe-view React Native Vertical Swipe View.
- react-native-checkbox-tree A simple and elegant checkbox tree for React Native.
- react-native-curved-bottom-bar A high performance, beautiful and fully customizable curved bottom navigation bar for React Native.
- react-native-webrtc-simple A simple and easy to use module that help in making video call for React Native.