How to Show Toast Messages in React Native Apps

Delivering instant feedback via mobile applications is vital to improve the overall user experience regardless if it is to confirm an action, display a success message, or display error information. Developers often use toast messages as a way of non-blocking notification to users.

Today, in this blog we will review two different ways to show toast messages in React Native applications.

What is a Toast Message?

Toast messages are best described as notifications that show a popup notification for a couple of seconds at (usually) the bottom of the screen – which disappears automatically. They are widely used to show messages similar to “Saved successfully”, “Error occurred”, or “Copied to clipboard”.

Methods to Show Toast Messages in React Native

To show a toast message in React Native we can use the ToastAndroid native module that is available on Android applications. But we can also use third-party libraries that you can use on both iOS and Android.

1.  Using react-native-toast-message (Recommended for cross-platform support):

react-native-toast-message is a popular library that allows you to show toast messages with a level of customization on both platforms.

Install the necessary packages:

Using npm:

npm install react-native-toast-message

Using yarn:

yarn add react-native-toast-message

Then, if you are working on iOS, navigate to your ios directory and run:

pod install

Example:

import React from 'react';
import { View, Button } from 'react-native'
import Toast from 'react-native-toast-message';

function App() {
 const showSuccessToast = () => {
   Toast.show({
     type: 'success',
     text1: 'Success!',
     text2: 'Your operation was successful.',
   });
 };

 const showErrorToast = () => {
   Toast.show({
     type: 'error',
     text1: 'Error!',
     text2: 'Something went wrong. Please try again.',
   });
 }

 return (
   <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
     <Button title="Show Success Toast" onPress={showSuccessToast} />
     <Button title="Show Error Toast" onPress={showErrorToast} />
     <Toast /> {/* This is crucial for displaying toasts */
   </View>
 );
}

export default App;

2. Using ToastAndroid (Android-specific):

For Android-only applications, React Native provides the native ToastAndroid module.

import { ToastAndroid, Button } from 'react-native';
   const showAndroidToast = () => {
  ToastAndroid.show('A pikachu appeared nearby !', ToastAndroid.SHORT);
     // or with gravity:
     // ToastAndroid.showWithGravity('Hello!', ToastAndroid.LONG, ToastAndroid.TOP);
   };
   // ... in your component
   <Button title="Show Android Toast" onPress={showAndroidToast} />

Note: ToastAndroid is not available on iOS.

Final Thoughts

Toast messages are a convenient and effective way to increase user experience in your React Native apps. ToastAndroid is very helpful for apps specific to Android, however cross-platform libraries such as react-native-toast-message or react-native-root-toast allow more flexibility and customization. 

Regardless of which method you choose, you can guarantee a smooth and user friendly experience for your mobile app users.

FAQ

1. What is a toast message in React Native?

A toast message is a small pop notification that is only briefly displayed on screen and provides for quick feedback about an action that was taken. Good examples are “Item added to cart” or “Copied successfully.”

2. Can I use toast messages on both Android and iOS in React Native?

Yes. The built-in ToastAndroid module works only on Android but third party libraries like react-native-toast-message and react-native-root-toast can be used on both Android and iOS.

3. Which is the best library for toast messages in React Native?

If you want a feature-rich solution, then react-native-toast-message may be worth your time. If you are looking for a light-weight solution for basic purposes, then react-native-root-toast is an appropriate option.

4. When should I use a toast message instead of an alert?

Toast messages should be used for non-critical informational messages (success, error, or info messages). If you want the user to interact or confirm something, then you should utilize alerts or dialogs.