React Native Select
A simple select component for React Native.
TODO
- [x] Add support for single selection
- [x] Add support for multiple selections
- [x] Add support for disabled options
- [x] Add support for disabled select
- [x] Add support for placeholder
- [ ] Add search functionality
- [ ] Add support for placeholder color
- [ ] Add tests
- [ ] Add support for custom components
- [x] Add support for custom styles
- [ ] Add support for custom placeholder
- [ ] Add support for validation
- [ ] GitHub Actions for CI/CD
Installation (Not available yet)
npm install react-native-multi-optionsUsage
import React from 'react';
import { View } from 'react-native';
import Select from 'react-native-multi-options';
const options = [
{ label: 'One', value: 'one' },
{ label: 'Two', value: 'two' },
{ label: 'Three', value: 'three' },
];
const App = () => {
const [value, setValue] = React.useState('one');
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Select
multiple
options={options}
value={value}
onChange={(option) => setValue(option)}
disabledOptions={[options[1]]}
borderColor="red"
/>
</View>
);
};Props
| Prop | Type | Default | Description |
|---|---|---|---|
| options | Array | [] | Options to be displayed in the select |
| value | String | Value of the selected option | |
| onChange | Function | Callback function to be called when an option is selected | |
| multiple | Boolean | false | Whether the select should allow multiple selections |
| disabled | Boolean | false | Whether the select should be disabled |
| placeholder | String | Select... | Placeholder text to be displayed when no option is selected |
| placeholderTextColor | String | #999 | Placeholder text color |
| style | Object | Style object to be applied to the select | |
| optionStyle | Object | Style object to be applied to the options | |
| optionTextStyle | Object | Style object to be applied to the option text | |
| optionContainerStyle | Object | Style object to be applied to the option container | |
| optionContainerTextStyle | Object | Style object to be applied to the option container text | |
| optionSelectedStyle | Object | Style object to be applied to the selected option | |
| optionSelectedTextStyle | Object | Style object to be applied to the selected option text | |
| borderColor | String | #999 | Border color of the container |
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT
Made with create-react-native-library