Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

React Native Alert API

  • Last Updated : 20 Apr, 2021

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :