Expo-react-native-toastify NPM

expo-react-native-toastify

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

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:

npm install expo-react-native-toastify

Using yarn:

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:

// 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

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 (
    <View style={styles.container}>
      <ToastManager />
      <TouchableOpacity
        onPress={showToasts}
        style={{
          backgroundColor: "white",
          borderColor: "green",
          borderWidth: 1,
          padding: 10,
        }}
      >
        <Text>SHOW SOME AWESOMENESS!</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

export default App;

Basic Usage

Toast Types

// 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

Toast.success("Top position", { position: "top" });
Toast.success("Center position", { position: "center" });
Toast.success("Bottom position", { position: "bottom" });

Durations

// 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

// 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