[Android] Datepicker closes only the second time

react-native-date-picker version is 4.1.1.

Describe the bug After selecting a date and clicking on “Confirm” the modal window closes and opens again. You must click “Confirm” again to close it permanently.

In this video I open datepicker and then click “Confirm”:

To Reproduce

export const App = () => {
  const [showDatePicker, setShowDatePicker] = useState(false);
  const [birthdate, setBirthdate] = useState(new Date());

  return (
    <>
      <Button title="Open" onPress={() => setShowDatePicker(true)} />

      <DatePicker
        modal
        open={showDatePicker}
        date={birthdate}
        mode="date"
        onConfirm={(date) => {
          setBirthdate(date);
          setShowDatePicker(false);
        }}
        onCancel={() => {
          setShowDatePicker(false);
        }}
      />
    </>
  );
};

I thinks this is happening because two setState are called in one time inside onConfirm handler. This bug is solved with wrapping setState calls in unstable_batchedUpdates:

import { unstable_batchedUpdates } from 'react-native';

onConfirm={(date) => {
  unstable_batchedUpdates(() => {
    setBirthdate(date);
    setShowDatePicker(false);
  });
}}

Smartphone (please complete the following information):

• OS: Android
• react-native info:

  System:
    OS: macOS 12.0.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 36.68 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.13 - /usr/local/bin/npm
    Watchman: 2021.09.13.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.11.2 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.0.1, iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0
    Android SDK: Not Found
  IDEs:
    Android Studio: 2020.3 AI-203.7717.56.2031.7678000
    Xcode: 13.1/13A1030d - /usr/bin/xcodebuild
  Languages:
    Java: javac 17 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2 
    react-native: 0.66.0 => 0.66.0 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

[henninghall]

I definitely agree! Also, the order shouldn’t really matter so I’ll keep this issue open until it’s fixed.

[henninghall]

Hi, thanks for reporting this. I am aware of this issue that happens when the set function is called before the show(false) function. Try change the order of the two and let me know if it solved it for you!