react-native-month-year-picker

React Native month picker component for iOS and Android.

| UI Mode | Android | iOS |
| --- | --- | --- |
|

Light | |
|

Dark | |

Getting started

$ npm install react-native-month-year-picker --save

or

$ yarn add react-native-month-year-picker

$3

As react-native@0.60.0 or above supports autolinking, so there is no need to run linking process.
Read more about autolinking here.

#### iOS
CocoaPods on iOS needs this extra step

``
npx pod-install
`


Usage


`javascript
import React, { useState, useCallback } from 'react';
import { View, SafeAreaView, Text } from 'react-native';
import MonthPicker from 'react-native-month-year-picker';

const App = () => {
const [date, setDate] = useState(new Date());
const [show, setShow] = useState(false);

const showPicker = useCallback((value) => setShow(value), []);

const onValueChange = useCallback(
(event, newDate) => {
const selectedDate = newDate || date;

showPicker(false);
setDate(selectedDate);
},
[date, showPicker],
);

return (

Month Year Picker Example
{moment(date, "MM-YYYY")}
showPicker(true)}>
OPEN

{show && (
onChange={onValueChange}
value={date}
minimumDate={new Date()}
maximumDate={new Date(2025, 5)}
locale="ko"
/>
)}

);
};

export default App;

`

Props

#### onChange (optional)

Date change handler.

This is called when the user changes the date in the UI. It receives the event and the date as parameters.

`js
setDate = (event, date) => {};

;
`
Events returned by onChange function:
`js
import { ACTION_DATE_SET, ACTION_DISMISSED, ACTION_NEUTRAL } from 'react-native-month-year-picker';
...
onValueChange = (event, newDate) => {
switch(event) {
case ACTION_DATE_SET:
onSuccess(newDate);
break;
case ACTION_NEUTRAL:
onNeutral(newDate);
break;
case ACTION_DISMISSED:
default:
onCancel(); //when ACTION_DISMISSED new date will be undefined
}
}
...
`

#### value (required)

Defines the date value used in the component.

`js

`

#### locale (optional)

Defines the month list locale. If not sent, it defaults to device's language.

`js

`

#### mode (optional)

Defines the month list display mode. It could be either full, short, number or shortNumber. Default full.

| mode | display |
| --- | --- |
| full | September |
| short | Sep |
| number | 09 |
| shortNumber | 9 |

`js

`
#### autoTheme (optional)

Enables phone's UI Mode color recognition; for Android 10+ and iOS 13+. Lower OS versions will always be Light Mode. Default true.

`js

`

#### maximumDate (optional)

Defines the maximum date that can be selected. Use year and month constructor.

`js

`

#### minimumDate (optional)

Defines the minimum date that can be selected. Use year and month constructor.

`js

`

#### okButton (optional)

Picker modal confirmation button text. Default Done.

`js

`

#### cancelButton (optional)

Picker modal cancelation button text. Default Cancel.

`js

`

#### neutralButton (optional)

Picker modal neutral button text. If not sent, button won't appear. Default null.

`js

`

Running example


1. Install required pods by running yarn pod:install.
2. Run yarn start to start Metro Bundler.
3. Run yarn run:ios or yarn run:android`.