iOS DateTimePicker in `countdown` mode fails to call `onChange` on first update

Bug

In countdown mode, the first time the value in the picker gets updated, the onChange event isn’t triggered. Every subsequent time, it is. The date, time, and datetime modes work fine.

I found the following Stack Overflow thread which describes exactly the same problem, except just in Swift, no React Native. This leads me to think there’s a problem with the underlying Swift API.

For anyone else who runs into this problem, I was able to get around it by updating the value prop at least once upon initialization, before the user has time to interact with it. Even changing the value date by a single second seems to do the trick; I recommend that to avoid playing an animation on the update.

Workaround:

  value={this.state.initialized ? new Date(0, 0, 0, hours, minutes, seconds) : new Date(0, 0, 0, hours, minutes, seconds+1)}

Environment info

System:
    OS: macOS 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz
    Memory: 680.85 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.15.3 - /usr/local/opt/nvm/versions/node/v10.15.3/bin/node
    Yarn: 1.12.3 - /usr/local/bin/yarn
    npm: 6.9.2 - /usr/local/opt/nvm/versions/node/v10.15.3/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.0, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
  IDEs:
    Xcode: 11.0/11A420a - /usr/bin/xcodebuild
  npmPackages:
    react: 16.8.6 => 16.8.6 
    react-native: 0.60.3 => 0.60.3 
  npmGlobalPackages:
    react-native-cli: 2.0.1

Library version: 2.1.0

Steps To Reproduce

1. Add a DateTimePicker to your app
2. Set mode prop to countdown
3. Set onChange prop to something that should produce visible output
4. Load up the component in your App. Slide the picker to a new value (First change). The onChange handler will not trigger.
5. Slide the picker to another new value (Second change). The onChange handler will trigger. …

Describe what you expected to happen:

1. The onChange handler should update both times.

Reproducible sample code

<DateTimePicker
    mode={'countdown' as any}
    onChange={(event, date) => console.log('Updated!')}
    value={new Date(0, 0, 0, hours, minutes, seconds)}
/>

[connorlindsey]

A bit frustrating, but I have the workaround working for me. I’m using hooks and this is how I’ve set it up.

Not amazing, but it’s working well enough.

  // Variable to hold the time, set it to 1 minute
  const [duration, setDuration] = useState(new Date(0, 0, 0, 0, 1, 0, 0))
  const [hasLoaded, setHasLoaded] = useState(false)
  useEffect(() => {
    setTimeout(() => {
      setHasLoaded(true)
    }, 50) // I needed to include the timeout for this to work
  }, [])
  //...

  <DateTimePicker
  ...
  value={hasLoaded ? duration : new Date(0, 0, 0, 0, 1, 5)}
  /> 
  // Other time probably doesn't have to be 5 seconds, but that's what I did

[ingerable]

A bit frustrating, but I have the workaround working for me. I’m using hooks and this is how I’ve set it up.

Not amazing, but it’s working well enough.

  // Variable to hold the time, set it to 1 minute
  const [duration, setDuration] = useState(new Date(0, 0, 0, 0, 1, 0, 0))
  const [hasLoaded, setHasLoaded] = useState(false)
  useEffect(() => {
    setTimeout(() => {
      setHasLoaded(true)
    }, 50) // I needed to include the timeout for this to work
  }, [])
  //...

  <DateTimePicker
  ...
  value={hasLoaded ? duration : new Date(0, 0, 0, 0, 1, 5)}
  /> 
  // Other time probably doesn't have to be 5 seconds, but that's what I did

worked for me but not very convenient as said above