useToastKepler

Important: The Vega SDK supports many of the React Native version 0.72 components and APIs. You can use the supported components and APIs in the same manner as an ordinary React Native app. This page lists a specific React Native feature supported by the Vega 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. For more information about React Native v72, see the React Native documentation, version 0.72. For the most current feature information, see the Release Notes.

The useToastKepler hook provides functionality that allows you to display an on-screen notification. The hook provides the show method which takes the following parameters:

title: A string with the primary text to display.
description: A string with the secondary text to display.
duration: (optional) The duration of the toast - either ToastKeplerDuration.SHORT or ToastKeplerDuration.LONG. Default value is set to ToastKeplerDuration.SHORT.
iconUri: A URI in the format of a HTTP(S) URL or a local file URI. For local files, use the format file:///path/to/file.
iconSize (optional) A string with a size of the icon. The parameter can take small, normal or large values. Default to normal
options (optional) An object that enables to extend the Toast with launching app section
- launchUri A string with uri of the app to launch.
- launchTitle A string with the text showed next to the launch icon

Kepler Support

To use the hook, request the com.amazon.notification.privilege.post privilege in the app manifest.toml file.

[[needs.privilege]]
id = "com.amazon.notification.privilege.post"

Usage

The following example shows how to create and display a toast.

import React from 'react';
import {View, StyleSheet, useToastKepler, ToastKeplerDuration, Button, StatusBar} from 'react-native';

const App = () => {
  const ToastKepler = useToastKepler();
  const showToast = () => {
    ToastKepler.show({
      title: 'This is ToastKepler title!',
      description: "This is ToastKepler description!",
      iconUri: 'https://example.com',
      duration: ToastKeplerDuration.SHORT
    });
  };

  return (
    <View style={styles.container}>
      <Button title="Toggle Toast" onPress={() => showToast()} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: StatusBar.currentHeight,
    backgroundColor: '#888888',
    padding: 8,
  },
});

export default App;

Reference

Methods

show

Shows a notification message (toast) on the device screen

show({ title, description, iconUri, iconSize, duration, options }: {
    title: string;
    description: string;
    iconUri: string;
    iconSize?: "small" | "normal" | "large";
    duration?: number;
    options?: {
      launchUri: string;
      launchTitle: string;
    }
  });

Properties

`SHORT`

Specifies how long the toast notification appears on the screen.

static SHORT: number;

`LONG`

Specifies how long the toast notification appears on the screen.

static LONG: number;

Last updated: Sep 30, 2025