react-native-toast-message

What is react-native-toast-message?

react-native-toast-message is a customizable toast notification library for React Native applications. It allows developers to display brief messages to users in a non-intrusive way, providing feedback or alerts without disrupting the user experience.

What are react-native-toast-message's main functionalities?

Basic Toast

Displays a basic toast message with a title and a subtitle. The type can be 'success', 'error', or 'info'.

import Toast from 'react-native-toast-message';

Toast.show({
  type: 'success',
  text1: 'Hello',
  text2: 'This is a basic toast message'
});

Custom Toast

Displays a custom toast message with additional properties. This allows for more complex and tailored notifications.

import Toast from 'react-native-toast-message';

Toast.show({
  type: 'custom',
  text1: 'Custom Toast',
  text2: 'This is a custom toast message',
  props: { customData: 'Some custom data' }
});

Positioning Toast

Allows positioning of the toast message. The position can be 'top', 'bottom', or 'center'.

import Toast from 'react-native-toast-message';

Toast.show({
  type: 'info',
  text1: 'Positioned Toast',
  text2: 'This toast is positioned at the bottom',
  position: 'bottom'
});

Auto Hide

Displays a toast message that automatically hides after a specified duration. The visibilityTime is set in milliseconds.

import Toast from 'react-native-toast-message';

Toast.show({
  type: 'error',
  text1: 'Auto Hide Toast',
  text2: 'This toast will disappear after 3 seconds',
  autoHide: true,
  visibilityTime: 3000
});

Other packages similar to react-native-toast-message

react-native-flash-message

react-native-flash-message is another popular library for displaying flash messages in React Native applications. It offers similar functionality to react-native-toast-message, including customizable messages, different types of alerts, and various positioning options. However, react-native-flash-message provides more built-in styles and animations out of the box.

react-native-simple-toast

react-native-simple-toast is a lightweight library for displaying simple toast messages in React Native. It is less customizable compared to react-native-toast-message but is very easy to use and integrates well with both Android and iOS platforms. It is ideal for developers who need basic toast functionality without the need for extensive customization.

react-native-root-toast

react-native-root-toast is a flexible and customizable toast library for React Native. It allows for more advanced customization options, including custom animations and styles. Compared to react-native-toast-message, it offers more control over the appearance and behavior of toast messages but may require more setup and configuration.

README

react-native-toast-message

Animated toast message component for React Native.

Features

• 🚀 Imperative API
• 📦 Very lightweight (~40 kB)
• ⌨️ Keyboard-aware
• 🎨 Customizable layouts
• 🔧 Flexible config

Documentation

This is the documentation for react-native-toast-message@v2, which has a similar API to v1, but contains a few important changes. Read the complete changelog.

• Quick start
• API
• Create custom layouts
• FAQ
  • How to show the Toast inside a Modal?
  • How to render the Toast when using a Navigation library?
  • How to mock the library for testing with jest?

License

MIT