React Native Animated Toast

A beautiful, animated toast component for React Native with haptic feedback.

Features

• 🎨 Beautiful, minimal design with blur effect
• 🎭 Smooth animations using Reanimated
• 📱 Haptic feedback
• 🎯 Gesture-based dismissal
• 🌈 Multiple variants (success, error, info, warning)
• 🔧 Customizable duration
• 📱 Safe area aware
• 🎨 Theme support

Installation

1npm install rn-toast-kit

Dependencies

This package requires the following dependencies:

1npm install react-native-reanimated react-native-gesture-handler expo-blur expo-haptics react-native-safe-area-context

Usage

1. Wrap your app with the ToastProvider:

1import { ToastProvider } from "rn-toast-kit";
2
3export default function App() {
4  return (
5    <ToastProvider>
6      <YourApp />
7    </ToastProvider>
8  );
9}

2. Use the Toast methods anywhere in your app:

1import { Toast } from "rn-toast-kit";
2
3// Success toast
4Toast.success("Operation completed successfully!");
5
6// Error toast
7Toast.error("Something went wrong!");
8
9// Info toast
10Toast.info("Did you know?");
11
12// Warning toast
13Toast.warning("Please be careful!");
14
15// Custom duration
16Toast.success("Quick message", { duration: 1000 });

API

Toast Methods

• Toast.success(message, options?)
• Toast.error(message, options?)
• Toast.info(message, options?)
• Toast.warning(message, options?)

Options

1type ToastOptions = {
2  duration?: number; // Duration in milliseconds (default: 3000)
3  variant: "success" | "info" | "error" | "warning";
4};

License

MIT