https://github.com/liamandrew/react-native-picky
An awesome native wheel picker component for React Native.
https://github.com/liamandrew/react-native-picky
picker react react-native typescript wheelpicker
Last synced: about 1 year ago
JSON representation
An awesome native wheel picker component for React Native.
- Host: GitHub
- URL: https://github.com/liamandrew/react-native-picky
- Owner: Liamandrew
- License: mit
- Created: 2022-06-01T06:17:18.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2023-07-10T20:59:10.000Z (almost 3 years ago)
- Last Synced: 2025-05-06T23:15:30.079Z (about 1 year ago)
- Topics: picker, react, react-native, typescript, wheelpicker
- Language: Java
- Homepage:
- Size: 3.31 MB
- Stars: 58
- Watchers: 3
- Forks: 15
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# ⛏️ react-native-picky
An awesome native wheel picker component for react-native.
## Features
- Supports multiple columns ✅
- Supports looping ✅
- Native Android and iOS components for improved performance ✅
- Typescript ✅
## Preview
| Preview | iOS | Android |
| ----------------------------- | -------------------------------------------------------- | ------------------------------------------------------------ |
| Single Column | 
| 
|
| Multiple Columns with looping | 
| 
|
## Installation
```sh
yarn add react-native-picky
```
## Quick Start
```tsx
import { Picker, PickerColumn, PickerItem } from 'react-native-picky';
export const Demo = () => (
);
```
## Props
### ``
| Property | Type | Description | Platform | Default |
| -------------- | -------- | --------------------------------------------------------- | ------------ | -------------------- |
| loop | boolean | Enable looping options | iOS, Android | false |
| style | object | View style prop | iOS, Android | |
| onChange | function | A callback function when a value is changed in any column | iOS, Android | |
| numberOfLines | number | The number of lines for each row in a column | iOS | 1 |
| hasCurtain | boolean | Enable the curtain to highlight the selected value | Android | true |
| curtainColor | string | Color of the curtain | Android | hsla(0, 0%, 0%, 0.1) |
| hasIndicator | boolean | Enable the indicator to highlight the selected value | Android | true |
| indicatorColor | string | Color of the indicator | Android | hsla(0, 0%, 0%, 0.1) |
| indicatorSize | number | The size of the indicator | Android | 1 |
| itemSpace | number | The amount of space between items | Android | 12 |
| textColor | string | The color of the item text | Android | #000000 |
| textSize | number | The size of the item text | Android | 20 |
### ``
| Property | Type | Description | Platform | Default |
| ------------- | ---------------- | ---------------------------------------------------------- | ------------ | ---------------------------- |
| selectedValue | string \| number | The selected value | iOS, Android | |
| onChange | function | A callback function if the value is changed in this column | iOS, Android | |
| width | number | The width of this column | iOS, Android | Takes up the available space |
### ``
| Property | Type | Description | Platform | Default |
| -------- | ---------------- | -------------------------- | ------------ | ------- |
| label | string | The label of the item | iOS, Android | |
| value | string \| number | The value of the item | iOS, Android | |
| testID | string | The testID of the item | iOS | |
| color | string | The color of the item text | iOS | |
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT