gusparis/react-native-month-year-picker

React Native Month Picker component for iOS & Android

react-native-month-year-picker's Issues

Customizable buttons

Hi @gusparis,
first of all, thanks for developing this component, it's working great for me.
I was wondering if there's a way to customize the button section. Apart from "Cancel" and "Done", I'd like to add an extra button to perform a custom action (in my case, to trigger a date deletion in the component calling the picker), and I'd like to include it in the button section. Do you think it's feasible, perhaps by giving us a way to inject the whole button section component as an array of buttons or a customized component?
Thanks

TypeError: null is not an object (evaluating '_RNMonthPickerDialogModule.default.open')

I've an error when using MonthPicker from 'react-native-month-year-picker' (Android devices)
I guess it's happens because the auto linking doesn't run automatically. Is there any guide to install dependencies manually on Android and iOS?

Model opens up atuomatically when app come from background state to foreground state

i have just copied your example code and it works fine when app is in foreground but when we put the app in background and open it up again that time the picker opens up automatically.please refer to the video attacked bellow.
versions

"react": "16.13.1",
"react-native": "^0.63.1",
"react-native-month-year-picker": "^1.3.2",

my code

`
/**

• @Format
  */

import Navigator from "@navigation/Router";
import rootReducer from "@redux/RootReducer";
import { ThemeContextProvider } from "@theme/ThemeHelper";
// import React from "react";
import Apps from "./src/App";
import { name as appName } from "./app.json";
import { AppRegistry } from "react-native";

// const App = () => (
//
//
//
// );

AppRegistry.registerComponent(appName, () => App);

import React, { useState, useCallback } from "react";
import { SafeAreaView, StyleSheet, Text, TouchableOpacity } from "react-native";
import moment from "moment";

import MonthPicker from "react-native-month-year-picker";

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#dfe6e9"
},
button: {
justifyContent: "center",
alignItems: "center",
backgroundColor: "#b2bec3",
borderRadius: 4,
padding: 10
},
buttonText: {
color: "#2d3436"
}
});

const DEFAULT_FORMAT = "MM-YYYY";
const DEFAULT_OUTPUT_FORMAT = "MMM-YYYY";

const App = () => {
const [date, setDate] = useState(new Date());
const [show, setShow] = useState(false);

const showPicker = useCallback((value) => setShow(value), []);

const onValueChange = useCallback(
(event, newDate) => {
const selectedDate = newDate || date;

  showPicker(false);
  setDate(selectedDate);
},
[date, showPicker]

);

return (

Month Year Picker Example
{moment(date, DEFAULT_FORMAT).format(DEFAULT_OUTPUT_FORMAT)}
<TouchableOpacity onPress={() => showPicker(true)} style={styles.button}>
OPEN

{show && (
<MonthPicker
onChange={onValueChange}
value={date}
minimumDate={new Date()}
maximumDate={new Date(2025, 5)}
enableAutoDarkMode={false}
/>
)}

);
};

`

RNMontPicker was not found in UIManager

my code

<MonthYearPicker
locale="ko"
onChange={date => console.log(date)}
minimumDate={new Date()}
maximumDate={new Date(2025, 5)}
value={new Date()} />

Months do not follow the device's default language

It would be interesting if the months were translated into the native language of the device. I believe the iOS DatePicker, do this by default.

Not showing Done and Cancel Button on IOS

React Native version :0.59:4

Empty modal

Version used: 1.8.0

{isShowMonthPicker && (
          <MonthPicker
            onChange={(event, newDate) => {
              switch (event) {
                case ACTION_DATE_SET:
                  changeMonth(moment(newDate));
                  break;
                case ACTION_NEUTRAL:
                  break;
                case ACTION_DISMISSED:
                default:
              }
              setIsShowMonthPicker(false);
            }}
            value={monthlyState.monthAndYear.toDate()}
            minimumDate={new Date()}
            maximumDate={new Date(2025, 5)}
          />
        )}

It's still possible to select a date beyond min/max

The way you do it is by clicking the ok button before the scrolling animation outside min/max boundaries has ended.
Android only, v. 1.6.3.

this.props.onChange is not a function

Error when i press the ok button.

How can i show months just number?

I want to show number of months how can i do it?

can you adding autotheme false/true to android?

App crashes while opening react native month year picker

