Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wrathchaos/react-native-single-select
Customizable & Easy to Use Single Select Library for React Native
https://github.com/wrathchaos/react-native-single-select
apple application design front-end google ios javascript mobile mobile-app picker react react-native single-picker single-select typescript
Last synced: about 2 months ago
JSON representation
Customizable & Easy to Use Single Select Library for React Native
- Host: GitHub
- URL: https://github.com/wrathchaos/react-native-single-select
- Owner: WrathChaos
- License: mit
- Created: 2020-09-04T10:43:04.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-07-10T20:01:58.000Z (over 1 year ago)
- Last Synced: 2024-10-25T16:59:09.705Z (2 months ago)
- Topics: apple, application, design, front-end, google, ios, javascript, mobile, mobile-app, picker, react, react-native, single-picker, single-select, typescript
- Language: TypeScript
- Homepage: https://freakycoder.com
- Size: 58.8 MB
- Stars: 84
- Watchers: 4
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/WrathChaos/react-native-single-select)
[](https://github.com/WrathChaos/react-native-single-select)
[](https://www.npmjs.com/package/@freakycoder/react-native-single-select)
[](https://www.npmjs.com/package/@freakycoder/react-native-single-select)
[](https://opensource.org/licenses/MIT)
[](https://github.com/prettier/prettier)
Dark Theme
Light Theme
# Installation
Add the dependency:
```bash
npm i @freakycoder/react-native-single-select
npx pod-install // After Install the `react-native-spinkit`
```
## Peer Dependency
You need to install this dependency
```bash
"react-native-spinkit": "^1.5.1"
```
# Features
- Light Mode ☀️
- Dark Mode 🌙
- TextInput 💬
- Fully Animated Functionality 😍
- Built-in Search Filter 🎊
- Image Feature 💪
- Custom Image Component Support 😋
- Custom Text Component Support 😋
- Many More...
# Usage
## Import
```jsx
import RNSingleSelect, {
ISingleSelectDataType,
} from "@freakycoder/react-native-single-select";
```
## Fundamental Usage
```jsx
console.log("SelectedItem: ", selectedItem)
}
/>
```
## Menu Item Format
You must use this format for generating menu bar item.
```js
const staticData: Array = [
{ id: 0, value: "Euismod Justo" },
{ id: 1, value: "Risus Venenatis" },
{ id: 2, value: "Vestibulum Ullamcorper" },
{ id: 3, value: "Lorem Nibh" },
{ id: 4, value: "Ligula Amet" },
];
```
**OR** with `ImageSource`
```js
const staticData: Array = [
{ id: 0, value: "Euismod Justo", imageSource: require("./assets/..") },
{ id: 1, value: "Risus Venenatis", imageSource: { uri: "...url" } },
{ id: 1, value: "Risus Venenatis", imageSource: null },
];
```
Also, here is the interface of ISingleSelectDataType:
```js
export interface ISingleSelectDataType {
id: number;
value: string;
imageSource?: any;
data?: any;
}
```
# 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) |
| onTextChange | function | undefined | handle the onTextChange function |
| placeholderTextStyle | style | default | extends or override the default placeholder's text style |
| placeholderTextColor | color | default | change the placeholder's text color |
| spinnerType | string | "ThreeBounce" | change the spinner type |
| spinnerSize | number | 30 | change the spinner size |
| spinnerColor | color | default | change the spinner color |
| initialValue | ISingleSelectDataType | null | change the initial selected item |
| searchEnabled | boolean | true | change search inputs readonly state |
| value | string | undefined | set the text input value |
| nestedScrollEnabled | boolean | false | enable/disable nested scrolling for the items
## List of available types for Spinner
- CircleFlip
- Bounce
- Wave
- WanderingCubes
- Pulse
- ChasingDots
- ThreeBounce
- Circle
- 9CubeGrid
- WordPress (IOS only)
- FadingCircle
- FadingCircleAlt
- Arc (IOS only)
- ArcAlt (IOS only)
## Future Plans
- [x] ~~LICENSE~~
- [x] ~~Search Feature~~
- [x] ~~Image Feature~~
- [x] ~~Customizable Image Component~~
- [x] ~~Customizable Text Component~~
- [x] ~~Dark Theme / Light Theme Options~~
- [x] ~~More Customization for Colors~~
- [x] ~~Built-in Spinner~~
- [ ] Remove the `react-native-spinkit` and use `react-native-animated-spinkit` instead
- [ ] Customizable Animations
- [ ] Write an article about the lib on Medium
## Credits
Heavily Inspired by [Manuel Rovira Dribbble](https://dribbble.com/shots/11248542/attachments/2856460?mode=media)
## Author
FreakyCoder, [email protected]
## License
React Native Single Select is available under the MIT license. See the LICENSE file for more info.