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