Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to work with Alerts Dialog box in ReactNative?
The Alert component helps to show a dialog box i.e., a pop up to the user with a title, message, buttons to know the confirmation from the user based on the message displayed.
The basic component of Alert is as follows −
Alert.alert('yourtile', 'yourmessage', [yourbuttons], ‘options’)To work with Alert component you need to import it as follows −
import { Alert } from 'react-native';To get the pop-up you just have to call the Alert.alert() function. There are four params the alert() takes and it is title, message, buttons and options. The title is mandatory param and rest are optional.
Here is a simple example on how to use Alert.alert() −
Alert.alert(
"Hi",
"Do you want to continue?",
[
{
text: "Later",
onPress: () => console.log("User pressed Later")
},
{
text: "Cancel",
onPress: () => console.log("Cancel Pressed"),
style: "cancel"
},
{ text: "OK",
onPress: () => console.log("OK Pressed")
}
],
{ cancelable: false }
);The title here is ‘Hi’, the message is ‘Do you want to continue’, the buttons i want to show in the dialog box are Later, Cancel and Ok. For each button onPress event is added, that displays a console message. The last is the option param., this can be used to control the behaviour of the pop-up. On Android by default the pop-up will get closed if clicked outside the pop-up boundary. To disable that you can make use of { cancelable: false } as option param. When you click outside the pop-up area it will not get closed because of the cancelable set to false.
In the case of iOS you can specify any number of buttons, but in Android you can make use of three buttons. The three buttons in Android has a concept of a neutral, negative and a positive button for example −
If one button is specified , it will be like 'positive' one for example 'OK'.
If two buttons it will be first 'negative', and second 'positive'.For example 'Cancel' and 'OK'.
If three buttons it will be 'neutral', 'negative', 'positive'.For example 'Later', 'Cancel', and 'OK'
Here is a working example showing the working of Alert component −
Example 1: Display of Alert box
import React from 'react';
import { Button, View, Alert } from 'react-native';
const App = () => {
const testAlert = () =>
Alert.alert(
"Hi",
"Do you want to continue?",
[
{
text: "Later",
onPress: () => console.log("User pressed Later")
},
{
text: "Cancel",
onPress: () => console.log("Cancel Pressed"),
style: "cancel"
},
{ text: "OK",
onPress: () => console.log("OK Pressed")
}
],
{ cancelable: false }
);
return (
<View style={{flex :1, justifyContent: 'center', margin: 15 }}>
<Button
title="Click Me"
color="#9C27B0"
onPress={testAlert}
/>
</View>
);
}
export default App;Output
Example 2: Using { cancelable: true } for Android
In the example below the { cancelable: true }is used along with the title, message and buttons. So the alert box will look like below −
Alert.alert(
"Hi",
"Do you want to continue?",
[
{
text: "Later",
onPress: () => console.log("User pressed Later")
},
{
text: "Cancel",
onPress: () => console.log("Cancel Pressed"),
style: "cancel"
},
{ text: "OK",
onPress: () => console.log("OK Pressed")
}
],
{ cancelable: true }
);The full working example is as follows −
import React from 'react';
import { Button, View, Alert } from 'react-native';
const App = () => {
const testAlert = () =>
Alert.alert(
"Hi",
"Do you want to continue?",
[
{
text: "Later",
onPress: () => console.log("User pressed Later")
},
{
text: "Cancel",
onPress: () => console.log("Cancel Pressed"),
style: "cancel"
},
{ text: "OK",
onPress: () => console.log("OK Pressed")
}
],
{ cancelable: true }
);
return (
<View style={{flex :1, justifyContent: 'center', margin: 15 }}>
<Button
title="Click Me"
color="#9C27B0"
onPress={testAlert}
/>
</View>
);
}
export default App;When you click outside the pop-up area it will get closed.
Output
657 Views
