Alert
Important: Amazon Confidential. The Kepler SDK supports many React Native v72 APIs. You can use the supported APIs just as you would with a JavaScript application. This page lists a specific React Native API supported by the Kepler SDK and contains React Native v72 documentation from the reactnative.dev website created by Meta and other contributors and licensed under the Attribution 4.0 International License. You can find additional information about React Native v72 here.
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
