Find what caused Possible unhandled promise rejection in React Native ?

React Native Alert API

Last Updated : 10 May, 2025

In this article, we will explore how to create an alert in React Native using the React Native Alert API. This API enables the display of a small pop-up window that prompts the user for a choice.

The Alert API utilizes the alert method to present the alert dialog box. This dialog box can include three types of buttons: positive, negative, and neutral, each designed for performing different actions. Let's watch a demo video of what we are going to develop.

Demo Video

Syntax

Alert.alert(
      "Alert Title",
      "Alert Msg",
      [
        {
          text: "Cancel"
        },
        { 
          text: "OK"
        }
      ]
);

Methods

Method	Description
alert()	This method is used to create and display a message in a pop-up.
prompt()	This method is used to create and display a prompt to enter some text in the form of an alert.

Parameters for the alert method

Parameter	Description
Title	It is a required parameter that displays as the title of the dialog box.
Message	It is an optional parameter that displays a message in the dialog box.
Buttons	It is also an optional parameter that shows buttons on the dialog box.
Options	It is also an optional parameter and is only available in Android.

Parameters for the prompt method

Parameter	Description
Title	It is a required parameter that displays as the title of the dialog box.
Message	It is an optional parameter that displays a message in the dialog box.
callbackOrButtons	This parameter can be passed as a function or as a button if passed as a function it will be called with the prompt's value when the user agrees with the condition. And if it passed as a button then it will be configured based on the array content.
type	This parameter configures the text input.
defaultValue	This parameter is a string that defines the default text in text input.
keyboardType	This parameter is a string that defines the keyboard type of the first text field if it exists.

Now let's start with the implementation.

Step-by-Step Implementation

Step 1: Create a React Native Project

Now, create a project with the following command.

npx create-expo-app app-name --template

Note: Replace the app-name with your app name for example : react-native-demo-app

Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app, as clean as an empty canvas in JavaScript.

It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.

Now go into your project folder, i.e., react-native-demo

cd app-name

Project Structure:

Step 2: Run Application

Start the server by using the following command.

npx expo start

Then, the application will display a QR code.

For the Android users,
- For the Android Emulator, press "a" as mentioned in the image below.
- For Physical Device, Download the "Expo Go" app from the Play Store. Open the app, and you will see a button labeled "Scan QR Code." Click that button and scan the QR code; it will automatically build the Android app on your device.
For iOS users, simply scan the QR code using the Camera app.
If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.

Step 3: Start Coding

Now let's implement the alert functionality. Here we created a button, and when someone clicks on that button, an alert will pop up.

- Import libraries: Import required libraries at the top of the file.

JavaScript

import React from 'react'; // Import React library to use React components and hooks
import {
  StyleSheet, // Import StyleSheet for styling the components
  View, // Import View component to create a container
  Button, // Import Button component to create a clickable button
  Alert // Import Alert to display alert dialogs
} from 'react-native'; // Import components from react-native library

- StyleSheet: Create a StyleSheet to style components like a container.

JavaScript

// Define styles for the components
const styles = StyleSheet.create({
  container: { // Style for the container view
    flex: 1, // Take up the full height of the screen
    backgroundColor: '#fff', // Set background color to white
    alignItems: 'center', // Align items horizontally to the center
    justifyContent: 'center', // Align items vertically to the center
  },
});

- Button: This Button component is used to call an alert function when the user taps on it.

JavaScript

<Button title={"Click me"} onPress={alert} />

- alert function: This function is used to display an alert dialog box which contains a Title and message with two buttons.

JavaScript

// Function to display an alert dialog
const alert = () => {
    Alert.alert( // Display an alert dialog
        "GeeksforGeeks", // Title of the alert
        "How are you!", // Message of the alert
        [
            {
                text: "Cancel", // Button with "Cancel" text
            },
            {
                text: "OK", // Button with "OK" text
            }
        ]
    );
}

- App Component: Wrap the Button with a View and return that inside the App function to render and place the alert functioninside the App function, also make sure to export the App.

JavaScript

// Define the main App component as the default export
export default function App() {

  // Function to display an alert dialog
  const alert = () => {
    Alert.alert( // Display an alert dialog
      "GeeksforGeeks", // Title of the alert
      "How are you!", // Message of the alert
      [
        {
          text: "Cancel", // Button with "Cancel" text
        },
        {
          text: "OK", // Button with "OK" text
        }
      ]
    );
  }

  // Return the UI of the App component
  return (
    <View style={styles.container}> {/* Container view with styles applied */}
      {/* Button with title "Click me" that triggers the alert function on press */}
      <Button title={"Click me"} onPress={alert} />
    </View>
  );
}

Complete Source Code

App.js:

App.js

import React from 'react'; // Import React library to use React components and hooks
import {
  StyleSheet, // Import StyleSheet for styling the components
  View, // Import View component to create a container
  Button, // Import Button component to create a clickable button
  Alert // Import Alert to display alert dialogs
} from 'react-native'; // Import components from react-native library

// Define the main App component as the default export
export default function App() {

  // Function to display an alert dialog
  const alert = () => {
    Alert.alert( // Display an alert dialog
      "GeeksforGeeks", // Title of the alert
      "How are you!", // Message of the alert
      [
        {
          text: "Cancel", // Button with "Cancel" text
        },
        {
          text: "OK", // Button with "OK" text
        }
      ]
    );
  }

  // Return the UI of the App component
  return (
    <View style={styles.container}> {/* Container view with styles applied */}
      <Button title={"Click me"} onPress={alert} /> {/* Button with title "Click me" that triggers the alert function on press */}
    </View>
  );
}

// Define styles for the components
const styles = StyleSheet.create({
  container: { // Style for the container view
    flex: 1, // Take up the full height of the screen
    backgroundColor: '#fff', // Set background color to white
    alignItems: 'center', // Align items horizontally to the center
    justifyContent: 'center', // Align items vertically to the center
  },
});

Output:

Find what caused Possible unhandled promise rejection in React Native ?

iamabhishekkalra

Improve

Article Tags :

React Native Alert API

Demo Video

Syntax

Methods

Parameters for the alert method

Parameters for the prompt method

Step-by-Step Implementation

Step 1: Create a React Native Project

Project Structure:

Step 2: Run Application

Step 3: Start Coding

Complete Source Code

Output:

Similar Reads

React Native Basics

React Native Components

React Native UI Elements

React Native API

React Native Questions

React Native Projects

Thank You!

What kind of Experience do you want to share?