React Native Alert API

In this article, We are going to see how to create an alert in react-native. For this, we are going to use React Native Alert API. It’s basically a small window that pops up to get the user’s choice.

It is an API that uses the alert method to show up the alert dialog box. This dialog box can have three buttons which are positive, negative, and neutral for performing different actions.

Syntax : 

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

The React Native alert API accepts two methods as mentioned and described below.

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

Parameters for alert method: 

• Title: It is a required parameter that display’s as a title of the dialog box.
• Message: It is an optional parameter that display’s a message of 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 only available in android.

Parameters for prompt method: 

• Title: It is a required parameter that display’s as a title of the dialog box.
• Message: It is an optional parameter that display’s a message of 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 1: Open your terminal and install expo-cli by the following command.

  npm install -g expo-cli

• Step 2: Now create a project by the following command.

  expo init myapp

• Step 3: Now go into your project folder i.e. myapp

  cd myapp

Project Structure:

Example: Now lets implement the alert functionality. Here we created a button and when someone clicks on that button an alert will pop up.

App.js

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

export default function App() {

  // Alert function
  const alert = ()=>{
    Alert.alert(
      "GeeksforGeeks",
      "How are you!",
      [
        {
          text: "Cancel",
        },
        {
          text: "OK",
        }
      ]
    );
  }

  return (
    <View style={styles.container}>
      <Button title={"Click me"} onPress={alert}/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Start the server by using the following command.

npm run android

Output: If your emulator did not open automatically then you need to do it manually. First, go to your android studio and run the emulator. Now start the server again.

Reference: https://reactnative.dev/docs/alert