[](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)
[](https://github.com/azeezat/react-native-select/actions/workflows/coverage.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
See more examples in [Sandbox](https://azeezat.github.io/react-native-select/)
# iOS
| | | |
| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| 
| 
| 
|
| 
| 
| 
|
# Android
| | | |
| :------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| 
| 
| 
|
## β οΈ Important: Wrap Your App in SafeAreaProvider
Starting from recent versions of React Native, certain safe area utilities have been deprecated, which may cause layout issues or warnings if not configured properly.
To ensure consistent behavior across devices (especially on iOS with notches and status bars), you must wrap your root component with `SafeAreaProvider` from `react-native-safe-area-context`.
β
Example Setup
```js
import { SafeAreaProvider } from 'react-native-safe-area-context';
import App from './App';
export default function Root() {
return (
);
}
```
## 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',
}}
selectedItemsControls={{
removeItemIcon: (
),
onRemoveItem: () => Alert.alert('Item was removed'),
showRemoveIcon: true,
}}
/>
);
}
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` |
| 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', 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(null)` | Use this to open or close the modal as needed e.g dropdownRef.current?.open() or dropdownRef.current?.close() |
## 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).
## Discussion
For discussion and feedback on this library. You can access it by heading over to the [Discussions Tab on Github](https://github.com/azeezat/react-native-select/discussions). We've created some sections to keep the discussion focused.
| Title | Topic |
| ------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- |
| [Announcements π£](https://github.com/azeezat/react-native-select/discussions/categories/announcements) | General announcements about this library. |
| [Show and tell π](https://github.com/azeezat/react-native-select/discussions/categories/show-and-tell) | Show off something you've made out of this library |
| [Ideas π‘](https://github.com/azeezat/react-native-select/discussions/categories/ideas) | A place to Share ideas for new features. |
| [Polls π³οΈ](https://github.com/azeezat/react-native-select/discussions/categories/polls) | Take a vote from the community |
| [Q&A π€](https://github.com/azeezat/react-native-select/discussions/categories/q-a) | A place to ask the community for help on the New Architecture topics |
| [General π¬](https://github.com/azeezat/react-native-select/discussions/categories/general) | Chat about anything and everything here |
## License
MIT
# Video Demo
https://github.com/azeezat/react-native-select/assets/9849221/194bf5cf-1a2d-4ca6-9585-05d6bb987aba