https://github.com/wrathchaos/react-native-multiple-select
Customizable & Animated, Easy to Use Multiple Select Library for React Native
https://github.com/wrathchaos/react-native-multiple-select
android animated ios javascript multi-select multiple-picker picker react-native select
Last synced: about 1 month ago
JSON representation
Customizable & Animated, Easy to Use Multiple Select Library for React Native
- Host: GitHub
- URL: https://github.com/wrathchaos/react-native-multiple-select
- Owner: WrathChaos
- Created: 2020-09-11T11:37:15.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-03-22T20:31:41.000Z (about 4 years ago)
- Last Synced: 2025-05-01T00:54:16.866Z (about 1 month ago)
- Topics: android, animated, ios, javascript, multi-select, multiple-picker, picker, react-native, select
- Language: TypeScript
- Homepage: https://freakycoder.com
- Size: 12.9 MB
- Stars: 39
- Watchers: 2
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://github.com/WrathChaos/react-native-multiple-select)
[](https://github.com/WrathChaos/react-native-multiple-select)
[](https://www.npmjs.com/package/@freakycoder/react-native-multiple-select)
[](https://www.npmjs.com/package/@freakycoder/react-native-multiple-select)
[](https://opensource.org/licenses/MIT)
[](https://github.com/prettier/prettier)
# Installation
Add the dependency:
```bash
npm i @freakycoder/react-native-multiple-select
```
## Peer Dependencies
IMPORTANT! You need install them
```js
"@freakycoder/react-native-bounceable": ">= 0.1.0",
"react-native-animated-spinkit": ">= 1.5.2",
"react-native-bouncy-checkbox": ">= 1.0.7"
```
# Usage
## Import
```jsx
import RNMultiSelect, {
IMultiSelectDataTypes,
} from "@freakycoder/react-native-multiple-select";
```
## Fundamental Usage
```jsx
console.log("SelectedItems: ", selectedItems)}
/>
```
## Data Format
You MUST use this format to generate menu items
```js
import RNMultiSelect, {
IMultiSelectDataTypes,
} from "@freakycoder/react-native-multiple-select";
const staticData: Array = [
{
id: 0,
value: "Euismod Justo",
isChecked: false,
},
{
id: 1,
value: "Risus Venenatis",
isChecked: false,
},
{
id: 2,
value: "Vestibulum Ullamcorper",
isChecked: false,
},
{
id: 3,
value: "Lorem Nibh",
isChecked: false,
},
{
id: 4,
value: "Ligula Amet",
isChecked: false,
},
];
```
# Configuration - Props
| Property | Type | Default | Description |
| ---------------------- | :--------------------------: | :-------: | --------------------------------------------------------------------------------------------------------------- |
| onSelect | function | undefined | set the selection function when a menu item is selected |
| data | Array | undefined | set the menu item data array for generating menu bar items |
| width | number | 250 | change the width of the component |
| height | number | 50 | change the height of the main single select button |
| darkMode | boolean | false | change the theme of the component to `dark theme` |
| placeholder | string | "Select" | change the placeholder of the single select component |
| imageHeight | number | 25 | change the image source's menu item's image height |
| imageWidth | number | 25 | change the image source's menu item's image width |
| ImageComponent | component | Image | set your own custom Image component instead of default `Image` one |
| TextComponent | component | Text | set your own custom Text component instead of default `Text` one |
| buttonContainerStyle | ViewStyle | default | change/override the top of the single select button (the main one) |
| menuBarContainerStyle | ViewStyle | default | change/override the top of the single select bottom menu bar |
| arrowImageStyle | ImageStyle | default | change/override the top of the arrow image's style |
| menuItemTextStyle | TextStyle | default | change/override the top of the each menu bar's item text style |
| disableAbsolute | boolean | false | if you do not want to use the library without absolute to fix bottom menubar's `overlaps` simply make it `true` |
| menuBarContainerWidth | number | 250 | change the bottom menu bar's width |
| menuBarContainerHeight | number | 150 | change the bottom menu bar's height |
| disableFilterAnimation | boolean | false | disable the filter animation for huge lists (especially on Android) |
| onDoneButtonPress | function | undefined | handle the onDoneButtonPress function |
| doneButtonTextStyle | style | default | change the done button's text style |
| doneButtonShadowColor | style | default | change the done button's shadow style |
| multiSelectionText | string | default | change the 3 or more items are selected's text part |
| placeholderTextStyle | style | default | extends or override the default placeholder's text style |
| Spinner | spinner component | Chase | change the spinner type |
| spinnerSize | number | 30 | change the spinner size |
| spinnerColor | color | default | change the spinner color |
## List of available types for Spinner
- ``
- ``
- ``
- ``
- ``
- ``
- ``
- ``
- ``
- ``
- ``
- ``
## Future Plans
- [x] ~~LICENSE~~
- [x] ~~Typescript Challenge!~~
- [x] ~~Dark Mode (Coming Soon!)~~
- [ ] Write an article about the lib on Medium
## Credits
Heavily Inspired by [Manuel Rovira's Work](https://dribbble.com/shots/9395928/attachments/1420569?mode=media)
## Author
FreakyCoder, [email protected]
## License
React Native Multi Select is available under the MIT license. See the LICENSE file for more info.