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:

1npm install expo-react-native-toastify

Using yarn:

1yarn 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:

1// Toast will pause on hover (web) or touch (mobile)
2Toast.info("Pausable message", { 
3  duration: 5000,  // 5 seconds
4  position: "top"
5});
6
7// Static toast - won't pause
8Toast.info("Static message", { 
9  duration: 0,  // Static toast
10  position: "top"
11});

Quick Start

1import React from "react";
2import { StyleSheet, View, TouchableOpacity, Text } from "react-native";
3import ToastManager, { Toast } from "expo-react-native-toastify";
4
5
6const App = () => {
7  const showToasts = () => {
8    Toast.info("This is a toast.",{position:'top'});
9  };
10
11  return (
12    <View style={styles.container}>
13      <ToastManager />
14      <TouchableOpacity
15        onPress={showToasts}
16        style={{
17          backgroundColor: "white",
18          borderColor: "green",
19          borderWidth: 1,
20          padding: 10,
21        }}
22      >
23        <Text>SHOW SOME AWESOMENESS!</Text>
24      </TouchableOpacity>
25    </View>
26  );
27};
28
29const styles = StyleSheet.create({
30  container: {
31    flex: 1,
32    backgroundColor: "#fff",
33    alignItems: "center",
34    justifyContent: "center",
35  },
36});
37
38export default App;

Basic Usage

Toast Types

1// Basic toasts
2Toast.success("Success message");
3Toast.error("Error message");
4Toast.info("Info message");
5Toast.warn("Warning message");
6
7// Custom toast
8Toast.custom("Custom message", {
9  barColor: "#FF5733",
10  icon: "heart",
11  position: "top",
12  theme: "dark"
13});

Positions

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

Durations

1// Show for 2 seconds
2Toast.info("Quick message", { duration: 2000 });
3
4// Show for 5 seconds
5Toast.info("Longer message", { duration: 5000 });
6
7// Static toast (won't auto-hide)
8Toast.info("Static message", { duration: 0 });

Themes

1// Light theme (default)
2Toast.success("Light theme", { theme: "light" });
3
4// Dark theme
5Toast.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 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.