How to create a simple Alert dialog in React Native? Code Example

An alert dialog can be created using <Alert> component in React Native. It can show a title, message and buttons. Title is required and everything else is optional.

The format of alert looks like this –

import {Alert} from 'react-native'

Alert.alert(title, message, buttons, options)

/**
* Example Usage -
Alert.alert(
      "Alert Title",
      "My Alert Msg",
      [
        {
          text: "Cancel",
          onPress: () => console.log("Cancel Pressed"),
          style: "cancel"
        },
        { text: "OK", onPress: () => console.log("OK Pressed") }
      ],
      {
        cancelable: true,
        onDismiss: () => console.log("Cancelled from outside")
      }
    );
*/

It works in both Android and iOS but there are few distinctions among the Alert dialogs of Android and iOS –

1. On Android we can have at most 3 buttons in Alert dialog but there is no limit on iOS.
2. We can dismiss the dialog by clicking outside it in Android, but not in iOS.
3. iOS provides functionality to show input fields in Alert dialog to capture data from user. No such feature is provided in Android.

Code Example

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

const App = () => {
  const createBasicAlert = () => 
    Alert.alert(
      "Alert Title",
    );

  const createOneButtonAlert = () => 
    Alert.alert(
      "Alert Title",
      "This alert has 1 button",
      [
        { text: "OK", onPress: () => console.log("OK Pressed") }
      ]
    );

  const createTwoButtonAlert = () =>
    Alert.alert(
      "Alert Title",
      "This alert has 2 buttons",
      [
        {
          text: "Cancel",
          onPress: () => console.log("Cancel Pressed"),
          style: "cancel"
        },
        { text: "OK", onPress: () => console.log("OK Pressed") }
      ]
    );

  const createThreeButtonAlert = () =>
    Alert.alert(
      "Alert Title",
      "This alert has 3 buttons",
      [
        {
          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") }
      ]
    );

  return (
    <View style={styles.container}>
      <Button title={"Only Title Alert"} onPress={createBasicAlert} />
      <Button title={"1-Button Alert"} onPress={createOneButtonAlert} />
      <Button title={"2-Button Alert"} onPress={createTwoButtonAlert} />
      <Button title={"3-Button Alert"} onPress={createThreeButtonAlert} />
    </View>
  );
}

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

export default App;

Output –

This above image shows the Alert dialogs in iOS phones. We have 4 phones and each one is showing a different Alert style –

• 1st phone is showing an Alert dialog with title only. The OK button is also there but that is added by system itself.
• 2nd phone is showing an alert with title, message and single button.
• 3rd phone is showing an alert with 2 buttons.
• 4th phone is showing an alert with 3 buttons.

This is the image of Alert dialogs on Android phones. Similar to iOS image, we have 4 different Android phones here and each one is showing alerts differently.

In the code, we have created 4 functions to call alert dialog. Since alert is a static function of Alert class, so we can call it separately from other JSX.

Live Demo

Conclusion

Alert dialogs are the critical components of an application. They are not specific to mobile apps, else they are being used from the very beginning of web development. In React Native, we can call it using Alert.alert() function. It accepts title, message, buttons and some optional options.