React-native-modal-datetime-picker: minuteInterval always resetting to 1

[zxiest]

https://github.com/mmazzarolo/react-native-modal-datetime-picker/blob/master/src/CustomDatePickerIOS/index.js
Line 52

should be set to this.props.minuteInterval ; no?

[mmazzarolo]

Fixed by @gbhasha in #183

[mmazzarolo]

Re-opening, see #183 comment by @wildseansy

[ptboyer]

Just ran into this issue now also. Would be good to resolve this please! 😄

[mmazzarolo]

Hey @ptboyer , do you have any suggestion on how to fix it? Feel free to submit a PR/point out what could be causing the issue!

[ptboyer]

@mmazzarolo Well what I find odd is that this is something wrong with the DatePickerIOS itself potentially.

I just tried all these "set width, minWidth" solutions that seemed to have worked for people in the past, but like a) it's absurd that changing the style of the component fixes a functional issue, b) despite how ridiculous that solution was, it doesn't work on my current version of React Native (0.55.4).

[ptboyer]

@mmazzarolo I figured out a workaround!

This problem only exists when the mode is set to "time".
If you use "datetime" the minuteInterval prop is respected as expected.
However, I only want time!

Instead of controlling the visibility of the DateTimePicker through passing the prop isVisible from a value such as that stored in the state, instead I set the picker component to being always isVisible = true, and then controlling visibility through conditionally rendering the component as such:

{!!pickerVisible && (
  <DateTimePicker
    isVisible
    mode="time"
    date={pickerDate}
    minuteInterval={10}
    onConfirm={pickerOnConfirm}
    onCancel={pickerOnCancel}
  />
)}

Seems to do the job for me!

[mmazzarolo]

@ptboyer doing so will disable the enter/exit animation of the picker though :/

[ptboyer]

@mmazzarolo Ah, well, I would consider then wrapping the component in some kind of state managed component that takes the prop change and then handles the visibility with a timer or similar to accomodate the animation before destroying the picker through the conditional render.

So instead pickerVisibile (from my last solution) is a state variable that responds to a prop for visibility, so we can handle destroying the picker after the animation has played.

But at the moment, I'm concerned with functionality, and not aesthetics. I need the intervals.

[mmazzarolo]

Ah, well, I would consider then wrapping the component in some kind of state managed component that takes the prop change and then handles the visibility with a timer or similar to accomodate the animation before destroying the picker through the conditional render.

That's exactly what the modal used internally bu the component does 👍
I think this is an issue that should be solved internally though: by following your approach for example we might want to hide the modal content after the animation ends... or maybe just use hideModalContentWhileAnimating={true} on the modal 🤔

[ptboyer]

Well I hope that hideModalContentWhileAnimating actually destroys the Picker, because we're trying circumvent what's wrong with the picker itself, which seems to be its ability to obey the minuteInterval prop when other things change, rather than just when it first initialises.

[mmazzarolo]

@ptboyer yeah I know, that prop name doesn't seem related but that's what it does under the hood.

[jordan-thenumber]

@mmazzarolo any progress on this?

[mmazzarolo]

@jordan-thenumber have you tried the workarounds above?

[jordan-thenumber]

@mmazzarolo i tried showing/hiding using js expression but it's not working in react 57. a fix has been pushed to master so you can cherry pick and apply it.

https://github.com/facebook/react-native/pull/23923

[mmazzarolo]

Thanks @jordan-thenumber .
I'm closing the issue since it's a DatePicker IOS native problem on which we don't have control on :/
It should be fixed by this RN PR soon though!