✨ A React Native Month Switch Component

Last update: Jul 31, 2022

🌈 react-native-month-switch

Npm Version MIT License Preview

A React Native Month Switch Components

Installation

yarn add react-native-month-switch

or

npm install react-native-month-switch

Demo

Usage

{ const arrowImage = direction === 'left' ? require('./images/left.png') : require('./images/right.png'); return ( ); }} onLeftArrow={(date: string) => { /** click 2022-07-18 */ console.log('click', date); }} onRightArrow={(date: string) => { /** click 2022-06-18 */ console.log('click', date); }} /> ); }">
import React from 'react';

import { Image, View } from 'react-native';
import { MonthSwitch, DateData } from 'react-native-month-switch';

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

      <MonthSwitch format={'MM-yyyy'} />

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

      <MonthSwitch
        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) => {
          /** click 2022-07-18 */
          console.log('click', date);
        }}
        onRightArrow={(date: string) => {
          /** click 2022-06-18 */
          console.log('click', date);
        }}
      />
    </View>
  );
}

MonthSwitch Props

Property Type Optional Default Description
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
arrowStyle StyleProp no - Style passed to the arrow, can refer to:Viewstyle
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

Contributing

While developing, you can run the example app to test your changes.

Make sure your code passes TypeScript and ESLint. Run the following to verify:

yarn typescript
yarn lint

To fix formatting errors, run the following:

yarn lint --fix

Remember to add tests for your change if possible.

License

MIT

GitHub

https://github.com/sj-distributor/react-native-month-switch
You might also like...

A React Native module that allows you to crop photos, built with react native Animated api and react-native-gesture-handler.

react-native-image-cropview A React Native module that allows you to crop photos, built with react native Animated api and react-native-gesture-handle

Aug 4, 2022

Use the iOS and Android native Twitter and Facebook share popup with React Native https://github.com/doefler/react-native-social-share

Use the iOS and Android native Twitter and Facebook share popup with React Native https://github.com/doefler/react-native-social-share

React Native Social Share Use the built-in share view from iOS and Android to let the user share on Facebook and Twitter. It will use the user's exist

Jun 29, 2022

react-native-page-swiper ★83 - Page Swiper component for React Native.

react-native-page-swiper Page Swiper component for React Native. Getting Started Installation Basic Usage Properties Examples Development Installation

Oct 7, 2021

react-native-photo-grid ★31 - React Native component that handles the complexities of building a grid of photos with a flexible number of photos per row.

react-native-photo-grid React Native component that handles the complexities of building a grid of photos with a flexible number of photos per row Ins

Jul 11, 2022

Arc Slider Component for React Native using React Native SVG

Arc Slider Component for React Native using React Native SVG

React Native Arc Slider 🚀 Getting Started Install Install the library and react-native-svg npm i --save rn-arc-slider react-native-svg Link native co

May 30, 2022

VideoPlayer for the React Native Video component at react-native-video

VideoPlayer for the React Native Video component at react-native-video

🕹 react-native-media-console VideoPlayer for the React Native Video component at react-native-video. ⭐️ Features This package contains a simple set

Jul 31, 2022

TouchBolocker is a React Native and React Native Web component that helps blocking the user from interacting with children components.

TouchBlocker is a React Native and React Native Web component that helps blocking the user from interacting with children components.

May 27, 2022

iOS and Android native search component for react native

react-native-search-bar iOS native search bar for react native. Installation In your react native project, run npm install react-native-search-bar --s

Jul 25, 2022

🔽 A Picker component for React Native which emulates the native select interfaces for iOS and Android

🔽 A Picker component for React Native which emulates the native select> interfaces for iOS and Android

react-native-picker-select A Picker component for React Native which emulates the native select interfaces for iOS and Android For iOS, by default w

Aug 6, 2022
Comments
  • 1. Feat add arrow style props

    Description

    1. add style passed to the arrow
    2. add demo.gif
    3. update docs to README.md

    Additional context

    https://github.com/Simoon-F/react-native-month-switch/issues/1#issue-1307401135


    What is the purpose of this pull request?

    • [ ] Bug fix
    • [x] New Feature
    • [x] Documentation update
    • [ ] Other
    Reviewed by Simoon-F at 2022-07-18 05:15
Animated switch button with fully customizable React Native Component
Animated switch button with fully customizable React Native Component

Installation Add the dependency: npm i @freakycoder/react-native-switch-button Peer Dependencies IMPORTANT! You need install them "@freakycoder/react-

Jan 17, 2022
A lightweight, fully customizable switch component for React Native
A lightweight, fully customizable switch component for React Native

React-Native-Custom-Switch A lightweight, fully customizable switch component for React Native. Installation npm install react-native-custom-switch Us

Jul 5, 2022
Switch Selector for React Native
Switch Selector for React Native

SwitchSelector Switch Selector to React Native. SwitchSelector SwitchSelector - Custom Example Installing yarn add react-native-switch-selector or npm

Aug 7, 2022
A tiny and simple helper set to make it easy to switch your styles in React Native when switching between light and dark mode. 🌟

A tiny and simple helper set to make it easy to switch your styles in React Native when switching between "light" and "dark" mode

Jun 1, 2022
a universal switch for android and iOS

react-native-switch-pro (2.0 is coming) A universal switch for android and iOS, it could be the best switch for react-native on Github. Preview Featur

Jun 30, 2022
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

react-native-app-intro react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swipe

Aug 6, 2022
react-native-swiper2 ★86 - Swiper component for React Native. Supersede react-native-swiper
react-native-swiper2 ★86 - Swiper component for React Native. Supersede react-native-swiper

react-native-swiper2 react-native-swiper is now active again, so swiper2 will stop maintaining. Changelogs [v2.0.7] correct onPageChange index. https:

Feb 23, 2022
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

react-native-app-intro react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swipe

Jul 15, 2022
React Native Higher Order Component that adds advanced caching functionality to the react native Image component.

React Native Image Cache HOC React Native Higher Order Component that adds advanced caching functionality to the react native Image component. Feature

Aug 1, 2022
A marquee label for react-native(if you use js pure marquee, use remobile/react-native-marquee[ https://github.com/remobile/react-native-marquee ])
A marquee label for react-native(if you use js pure marquee, use remobile/react-native-marquee[ https://github.com/remobile/react-native-marquee ])

React Native MarqueeLabel (remobile) A marquee label for react-native if you use js pure marquee, use remobile/react-native-marquee[ https://github.co

Jul 18, 2022