App is crashing when opening picker
Using:
"react-native": "0.62.2"
"react-native-month-year-picker": "^1.3.2",

Code:
import React, { useState, useCallback } from 'react';
import { View, SafeAreaView, Text,TouchableOpacity } from 'react-native';
import MonthPicker from 'react-native-month-year-picker';

const App = () => {
const [date, setDate] = useState(new Date());
const [show, setShow] = useState(false);

const showPicker = useCallback((value) => setShow(value), []);

const onValueChange = useCallback(
(event, newDate) => {
const selectedDate = newDate || date;

  showPicker(false);
  setDate(selectedDate);
},
[date, showPicker],

);

return (

Month Year Picker Example
{/* {moment(date, "MM-YYYY")} */}
<TouchableOpacity onPress={() => showPicker(true)}>
OPEN

{show && (
<MonthPicker
onChange={onValueChange}
value={date}
minimumDate={new Date()}
maximumDate={new Date(2025, 5)}
enableAutoDarkMode={false}
/>
)}

);
};

export default App;

Tried following steps but not working
react-native run-android
npm start --reset-cache

Neutral button stops firing (iOS)

Hello again Gustavo,
I've been noticing an odd behavior on iOS with the neutral button you added in #48. Sometimes, after I've been using my app for a while, the button just stops firing the NEUTRAL_ACTION event. Unfortunately I don't have a code snippet to show you to replicate the problem, but it happens quite regularly and I'm still trying to figure out why. I'll keep you posted on the matter.
Cheers.

okButton & cancelButton not working (iOS)

okButton & cancelButton props work on Android but don't work in iOS (default values are shown):

Simulator: iPhone 11 (iOS 13.2.2), iPhone 11 (iOS 14)
react native: 0.63.2
react-native-month-year-picker: 1.6.0

Android don't close modal when first click okButton

Has any event to listen when modal is going to close?

Is there an event that is fired when modal was closed?
Clicking on the button Ok, or Cancel from the onChange function it's ok and changes the value. But when you click outside of the modal, and the modal was closed without clicking on button Cancel our Ok, i am no longer able to open the modal and select a new date. Help

Issue after installing mac os big sur - Execution failed for task ':react-native-month-year-picker:compileDebugJavaWithJavac'.

Task :react-native-month-year-picker:compileDebugJavaWithJavac FAILED

Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/6.1.1/userguide/command_line_interface.html#sec:command_line_warnings
348 actionable tasks: 2 executed, 1 from cache, 345 up-to-date

FAILURE: Build failed with an exception.

• What went wrong:
  Execution failed for task ':react-native-month-year-picker:compileDebugJavaWithJavac'.

Could not find tools.jar. Please check that /Library/Internet Plug-Ins/JavaAppletPlugin.plugin/Contents/Home contains a valid JDK installation.

• Try:
  Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

• Get more help at https://help.gradle.org

BUILD FAILED in 17s

error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup. Run CLI with --verbose flag for more details.
Error: Command failed: ./gradlew app:installDevDebug -PreactNativeDevServerPort=8081

TypeError: undefined is not an object (evaluating _reactNative.Appearance.getColorScheme)

Thanks for the lib!

On iOS it throws an error:
TypeError: undefined is not an object (evaluating _reactNative.Appearance.getColorScheme)
Android works fine.

Versions:
"react": "16.9.0",
"react-native": "0.61.5",

Couldn't install it using yarn

mohamadmek@Mohamads-MacBook-Pro centreminefrontend % yarn add @react-native-month-year-picker
yarn add v1.22.5
[1/4] 🔍 Resolving packages...
error An unexpected error occurred: "https://registry.yarnpkg.com/@react-native-month-year-picker: Request "https://registry.yarnpkg.com/@react-native-month-year-picker\" returned a 405".
info If you think this is a bug, please open a bug report with the information provided in "/Users/mohamadmek/Documents/CentremineProject/centreminefrontend/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
mohamadmek@Mohamads-MacBook-Pro centreminefrontend %

Incorrect work on android

when I clicked Ok at dialog, then picker opens multiple times and doesn't close, i can do it only by clicking on Ok button
and I can't see action for Cancel button, and can't setVisible for modal like "false" value and modal always visible.
please help

Date picker persists during a device screen timeout or device lock

