Android don't close modal when first click okButton

[ichiyouji]

same issue, it's flickering when opened, I think it's opening 3-4 popups on top of each other

-edit- this is just a guess but I think it's caused when the MonthPicker.android.js calling RNMonthPickerDialogModule.open(), this function gets called every time the react native component with the picker element rerenders, the android picker component doesn't track whether there's already a picker component open or not.

[alshcompiler]

for this issue alone i had to replace this library with this one:

https://github.com/mmazzarolo/react-native-modal-datetime-picker

[rjfernandes]

same issue, it's flickering when opened, I think it's opening 3-4 popups on top of each other

-edit- this is just a guess but I think it's caused when the MonthPicker.android.js calling RNMonthPickerDialogModule.open(), this function gets called every time the react native component with the picker element rerenders, the android picker component doesn't track whether there's already a picker component open or not.

You can use useMemo hook to avoid this issue:

return useMemo(() => visible && <MonthPicker {...props} />, [visible])

It works like a charm =)

[PunainenAurinko]

This used to be working fine in v. 1.6.4. After latest library upgrades I have also started having this issue. Can something be done about it? This is the only RN library for a standalone month year that looks native, it's a shame it doesn't always work correctly.

[PunainenAurinko]

@gusparis Is there an update on when this issue could be fixed? Thanks!

[vprecopeviivo]

I came across this issue as well on Android. What we had was this MonthPicker component wrapped in a react "View" and we were using a boolean state flag to drive the display of the MonthPicker.

example of our code: ... let [show, setShow] = useState(false); ...

let onValueChange = (event, newDate) => {
    //NOTE (IMPORTANT!!!):
    //do not move this setShow state call. This MUST be at the top of the method otherwise the MonthPicker will break when used on Android
    setShow(false);  

    //only the ACTION_DATE_SET one will have a valid "newDate" value
    if (newDate != null && newDate != undefined)
    {
      //do something here and set monthPickerSelectedDate to the date value
    }
    // if we use setShow(false); here after we set the "monthPickerSelectedDate", the MonthPicker will end up in a loop on Android when using "okButton" and it will never "hide".
};

...

{show && (
    <PickerContainer>
            <MonthPicker
              onChange={onValueChange}
              value={monthPickerSelectedDate}
              mode="short"
            />
   </PickerContainer>
)}

...

const PickerContainer = styled.View`
  bottom: 0;
  height: 100%;
  left: 0;
  position: absolute;
`;

That big NOTE (IMPORTANT!!!): in the onValueChange method handler above is what fixed the issue for us.

[Rutheniceye92]

setShow(false);

This worked for me.. had move setShow() call on top of onValueChange function.