# expo-react-native-toastify > expo-react-native-toastify allows you to add notifications to your expo react-native app (ios, android, web) with ease. Latest version **1.0.19** (published 2025-03-06) · MIT license · 0 weekly downloads ## Install ```sh npm install expo-react-native-toastify pnpm add expo-react-native-toastify yarn add expo-react-native-toastify bun add expo-react-native-toastify ``` ## Health **Score 25/100 (F)** — status: maintenance-mode. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: stale; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.19 | | Published | 2025-03-06 | | First published | 2023-04-14 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 2 | | Unpacked size | 41.4 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | geeek | | Maintainers | geeek | | Keywords | react, react-component, pushalert, toast, popup, react-native toast, react-native-toastify, react-native, react-toastify, toastify, react-native-notification, toastify-react-native, notification, picker, expo, cli, mobile, ios, android, web, expo-toast, paper-toast, snackbar, expo-snackbar | ## Links - npm: https://www.npmjs.com/package/expo-react-native-toastify - npm.io page: https://npm.io/package/expo-react-native-toastify ## Dependencies (2) - [react-native-modal](https://npm.io/package/react-native-modal.md) * - [react-native-responsive-fontsize](https://npm.io/package/react-native-responsive-fontsize.md) * ## Alternatives - [update-check](https://npm.io/package/update-check.md) — 4.0M weekly downloads - [react-native-onesignal](https://npm.io/package/react-native-onesignal.md) — 134.5K weekly downloads - [react-redux-toastr](https://npm.io/package/react-redux-toastr.md) — 33.7K weekly downloads - [@nocobase/plugin-notification-manager](https://npm.io/package/@nocobase/plugin-notification-manager.md) — 2.0K weekly downloads - [react-simple-toasts](https://npm.io/package/react-simple-toasts.md) — 1.9K weekly downloads ## Recent versions - 1.0.19 (latest) — 2025-03-06 - 1.0.18 — 2025-03-03 - 1.0.17 — 2025-03-03 - 1.0.16 — 2025-03-02 - 1.0.15 — 2025-02-28 - 1.0.14 — 2025-02-28 - 1.0.13 — 2025-02-28 - 1.0.12 — 2025-02-28 - 1.0.11 — 2025-02-28 - 1.0.10 — 2025-02-28 - 1.0.9 — 2025-01-18 - 1.0.8 — 2024-07-10 - 1.0.7 — 2023-04-14 - 1.0.6 — 2023-04-14 - 1.0.5 — 2023-04-14 ## README # expo-react-native-toastify [![npm version](https://badge.fury.io/js/expo-react-native-toastify.svg)](https://badge.fury.io/js/expo-react-native-toastify.svg) expo-react-native-toastify allows you to add notifications to your expo react-native app (ios, android, web) with ease. ## [A demo is worth 1000 words](https://snack.expo.dev/@geeek/expo-react-native-toastify-demo) ## Features - Smooth enter/exit animations - Plain simple and flexible APIs - Resize itself correctly on device rotation - Swipeable - Easy to set up for real, you can make it work in less than 10sec! - Super easy to customize - RTL support - Swipe to close 👌 - Can choose swipe direction - Super easy to use an animation of your choice. Works well with animate.css for example - Define behavior per toast - Pause toast on hover (web) or touch (mobile) 🖱️ - Fancy progress bar to display the remaining time - Progress bar pauses with toast - Static Toasts (duration: 0) - Possibility to update a toast - You can control the progress bar a la nprogress 😲 - You can display multiple toast at the same time - Dark and light mode 🌒 - Custom component support - Flexible icon system using Ionicons - And much more! ## Installation Using npm: ```sh npm install expo-react-native-toastify ``` Using yarn: ```sh yarn add expo-react-native-toastify ``` ## Pause Behavior The toast notification and its progress bar will pause: - On web: When hovering over the toast with mouse - On mobile: When touching the toast - The timer and progress bar will resume when the interaction ends - Static toasts (duration: 0) are not affected by pause Example with pause: ```javascript // Toast will pause on hover (web) or touch (mobile) Toast.info("Pausable message", { duration: 5000, // 5 seconds position: "top" }); // Static toast - won't pause Toast.info("Static message", { duration: 0, // Static toast position: "top" }); ``` ## Quick Start ```javascript import React from "react"; import { StyleSheet, View, TouchableOpacity, Text } from "react-native"; import ToastManager, { Toast } from "expo-react-native-toastify"; const App = () => { const showToasts = () => { Toast.info("This is a toast.",{position:'top'}); }; return ( SHOW SOME AWESOMENESS! ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", alignItems: "center", justifyContent: "center", }, }); export default App; ``` ## Basic Usage ### Toast Types ```javascript // Basic toasts Toast.success("Success message"); Toast.error("Error message"); Toast.info("Info message"); Toast.warn("Warning message"); // Custom toast Toast.custom("Custom message", { barColor: "#FF5733", icon: "heart", position: "top", theme: "dark" }); ``` ### Positions ```javascript Toast.success("Top position", { position: "top" }); Toast.success("Center position", { position: "center" }); Toast.success("Bottom position", { position: "bottom" }); ``` ### Durations ```javascript // Show for 2 seconds Toast.info("Quick message", { duration: 2000 }); // Show for 5 seconds Toast.info("Longer message", { duration: 5000 }); // Static toast (won't auto-hide) Toast.info("Static message", { duration: 0 }); ``` ### Themes ```javascript // Light theme (default) Toast.success("Light theme", { theme: "light" }); // Dark theme Toast.success("Dark theme", { theme: "dark" }); ``` ## Available Props | Name | Type | Default | Description | | --------------------------- | ---------------------------------- | -------------- | ---------------------------------------------- | | width | number | 256 | Width of toast | | height | number | 68 | Height of the toast | | style | any | null | Style applied to the toast | | position | top, center or bottom | top | Position of toast | | positionValue | number | 50 | position value of toast | | duration | number | 3000 | The display time of toast | | animationStyle | upInUpOut, rightInOut or zoomInOut | upInUpOut | The animation style of toast | | animationIn | string or object | 'slideInRight' | Toast show animation | | animationOut | string or object | 'slideOutLeft' | Toast hide animation | | animationInTiming | number | 300 | Timing for the Toast show animation (in ms) | | animationOutTiming | number | 300 | Timing for the toast hide animation (in ms) | | backdropTransitionInTiming | number | 300 | The backdrop show timing (in ms) | | backdropTransitionOutTiming | number | 300 | The backdrop hide timing (in ms) | | hasBackdrop | bool | false | Render the backdrop | | backdropColor | string | 'black' | The backdrop background color | | backdropOpacity | number | 0.2 | The backdrop opacity when the toast is visible | | icon | string | information-circle| Ionicon name for toast icon | | theme | string | light | Toast theme (light/dark) | | barColor | string | Based on type | Progress bar color | ### Icons This package uses [Ionicons](https://oblador.github.io/react-native-vector-icons/) for toast icons. You can browse all available icons at: https://oblador.github.io/react-native-vector-icons/ Some commonly used icons: - information-circle - checkmark-circle - alert-circle - warning - close-circle - heart - star ## Available Animations Take a look at [react-native-animatable](https://github.com/oblador/react-native-animatable) to see the dozens of animations available out-of-the-box. ## See in Action ![image.gif](https://i.imgur.com/QsnL0Xl.gif) ![image.png](https://i.postimg.cc/QtJFYKwv/image.png) ![image.png](https://i.postimg.cc/g06RsJYP/image.png) ## Try the Demo Want to see all features in action? Try our interactive demo: [Live Demo on Expo Snack](https://snack.expo.dev/@geeek/expo-react-native-toastify-demo) ## Credits This package is inspired by [toastify-react-native](https://www.npmjs.com/package/toastify-react-native). ## License expo-react-native-toastify is [MIT licensed] by geeek. --- _Source: https://npm.io/package/expo-react-native-toastify · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._