Alert
Launches an alert dialog with the specified title and message.
Optionally provide a list of buttons. Tapping any button will fire the respective onPress callback and dismiss the alert. By default, the only button will be an 'OK' button.
Example
import React, { useState } from "react";
import { View, StyleSheet, Button, Alert } from "react-native";
const App = () => {
const createTwoButtonAlert = () =>
Alert.alert(
"Alert Title",
"My Alert Msg",
[
{
text: "Cancel",
onPress: () => console.log("Cancel Pressed"),
style: "cancel"
},
{ text: "OK", onPress: () => console.log("OK Pressed") }
]
);
const createThreeButtonAlert = () =>
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") }
]
);
return (
<View style={styles.container}>
<Button title={"2-Button Alert"} onPress={createTwoButtonAlert} />
<Button title={"3-Button Alert"} onPress={createThreeButtonAlert} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "space-around",
alignItems: "center"
}
});
export default App;
Kepler
Kepler mimics the behaviour of Android's alert with at most three buttons and its positive/negative/neutral semantics.
- If you specify one button, it will be the 'positive' one (such as 'OK')
- Two buttons mean 'negative', 'positive' (such as 'Cancel', 'OK')
- Three buttons mean 'neutral', 'negative', 'positive' (such as 'Later', 'Cancel', 'OK')
The alert may be dismissed by providing an optional AlertOptions parameter with the cancelable property set to true i.e. {cancelable: true}
.
The cancel event can be handled by providing an onDismiss
callback property inside the options
parameter.
Example
import React from 'react';
import {View, StyleSheet, Button, Alert} from 'react-native';
const showAlert = () =>
Alert.alert(
'Alert Title',
'My Alert Msg',
[
{
text: 'Cancel',
onPress: () => Alert.alert('Cancel Pressed'),
style: 'cancel',
},
],
{
cancelable: true,
onDismiss: () =>
Alert.alert(
'This alert was dismissed by tapping outside of the alert dialog.',
),
},
);
const App = () => (
<View style={styles.container}>
<Button title="Show alert" onPress={showAlert} />
</View>
);
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
export default App;
Reference
Methods
alert()
static alert (
title: string,
message?: string,
buttons?: AlertButton[],
options?: AlertOptions,
);
Parameters:
Name | Type | Description |
---|---|---|
title <div class="label basic required">Required</div> | string | The dialog's title. Passing null or empty string will hide the title. |
message | string | An optional message that appears below the dialog's title. |
buttons | AlertButton[] | An optional array containing buttons configuration. |
options | AlertOptions | An optional Alert configuration. |
Type Definitions
AlertButton
An object describing the configuration of a button in the alert.
Type |
---|
array of objects |
Objects properties:
Name | Type | Description |
---|---|---|
text | string | Button label. |
onPress | function | Callback function when button is pressed. |
AlertOptions
Type |
---|
object |
Properties:
Name | Type | Description |
---|---|---|
cancelable | boolean | Defines if alert can be dismissed by tapping outside of the alert box. |
onDismiss | function | Callback function fired when alert has been dismissed. |
Last updated: Sep 30, 2025