aekimena-month-year-picker

A customizable month-year picker component for React Native. Easily integrate a month-year picker with various customization options to fit your app's design.

Installation

You can install the package via npm or yarn:

1  npm install aekimena-month-year-picker

or

1  yarn add aekimena-month-year-picker

Basic Usage

1import React, { useState } from "react";
2import { View, StyleSheet, Button } from "react-native";
3import MonthYearPicker from "aekimena-month-year-picker";
4
5const App = () => {
6  const [visible, setVisible] = useState(false);
7  const [date, setDate] = useState(null);
8
9  return (
10    <View style={styles.container}>
11      <Button title="Show Picker" onPress={() => setVisible(true)} />
12      <MonthYearPicker
13        visible={visible}
14        onRequestClose={() => setVisible(false)}
15        onConfirm={(text) => {
16          setDate(text);
17        }}
18      />
19    </View>
20  );
21};
22
23export default App;
24
25const styles = StyleSheet.create({
26  container: {
27    flex: 1,
28    backgroundColor: "#9FBBBB",
29    justifyContent: "center",
30    alignItems: "center",
31  },
32});

Props

Props	Type	Description	Default
visible	boolean	Determines whether the month-year picker is visible	false
animationType	"none" | "slide" | "fade"	Specifies the animation type for the modal presentation.	"fade"
transparent	boolean	Indicates if the modal should be transparent.	true
onRequestClose	() => void	Callback function triggered when the request to close the modal occurs.
onBackgroundPress	() => void	Callback function triggered when the modal background is pressed.
opacity	number	Sets the opacity of the modal background.	0.5
containerStyle	ViewStyle	Custom styles for the month-year picker container.
maxDate	string	Specifies the maximum date that can be selected.	"Current date"
minDate	string	Specifies the minimum date that can be selected.	"2000-01-01"
onConfirm	(text: string) => void	Callback function triggered when the confirm button is pressed.
showDays	boolean	Determines if the days list should be shown	true
highlighterStyle	ViewStyle	Custom styles for the highlighter.
itemTextStyle	TextStyle	Custom styles for the text items.
itemContainerStyle	ViewStyle	Custom styles for the text item container.
buttonStyle	ViewStyle	Custom styles for the button.
buttonTextStyle	TextStyle	Custom styles for the button text.
buttonText	string	Text displayed on the button.	"Confirm"
highlightedItemStyle	TextStyle	Custom styles for the highlighted items

Contributing

To get started...

Step 1

• Option 1

  • 🍴 Fork this repo!

• Option 2

  • 👯 Clone this repo to your local machine using https://github.com/aekimena/month-year-picker

Step 2

• DO YOUR THING! 🤌

Step 3

• 🔃 Create a new pull request using https://github.com/aekimena/month-year-picker.

License

• MIT license