React Native Action Toast 🚀

An elegant toast notification library for React Native featuring interactive action buttons, smooth animations, and seamless Expo integration

✨ Features

• 🎨 Stunning gradient backgrounds
• 🛠 Customizable action buttons
• 📱 Expo compatible (no native linking required)
• ⚡ Position options: top or bottom
• 🔔 Built-in notification types: success, error, etc.

🎥 Watch it in Action

(Click the badge above to watch the demo video)

📦 Installation

npm install react-native-action-toast

or

yarn add react-native-action-toast

or

npx expo install react-native-action-toast

🪶Quick Start

1. Add ToastManger in App

import { ToastManager, initializeToast } from 'react-native-action-toast';

export default function App() {
  const toastRef = initializeToast(); // intialze ref

  return (
    <>
      {/* Your app content */}
      <ToastManager ref={toastRef} /> // Add ToastManger and pass the toastRef
    </>
  );
}

2. Start using toasts anywhere in the app.

import { getToastManager } from 'react-native-action-toast';


// Toast with action buttons
getToastManager().showToast({
  title: "New Message",
  message: "You have 3 unread conversations",
  position: "top",
  actionButtons: [
    {
      text: "View",
      onPress: () => console.log("View pressed"),
      backgroundColor: "#4CAF50"
    }
  ]
});

// Quick methods
//Success
getToastManager().showSuccess(
    "Changes will take around 1-2 hours to reflect across all devices.", //messgae
    "Profile Saved", //title
    "bottom" //position
    )
// Error
getToastManager().showError(
    "Failed to save changes",
    undefined, //each quick methods have default titles.
    "top"
    )
//Similar showInfo and showWarning methods

//Quick custom toast
getToastManager().showCustom(
    "Custom settings have been applied", //message
    "Custom Style", //title
    "bottom", //postiton
    "palette", //icon name
    undefined, //backgroundColor
    ["#9c27b0", "#673ab7"] //gradinet colors
    )

📚 API Reference

🔔 Toast Options

🧩 ActionButton

🎨 Examples

// Custom toast with two buttons
getToastManager().showToast({
  title: "New Feature Available",
  message: "Try our new dark mode!",
  position: "top",
  icon: "star",
  gradientColors: ["#6a11cb", "#2575fc"],
  actionButtons: [
    {
      text: "Enable",
      onPress: enableDarkMode,
      backgroundColor: "#2575fc"
    },
    {
      text: "Later",
      onPress: () => {},
      backgroundColor: "rgba(255,255,255,0.2)"
    }
  ]
});