How to add Alert pop-up feature in React Native App

Add 2-Button, 3-button Alert in React Native App

4 min readAug 9, 2021

Hello, React Native Developers..!!

Adding Alert features in your project is a good habit as it enhances the UI and creates a good impact on the User. You might have encountered several kinds of alerts while using an application. Those alerts could be 2-button alerts or 3-button alerts. At the time of deleting something, you ask the user to confirm it by the “cancel” and “delete” button alert. This is an example of a 2-button alert feature. An example of a 3-button alert is when the application you to rate them then the provide three options, “Not Now”, “Never” and “Rate Now”. Now you have a clear idea about how much this is important. So, let’s make a project where we will add 2-button and 3-button features in our mobile application using React Native Expo. Grab your seat and take a cup of coffee and let’s begin the hack.

The video tutorial of this article is here:

Attention all developers seeking to make social connections and establish themselves while earning passive income — look no further! I highly recommend ‘From Code to Connections’, a book that will guide you through the process. Don’t miss out, grab your copy now on Amazon worldwide or Amazon India! You can also go for Gumroad

Set-up and Installation

1. Make a directory and navigate to it.
2. Open this directory in terminal or command prompt window and run the command: expo init Alert
3. Choose the blank template and proceed with the downloads

You will see something like the above image after you complete all the 3 steps. We are done with the installation part of this project. Let’s switch to the code now.

Code of Alert in React Native Expo

Open this project in your favorite text editor. I prefer VS Code. Open the App.js file and let’s first see how the 2-Button alert works in React Native then we will see how the 3-Button alert functions in React Native.

2-Button Alert In React Native Expo

App.js

import React, { useState } from "react";
import { View, StyleSheet, Button, Alert } from "react-native";export default function App() {
  const createTwoButtonAlert = () =>
    Alert.alert(
      "Testing Alert",
      "You are a amazing developer",
      [
        {
          text: "Yeah",
          onPress: () => console.log("Yeah Pressed"),
          style: "cancel"
        },
        { text: "Nope", onPress: () => console.log("Nope Pressed") }
      ],
      { cancelable: false }
    );
    return (
      <View style={styles.container}>
        <Button title="2-Button Alert" onPress={createTwoButtonAlert} />
      </View>
    );
}const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "space-around",
    alignItems: "center"
  }
});

First, Import all the required packages from the given library. In this project, we are not using any kind of external library. Now we are adding a function that handles the 2-Button feature. And finally, return that. After you run this project on your IOS or Android devices, and press the 2-Button Alert button on the screen then you will see something like this.

3-Button Alert In React Native Expo

App.js

import React, { useState } from "react";
import { View, StyleSheet, Button, Alert } from "react-native";export default function App() {
  const createThreeButtonAlert = () =>
    Alert.alert(
      "Testing Alert",
      "You are a amazing developer",
      [
        {
          text: "Ask me later",
          onPress: () => console.log("Ask me later pressed")
        },
        {
          text: "Yeah",
          onPress: () => console.log("Yeah Pressed"),
          style: "cancel"
        },
        { text: "Nope", onPress: () => console.log("Nope Pressed") }
      ],
      { cancelable: false }
    );
    return (
      <View style={styles.container}>
        <Button title="3-Button Alert" onPress={createThreeButtonAlert} />
      </View>
    );
}const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "space-around",
    alignItems: "center"
  }
});

The concept is the same as for the 2-Button Alert feature. We just simply added an extra button feature. Just run this project in your terminal or command prompt window and see the desired output on the screen of your mobile device. Something like this.

And that’s it. If you face any kind of difficulty then let me know in the comment section.

Thank you.