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.