[](https://nodei.co/npm/react-native-input-select/)
[](https://badge.fury.io/js/react-native-input-select) [](https://github.com/azeezat/react-native-select/stargazers) [](https://github.com/azeezat/react-native-select/actions/workflows/codeql.yml) [](https://github.com/azeezat/react-native-select/actions/workflows/release-and-publish-to-npm.yml)
# 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
```sh
npm install react-native-input-select
```
With yarn
```sh
yarn add react-native-input-select
```
## Sandbox
[Sandbox](https://azeezat.github.io/react-native-select/)
# iOS
| | | |
| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| 
| 
| 
|
| 
| 
| 
|
# Android
| | | |
| :------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| 
| 
| 
|
## Basic Usage
```js
import React from 'react';
import Dropdown from 'react-native-input-select';
export default function App() {
const [country, setCountry] = React.useState();
return (
setCountry(value)}
primaryColor={'green'}
/>
);
}
```
## Advanced Usage With Flat List
```js
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 (
setCountry(itemValue)}
isMultiple
isSearchable
primaryColor={'orange'}
dropdownStyle={{
borderWidth: 0, // To remove border, set borderWidth to 0
}}
dropdownIcon={
}
dropdownIconStyle={{ top: 20, right: 20 }}
listHeaderComponent={
💡 You can add any component to the top of this list
}
listFooterComponent={
You can add any component to the bottom of this list
}
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',
},
});
```
## Advanced Usage with Section List
```js
setMenu(itemValue)}
isMultiple
isSearchable
primaryColor={'deepskyblue'}
listComponentStyles={{
sectionHeaderStyle: {
padding: 10,
backgroundColor: 'green',
color: 'white',
width: '30%',
},
}}
/>
```
For more examples visit our [wiki page](https://github.com/azeezat/react-native-select/wiki)
## Props
| Proptypes | Datatype | Example |
| ------------------------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| label | `string` or `ReactComponent` | Countries or ` You can add any component here ` |
| 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 ` Show ` |
| 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` |
| hideModal | `Boolean` | Use this to hide the modal as needed |
| listHeaderComponent | `React Component` | ` You can add any component here ` |
| listFooterComponent | `React Component` | ` You can add any component here ` |
| listComponentStyles | `Object` | `{listEmptyComponentStyle: ViewStyle, itemSeparatorStyle: ViewStyle, sectionHeaderStyle: TextStyle}` |
| listEmptyComponent | `React Component` | ` You can add any component here ` |
| 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'}` |
| searchControls | `Object` | `{ textInputStyle: ViewStyle \| TextStyle, textInputContainerStyle: ViewStyle, textInputProps: TextInputProps, searchCallback:(value)=>{}}` |
| 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
```js
checkboxControls = {
checkboxSize: 20,
checkboxStyle: {
backgroundColor: 'purple',
borderRadius: 30,
padding: 10,
borderColor: 'red',
},
checkboxLabelStyle: { color: 'red', fontSize: 20 },
checkboxComponent:
...
};
```
- `searchInputStyle` would now be replaced with `textInputStyle` in the `searchControls` object
```js
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`
```js
modalControls = {
modalBackgroundStyle: ViewStyle,
modalOptionsContainerStyle: ViewStyle,
modalProps: ModalProps, //Use this to pass in react-native default modal props
};
```
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
Made with [contrib.rocks](https://contrib.rocks).
## License
MIT
# Video Demo
https://github.com/azeezat/react-native-select/assets/9849221/194bf5cf-1a2d-4ca6-9585-05d6bb987aba