# React Native Dropdown Select
A Dropdown select component for React Native. Easy to use with only one needed configuration.
## Demo
## Table of contents
- [React Native Dropdown Select](#react-native-dropdown-select)
- [Demo](#demo)
- [Table of contents](#table-of-contents)
- [Installation](#installation)
- [With npm](#with-npm)
- [With yarn](#with-yarn)
- [Add SafeAreaProvider](#add-safeareaprovider)
- [Usage](#usage)
- [What's new](#whats-new)
- [Props](#props)
- [Contributing](#contributing)
- [License](#license)
## Installation
### With npm
```sh
npm install react-native-safe-area-context @niku/react-native-dropdown-select
```
### With yarn
```sh
yarn add react-native-safe-area-context @niku/react-native-dropdown-select
```
## Add SafeAreaProvider
You have to add `SafeAreaProvider` at your App's root (App.tsx/App.jsx).
```js
import { SafeAreaProvider } from 'react-native-safe-area-context';
export function App() {
return (
{/* ... */}
);
}
```
## Usage
```js
// ...
import DropdownSelect from 'react-native-dropdown-select';
import { SafeAreaProvider } from 'react-native-safe-area-context';
// ...
const options = [
{
label: "Select language or framework you love",
value: null,
},
{
label: "Languages",
options: [
{
label: 'Javascript',
value: 'js',
},
{
label: 'Typescript',
value: 'ts',
},
{
label: 'Python',
value: 'py',
}
]
},
{
label: "Frameworks - Libraies",
options: [
{
label: 'Reactjs',
value: 'reactjs',
},
{
label: 'React Native',
value: 'react-native',
},
{
label: 'Vuejs',
value: 'vuejs',
},
{
label: "Laravel",
value: "laravel"
}
]
},
{
label: "Others",
value: "others"
}
];
const defaultValue = 'js';
function App() {
const [value, setValue] = React.useState(defaultValue);
return (
{
setValue(option.value);
}}
onHideDropdown={() => {
console.log('hide');
}}
onShowDropdown={() => {
console.log('show');
}}
/>
{value}
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
padding: 10,
},
});
```
## What's new
There are some new features in this verson.
- **Option group**: You can group your option. Both *option item* and *option group* can be mixed in props `options` (See in **Usage** above).
- **withStatusBar**: Deprecated. I caculate position of dropdown button with `react-native-safe-area-context`'s frame and insets. So, we don't need this props anymore.
## Props
| Name | Description | Type | Default | Required |
| ------------------------ | --------------------------------------------------------------------------------------- | ------------------------------------------------ | ----------------------- | -------- |
| options | List of option for dropdown | `array` | | Yes |
| defaultValue | Default value to display | `any` | | No |
| value | Current value of dropdown select | `any` | | No |
| position | Position of dropdown | `'top' | 'bottom'` | `'bottom'` | No |
| placeholder | Placeholder of dropdown select to display when no option selected | `string` | `'Select an option...'` | No |
| loading | Loading state of dropdown select | `boolean` | `false` | No |
| withStatusBar | Deprecated | `boolean` | `true` | No |
| component | Component to render dropdown button | `React.ComponentType | React.ReactNode` | | No |
| render | Render dropdown button via render function | `(props) => React.ReactNode` | | No |
| children | Loading state of dropdown select | `(props) => React.ReactElemnt | React.ReactNode` | | No |
| loadingComponent | Loading component to render loading icon | `React.ComponentType | React.ReactNode` | | No |
| renderLoading | Render loading icon via render function | `() => React.ReactNode` | | No |
| optionComponent | Option component to render option item | `React.ComponentType | React.ReactNode` | | No |
| renderOption | Render option item via render function | `(props) => React.ReactNode` | | No |
| optionGroupComponent | Option group component to render option group | `React.ComponentType | React.ReactNode` | | No |
| renderOptionGroup | Render option group via render function | `(props) => React.ReactNode` | | No |
| compareFunc | Compare function to compare two option, return `true` if equal otherwise return `false` | `(option1, option2) => boolean` | | No |
| onShowDropdown | Callback function is called when dropdown will be shown | `() => void` | | No |
| onHideDropdown | Callback function is called when dropdown will be hide | `() => void` | | No |
| onSelectOption | Callback function is called when an option is selected | `(option1) => void` | | No |
| buttonWrapperStyle | Additional styles for button's wrapper | `object` | | No |
| buttonContainerStyle | Additional styles for button's container | `object` | | No |
| buttonLabelStyle | Additional styles for button's label | `object` | | No |
| buttonIconStyle | Additional styles for button's icon | `object` | | No |
| dropdownStyle | Additional styles for dropdown's container | `object` | | No |
| optionStyle | Additional styles for option's container | `object` | | No |
| selectedOptionStyle | Additional styles for selected option's container | `object` | | No |
| disabledOptionStyle | Additional styles for disabled option's container | `object` | | No |
| optionLabelStyle | Additional styles for option's label | `object` | | No |
| selectedOptionLabelStyle | Additional styles for selected option's label | `object` | | No |
| disabledOptionLabelStyle | Additional styles for disabled option's label | `object` | | No |
| optionGroupPadding | Padding left for nested option group | `number` | | No |
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT