React Native Toast

React Native ToastAndroid

The ToastAndroid API in React Native exposes the ToastAndroid module from the Android platform as a JS module. It includes the show(message, duration) method, which accepts two parameters:

message: A string containing the text to be displayed in the toast. duration: The toast duration, which can be either ToastAndroid.SHORT or ToastAndroid.LONG.

An alternative method is available to determine the position of the toast on the screen layout using the showWithGravity(message, duration, gravity) function. The available options for gravity are ToastAndroid.TOP, ToastAndroid.BOTTOM, or ToastAndroid.CENTER.

ToastAndroid Props

ToastAndroid provides a set of props that can be used to customize the behavior and appearance of toast messages. Some of the commonly used ToastAndroid props are:

SHORT

Displays the time period on the screen.

static SHORT: number;

LONG

Displays the time period on the screen.

static LONG: number;

TOP

Shows the location on the display.

static TOP: number;

BOTTOM

Shows the location on the display.

static BOTTOM: number;

CENTER

Shows the location on the display.

static CENTER: number;

ToastAndriod Methods

In React Native, ToastAndroid provides methods for displaying toast messages on Android devices.

show()

The show() method in React Native's ToastAndroid allows you to display a toast message on the screen.

showWithGravity()

The showWithGravity() method is used to display a toast message on the screen with a specified gravity or position. It allows you to control where the toast appears in the layout. By using this method, you can set the position of the toast to either ToastAndroid.TOP, ToastAndroid.BOTTOM, or ToastAndroid.CENTER.

showWithGravityAndOffset()

The showWithGravityAndOffset() method in React Native's ToastAndroid allows you to display a toast message with custom gravity and offset on the screen. By using this method, you can specify the desired position of the toast (e.g., top, bottom, center) and set a specific offset from the edge of the screen.

React-native-toast-message

React Native Toast Message is a powerful library that allows developers to display informative and user-friendly toast messages in their React Native applications. In this article, we will delve into the key aspects of React Native Toast Message, including its features, APIs, custom layouts, properties, and methods. Additionally, we will provide code examples and explanations to help you understand and implement this library effectively.

Features

Customizable Toast Message Styles:

The library allows developers to customize the styles of toast messages according to their application's design language. Developers can modify the appearance of the toast message, including the background color, text color, icon, and other visual elements, to create a consistent and visually appealing user interface.

Support for Different Types of Toast Messages:

React Native Toast Message supports various types of toast messages, such as success, error, warning, or information messages. Developers can easily specify the type of message to be displayed, ensuring that users receive appropriate feedback or notifications based on the context.

Duration Control for Message Display:

Developers have control over the duration for which the toast message is displayed on the screen. They can specify the desired display time, ensuring that the message is visible long enough for users to read and understand, without causing unnecessary interruptions in the user flow.

Animation Options:

React Native Toast Message provides animation options for the toast message's entry and exit. Developers can choose from a range of animation effects to create smooth and visually pleasing transitions when the toast message appears and disappears from the screen.

APIs

React Native Toast Message provides a set of APIs that enable developers to easily create and manage toast messages in their applications. These APIs offer intuitive methods to control the content, appearance, and behavior of toast messages. Some of the essential APIs include:

show

The show() API is used to display a toast message with specified content and options. Developers can pass the message text, type (success, error, warning, etc.), duration, and other custom options as parameters to this method. This API enables developers to create and display toast messages with specific configurations.

To display a Toast message, utilize the show() method and customize the options according to your requirements. All parameters are optional unless otherwise specified. Here is an example using the 'react-native-toast-message' library:

hide

The hide() API allows developers to programmatically hide the currently displayed toast message. This is useful when developers want to dismiss or remove a toast message before its duration expires. By invoking this API, the currently displayed toast message will be immediately hidden from the screen.

To hide the currently displayed Toast, utilize the hide() method:

If an onHide callback was previously configured (either through show() or as a default prop on the Toast component instance), it will now be triggered.

hideAll

This method is useful when developers need to dismiss or remove all toast messages that are currently waiting to be displayed. It provides a convenient way to clear the toast message queue and ensure a clean state.

update

The update() API allows developers to update the content or options of a currently displayed toast message. Developers can pass the unique ID of the toast message along with the updated content or options as parameters to this method. By using this API, developers can dynamically change the text, type, duration, or any other properties of an active toast message.

Custom Layouts

One of the standout features of React Native Toast Message is its ability to support custom layouts for toast messages. This allows developers to create visually appealing and branded toast messages that align with their application's design language. By leveraging the library's custom layout capabilities, developers can craft unique toast message experiences that suit their specific needs.

To incorporate custom Toast styles or replace the existing ones, you have the option to include a config prop while rendering the Toast component at your application's entry point.

When constructing the config, you can follow either of these approaches:

1. Modify the layout of the default BaseToast, SuccessToast, ErrorToast, or InfoToast components according to your preferences.
2. Develop Toast layouts from scratch.

To demonstrate the newly created tomatoToast type, utilize the library in the same manner as previously done. Here's an example:

Properties

React Native Toast Message exposes a range of properties that can be utilized to fine-tune the appearance and behavior of toast messages. These properties offer control over various aspects, such as text styling, background color, position, and more. By manipulating these properties, developers can customize the toast messages to align with their application's visual guidelines and user preferences.

Methods

React Native Toast Message provides a set of convenient methods that allow developers to interact with toast messages programmatically. These methods offer flexibility and control over managing toast messages dynamically during runtime. Some of the key methods include:

showToast(): Displays a toast message with custom content and options. hideToast(): Hides a specific toast message identified by its unique ID. hideAllToasts(): Clears the queue and hides all pending toast messages. updateToast(): Updates the content or options of a specific toast message.

Displaying a React Native Toast Popup

We offer two options for displaying a toast: an API from the react-native package and a community-maintained library for React Native.

For Android devices, we can utilize the ToastAndroid API provided by React Native. It allows us to show toasts using the ToastAndroid.show method, which requires a message and duration option.

Uses

To use this functionality, import ToastAndroid from the 'react-native' package and call ToastAndroid.show the desired message and duration. This will display the toast on Android devices.

React-native-root-toast

To utilize the react-native-root-toast library, the initial step involves installing the module using the npm package manager by executing "npm install react-native-root-toast".

Subsequently, it is necessary to enclose the root component of your application with the <RootSiblingParent> component to enable the usage of siblings within your app.

To incorporate Toast functionality into your app, import the 'Toast' module from 'react-native-root-toast' and utilize the 'Toast.show' and 'Toast.hide' methods to handle the display and removal of Toast messages on the screen.

If you prefer a declarative approach to managing toasts, React-native-root-toast offers a component API.

An animated toast message component for React Native

A React Native component called "Animated Toast Message" is designed to be invoked programmatically.

To use this copy the below code in root.jsx

Then use it in the react native application:

Below are various options available to cater to specific requirements. Unless explicitly mentioned during the invocation of the show method, all options are considered optional.

The purpose of using "|" is to indicate that one of the values displayed should be selected. In case only one value is displayed, it automatically becomes the default choice.

Customization of the Types of Toast

If you wish to incorporate custom types or override existing ones, it is possible to include a configuration prop that renders the Toast component at the root of your application.