React-native: Add a dismiss event for Alert dialog

[satya164]

Currently the Alert dialog on Android can be dismissed by tapping outside or pressing back button as well as pressing on any of the action buttons. The problem with this is that you've no way of knowing that the dialog was cancelled if the user cancels it by tapping outside.

For example, consider a location based app (my use case),

• Check if GPS is enabled, if not, prompt the user to enable it
• If the user chooses to enable GPS, wait for the location data
• If the user cancels the dialog, fallback to something else

I'm not sure what'll be the correct way to handle this. Few things come to my mid,

• Disable dismiss on back button and touch outside

dialog.setCancelable(false);
dialog.setCanceledOnTouchOutside(false);

• Dispatch a global event when a dialog is dismissed

Alert.addListener('dismiss', () => { /* do the thing */ });

• Add a callback to the dialog, which gets called when it is dismissed

Alert.alert('Title', 'Message',  [ { text: 'Okay' } ], () => { /* do the thing */ });

Please give your inputs on what do you think the best way is. For me personally, I prefer the last one.

[mkonicek]

The native module does say whether the dialog was dismissed:
https://github.com/facebook/react-native/blob/master/Libraries/Utilities/Alert.js#L115

But it might be the same constant for the Cancel button and tapping outside the dialog. Shouldn't that always do exactly the same thing? If there should be a button that does something else than _dismiss the dialog_ (this is what tapping outside does), maybe it should be a different, third button?

I didn't see API for that on iOS so wanted to keep the API consistent.

[mkonicek]

Some users might not know that tapping outside the dialog dismisses it. Having the 'Cancel' button, Back button and tapping outside do exactly the same thing (usually, do nothing) sounds consistent from the UX perspective. What do you think?

[satya164]

@mkonicek Totally agree. The ideal behaviour would be to trigger same handler as cancel button.

We allow having a dialog without cancel button though. But I guess it's okay, because if the dev wanted to handle cancel event, he would have added a cancel button. I can send a PR to do this, if it's what we settle on.

I don't know what's the behaviour on iOS. Curious to know. cc @ide

[ide]

On iOS you can't dismiss alerts by tapping outside of them (at least on an alert that I just tested). Would it be possible to design a clean API that acts almost the same whether the user tapped Cancel or tapped outside of the dialog, but also passes in a bit of extra information specifying how the dialog was canceled?

[satya164]

@ide May be pass an event object or something like that?

function onPress(e) {
    // e.cancelledOnTouchOutside
    // e.cancelledByBackButton
};

[mkonicek]

Hi there! This issue is being closed because it has been inactive for a while.

But don't worry, it will live on with ProductPains! Check out its new home: https://productpains.com/post/react-native/add-a-dismiss-event-for-alert-dialog

ProductPains helps the community prioritize the most important issues thanks to its voting feature.
It is easy to use - just login with GitHub.

Also, if this issue is a bug, please consider sending a PR with a fix.
We're a small team and rely on the community for bug fixes of issues that don't affect fb apps.

[antonzy]

Any progress on this one?
Really annoying on Android....

[satya164]

@antonzy #8652 might help

[myJarvis]

how to dismiss an alert programmatically, any suggestions?

[sandropoluan]

Any update?

[eassymo]

any update? x2

[dann1609]

any update? x3

[kunalqss]

If you could give us a way to dismiss a dialog programmatically, that'd be great, thanks. :grin:

[bintoll]

I also think that it would be really great

[rumbogs]

+1

[myJarvis]

This issue is from 4-5 months open only.

Bottomline is - Framework is just a Framework , Not a replacement for any
Core Language.

On Sun, Jun 10, 2018 at 1:24 PM, Bogdan [e-mail] wrote:

+1

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/4928#issuecomment-396028896,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AN3adRxpNxfv110_DxLcEFcLXRxhGkCNks5t7NDMgaJpZM4G57tH
.

[mmazzarolo]

Framework is just a Framework , Not a replacement for any
Core Language

🤔

[huunovahub]

any update x4?