react-native-toast-queue

A fully type-safe, lightweight, and reusable toast notification system for React Native and Expo. It features a queue system to manage multiple notifications, customizable animations, optional haptic feedback, and a progress bar.

Demo

Features

• 🚀 Queue-based system: Toasts wait their turn, ensuring no message is missed.
• 🎨 4 Types: Success, Error, Info, Warning.
• ⚡ Lightweight: Zero dependencies (optional expo-haptics).
• 📱 Haptic Feedback: Optional integration with expo-haptics.
• ⏳ Progress Bar: Visual indicator of remaining time.
• 🎭 Animations: Smooth fade and slide animations.
• 🔧 Type-Safe: Written in TypeScript with full type definitions.
• ⚛️ React Native & Expo: Works seamlessly with both.

Installation

npm install react-native-toast-queue
# or
yarn add react-native-toast-queue

Optional: Haptics

If you want haptic feedback, install expo-haptics:

npx expo install expo-haptics

Usage

1. Wrap your app with ToastProvider

import { ToastProvider } from "react-native-toast-queue";

export default function App() {
  return (
    <ToastProvider>
      <YourApp />
    </ToastProvider>
  );
}

2. Use the hook to show toasts

import { useToast } from "react-native-toast-queue";
import { Button, View } from "react-native";

const MyComponent = () => {
  const toast = useToast();

  const handlePress = () => {
    toast.show({
      message: "Hello World!",
      type: "success",
      duration: 3000,
      haptic: true,
      position: "top",
    });
  };

  return (
    <View>
      <Button title="Show Toast" onPress={handlePress} />
    </View>
  );
};

API

useToast()

Returns an object with the following methods:

• show(options: ToastOptions): Adds a toast to the queue.
• hide(): Dismisses the current toast immediately.
• clear(): Clears the entire queue and dismisses the current toast.

ToastOptions

Property	Type	Default	Description
message	string	Required	The message to display.
type	'success' | 'error' | 'info' | 'warning'	'info'	The visual style of the toast.
duration	number	3000	Duration in milliseconds.
position	'top' | 'bottom'	'top'	Position on the screen.
haptic	boolean	false	Trigger haptic feedback on show (requires expo-haptics).
showProgress	boolean	false	Show a progress bar indicating remaining time.
style	ViewStyle	undefined	Custom styles for the container.
textStyle	TextStyle	undefined	Custom styles for the message text.
onPress	() => void	undefined	Callback when the toast is pressed.
icon	ReactNode	undefined	Custom icon component.

Customization

You can customize the look and feel by providing style and textStyle props in the show method options.

toast.show({
  message: "Custom Style",
  style: { backgroundColor: "#333", borderRadius: 20 },
  textStyle: { color: "#FFD700", fontSize: 18 },
});

License

MIT