React Native Animated Toast

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

✨ Features

• 🎨 Modern Design - Clean, minimalist interface with smooth animations
• 🔄 Sonner-Style 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 lucide-react-native react-native-svg

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

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

2. iOS Setup

cd ios && pod install && cd ..

🎯 Quick Start

Set up the Provider

Wrap your application with the ToastProvider:

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

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

export default App;

Using the 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} />;
};

🎨 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' | 'center';
  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.

📄 License

MIT © Rajeshwar Kashyap