A fully customizable dropdown selection package for react-native android and iOS with multiple select and search capabilities.
With npm
npm install react-native-input-select
With yarn
yarn add react-native-input-select
import React from 'react';
import Dropdown from 'react-native-input-select';
export default function App() {
const [country, setCountry] = React.useState();
return (
<Dropdown
label="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'}
/>
);
}
import React from 'react';
import Dropdown from 'react-native-input-select';
import { View, StyleSheet, Text, Button, Alert, Image } from 'react-native';
export default function App() {
const [country, setCountry] = React.useState();
return (
<Dropdown
label="Customized components in list"
placeholder="Select multiple countries..."
options={countries.slice(0, 30)}
optionLabel={'name'}
optionValue={'code'}
selectedValue={country}
onValueChange={(itemValue: any) => setCountry(itemValue)}
isMultiple
isSearchable
primaryColor={'orange'}
dropdownStyle={{
borderWidth: 0, // To remove border, set borderWidth to 0
}}
dropdownIcon={
<Image
style={styles.tinyLogo}
source={{
uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',
}}
/>
}
dropdownIconStyle={{ top: 20, right: 20 }}
listHeaderComponent={
<View style={styles.customComponentContainer}>
<Text style={styles.text}>
đź’ˇ You can add any component to the top of this list
</Text>
<View style={styles.fixToText}>
<Button
title="Left button"
onPress={() => Alert.alert('Left button pressed')}
color="#007AFF"
/>
<Button
title="Right button"
onPress={() => Alert.alert('Right button pressed')}
/>
</View>
</View>
}
listFooterComponent={
<View style={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',
}}
/>
);
}
const styles = 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',
},
});
<DropdownSelect
label="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)}
isMultiple
isSearchable
primaryColor={'deepskyblue'}
listComponentStyles={{
sectionHeaderStyle: {
padding: 10,
backgroundColor: 'green',
color: 'white',
width: '30%',
},
}}
/>
For more examples visit our wiki page
![]() |
![]() |
Proptypes | Datatype | Example |
---|---|---|
label | string or ReactComponent |
Countries or <Text> You can add any component here <Text> |
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 |
autoCloseOnSelect | boolean |
false |
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} |
The following props would be removed in coming releases.
- Individual props
checkboxSize
,checkboxStyle
,checkboxLabelStyle
,checkboxComponent
would be replaced with a single objectcheckboxControls
e.g
checkboxControls = {
checkboxSize: 20,
checkboxStyle: {
backgroundColor: 'purple',
borderRadius: 30,
padding: 10,
borderColor: 'red',
},
checkboxLabelStyle: { color: 'red', fontSize: 20 },
checkboxComponent: <View style={styles.radioButton} />
...
};
searchInputStyle
would now be replaced withtextInputStyle
in thesearchControls
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 objectmodalControls
modalControls = {
modalBackgroundStyle: ViewStyle,
modalOptionsContainerStyle: ViewStyle,
modalProps: ModalProps, //Use this to pass in react-native default modal props
};
See the contributing guide to learn how to contribute to the repository and the development workflow.
Made with contrib.rocks.
MIT