A Simple Guide to Toast Messages in React Native

Toast messages are small pop up notifications that appear briefly on the screen to provide feedback or information to the user. They’re commonly used for showing messages like “Item added to cart” or “Settings saved successfully.”

In this blog, we’ll go through how to add toast messages to your React Native app with easy-to-follow steps and code examples.

What is a Toast Message?

A toast message is a small, non intrusive pop up that appears on the screen for a short time. It’s used to display feedback to the user without interrupting their current task. Toasts are great for confirming actions or displaying brief notifications.

How to Use Toast Messages in React Native

React Native doesn’t include a built in toast message component, but there are popular libraries that make it easy to add them to your app. One such library is react-native-toast-message.

1. Install react-native-toast-message

First, you need to add the react-native-toast-message package to your project. Open your terminal and run:

npm install react-native-toast-message

2. Set Up Toast Messages

To start using toast messages, you need to set up the Toast container in your app. This is usually done in the main entry file (e.g., App.js).

Here’s how you can do it:

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

const App = () => {
  const showToast = () => {
    Toast.show({
      type: 'success',
      position: 'bottom',
      text1: 'Hello',
      text2: 'This is a toast message!',
      visibilityTime: 3000,
      autoHide: true,
    });
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Show Toast" onPress={showToast} />
      <Toast ref={(ref) => Toast.setRef(ref)} />
    </View>
  );
};

export default App;

3. Customizing Toast Messages

You can customize the appearance and behavior of toast messages. Here’s a breakdown of the properties used in the example above:

• type: Defines the style of the toast (e.g., ‘success’, ‘error’, ‘info’).
• position: Determines where the toast will appear on the screen (‘top’, ‘bottom’).
• text1: The main message text.
• text2: Additional information.
• visibilityTime: How long the toast will be visible (in milliseconds).
• autoHide: Whether the toast should hide automatically.

You can also create custom toast designs and add animations. For more details, refer to the react-native-toast-message documentation.

4. Handling Multiple Toasts

If you want to handle multiple toasts at once or queue them, you can do that as well. The library takes care of stacking and managing multiple messages.

const showMultipleToasts = () => {
  Toast.show({
    type: 'success',
    position: 'bottom',
    text1: 'First Toast',
    text2: 'This is the first toast message!',
    visibilityTime: 3000,
    autoHide: true,
  });

  setTimeout(() => {
    Toast.show({
      type: 'error',
      position: 'bottom',
      text1: 'Second Toast',
      text2: 'This is the second toast message!',
      visibilityTime: 3000,
      autoHide: true,
    });
  }, 1000);
};

In this example, the second toast will appear one second after the first one.

Best Practices for Toast Messages

• Keep it brief: Toast messages should be short and to the point.
• Avoid overuse: Too many toast messages can overwhelm users. Use them sparingly.
• Use meaningful content: Make sure the message is clear and relevant to the action performed.

Conclusion

Toast messages are a great way to provide feedback and notifications to users without interrupting their experience. By using the react-native-toast-message library, you can easily add and customize toast messages in your React Native app.

Try integrating toast messages into your app to enhance user interactions and provide timely feedback. Happy coding! 🎉