Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Cero-Studio/ReactNativeWheelPicker
https://github.com/Cero-Studio/ReactNativeWheelPicker
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/Cero-Studio/ReactNativeWheelPicker
- Owner: Cero-Studio
- License: other
- Created: 2016-12-14T08:45:38.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-07-12T09:54:06.000Z (over 1 year ago)
- Last Synced: 2024-10-29T13:49:53.435Z (3 months ago)
- Language: Java
- Size: 9.7 MB
- Stars: 381
- Watchers: 9
- Forks: 240
- Open Issues: 66
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-wheel-picker-android ★186 - Simple and flexible React native wheel picker for Android, including DatePicker and TimePicker. (Components / UI)
README
# React native wheel picker V2
A simple Wheel Picker for Android (For IOs is using Picker from react-native)
## Example
You can clone the repo and run example from ./example folder
## Installation
`yarn add react-native-wheel-picker-android`
## Automatic Installation
`react-native link react-native-wheel-picker-android`
## Manual Android Installation
In `android/settings.gradle`
```
include ':react-native-wheel-picker-android'
project(':react-native-wheel-picker-android').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-wheel-picker-android/android')
```
In `android/app/build.gradle`
```
dependencies {
...
compile project(':react-native-wheel-picker-android')
}
```
In `android/app/src/main/java/com/PROJECT_NAME/MainApplication.java`
```
@Override
protected List getPackages() {
return Arrays.asList(new MainReactPackage(), new WheelPickerPackage());
}
```
# Usage
```js
import {
WheelPicker,
TimePicker,
DatePicker
} from "react-native-wheel-picker-android";
import React, { Component } from "react";
import { AppRegistry, StyleSheet, Text, View, Button } from "react-native";
const wheelPickerData = [
"sunday",
"monday",
"tuesday",
"wednesday",
"thursday",
"friday"
];
class MyPicker extends Component {
state = {
selectedItem: 0
};
onItemSelected = selectedItem => {
this.setState({ selectedItem });
};
onPress = () => {
this.setState({ selectedItem: 3 });
};
render() {
return (
Selected position: {this.state.selectedItem}
);
}
}
module.exports = MyPicker;
```
## Props
| Prop | Default | Type | Description |
| :------------ |:---------------:| :---------------:| :-----|
| onItemSelected | - | `func` | Returns selected position |
| data | - | `Array` | Data array |
| isCyclic | false | `bool` | Make Wheel Picker cyclic |
| selectedItemTextColor | black | `string` | Wheel Picker's selected Item text color |
| selectedItemTextSize | 16 | `number` | Wheel Picker's selected Item text size |
| selectedItemTextFontFamily | - | `font-family` | Wheel Picker's selected Item font |
| itemTextColor | grey | `string` | Wheel Picker's Item Text Color |
| itemTextSize | 16 | `number` | Wheel Picker's Item text size |
| itemTextFontFamily | - | `font-family` | Wheel Picker's Item font |
| selectedItem | 0 | `number` | Current item position |
| initPosition | 0 | `number` | Initial item position |
| indicatorColor | black | `string` | Indicator color |
| hideIndicator | - | `boolean` | Hide indicator |
| indicatorWidth | 1 | `number` | Indicator width |
| backgroundColor | transparent | `string` | Wheel Picker background color |
| disabled | undefind | `bool` | Disable picker selection |
# Time Picker
For IOs DatePickerIOS is used
```js
onTimeSelected = date => {}
...
```
## Props
| Prop | Default | Type | Description |
| :------------------- | :--------------: | :-------------: | :-------------------------- |
| [DatePickerIOS props](https://facebook.github.io/react-native/docs/datepickerios#props) | - | - | All DatePickerIOS props (IOS only) |
| ...WheelPicker props | - | - | All style WheelPicker props (Android only) |
| initDate | current date | `Date` | Initial date |
| onTimeSelected | - | `func` | Callback with selected time |
| hours | [1,2,3,4...] | `Array` | Custom hours array (Android only) |
| minutes | [00,05,10,15...] | `Array` | Custom minutes array (Android only) |
| format24 | false | `boolean` | Time format (Android only) |
# Date Picker
For IOs DatePickerIOS is used
```js
onDateSelected = date => {}
...
```
## Props
| Prop | Default | Type | Description |
| :-------------------------------------------------------------------------------------- | :--------------: | :-------------: | :--------------------------------------------------- |
| [DatePickerIOS props](https://facebook.github.io/react-native/docs/datepickerios#props) | - | - | All DatePickerIOS props (IOS only) |
| initDate | current date | `Date` | Initial date |
| onDateSelected | - | `func` | Callback with selected date |
| days | [1,2,3,4...] | `Array` | Custom days array (Android only) |
| hours | [1,2,3,4...] | `Array` | Custom hours array (Android only) |
| minutes | [00,05,10,15...] | `Array` | Custom minutes array (Android only) |
| format24 | false | `boolean` | Time format (Android only) |
| startDate | current date | `Date` | Min Date (Android only) |
| daysCount | 365 | `number` | Days count to display from start date (Android only) |
| hideDate | false | `boolean` | Hide days picker (Android only) |
| hideHours | false | `boolean` | Hide hours picker (Android only) |
| hideMinutes | false | `boolean` | Hide minutes picker (Android only) |
| hideAM | false | `boolean` | Hide time format picker (Android only) |
## Questions or suggestions?
Feel free to [open an issue](https://github.com/ElekenAgency/ReactNativeWheelPicker/issues)