React-native-modal-datetime-picker: Picker shows up twice on Android

[ponleukea]

Environment

System:
OS: macOS 10.15.3
CPU: (4) x64 Intel(R) Core(TM) i5-6360U CPU @ 2.00GHz
Memory: 53.82 MB / 8.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 10.16.3 - /usr/local/bin/node
Yarn: 1.19.0 - /usr/local/bin/yarn
npm: 6.12.0 - /usr/local/bin/npm
SDKs:
iOS SDK:
Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
Android SDK:
API Levels: 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29
Build Tools: 23.0.1, 25.0.0, 25.0.2, 25.0.3, 26.0.2, 26.0.3, 27.0.3, 28.0.2, 28.0.3, 29.0.2
System Images: android-24 | Google Play Intel x86 Atom, android-27 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom, android-Q | Google Play Intel x86 Atom
IDEs:
Android Studio: 3.5 AI-191.8026.42.35.6010548
Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
npmPackages:
react: 16.9.0 => 16.9.0
react-native: 0.61.5 => 0.61.5
npmGlobalPackages:
react-native-cli: 2.0.1

Platforms

• Android OS

Versions

• Android OS version (9.0)
• react-native-modal-datetime-picker: 8.5.1
• react-native: 0.61.5
• react:16.9.0

Description

• Show date picker once after select date than click button OK date picker close and moment date picker show again else set visible to false since click button OK in android OS.

Reproducible Demo

[jordangrant]

I think i had this issue. I had to set the state variable (the controlled prop) and the visibility at the same time eg
this.setState({ event: { ...this.state.event, date: date }, showPicker: false });

[mmazzarolo]

Related: https://github.com/react-native-community/datetimepicker/issues/54

[ponleukea]

Thank you @mmazzarolo.

[wmthor]

From the linked issue, the workaround I've found is to set the date state variable only after hiding the picker.

const handleConfirm = (date) => {
    hideDatePicker(); // This first
    this.setState({selectedDate: date}); // Before this
};

[Luckygirlllll]

@wmthor hm, it doesn't work for me, I'm still getting two time pickers on Android.

[Luckygirlllll]

Another part of the problem was debugger, when degubber is enabled it shows picker twice. Solution: switch off the debugger.

[Sargnec]

"react-native-modal-datetime-picker": "^9.2.0",

This is still happening.
thanks @wmthor