React native alert dialog example; This quick tutorial will teach you how to add alert dialog in react native application using the react-native packages such as alert, view, button, and stylesheet components.

Before we create an alert box in react native app, we would like to tell you that the iOS alert dialog can have one or more than one button, whereas, in android, you can add only three buttons.

This react native alert dialog tutorial will show you how to implement an alert box with three buttons.

React Native Alert Dialog Example

• Step 1: Set Up React Native CLI
• Step 2: Create React Native Project
• Step 3: Create Alert Component
• Step 4: Register Alert Component in App Js
• Step 5: Start Application

Set Up React Native CLI

We believe you have Node 12 LTS or greater installed on your system; you can use either npm or yarn to install the Expo CLI command-line tool:

# npm
npm install -g expo-cli

# yarn
yarn global add expo-cli

Create React Native Project

Now, in this step, you need to create the react native application, make sure to run the suggested expo init command followed by your project name.

expo init RnBlogProject

Also, don’t forget to get inside the app folder.

cd RnBlogProject

Create Alert Component

Further, you have to create a alert_component.js file; in this file, we will add the alert dialog box with close and ok button.

Create AlertComponent class and export it; in the component, you have to import the Alert, Button, View, StyleSheet sub packages from the main ‘react-native’.

Update code in alert_component.js file.

import React, { Component } from 'react';

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


export default class AlertComponenet extends Component {

  showAlert=()=>{
    alert('One button alert dialog');
  }
  
  alertDialogTwoButtons=()=>{
    Alert.alert(
      'Hello, User',
      'Alert with two buttons',
      [
        {text: 'Yes', onPress: () => console.log('Yes clicked')},
        {text: 'No', onPress: () => console.log('No clicked'), style: 'cancel'},
      ],
      { 
        cancelable: true 
      }
    );
  }
  
  alertDialogThreeButtons=()=>{
    Alert.alert(
      'Hello, User', 'Alert dialog in react native example',
      [
        {text: 'Ask me later', onPress: () => console.log('Ask me later clicked')},
        {text: 'Yes', onPress: () => console.log('Yes clicked')},
        {text: 'OK', onPress: () => console.log('OK clicked')},
      ],
      { 
        cancelable: false 
      }
    );
  }

  render() {
    return (
      <View style={styles.container}>
        <Button title='Demo 1' onPress={this.showAlert}/>

        <Button title='Demo 2' onPress={this.alertDialogTwoButtons}/>

        <Button title='Demo 3' onPress={this.alertDialogThreeButtons}/>
      </View>
    );
  }
  
}

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

Register Alert Component in App Js

Now, alert dialog has been created, now you must register the alert component.

Head over to the App.js; and import and define the alert component as given below.

import React from 'react';
import AlertComponent from './alert_component.js'

export default function App() {
  return (
    <AlertComponent/>
  );
}

Start Application

In the last section, you will use the following command to run the development server; just hit the provided command based on your package manager.

# npm
npm start


# yarn
yarn start

After running the development server, you have to scan the QR code with the help of the Expo app.

Subsequently, you have to visit app marketplace on your device and search for Expo app; you should install the Expo app and start the app on your mobile device.

Summary

Throughout this tutorial, you have learned how to show an alert dialog in react native app using the built-in modules of react native app. You can take reference to this tutorial and integrate the alert box in your next react native mobile application.