React-native-animated-toast-alerts NPM

React Native Animated Toast

NPM Version

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 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

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

🎨 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;
  };
};