Showing alert then dismissing modal will also dismiss the alert on iOS

[Calum Gathergood]

Environment

Platforms

iOS only

Versions

• Android:
• iOS:
• react-native-modal-datetime-picker: ^9.1.0
• react-native-community/datetimepicker: 3.0.4
• react-native: ~0.63.3
• react: 16.13.1

Description

I want to show an alert to the user after they have selected a date.

const handleConfirm = (date) => { alert("A Date has been Picked!"); hideDatePicker(); };

The problem on iOS is that hideDatePicker() will also dismiss the new alert, therefore it'll flash briefly on the screen

Here's a video

Screen.Recording.2020-12-29.at.9.11.14.am.mov

Reproducible Demo

Here is a snack demonstrating the issue - please run on iOS

And if that doesn't work here's the code

import { Button, View, Alert } from "react-native";
import DateTimePickerModal from "react-native-modal-datetime-picker";

const DatePickerModalExample = () => {
  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);

  const showDatePicker = () => {
    setDatePickerVisibility(true);
  };

  const hideDatePicker = () => {
    setDatePickerVisibility(false);
  };

  const handleConfirm = (date) => {
    alert("A Date has been Picked!");
    hideDatePicker();
  };

  return (
    <View>
      <Button title="Show Date Picker" onPress={showDatePicker} />
      <DateTimePickerModal
        isVisible={isDatePickerVisible}
        mode="date"
        onConfirm={handleConfirm}
        onCancel={hideDatePicker}
      />
    </View>
  );
}

export default DatePickerModalExample;



Thanks!

[Matteo Mazzarolo]

Thanks @cgathergood :) Gonna check it tomorrow hopefully.
Wondering if this is happening because the callback is being invoked before setting the state...

[Calum Gathergood]

Awesome thank you so much @mmazzarolo.
I've tried calling the alert after the state change but the outcome is the same. I can actually get it to work if I put in a timeout and play with the number of ms but that feels pretty dirty and I know device render speeds vary greatly.

Let me know if I can provide anything else :)

[Matteo Mazzarolo]

@cgathergood I did some tests and unfortunately I'm not able to solve the issue without the timeout, even in the onHide callback. The issue seems to actually be related only to the Alert API. In fact, if you try to re-show the modal in the onHide callback, the new modal shows up correctly (while the Alert doesn't).
I'd like to try the onDismiss callback but unfortunately it's not working in the latests versions of RN (it's still happening for me, even if the issue is closed...).
I think your best bet for now is using something like this:

const handleHide = () => {
  setTimeout(() => Alert.alert("Hello"), 0);
};

as your onHide callback.

I know, it sucks :/ and I'm open to suggestions on how to fix this directly on the component side.

[Matteo Mazzarolo]

https://github.com/mmazzarolo/react-native-modal-datetime-picker/blob/master/README.md#i-cant-show-up-an-alert-after-the-picker-has-been-hidden-on-ios

[Calum Gathergood]

@mmazzarolo thanks for your time on this, much appreciated! Yeah I think timeout is the way forward for now. Happy new year!