React Native Animated Toast

A modern, highly customizable animated toast notification library for React Native featuring stacking animations, gesture support, and comprehensive TypeScript compatibility.

✨ Features

• 🎨 Modern Design - Clean, minimalist interface with smooth animations
• 🔄 Animated Stacking - Beautiful entrance and exit animations with proper stacking
• 🌓 Theme Integration - Seamless dark mode support with customizable themes
• 📱 Multiple Positions - Support for top, bottom, and center positions
• 👆 Advanced Gestures - Intuitive swipe-to-dismiss with natural physics
• 💅 Flexible Styling - Extensive customization options for colors, icons, and animations
• 🔧 TypeScript Support - Comprehensive type definitions for better development
• ⚡ Performance Optimized - Efficient animations using React Native's Animated API
• 🎁 Icon Integration - Seamless support for Lucide icons

🚀 Installation

1. Install the package and dependencies

# Using npm
npm install react-native-animated-toast-alerts

# Using yarn
yarn add react-native-animated-toast-alerts

# Using pnpm
pnpm add react-native-animated-toast-alerts

2. iOS Setup

Run the following command to install the required CocoaPods dependencies:

cd ios && pod install && cd ..

🎯 Quick Start

Wrap your Application with the ToastProvider

import { ToastProvider } from 'react-native-animated-toast-alerts';

const App = () => {
  return (
    <ToastProvider>
      <YourApp />
    </ToastProvider>
  );
};

export default App;

Display a Toast

import { useToast } from 'react-native-animated-toast-alerts';
import { Camera } from 'lucide-react-native';

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

  const handlePress = () => {
    showToast({
      type: 'success',
      message: '✨ Operation completed!',
      position: 'top',
      icon: {
        icon: Camera,
        props: {
          size: 24,
          color: '#16A34A'
        }
      }
    });
  };

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

Manually Hide a Toast

You can programmatically hide the currently active toast using the .hide() method on the returned function.

const showToast = useToast();

const performAction = async () => {
  showToast({ message: "Loading...", duration: 0 }); // duration 0 to keep it open

  await someAsyncWork();

  showToast.hide(); // Hide the toast when done
};

🎨 Toast Types

Predefined Toast Types

// ℹ️ Info toast
showToast({
  type: "info",
  message: "Updates available",
});

// ✅ Success toast
showToast({
  type: "success",
  message: "Changes saved!",
});

// ❌ Error toast
showToast({
  type: "error",
  message: "Something went wrong",
});

// ⚠️ Warning toast
showToast({
  type: "warning",
  message: "Please review input",
});

💅 Customization

Styling Options

showToast({
  type: "info",
  message: "Custom styled toast",
  position: "center",
  customStyle: {
    borderRadius: 12,
    backgroundColor: "#F8FAFC",
  },
  messageStyle: {
    fontSize: 16,
    fontWeight: "bold",
  },
});

Custom Icons

import { AlertCircle } from "lucide-react-native";

showToast({
  type: "info",
  message: "Custom icon toast",
  icon: {
    icon: AlertCircle,
    props: {
      size: 24,
      color: "#1D4ED8",
      strokeWidth: 2,
    },
  },
});

📚 API Reference

ToastOptions

interface ToastOptions {
  type?: "info" | "success" | "error" | "warning";
  message: string;
  duration?: number;
  position?: "top" | "bottom";
  icon?: ToastIcon;
  customStyle?: StyleProp<ViewStyle>;
  messageStyle?: StyleProp<TextStyle>;
}

type ToastIcon = {
  icon: LucideIcon | React.ComponentType<any>;
  props?: {
    size?: number;
    color?: string;
    [key: string]: any;
  };
};

📱 Platform Specific Features

The library provides optimized experiences for both platforms:

• iOS: Native shadows, safe area handling, and smooth animations
• Android: Material Design elevation and touch feedback
• Both: Natural gesture interactions and proper theme integration

🔧 Technical Requirements

• React Native >= 0.63.0
• React >= 16.8.0
• TypeScript >= 4.0.0 (for TypeScript users)

🤝 Contributing

Contributions are welcome! Please feel free to submit issues and pull requests. For major changes, kindly open a discussion first.

See CONTRIBUTING.md for contribution guidelines and DEVELOPMENT.md for local development and build instructions.

📄 License

MIT © Rajeshwar Kashyap