react-native-year-month-pickers
Version:
This React-Native component library provides a seamless month and year picker for both Android and iOS platforms.
86 lines (60 loc) • 2.78 kB
Markdown
# react-native-year-month-pickers
This React-Native component library provides a seamless month and year picker for both Android and iOS platforms.
## Examples
<p align="left">
<img width=220 title="Screenshot-1" src="https://github.com/solutiontechseries/react-native-year-month-pickers/blob/master/assets/screenshot-1.png">
<img width=220 title="Screenshot-2" src="https://github.com/solutiontechseries/react-native-year-month-pickers/blob/master/assets/screenshot-2.png">
</p>
# Install
## Step 1
```bash
npm i react-native-year-month-pickers --save
```
or
```bash
yarn add react-native-year-month-pickers
```
## Step 2
### iOS
```bash
cd ios
pod install
```
## Usage
Import library
```javascript
import YearMonthPicker from "react-native-year-month-pickers";
```
Create required state variables
```javascript
const [showPicker, setShowPicker] = useState(false);
const [monthYear, setMonthYear] = useState("");
```
Usage of the Month and Year value picker
```javascript
<View>
<Button title={"Show Date Picker"} onPress={() => setShowPicker(true)} />
<YearMonthPicker
show={showPicker}
value={monthYear}
onClose={() => setShowPicker(false)}
onDone={(date) => {
setMonthYear(date);
setShowPicker(false);
}}
/>
</View>
```
### Request Object
| Property | Required | Type | Description |
| --------------- | :------- | :------------------- | :-------------------------------------------------------------------------------------------------------------- |
| `show` | **Yes** | bool (default false) | Show or Hide year month picker |
| `value` | **Yes** | string (default '') | Selected date or empty string to show today's date |
| `animationType` | **No** | string | This props used to show picker animation type like a Model acceptable values are `fade`, `slide` and `none` |
| `primaryColor` | **No** | string | A string color value of the picker |
| `onClose` | **Yes** | function | A callback function when hardware back button pressed in android or `Cancel` button pressed to close the picker |
| `onDone` | **Yes** | function | A callback function called when `Done` button pressed in picker and return a selected date as function argument |
## Sponsors
Support this project by becoming a sponsor. Your logo will show up here with a link to your website.
## License
_MIT_