React-native-month-switch NPM

:rainbow: react-native-month-switch

A React Native Month Switch Components

Installation

yarn add react-native-month-switch

or

npm install react-native-month-switch

Demo

Usage

import React, { useRef } from 'react';

import { Button, Image, View } from 'react-native';
import { MonthSwitch, DateData } from 'react-native-month-switch';
import type { IMonthSwitchRef } from 'src/types';

export default function App() {
  const monthSwitchRef = useRef<IMonthSwitchRef>(null);

  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'space-evenly',
      }}
    >
      <MonthSwitch />

      {/* Set max date */}
      <MonthSwitch
        format={'MM-yyyy'}
        maxDate={'2022-08'}
        maxDateTrigger={(b: boolean) => {
          console.log(b, 'trigger');
        }}
      />

      <MonthSwitch
        arrowStyle={{
          padding: 0,
        }}
        format={'yyyy-MM'}
        onChange={(dataString: DateData) => {
          /** {"dateString": "2022-05-18", "day": 18, "month": "05", "year": 2022} */
          console.log(dataString);
        }}
      />

      <Button
        title="On ref reset ⬇️"
        onPress={() => {
          monthSwitchRef.current?.reset();
        }}
      />

      <MonthSwitch
        ref={monthSwitchRef}
        format={'MM-yyyy'}
        renderCustomArrow={(direction: string) => {
          const arrowImage =
            direction === 'left'
              ? require('./images/left.png')
              : require('./images/right.png');

          return (
            <Image
              style={{
                width: 35,
                height: 35,
              }}
              source={arrowImage}
            />
          );
        }}
        onLeftArrow={(date: string) => {
          console.log('click', date);
        }}
        onRightArrow={(date: string) => {
          console.log('click', date);
        }}
      />
    </View>
  );
}

MonthSwitch Props

Property	Type	Optional	Default	Description
ref	React.Ref	no	-	Ref
format	string	no	yyyy-MM	To set the date format，can refer to：Formatting
initValue	string	no	current month	To set init value, default current month
maxDate	string	no	-	Max date that can be limit
arrowStyle	StyleProp	no	-	Style passed to the arrow, can refer to：Viewstyle
maxDateTrigger	function(b:boolean)	no	-	Triggered when maxdate condition is met
onChange	function(dataString: DateData)	no	-	Callback function, can be executed when the month is changing
onLeftArrow	function(date:string)	no	-	Callback function, can be executed when the left arrow is click
onRightArrow	function(date:string)	no	-	Callback function, can be executed when the right arrow is click
renderCustomArrow	function(direction: Direction) => React.ReactNode	no	-	Custom arrow icon render method