How to work with Alerts Dialog box in ReactNative?

The Alert component in React Native displays dialog boxes to users with a title, message, and buttons for user interaction. It's essential for getting user confirmation or displaying important information.

Syntax

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

Parameters

To work with Alert component you need to import it first:

import { Alert } from 'react-native';

The Alert.alert() function takes four parameters:

• title (required): The title of the alert dialog
• message (optional): The message to display
• buttons (optional): Array of button configurations
• options (optional): Additional options to control behavior

Basic Example

Alert.alert(
    "Hi",
    "Do you want to continue?",
    [
        {
            text: "Later",
            onPress: () => console.log("User pressed Later")
        },
        {
            text: "Cancel",
            onPress: () => console.log("Cancel Pressed"),
            style: "cancel"
        },
        {
            text: "OK",
            onPress: () => console.log("OK Pressed")
        }
    ],
    { cancelable: false }
);

Platform Differences

Alert behavior differs between iOS and Android:

Android button mapping:

• One button: Positive (e.g., "OK")
• Two buttons: Negative, Positive (e.g., "Cancel", "OK")
• Three buttons: Neutral, Negative, Positive (e.g., "Later", "Cancel", "OK")

Example 1: Basic Alert with Non-Cancelable Option

import React from 'react';
import { Button, View, Alert } from 'react-native';

const App = () => {
    const testAlert = () =>
        Alert.alert(
            "Hi",
            "Do you want to continue?",
            [
                {
                    text: "Later",
                    onPress: () => console.log("User pressed Later")
                },
                {
                    text: "Cancel",
                    onPress: () => console.log("Cancel Pressed"),
                    style: "cancel"
                },
                {
                    text: "OK",
                    onPress: () => console.log("OK Pressed")
                }
            ],
            { cancelable: false }
        );

    return (
        <View style={{flex: 1, justifyContent: 'center', margin: 15}}>
            <Button
                title="Click Me"
                color="#9C27B0"
                onPress={testAlert}
            />
        </View>
    );
};

export default App;

With cancelable: false, users cannot dismiss the alert by tapping outside on Android.

Example 2: Cancelable Alert

import React from 'react';
import { Button, View, Alert } from 'react-native';

const App = () => {
    const testAlert = () =>
        Alert.alert(
            "Hi",
            "Do you want to continue?",
            [
                {
                    text: "Later",
                    onPress: () => console.log("User pressed Later")
                },
                {
                    text: "Cancel",
                    onPress: () => console.log("Cancel Pressed"),
                    style: "cancel"
                },
                {
                    text: "OK",
                    onPress: () => console.log("OK Pressed")
                }
            ],
            { cancelable: true }
        );

    return (
        <View style={{flex: 1, justifyContent: 'center', margin: 15}}>
            <Button
                title="Click Me"
                color="#9C27B0"
                onPress={testAlert}
            />
        </View>
    );
};

export default App;

With cancelable: true, users can dismiss the alert by tapping outside the dialog on Android.

Button Styles

Buttons can have different styles:

• default: Standard button appearance
• cancel: Cancel-style button (usually styled differently)
• destructive: For destructive actions (iOS only)

Conclusion

React Native Alert provides a cross-platform way to display dialog boxes. Use the cancelable option to control dismiss behavior on Android, and remember platform-specific button limitations when designing your alerts.