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:

  npm install aekimena-month-year-picker

or

  yarn add aekimena-month-year-picker

Basic Usage

import React, { useState } from "react";
import { View, StyleSheet, Button } from "react-native";
import MonthYearPicker from "aekimena-month-year-picker";

const App = () => {
  const [visible, setVisible] = useState(false);
  const [date, setDate] = useState(null);

  return (
    <View style={styles.container}>
      <Button title="Show Picker" onPress={() => setVisible(true)} />
      <MonthYearPicker
        visible={visible}
        onRequestClose={() => setVisible(false)}
        onConfirm={(text) => {
          setDate(text);
        }}
      />
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#9FBBBB",
    justifyContent: "center",
    alignItems: "center",
  },
});

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