Registry / web-framework / react-native-toast-message

react-native-toast-message

library2.3.3jsnpmunverified

React Native Toast Message is a lightweight (~40 kB) and highly customizable animated toast message component designed for React Native applications. It provides an imperative API for easily displaying various types of notifications, including success, error, and info toasts. The current stable version is 2.3.3, with a consistent release cadence focusing on bug fixes, performance improvements, and compatibility updates, as seen with recent fixes for React 19. Key differentiators include its built-in keyboard-aware logic, flexible configuration options, and the ability to define custom toast layouts. The library offers comprehensive documentation for advanced scenarios like integrating toasts within Modals or navigation libraries, which are common pain points in React Native development. It ships with full TypeScript support, ensuring type safety and improved developer experience.

web-framework

npm install react-native-toast-message

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-NATIVE-TOAST

react-native-toast-message

web-frameworkjavascriptv2.3.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Toast (component & API)

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

✗ import { Toast } from 'react-native-toast-message';

The library's main component and imperative API are exposed as a default export. Both `<Toast />` and `Toast.show()` use this single import.

ToastProps

✓ import type { ToastOptions } from 'react-native-toast-message';

✗ import { ToastOptions } from 'react-native-toast-message';

Use `import type` for type-only imports in TypeScript to ensure better tree-shaking and module resolution, especially in hybrid ESM/CJS environments.

BaseToast, SuccessToast, ErrorToast, InfoToast

✓ import { BaseToast, SuccessToast } from 'react-native-toast-message';

✗ import BaseToast from 'react-native-toast-message/BaseToast';

Customizable toast types are named exports. Direct path imports might not be tree-shakable or could break in future versions.

This quickstart demonstrates rendering the `Toast` component at the root of your application and using the imperative `Toast.show()` method to display success and error messages.

import React from 'react'; import { Button, View, StyleSheet, SafeAreaView } from 'react-native'; import Toast from 'react-native-toast-message'; const App = () => { const showSuccessToast = () => { Toast.show({ type: 'success', text1: 'Success!', text2: 'Your operation was completed successfully.', visibilityTime: 3000, autoHide: true, topOffset: 30 }); }; const showErrorToast = () => { Toast.show({ type: 'error', text1: 'Error!', text2: 'Failed to perform operation. Please try again.', visibilityTime: 4000, autoHide: true }); }; return ( <SafeAreaView style={styles.safeArea}> <View style={styles.container}> <Button title="Show Success Toast" onPress={showSuccessToast} /> <View style={styles.spacer} /> <Button title="Show Error Toast" onPress={showErrorToast} /> <Toast /> </View> </SafeAreaView> ); }; const styles = StyleSheet.create({ safeArea: { flex: 1, }, container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, spacer: { height: 20, }, }); export default App;

Debug

Known issues

breakingMajor API changes occurred during the migration from v1 to v2. Users upgrading from v1 should consult the complete changelog for v2.0.0 to understand necessary adjustments.

fix

Review the official v2.0.0 changelog and migration guide on the project's GitHub repository. Adjust component imports, prop names, and API calls accordingly.

affects: >=2.0.0

gotchaToasts with `autoHide: true` could get stuck when panned or swiped, leading to a persistent toast on screen.

fix

Update to version `2.3.2` or higher to resolve the issue where toasts would get stuck when panned. If unable to update, consider disabling swipeable gestures with `swipeable: false`.

affects: >=2.0.0 <2.3.2

gotchaOn iOS, toasts might not position correctly when the keyboard is open, appearing behind or incorrectly aligned with input fields.

fix

Upgrade to version `2.3.0` or newer, which includes a fix for toast positioning issues on iOS when the keyboard is active. Ensure your `Toast` component is rendered at a high enough level in the component tree.

affects: >=2.0.0 <2.3.0

gotchaSwipeable gestures for dismissing toasts are enabled by default since v2.2.0. This might conflict with other gestures or be undesired in some UX flows.

fix

To disable swipeable dismissal, pass the `swipeable: false` option to `Toast.show()` or within your custom toast configuration. For example: `Toast.show({ ..., swipeable: false })`.

affects: >=2.2.0

gotchaCompatibility issues with React 19 were reported, specifically related to return types for base toast components.

fix

Ensure you are using `react-native-toast-message` version `2.3.3` or higher for full compatibility with React 19. If you encounter type errors related to `BaseToast`, `SuccessToast`, `InfoToast`, or `ErrorToast` return types, updating the package will resolve them.

affects: >=2.0.0 <2.3.3

Errors

Common errors & fixes

TypeError: Cannot read property 'show' of undefined

The `Toast` object (imperative API) is not correctly imported or available in the scope where `Toast.show()` is called. This often happens if the import is incorrect or if `Toast` is not rendered at the root level in some setups.

fix

Ensure you are using `import Toast from 'react-native-toast-message';` and that the `<Toast />` component is rendered once at the top level of your React Native application, typically inside your `App.js` or equivalent root component.

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

This error typically occurs when a React component is imported incorrectly, for example, using named import (`{ Toast }`) when it should be a default import (`Toast`).

fix

Change your import statement for the `Toast` component to use the default export: `import Toast from 'react-native-toast-message';`.

Toast does not appear or disappears immediately when inside a Modal or Navigation stack.

The `Toast` component needs to be rendered at a sufficiently high level in the component hierarchy (e.g., above the Modal or Navigation container) to ensure it renders on top of all other content.

fix

Follow the specific documentation for 'How to show the Toast inside a Modal?' or 'How to render the Toast when using a Navigation library?' provided in the library's README. Generally, the `<Toast />` component should be placed outside of these elements or inside a dedicated provider/wrapper.

TypeScript error: Property 'text1' does not exist on type 'ToastOptions' or similar for custom properties.

You are trying to use a custom toast type or extend `ToastOptions` with properties that are not part of the default `ToastOptions` interface without proper type declaration.

fix

If using a custom type, declare it with `type: 'customType'` and ensure you extend `ToastOptions` with your custom props. For example, `declare module 'react-native-toast-message' { export interface ToastOptions { customProp?: string; } }`.

Upgrade

Version history

2.3.3latest on npm

Audit

Dependencies

reactrequiredPeer dependency for React Native applications.

react-nativerequiredCore dependency for React Native UI components.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/calintamas/react-native-toast-message ↗

packagehttps://www.npmjs.com/package/react-native-toast-message ↗