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

Icons

This package uses Ionicons 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 to see the dozens of animations available out-of-the-box.

See in Action

Try the Demo

Want to see all features in action? Try our interactive demo: Live Demo on Expo Snack

Credits

This package is inspired by toastify-react-native.

License

expo-react-native-toastify is [MIT licensed] by geeek.