Updated April 1, 2023
Introduction to React Native Alert
With the help of the alert dialog we can design and display an alert box with either some warning or some important messages, alert dialog contains a default ok button, and there is a callback function is written for it, when the user clicks the ok button a call back function get called an alert dialog will be closed, we can also perform some activity on ok button pressed by the user, the good thing about this alert dialog is we can use it with both android and IOS, in promoted alert box user can pass some text as the input and that text can be used by our internal code either to save data or to display some output relevant to that message.
Syntax
In the below syntax we are showing a simple alert box for the react native we can define the below syntax in the following way
- Here we are using the Alert which we must import from the react-native component library.
- There will be a Title section where we will write the title for the alert dialog box for the end-user
- There will be a message section where we can put the actual message for the end-user
- Next, we have three things which end users will click “later”,” Cancel” or “Ok”.Every Click section has some call back function that will capture the details of the information sent or clicked by the end-user.
Syntax:
Alert.alert(
'Here We will write the title for the alert dialog which will be visible to the end customer',//title section
'Here we can put our message for the customer',//message section
[
{text: '(Later)This box is mainly for the end user in case customer is not interested for this now(ask me later like)', onPress: () => console.log('instead of console we can write some activity where we will capture that customer was not interested now ,so that we can so this alert dialog again to the customer')},
{text: 'Cancel(just in case end user in not interested at all for this kind of alert box)', onPress: () => console.log('Instead of simply writing console here we can perform some activity where we can capture that end user is not interested and we will not show this message again or maybe we can change the way how we are showing the messages'), style: 'cancel'},
{text: 'OK(If customer feels that this activity need to perform than he can select this ok button)', onPress: () => console.log('Instead of writing simply console here we can perform some useful activity here related to customer acceptance')},
],
{ cancelable: false }
)Working of Alert in React Native
The working principle of Alert in react native can be defined in the below formats
- If we define here only button one, in that case, it will consider it as the positive value which is simply “Ok”
- In case if we Define button two, which means negative and positive value for example ‘Cancel’,”Ok”
- But in case if defined three-button, in that case, it will be “negative”,”positive”,”natural” which will be “Cancel”, “Ok”,”later”
- When end-user do some activity on the app or from our end if we feel to display data we need to take some information from the custom then we put this alert dialog box which will open on any of these activities
- An alert dialog is a part of react-native library it has a default ok button and a section where the user can enter some information according to the asked by alert box
- Once the user clicks the ok button there will be an event that will pass to the core library and it will close the dialog box
- along with clicking of an Ok button, the information passed or entered by the end-user can be captured inside the code and can be saved as user information
Example of Alert in React Native
In the below example we are showing an example for react-native alert dialog box, where we have taken two dialog boxes with a button, we can define the below example code in the following steps.
- First, we defined a class with AlertDialog which is extending the react-native core library.
- We have defined two functions inside it, one is firstAlert and the second is secondAlert.Both of these functions contain logic for dialog boxes which will appear for the end user when they click the respective buttons associated with these functions.
- Next thing we have defined two buttons First Button and Second Button inside the render function, when the end user clicks on these buttons associated functions with these buttons will be called.
Please follow the screens of output for better understanding, in the first image we can see the two buttons, and in the next two images two alert dialog boxed for each button click.
Code:
import React, { Component } from 'react';
import { Alert, AppRegistry, Button, StyleSheet, View } from 'react-native';
export default class AlertDialog extends Component {
firstAlert() { //function which will call on click of first button
Alert.alert(
'Our Title for first alert',
'Our message for the first alert',
[
{
text: 'Cancel',
onPress: () => console.log('End user is not at all interested for it'),
style: 'cancel',
},
{text: 'OK', onPress: () => console.log('End user is interested for it')},
]
);
}
secondAlert() { //function which will be called on the click of the second button
Alert.alert(
'Our title for the second alert',
'Our Message for the second alert',
[
{text: 'Later', onPress: () => console.log('not interested now')},
{
text: 'Cancel',
onPress: () => console.log('Not interested at all'),
style: 'cancel',
},
{text: 'Sure', onPress: () => console.log('Interested')},
],
{cancelable: false}
)
}
render() {
return (
<View style={alertStyles.containerStyle}>
<View style={alertStyles.buttonContainer}>
<Button
onPress={this.firstAlert}
title="First button"
/>
</View>
<View style={alertStyles.buttonContainerStyle}>
<Button
onPress={this.secondAlert}
title="second button"
color="green"
/>
</View>
</View>
);
}
}
//design and css for the buttons .
const alertStyles = StyleSheet.create({
containerStyle: {
flex: 1,
justifyContent: 'center',
},
buttonContainerStyle: {
margin: 21
}
})
After clicking on the first button
After clicking on the second button
Recommended Articles
This is a guide to React Native Alert. Here we also discuss the introduction and working of alert in react native along with an example and its code implementation. You may also have a look at the following articles to learn more –
