How to Show Alert in React Native

Creating an alert in React Native is a straightforward task that involves the use of the built-in Alert API. This API is designed to display native alert dialogs on both Android and iOS platforms. Here’s a comprehensive guide on how to implement and use alerts in your React Native applications.

Basic Alert Implementation

To use the Alert API, you need to import it from React Native:

import { Alert } from 'react-native';

Simple Alert

A basic alert can be created with a title and message. This is the simplest form of an alert and can be implemented as follows:

Alert.alert("Alert Title", "My Alert Msg");

This will display an alert with the provided title and message.

Alert with Buttons

React Native allows you to add buttons to your alerts, each with its own handler. The syntax for an alert with buttons is:

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") }
  ],
  { cancelable: false }
);

In this example, three buttons are defined: “Ask me later”, “Cancel”, and “OK”, each with its own onPress handler.

Platform Specifics

Android: You can define up to three buttons. If you specify one button, it will be the ‘positive’ one. Two buttons map to ‘negative’ and ‘positive’, while three buttons map to ‘neutral’, ‘negative’, and ‘positive’.
iOS: You can specify any number of buttons. Each button can optionally specify a style or be emphasized.

Customizing Alerts

Cancelable Alerts: On Android, alerts can be dismissed by tapping outside of the alert box. This is disabled by default and can be enabled in the options parameter of the Alert.alert method.

Styling: On iOS, you can style the buttons using the AlertButtonStyle enum.

Example Code

Here’s a simple example of how to create an alert with multiple options:

const showAlert = () => {
  Alert.alert(
    "Alert Title",
    "Alert message here",
    [
      {
        text: "Cancel",
        onPress: () => console.log("Cancel Pressed"),
        style: "cancel"
      },
      { text: "OK", onPress: () => console.log("OK Pressed") }
    ],
    { cancelable: false }
  );
};

In this code snippet, we define an showAlert function that triggers an alert with a title, message, and two buttons: “Cancel” and “OK”.

Conclusion

Using the Alert API in React Native is an efficient way to communicate with users by displaying simple dialog boxes. With its cross-platform functionality, you can ensure a consistent user experience on both Android and iOS devices. Experiment with different configurations of the Alert API to best suit the needs of your application.