React-native-year-month-pickers NPM

react-native-year-month-pickers

This React-Native component library provides a seamless month and year picker for both Android and iOS platforms.

Examples

Install

Step 1

npm i react-native-year-month-pickers --save

yarn add react-native-year-month-pickers

Step 2

iOS

cd ios
pod install

Usage

Import library

import YearMonthPicker from "react-native-year-month-pickers";

Create required state variables

const [showPicker, setShowPicker] = useState(false);
const [monthYear, setMonthYear] = useState("");

Usage of the Month and Year value picker

<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