Gathering detailed insights and metrics for react-native-input-select
Gathering detailed insights and metrics for react-native-input-select
Gathering detailed insights and metrics for react-native-input-select
Gathering detailed insights and metrics for react-native-input-select
react-native-select-input-ios
A React Native SelectInput for iOS and Android, which uses a keyboard with a Picker component
react-native-input-select-item2
Component like Select on web for React Native
@txo/select-input-react-native
Technology Studio - Select input react native
react-with-native-select-input
A customizable dropdown selection package for react-native android, iOS and web with multiple select and search capabilities. Look is consistent across platforms. Compatible with Expo.
npm install react-native-input-select
Typescript
Module System
Node Version
NPM Version
TypeScript (94.2%)
JavaScript (1.99%)
Kotlin (1.65%)
Ruby (1.14%)
Swift (0.91%)
Shell (0.12%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
146 Stars
305 Commits
24 Forks
2 Watchers
3 Branches
9 Contributors
Updated on Jul 10, 2025
Latest Version
2.1.7
Package Id
react-native-input-select@2.1.7
Unpacked Size
339.63 kB
Size
68.23 kB
File Count
182
NPM Version
10.8.2
Node Version
20.19.2
Published on
Jun 30, 2025
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
2
27
A fully customizable dropdown selection package for react-native android and iOS with multiple select and search capabilities.
With npm
1npm install react-native-input-select
With yarn
1yarn add react-native-input-select
See more examples in Sandbox
![]() | ![]() |
1import React from 'react'; 2import Dropdown from 'react-native-input-select'; 3 4export default function App() { 5 const [country, setCountry] = React.useState(); 6 7 return ( 8 <Dropdown 9 label="Country" 10 placeholder="Select an option..." 11 options={[ 12 { label: 'Nigeria', value: 'NG' }, 13 { label: 'Åland Islands', value: 'AX' }, 14 { label: 'Algeria', value: 'DZ' }, 15 { label: 'American Samoa', value: 'AS' }, 16 { label: 'Andorra', value: 'AD' }, 17 ]} 18 selectedValue={country} 19 onValueChange={(value) => setCountry(value)} 20 primaryColor={'green'} 21 /> 22 ); 23}
1import React from 'react'; 2import Dropdown from 'react-native-input-select'; 3import { View, StyleSheet, Text, Button, Alert, Image } from 'react-native'; 4 5export default function App() { 6 const [country, setCountry] = React.useState(); 7 8 return ( 9 <Dropdown 10 label="Customized components in list" 11 placeholder="Select multiple countries..." 12 options={countries.slice(0, 30)} 13 optionLabel={'name'} 14 optionValue={'code'} 15 selectedValue={country} 16 onValueChange={(itemValue: any) => setCountry(itemValue)} 17 isMultiple 18 isSearchable 19 primaryColor={'orange'} 20 dropdownStyle={{ 21 borderWidth: 0, // To remove border, set borderWidth to 0 22 }} 23 dropdownIcon={ 24 <Image 25 style={styles.tinyLogo} 26 source={{ 27 uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==', 28 }} 29 /> 30 } 31 dropdownIconStyle={{ top: 20, right: 20 }} 32 listHeaderComponent={ 33 <View style={styles.customComponentContainer}> 34 <Text style={styles.text}> 35 💡 You can add any component to the top of this list 36 </Text> 37 <View style={styles.fixToText}> 38 <Button 39 title="Left button" 40 onPress={() => Alert.alert('Left button pressed')} 41 color="#007AFF" 42 /> 43 <Button 44 title="Right button" 45 onPress={() => Alert.alert('Right button pressed')} 46 /> 47 </View> 48 </View> 49 } 50 listFooterComponent={ 51 <View style={styles.customComponentContainer}> 52 <Text>You can add any component to the bottom of this list</Text> 53 </View> 54 } 55 modalControls={{ 56 modalOptionsContainerStyle: { 57 padding: 10, 58 backgroundColor: 'cyan', 59 }, 60 modalProps: { 61 supportedOrientations: [ 62 'portrait', 63 'portrait-upside-down', 64 'landscape', 65 'landscape-left', 66 'landscape-right', 67 ], 68 transparent: false, 69 }, 70 }} 71 listComponentStyles={{ 72 listEmptyComponentStyle: { 73 color: 'red', 74 }, 75 itemSeparatorStyle: { 76 opacity: 0, 77 borderColor: 'white', 78 borderWidth: 2, 79 backgroundColor: 'cyan', 80 }, 81 sectionHeaderStyle: { 82 padding: 10, 83 backgroundColor: 'cyan', 84 }, 85 }} 86 listControls={{ 87 selectAllText: 'Choose everything', 88 unselectAllText: 'Remove everything', 89 selectAllCallback: () => Alert.alert('You selected everything'), 90 unselectAllCallback: () => Alert.alert('You removed everything'), 91 emptyListMessage: 'No record found', 92 }} 93 selectedItemsControls={{ 94 removeItemIcon: ( 95 <Image 96 source={{ 97 uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA', 98 }} 99 style={{ tintColor: 'white', height: 12, width: 12 }} 100 /> 101 ), 102 onRemoveItem: () => Alert.alert('Item was removed'), 103 showRemoveIcon: true, 104 }} 105 /> 106 ); 107} 108 109const styles = StyleSheet.create({ 110 customComponentContainer: { 111 paddingHorizontal: 20, 112 paddingVertical: 10, 113 }, 114 text: { 115 marginBottom: 20, 116 }, 117 fixToText: { 118 flexDirection: 'row', 119 justifyContent: 'space-between', 120 }, 121 tinyLogo: { 122 width: 20, 123 height: 20, 124 }, 125 radioButton: { 126 width: 20, 127 height: 20, 128 borderRadius: 20 / 2, 129 borderWidth: 3, 130 borderColor: 'white', 131 }, 132});
1<DropdownSelect 2 label="Menu" 3 placeholder="Select multiple dishes..." 4 options={[ 5 { 6 title: 'Main dishes', 7 data: [ 8 { label: 'Pizza', value: 'A' }, 9 { label: 'Burger', value: 'B' }, 10 { label: 'Risotto', value: 'C' }, 11 ], 12 }, 13 { 14 title: 'Sides', 15 data: [ 16 { label: 'Ice cream', value: 'D' }, 17 { label: 'Cheesecake', value: 'E' }, 18 ], 19 }, 20 { 21 title: 'Drinks', 22 data: [ 23 { label: 'Water', value: 'F' }, 24 { label: 'Coke', value: 'G' }, 25 { label: 'Juice', value: 'H' }, 26 ], 27 }, 28 ]} 29 selectedValue={menu} 30 onValueChange={(itemValue: any) => setMenu(itemValue)} 31 isMultiple 32 isSearchable 33 primaryColor={'deepskyblue'} 34 listComponentStyles={{ 35 sectionHeaderStyle: { 36 padding: 10, 37 backgroundColor: 'green', 38 color: 'white', 39 width: '30%', 40 }, 41 }} 42/>
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> |
listComponentStyles | Object | {listEmptyComponentStyle: ViewStyle, itemSeparatorStyle: ViewStyle, sectionHeaderStyle: TextStyle} |
listEmptyComponent | React Component | <Text> You can add any component here <Text> |
checkboxControls | Object | {checkboxSize: number, checkboxStyle: ViewStyle, checkboxLabelStyle: TextStyle, checkboxComponent?: React.ReactNode, checkboxDisabledStyle?: ViewStyle, checkboxUnselectedColor?: ColorValue} |
listControls | Object | { selectAllText: 'Choose all', unselectAllText: 'Remove all', selectAllCallback: () => {}, unselectAllCallback: () => {}, hideSelectAll: boolean, emptyListMessage: 'No record found', keyboardShouldPersistTaps: "always" } |
searchControls | Object | { textInputStyle: ViewStyle | TextStyle, textInputContainerStyle: ViewStyle, textInputProps: TextInputProps, searchCallback:(value)=>{}} |
modalControls | Object | { modalBackgroundStyle: ViewStyle, modalOptionsContainerStyle: ViewStyle, modalProps: ModalProps} |
minSelectableItems | number | 3 |
maxSelectableItems | number | 5 |
selectedItemsControls | Object | { removeItemIcon: ReactNode, onRemoveItem: ()=>{}, showRemoveIcon: boolean} |
ref | useRef<DropdownSelectHandle | null>(null) | Use this to open or close the modal as needed e.g dropdownRef.current?.open() or dropdownRef.current?.close() |
See the contributing guide to learn how to contribute to the repository and the development workflow.
Made with contrib.rocks.
For discussion and feedback on this library. You can access it by heading over to the Discussions Tab on Github. We've created some sections to keep the discussion focused.
Title | Topic |
---|---|
Announcements 📣 | General announcements about this library. |
Show and tell 🙌 | Show off something you've made out of this library |
Ideas 💡 | A place to Share ideas for new features. |
Polls 🗳️ | Take a vote from the community |
Q&A 🤝 | A place to ask the community for help on the New Architecture topics |
General 💬 | Chat about anything and everything here |
MIT
https://github.com/azeezat/react-native-select/assets/9849221/194bf5cf-1a2d-4ca6-9585-05d6bb987aba
No vulnerabilities found.
No security vulnerabilities found.