react-native-input-select

A fully customizable dropdown selection package for react-native android and iOS with multiple select and search capabilities.

Installation

With npm

npm install react-native-input-select

With yarn

yarn add react-native-input-select

Sandbox

Sandbox

Basic Usage

importReactfrom'react';importDropdownfrom'react-native-input-select';exportdefaultfunctionApp(){const[country,setCountry]=React.useState();return(<Dropdownlabel="Country"placeholder="Select an option..."options={[{label: 'Nigeria',value: 'NG'},{label: 'Åland Islands',value: 'AX'},{label: 'Algeria',value: 'DZ'},{label: 'American Samoa',value: 'AS'},{label: 'Andorra',value: 'AD'},]}selectedValue={country}onValueChange={(value)=>setCountry(value)}primaryColor={'green'}/>);}

Advanced Usage With Flat List

importReactfrom'react';importDropdownfrom'react-native-input-select';import{View,StyleSheet,Text,Button,Alert,Image}from'react-native';exportdefaultfunctionApp(){const[country,setCountry]=React.useState();return(<Dropdownlabel="Customized components in list"placeholder="Select multiple countries..."options={countries.slice(0,30)}optionLabel={'name'}optionValue={'code'}selectedValue={country}onValueChange={(itemValue: any)=>setCountry(itemValue)}isMultipleisSearchableprimaryColor={'orange'}dropdownStyle={{borderWidth: 0,// To remove border, set borderWidth to 0}}dropdownIcon={<Imagestyle={styles.tinyLogo}source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',}}/>}dropdownIconStyle={{top: 20,right: 20}}listHeaderComponent={<Viewstyle={styles.customComponentContainer}><Textstyle={styles.text}>
💡 You can add any component to the top of this list
</Text><Viewstyle={styles.fixToText}><Buttontitle="Left button"onPress={()=>Alert.alert('Left button pressed')}color="#007AFF"/><Buttontitle="Right button"onPress={()=>Alert.alert('Right button pressed')}/></View></View>}listFooterComponent={<Viewstyle={styles.customComponentContainer}><Text>You can add any component to the bottom of this list</Text></View>}modalControls={{modalOptionsContainerStyle: {padding: 10,backgroundColor: 'cyan',},modalProps: {supportedOrientations: ['portrait','portrait-upside-down','landscape','landscape-left','landscape-right',],transparent: false,},}}listComponentStyles={{listEmptyComponentStyle: {color: 'red',},itemSeparatorStyle: {opacity: 0,borderColor: 'white',borderWidth: 2,backgroundColor: 'cyan',},sectionHeaderStyle: {padding: 10,backgroundColor: 'cyan',},}}listControls={{selectAllText: 'Choose everything',unselectAllText: 'Remove everything',selectAllCallback: ()=>Alert.alert('You selected everything'),unselectAllCallback: ()=>Alert.alert('You removed everything'),emptyListMessage: 'No record found',}}/>);}conststyles=StyleSheet.create({customComponentContainer: {paddingHorizontal: 20,paddingVertical: 10,},text: {marginBottom: 20,},fixToText: {flexDirection: 'row',justifyContent: 'space-between',},tinyLogo: {width: 20,height: 20,},radioButton: {width: 20,height: 20,borderRadius: 20/2,borderWidth: 3,borderColor: 'white',},});

Advanced Usage with Section List

<DropdownSelectlabel="Menu"placeholder="Select multiple dishes..."options={[{title: 'Main dishes',data: [{label: 'Pizza',value: 'A'},{label: 'Burger',value: 'B'},{label: 'Risotto',value: 'C'},],},{title: 'Sides',data: [{label: 'Ice cream',value: 'D'},{label: 'Cheesecake',value: 'E'},],},{title: 'Drinks',data: [{label: 'Water',value: 'F'},{label: 'Coke',value: 'G'},{label: 'Juice',value: 'H'},],},]}selectedValue={menu}onValueChange={(itemValue: any)=>setMenu(itemValue)}isMultipleisSearchableprimaryColor={'deepskyblue'}listComponentStyles={{sectionHeaderStyle: {padding: 10,backgroundColor: 'green',color: 'white',width: '30%',},}}/>

For more examples visit our wiki page

iOS

Android

Props

Proptypes	Datatype	Example
label	string	Countries
placeholder	string	Select a country
options	Array	[{ name: 'Nigeria', code: 'NG' }, { name: 'Albania', code: 'AL' }]
optionLabel	string	name
optionValue	string	code
error	string	This is a requiredfield
helperText	string	Only few countries are listed
selectedValue	string or Array	AL or [AL, AX]
onValueChange	function	()=>{}
isMultiple	Boolean	true
isSearchable	Boolean	true
disabled	Boolean	true
dropdownIcon	React Component	Image or <Text> Show <Text>
labelStyle	Object	{color: 'red', fontSize: 15, fontWeight: '500'}
placeholderStyle	Object	{color: 'blue', fontSize: 15, fontWeight: '500'}
dropdownStyle	Object	{borderColor: 'blue', margin: 5, borderWidth:0 ...}
dropdownContainerStyle	Object	{backgroundColor: 'red', width: '30%', ...}
dropdownIconStyle	Object	{top: 10 , right: 10, ...}
selectedItemStyle	Object	{fontWeight: '600', color: 'yellow', ...}
multipleSelectedItemStyle	Object	{backgroundColor: 'red', color: 'yellow', ...}
dropdownErrorStyle	Object	{borderWidth: 2, borderStyle: 'solid'}
dropdownErrorTextStyle	Object	{color: 'red', fontWeight:'500'}
dropdownHelperTextStyle	Object	{color: 'green', fontWeight:'500'}
primaryColor	string	blue
listHeaderComponent	React Component	<Text> You can add any component here </Text>
listFooterComponent	React Component	<Text> You can add any component here <Text>
hideModal	Boolean	Use this to hide the modal as needed
listComponentStyles	Object	{listEmptyComponentStyle: ViewStyle, itemSeparatorStyle: ViewStyle, sectionHeaderStyle: TextStyle}
checkboxControls	Object	{checkboxSize: number, checkboxStyle: ViewStyle, checkboxLabelStyle: TextStyle, checkboxComponent?: React.ReactNode}
listControls	Object	{ selectAllText: 'Choose all', unselectAllText: 'Remove all', selectAllCallback: () => {}, unselectAllCallback: () => {}, hideSelectAll: boolean, emptyListMessage: 'No record found'}
searchControls	Object	{ textInputStyle: ViewStyle | TextStyle, textInputContainerStyle: ViewStyle, textInputProps: TextInputProps}
modalControls	Object	{ modalBackgroundStyle: ViewStyle, modalOptionsContainerStyle: ViewStyle, modalProps: ModalProps}

Deprecation Notice

The following props would be removed in coming releases.

• Individual props checkboxSize, checkboxStyle, checkboxLabelStyle, checkboxComponent would be replaced with a single object checkboxControls e.g

checkboxControls={checkboxSize: 20,checkboxStyle: {backgroundColor: 'purple',borderRadius: 30,padding: 10,borderColor: 'red',},checkboxLabelStyle: {color: 'red',fontSize: 20},checkboxComponent: <Viewstyle={styles.radioButton}/>...};

• searchInputStyle would now be replaced with textInputStyle in the searchControls object

searchControls={textInputStyle: {color: 'blue',fontWeight: '500',minHeight: 10,paddingVertical: 10,paddingHorizontal: 5,width: '70%',textAlign: 'center',backgroundColor: 'pink',},textInputContainerStyle: {flex: 1,justifyContent: 'center',alignItems: 'center',},textInputProps: {placeholder: 'Search anything here',placeholderTextColor: 'white',},
...
};

• Individual props modalBackgroundStyle, modalOptionsContainerStyle, modalProps would be replaced with a single object modalControls

modalControls={modalBackgroundStyle: ViewStyle,modalOptionsContainerStyle: ViewStyle,modalProps: ModalProps,//Use this to pass in react-native default modal props};

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

Made with contrib.rocks.

License

MIT

Video Demo

utt.mov