How to cancel Alert dialog on clicking outside in Android React Native?

Alert dialog in android supports extra options object in 4th parameter. To enable cancelling of dialog on clicking outside in React Native Android apps, we need to set cancelable: true.

We will also be notified about cancellation of dialog using onDismiss function.

Natively, this feature is only available in Android and hence is not supported by iOS.

We can use it like this –

Alert.alert(
    "Alert Title",
    "My Alert Msg",
    [
      {
        text: "Cancel",
        onPress: () => console.log("Cancel Pressed"),
        style: "cancel",
      },
    ],
    {
      cancelable: true,
      onDismiss: () => console.log("Clicked Outside")
    }
  );

Code Example

import React, { useState } from "react";
import { View, StyleSheet, Button, Alert, Text } from "react-native";

const App = () => {
  const [message, setMessage] = useState("")
  
  const dismissableAlert = () =>
    Alert.alert(
      "Alert Title",
      "This alert will dismiss on clicking outside",
      [
        {
          text: "Cancel",
          onPress: () => setMessage("Cancel Pressed"),
          style: "cancel"
        },
      ],
      {
        cancelable: true,
        onDismiss: () => setMessage("Clicked Outside")
      }
    );

  return (
    <View style={styles.container}>
      <Text>Message: {message}</Text>
      <Button title={"Show Alert"} onPress={dismissableAlert} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "space-around",
    alignItems: "center"
  }
});

export default App;

Output –

In the above image we can see that the alert dialog dismissed after clicking outside (2nd phone) and by pressing cancel button (3rd phone). The message related to dismissal is displayed.

In the code the state variable is set which holds the message for events when cancel button is pressed and clicked outside the dialog.

Live Demo

Conclusion

In conclusion, the react native Alert dialog provides cancelable:true object property which is used to enable cancelling of dialog by clicking outside. We can also get the notification of cancelation. This feature works in Android phones only.