react-native-action-toast

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

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

• 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

Prop	Type	Default	Description
title	string	-	Toast title
message	string	-	Toast message
position	'top' or 'bottom'	'bottom'	Toast position
duration	number	4000	Display duration in ms
icon	string or ReactNode	-	Icon name or custom component
gradientColors	string[]	-	Gradient background colors
backgroundColor	string	-	Solid background color (alternative)
actionButtons	ActionButton[]	-	Array of action buttons

🧩 ActionButton

Prop	Type	Description
text	string	Button label
onPress	function	Click handler
backgroundColor	string	Button background
textStyle	TextStyle	Optional text styles
icon	ReactNode	Optional custom icon
iconPosition	'left' or 'right'	Icon position

🎨 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)"
    }
  ]
});