Permalink
Browse files

Optional Alert onDismiss callback to support Android default behavior

Summary:
On Android it's generally expected that alerts are dismissible by tapping outside the alert box. This is the default behavior for React Native, but until now there has been no means to listen for the dismiss event.

`Alert.alert` already takes an `options` object, so this pull request simply adds an additional option `onDismiss`, a callback function that will be called when an Alert is dismissed (rather than being closed as a result of a button press).

**Test plan**

Simply pass an `options` object to `Alert.alert` with the `onDismiss` property set to a function.

e.g. Run the following on Android, dismiss the alert by tapping outside the alert view, and monitor console output.

```
Alert.alert(
  'Alert Title',
  'My Alert Msg',
  [
    {text: 'Ask me later', onPress: () => console.log('Ask me later pressed')},
    {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
    {text: 'OK', onPress: () => console.log('OK Pressed')},
  ],
  { onDismiss: () => console.
Closes #12594

Differential Revision: D4619862

Pulled By: ericvicenti

fbshipit-source-id: fdd351a7b8e673dab331f0e22dc5ea2e84f24375
  • Loading branch information...
Benjamin-Dobell authored and facebook-github-bot committed Feb 27, 2017
1 parent 64c8f22 commit 27928f3993791e467f4736c91dab69905d30a7a1
Showing with 18 additions and 12 deletions.
  1. +18 −12 Libraries/Alert/Alert.js
View
@@ -25,6 +25,7 @@ type Buttons = Array<{
type Options = {
cancelable?: ?boolean,
onDismiss?: ?Function,
};
/**
@@ -52,9 +53,13 @@ type Options = {
* - Two buttons mean 'negative', 'positive' (such as 'Cancel', 'OK')
* - Three buttons mean 'neutral', 'negative', 'positive' (such as 'Later', 'Cancel', 'OK')
*
* Note that by default alerts on Android can be dismissed by clicking outside of their alert box.
* To prevent this behavior, you can provide
* an optional `options` parameter `{ cancelable: false }` to the Alert method.
* By default alerts on Android can be dismissed by tapping outside of the alert
* box. This event can be handled by providing an optional `options` parameter,
* with an `onDismiss` callback property `{ onDismiss: () => {} }`.
*
* Alternatively, the dismissing behavior can be disabled altogether by providing
* an optional `options` parameter with the `cancelable` property set to `false`
* i.e. `{ cancelable: false }`
*
* Example usage:
* ```
@@ -131,15 +136,16 @@ class AlertAndroid {
config,
(errorMessage) => console.warn(errorMessage),
(action, buttonKey) => {
if (action !== NativeModules.DialogManagerAndroid.buttonClicked) {
return;
}
if (buttonKey === NativeModules.DialogManagerAndroid.buttonNeutral) {
buttonNeutral.onPress && buttonNeutral.onPress();
} else if (buttonKey === NativeModules.DialogManagerAndroid.buttonNegative) {
buttonNegative.onPress && buttonNegative.onPress();
} else if (buttonKey === NativeModules.DialogManagerAndroid.buttonPositive) {
buttonPositive.onPress && buttonPositive.onPress();
if (action === NativeModules.DialogManagerAndroid.buttonClicked) {
if (buttonKey === NativeModules.DialogManagerAndroid.buttonNeutral) {
buttonNeutral.onPress && buttonNeutral.onPress();
} else if (buttonKey === NativeModules.DialogManagerAndroid.buttonNegative) {
buttonNegative.onPress && buttonNegative.onPress();
} else if (buttonKey === NativeModules.DialogManagerAndroid.buttonPositive) {
buttonPositive.onPress && buttonPositive.onPress();
}
} else if (action === NativeModules.DialogManagerAndroid.dismissed) {
options && options.onDismiss && options.onDismiss();
}
}
);

0 comments on commit 27928f3

Please sign in to comment.