Date picker persists during a device screen timeout or device lock. When the device is unlocked, the date picker is displayed regardless of the app state before screen lock

Receiving invalid date for all input on android

As of 1.4.0, android side is returning 'Invalid Date' to the onChange callback for any value selected.

Android: Method addObserver must be called on the main thread

Component code:

`import React, {memo, useCallback, useMemo, useRef, useState} from 'react';
import format from 'date-fns/format';
import MonthPicker, {ACTION_DATE_SET} from 'react-native-month-year-picker';
import {Platform} from 'react-native';

import {Container, Modal, PaymentTextField} from './styles';

function emptyFun() {}

// Interface
interface IDatePickerFieldProps {
input: {value: string; onChange: () => void};
meta: any;
}

const DatePickerField = memo(
({input, meta, ...props}) => {
const textFieldRef = useRef(true);

const [pickerOpen, setPickerOpen] = useState(false);

const handleClosePicker = useCallback(() => {
  setPickerOpen(false);
}, []);
const handleOpenPicker = useCallback(() => {
  setPickerOpen(true);
}, []);

const onValueChange = useCallback(
  (event, newDate) => {
    switch (event) {
      case ACTION_DATE_SET:
        input.onChange(newDate);
        break;

      default:
        handleClosePicker();
    }
    handleClosePicker();
  },
  [input, handleClosePicker],
);

const inputForTextField = useMemo(
  () => ({
    ...input,
    onFocus: () => {
      handleOpenPicker();
      textFieldRef.current?.blur();
    },
    value: input.value ? format(input.value, 'MM/yy') : '',
    onChange: emptyFun,
  }),
  [textFieldRef, input, handleOpenPicker],
);

const currentDate = useMemo(() => new Date(), []);

return (
  <>
    <PaymentTextField
      input={inputForTextField}
      meta={meta}
      forwardRef={textFieldRef}
      {...props}
    />
    {Platform.OS === 'android' ? (
      pickerOpen && (
        <MonthPicker
          onChange={onValueChange}
          value={input.value || currentDate}
          minimumDate={new Date()}
          locale="en"
        />
      )
    ) : (
      <Modal
        isVisible={pickerOpen}
        onBackButtonPress={handleClosePicker}
        onBackdropPress={handleClosePicker}
        backdropOpacity={0}
        backdropTransitionOutTiming={0}
        animationInTiming={300}
        animationOutTiming={300}
        coverScreen
        animationOut="slideOutDown"
        isSwipeable={false}
        {...props}>
        <Container>
          <MonthPicker
            onChange={onValueChange}
            value={input.value || currentDate}
            minimumDate={currentDate}
            locale="en"
            mode="number"
          />
        </Container>


      </Modal>
    )}
  </>
);

},
);

export {DatePickerField};
`

Scroll multiple Items at once not possible (Android)

When trying to scroll multiple months or years at once, the animation is shown but jumps back to the previous selected item. From a user perspective it feels weird to be resetted after scrolling a few months at once.

In my case only tapping item by item through the list makes it possible to select something.

Also as a sidenote: It would be awesome to be able to jump from December 2020 to January 2021 with one click.

Hit me up, if you need further information

on IOS, it's always dark mode

on IOS,
even though i set enableAutoDarkMode as false, the color of picker is still dark mode style.

how can i fix this?

Hi, is there any way to change month and year columns position?

I want to display the year column which is before the month column like 2022 February instead of February 2022, is it posible?
thank you...

On first load, the value does not match default

On the first time loading the picker, the value is set incorrectly. This behavior is not present in the android version. Below the Value should have been September 2020.

Expo

Cannot read property 'open' of undefined for MonthPicker.

Customizable button colors

Can button colors be customizable? Default color doesn't align with our app theme.

iOS: Not showing Done and Cancel Button on first render, scroll the spin crash the app

React Native version :0.63.3

• when first enter the page and trigger the month-year-picker, Not showing Done and Cancel Button. at this time scroll the spin would some times make the app crash.
• navigate to other page and navigate back, re-trigger the month-year-picker, it works fine.

as it would crash the app, I guess is there some code issue in this situation?

attached the screen and video. thanks

RPReplay_Final1628132543.MP4

this is my code:

render() {
    const { value, minimumDate, maximumDate, locale } = this.state;
    return (
      <MonthPicker
        onChange={this.onValueChange}
        value={value}
        minimumDate={minimumDate}
        maximumDate={maximumDate}
        mode="full"
        autoTheme={false}
        locale={locale}
      />
    );
  }

Help me out to get the cancel button call back

localization

Hello, can you please tell me how to make localization for this picker, or is this function not yet implemented? If not, is it planned to be implemented in the near future?

scrolling month and year at a time picker getting freez

@gusparis i tested the picker in different ways, it was getting freeze,
when i start scrolling the date and year same time, after some time application getting closed

can you help me in it to fix this issue.

Thanks

Possibility to provide month names

Translated months to polish are not grammatically correct if there is no day column before (like it's in original picker). It would be cool to provide prop with mappings or something

Error in release mode iOS

I got error on release iOS application

when I select month and year on release I can get any year that I selected but I still got January month when submit.
It's work on simulator and debug mode on device.

"RNMonthPicker" was not found in the UIManager using Expo

Hey,

First of all thanks for creating this datepicker.

I am using the following packages:
Expo: "expo": "^39.0.3"
"react-native": "^0.63.2"

I have installed the package using:
npm install react-native-month-year-picker --save

As per my knowledge there is no linking/autolinking in a managed expo project so the quesiton is how can i make it work?

When i tap on the button to show the datepicker i get the following error:
"RNMonthPicker" was not found in the UIManager

Many thanks,
Trix

Focus on scroll

It would be nice to have a way to focus on scroll Months.

[Android] I can still select dates beyond minimumDate and maximumDate

Hi again Gustavo,
I have yet another report: on Android, I set the maximum date to December 2020 with the prop maximumDate={new Date()}, but if I carefully and slowly drag the year column I can still select the next year (2021 in this case). I can't go any further that that luckily. The same goes with minimumDate={new Date()}, I can still select 2019.
Same story with months column on both directions.

Some specs: library v. 1.6.2 (latest), Android v. 10, confirmed on several devices (Huawei, Xiaomi, Nokia).

Can you look into that? Thanks.
In the meantime, Feliz Navidad man.

September on android is trimmed

September on android is trimmed

Invariant Violation: requireNativeComponent: "RNMonthPicker" was not found in the UIManager.

This occurs when we try to use this library for typescript project, help needed.

How update a locale date.formats.short?

Hello. How update a locale date.formats.short?

[Request] Please provide index.d.ts for typescript

Dear contributors.

I found this repo yesterday and am thinking this is exactly what I want.

However, since I am using the Typescript and cannot use the component without suppressing type error.
To use your component, I would like you to provide the typedef as a part of the code provided.

If you do not mind me contributing, I can make PR by myself in this weekend or next week.

Best Regard

Reference:
Typescript Official Document: Modules .d.ts

[IOS] Picker width does not update after orientation change

MonthPicker.ios.js

const { width } = Dimensions.get('screen');

const styles = StyleSheet.create({
  container: {
    width,
    position: 'absolute',
    zIndex: 500,
    bottom: 0,
  },
  pickerContainer: {
    height: 244,
    width,
  },
  picker: { flex: 1 },
});

When the orientation updated to landscape, the width remains unchanged.
The picker width is less than the screen width.

Is there a option to show only years?

Months not looping

Months are not looping on scroll. If the wheel is focused on January, and I scroll up, It should go to December-November...

Is there a way not to present the wheel inside the modal?

Hi,
basically, I need only the wheel picker itself without the modal functionality.

is there a way to do it?

Thanks

TypeError: value.getTime is not a function. (In 'value.getTime()', 'value.getTime' is undefined)

Giving TypeError in both android and ios after upgrading to 1.4.1.

selectedDate not working

using hooks, if you click another month and year, always returns to the current month and year. RN 0.63.4

A problem occurred configuring project ':react-native-month-year-picker'.

com.android.builder.errors.EvalIssueException: compileSdkVersion is not specified. Please add it to build.gradle
Getting the above error on RN V0.67.2. Anyone facing similar issue?

Not supporting to all versions in android

@gusparis this module is not working in some versions in the android 5 & 11, in android version 9 it is working,

i didn't checked in remaining versions also, only i tested in above mentioned versions. it was working only in android 9

not working in android 11 & 5

can you help me to fix this issue.
Thanks