{"id":11803,"library":"react-native-toast-message","title":"React Native Toast Message","description":"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.","status":"active","version":"2.3.3","language":"javascript","source_language":"en","source_url":"https://github.com/calintamas/react-native-toast-message","tags":["javascript","react-native","toast","typescript"],"install":[{"cmd":"npm install react-native-toast-message","lang":"bash","label":"npm"},{"cmd":"yarn add react-native-toast-message","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native-toast-message","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React Native applications.","package":"react","optional":false},{"reason":"Core dependency for React Native UI components.","package":"react-native","optional":false}],"imports":[{"note":"The library's main component and imperative API are exposed as a default export. Both `<Toast />` and `Toast.show()` use this single import.","wrong":"import { Toast } from 'react-native-toast-message';","symbol":"Toast (component & API)","correct":"import Toast from 'react-native-toast-message';"},{"note":"Use `import type` for type-only imports in TypeScript to ensure better tree-shaking and module resolution, especially in hybrid ESM/CJS environments.","wrong":"import { ToastOptions } from 'react-native-toast-message';","symbol":"ToastProps","correct":"import type { ToastOptions } from 'react-native-toast-message';"},{"note":"Customizable toast types are named exports. Direct path imports might not be tree-shakable or could break in future versions.","wrong":"import BaseToast from 'react-native-toast-message/BaseToast';","symbol":"BaseToast, SuccessToast, ErrorToast, InfoToast","correct":"import { BaseToast, SuccessToast } from 'react-native-toast-message';"}],"quickstart":{"code":"import React from 'react';\nimport { Button, View, StyleSheet, SafeAreaView } from 'react-native';\nimport Toast from 'react-native-toast-message';\n\nconst App = () => {\n  const showSuccessToast = () => {\n    Toast.show({\n      type: 'success',\n      text1: 'Success!',\n      text2: 'Your operation was completed successfully.',\n      visibilityTime: 3000,\n      autoHide: true,\n      topOffset: 30\n    });\n  };\n\n  const showErrorToast = () => {\n    Toast.show({\n      type: 'error',\n      text1: 'Error!',\n      text2: 'Failed to perform operation. Please try again.',\n      visibilityTime: 4000,\n      autoHide: true\n    });\n  };\n\n  return (\n    <SafeAreaView style={styles.safeArea}>\n      <View style={styles.container}>\n        <Button title=\"Show Success Toast\" onPress={showSuccessToast} />\n        <View style={styles.spacer} />\n        <Button title=\"Show Error Toast\" onPress={showErrorToast} />\n        <Toast />\n      </View>\n    </SafeAreaView>\n  );\n};\n\nconst styles = StyleSheet.create({\n  safeArea: {\n    flex: 1,\n  },\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: '#F5FCFF',\n  },\n  spacer: {\n    height: 20,\n  },\n});\n\nexport default App;","lang":"typescript","description":"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."},"warnings":[{"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.","message":"Major 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.","severity":"breaking","affected_versions":">=2.0.0"},{"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`.","message":"Toasts with `autoHide: true` could get stuck when panned or swiped, leading to a persistent toast on screen.","severity":"gotcha","affected_versions":">=2.0.0 <2.3.2"},{"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.","message":"On iOS, toasts might not position correctly when the keyboard is open, appearing behind or incorrectly aligned with input fields.","severity":"gotcha","affected_versions":">=2.0.0 <2.3.0"},{"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 })`.","message":"Swipeable 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.","severity":"gotcha","affected_versions":">=2.2.0"},{"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.","message":"Compatibility issues with React 19 were reported, specifically related to return types for base toast components.","severity":"gotcha","affected_versions":">=2.0.0 <2.3.3"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"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.","error":"TypeError: Cannot read property 'show' of undefined"},{"fix":"Change your import statement for the `Toast` component to use the default export: `import Toast from 'react-native-toast-message';`.","cause":"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`).","error":"Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object."},{"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.","cause":"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.","error":"Toast does not appear or disappears immediately when inside a Modal or Navigation stack."},{"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; } }`.","cause":"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.","error":"TypeScript error: Property 'text1' does not exist on type 'ToastOptions' or similar for custom properties."}],"ecosystem":"npm"}