React Native Alert
React Native Alert is an API which is used to display an alert dialog with specified title and message. It uses an alert() method to prompt an alert dialog. This Alert dialog provides three different lists of buttons (combination of neutral, negative, and positive) to perform action. Pressing any of these buttons calls the onPress callback method and dismiss the alert. By default, Alert has only a positive (OK) button.
The Alert that prompts to enter some information is created using AlertIOS. It is only supported in iOS.
React Native Alert in iOS
In iOS, we can specify number of buttons. Each buttons can be separately specify a style, which is one of default, cancel, or destructive.
React Native Alert in Android
In Android, the Alert button can be specified with mainly three buttons. These buttons are a neutral, negative and a positive button:
Advertisement.
Alert buttons are specified in three different combinations. These are:
import { Alert, AppRegistry, Button, StyleSheet, View } from 'react-native';
export default class ButtonBasics extends Component {
showAlert1() {
Alert.alert(
'Alert Title',
'My Alert Msg',
[
{
text: 'Cancel',
onPress: () => console.log('Cancel Pressed'),
style: 'cancel',
},
{text: 'OK', onPress: () => console.log('OK Pressed')},
]
);
}
showAlert2() {
Alert.alert(
'Alert Title',
'My Alert Msg',
[
{text: 'Ask me later', onPress: () => console.log('Ask me later pressed')},
{
text: 'Cancel',
onPress: () => console.log('Cancel Pressed'),
style: 'cancel',
},
{text: 'OK', onPress: () => console.log('OK Pressed')},
],
{cancelable: false}
)
}
render() {
return (
<View style={styles.container}>
<View style={styles.buttonContainer}>
<Button
onPress={this.showAlert1}
title="Button 1"
/>
</View>
<View style={styles.buttonContainer}>
<Button
onPress={this.showAlert2}
title="Button 2"
color="#009933"
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
buttonContainer: {
margin: 20
},
multiButtonContainer: {
margin: 20,
flexDirection: 'row',
justifyContent: 'space-between'
}
})
Output:
