@mehul214/react-native-flash-toast 0.0.0-stage → 1.0.1

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2026 Mehul
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/README.md

@@ -1,3 +1,252 @@
-# Temporary Holding Version
+# @mehul214/react-native-flash-toast ⚡️
+
+[![npm version](https://img.shields.io/npm/v/@mehul214/react-native-flash-toast.svg?style=flat-square)](https://www.npmjs.com/package/@mehul214/react-native-flash-toast)
+[![npm downloads](https://img.shields.io/npm/dm/@mehul214/react-native-flash-toast.svg?style=flat-square)](https://www.npmjs.com/package/@mehul214/react-native-flash-toast)
+[![license](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](LICENSE)
+[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg?style=flat-square)](https://www.typescriptlang.org/)
+[![Fabric Ready](https://img.shields.io/badge/New%20Architecture-Fabric%20%26%20TurboModules-brightgreen.svg?style=flat-square)](https://reactnative.dev)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](CONTRIBUTING.md)
+[![Sponsor](https://img.shields.io/badge/Sponsor-GitHub%20Sponsors-pink.svg?style=flat-square)](https://github.com/sponsors/Mehul214)
+[![Buy Me A Coffee](https://img.shields.io/badge/Buy%20Me%20A%20Coffee-FFDD00?style=flat-square&logo=buy-me-a-coffee&logoColor=black)](https://buymeacoffee.com/mehulreshac)
+[![Donate UPI](https://img.shields.io/badge/Donate-UPI-orange.svg?style=flat-square)](#-support-via-upi)
+
+> Next-generation flash message, alert bar, and toast notification library for **React Native** and **Expo**. Built for the **New Architecture (Fabric)**, modern safe areas, dynamic islands, and interactive swipe-to-dismiss gestures.
+
+A modern, drop-in replacement for the outdated `react-native-flash-message` package.
+
+---
+
+## 📱 Preview
+
+<p align="center">
+  <table align="center">
+    <tr>
+      <th align="center"><b>iOS (Dynamic Island & Swipe)</b></th>
+      <th align="center"><b>Android (Edge-to-Edge)</b></th>
+    </tr>
+    <tr>
+      <td align="center">
+        <img src="assets/demo-ios.gif" width="300" alt="iOS Preview" />
+      </td>
+      <td align="center">
+        <img src="assets/demo-android.gif" width="300" alt="Android Preview" />
+      </td>
+    </tr>
+  </table>
+</p>
+
+---
+
+## 🌟 Why react-native-flash-toast?
+
+| Feature | `react-native-flash-message` (Legacy) | `react-native-flash-toast` (This Package) |
+| :--- | :---: | :---: |
+| **New Architecture (Fabric)** | ⚠️ Deprecated / Layout warnings | ✅ **100% Native Driver & Fabric Ready** |
+| **Edge-to-Edge / Dynamic Island** | ❌ Hardcoded iPhone X dimensions | ✅ **Auto-adaptive safe-area insets** |
+| **Gestures** | ❌ No swipe gesture dismissal | ✅ **Smooth swipe-up / swipe-down to dismiss** |
+| **Countdown Timer Progress Bar** | ❌ None | ✅ **Built-in animated progress bar** |
+| **Pause on Press** | ❌ None | ✅ **Pauses autoHide timer while held** |
+| **Action Buttons** | ❌ Manual boilerplate | ✅ **Native Action Buttons (Undo, Retry)** |
+| **React Hooks** | ❌ Global ref only | ✅ **Both `useFlashMessage()` hook & global `showMessage()`** |
+| **Zero Native Dependencies** | ✅ Pure JS/TS | ✅ **Pure JS/TS (Works in Expo Go instantly)** |
+
+---
+
+## 📦 Installation
+
+```bash
+npm install @mehul214/react-native-flash-toast
+# or
+yarn add @mehul214/react-native-flash-toast
+# or
+pnpm add @mehul214/react-native-flash-toast
+```
+
+*(No `pod install` or native linking required!)*
+
+---
+
+## 🚀 Quick Start
+
+### 1. Mount the Container
+
+Add `<FlashMessage />` at the root of your application (typically in `App.tsx` or your root layout component):
+
+```tsx
+import React from 'react';
+import { View } from 'react-native';
+import { FlashMessage } from '@mehul214/react-native-flash-toast';
+
+export default function App() {
+  return (
+    <View style={{ flex: 1 }}>
+      <YourAppNavigator />
+      {/* Place at the very end so it renders above everything */}
+      <FlashMessage position="top" />
+    </View>
+  );
+}
+```
+
+### 2. Trigger from Anywhere!
+
+Call `showMessage` anywhere in your code — inside components, hooks, navigation listeners, Redux sagas, Zustand stores, or API error interceptors:
+
+```tsx
+import { showMessage, hideMessage } from '@mehul214/react-native-flash-toast';
+
+// Simple success message
+showMessage({
+  message: 'Payment Successful!',
+  description: 'Your subscription is now active.',
+  type: 'success',
+});
+
+// Danger / Error alert
+showMessage({
+  message: 'Failed to upload image',
+  description: 'Please check your internet connection.',
+  type: 'danger',
+});
+
+// Bottom toast with action button & progress bar
+showMessage({
+  message: 'Item moved to Archive',
+  type: 'default',
+  position: 'bottom',
+  showProgressBar: true,
+  action: {
+    label: 'Undo',
+    onPress: () => console.log('Undoing action...'),
+  },
+});
+```
+
+---
+
+## 🪝 React Hook Usage
+
+Prefer modern React hooks? Wrap your app with `<FlashMessageProvider>`:
+
+```tsx
+import { FlashMessageProvider, useFlashMessage } from '@mehul214/react-native-flash-toast';
+
+function Root() {
+  return (
+    <FlashMessageProvider position="top">
+      <App />
+    </FlashMessageProvider>
+  );
+}
+
+function ProfileScreen() {
+  const { show, hide } = useFlashMessage();
+
+  return (
+    <Button
+      title="Save"
+      onPress={() =>
+        show({
+          message: 'Saved!',
+          type: 'success',
+        })
+      }
+    />
+  );
+}
+```
+
+---
+
+## 🎨 Semantic Types & Built-in Themes
+
+| Type | Default Background | Default Icon | Intended Use |
+| :--- | :--- | :--- | :--- |
+| `success` | `#059669` (Emerald) | ✓ Checkmark | Confirmed actions, saved states |
+| `danger` | `#DC2626` (Red) | ✕ Close | Errors, network failures |
+| `warning` | `#D97706` (Amber) | ! Warning | Disconnections, low storage |
+| `info` | `#2563EB` (Blue) | ℹ Info | Informational alerts, updates |
+| `default` | `#1F2937` (Dark Slate) | ● Bullet | Neutral toasts & notifications |
+
+---
+
+## ⚙️ Options & API Reference
+
+| Option | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `message` | `string \| ReactNode` | **Required** | The main title or text content |
+| `description` | `string \| ReactNode` | `undefined` | Secondary subtitle or detailed message |
+| `type` | `'default' \| 'success' \| 'danger' \| 'warning' \| 'info'` | `'default'` | Semantic color preset |
+| `position` | `'top' \| 'bottom' \| 'center'` | `'top'` | Screen anchor position |
+| `duration` | `number` | `3000` | Auto-dismiss duration in ms (0 to disable) |
+| `autoHide` | `boolean` | `true` | Automatically dismiss after duration |
+| `floating` | `boolean` | `true` | Modern rounded floating card vs edge-to-edge |
+| `swipeToDismiss` | `boolean` | `true` | Swipe up (or down) gesture to dismiss |
+| `pauseOnPress` | `boolean` | `true` | Pauses countdown timer while finger holds card |
+| `showProgressBar`| `boolean` | `false` | Displays visual countdown progress indicator |
+| `action` | `{ label, onPress, style?, textStyle? }` | `undefined` | Action button (e.g. Undo, Retry) |
+| `icon` | `FlashMessageType \| 'none' \| ReactNode \| Function` | Semantic type | Custom or preset icon |
+| `backgroundColor`| `string` | Preset background | Override card color |
+| `color` | `string` | Preset text color | Override text & icon color |
+| `onPress` | `() => void` | `undefined` | Callback on banner tap |
+| `onShow` | `() => void` | `undefined` | Callback when message enters view |
+| `onHide` | `() => void` | `undefined` | Callback after message finishes exit |
+| `customComponent`| `(options, hide) => ReactNode` | `undefined` | Completely replace the inner card layout |
+
+---
+
+## 🔄 Migrating from `react-native-flash-message`
+
+Migrating is 100% drop-in compatible! Simply change the import:
+
+```diff
+- import FlashMessage, { showMessage, hideMessage } from "react-native-flash-message";
++ import FlashMessage, { showMessage, hideMessage } from "@mehul214/react-native-flash-toast";
+```
+
+Your existing `showMessage({ message, description, type, ... })` calls will work immediately, but with:
+- No more New Architecture Fabric warnings
+- Native iOS & Android edge-to-edge support
+- Modern fluid spring animations & swipe gestures
+
+---
+
+## 💖 Support the Project & Sponsoring
+
+Building and maintaining open-source libraries takes dedicated effort. If `react-native-flash-toast` helps you build great React Native applications or saves your team time, please consider supporting development:
+
+- ⭐️ **Star the repository on GitHub** (helps more developers discover it)
+- 💖 **[Sponsor on GitHub Sponsors](https://github.com/sponsors/Mehul214)**
+- ☕️ **[Buy Me a Coffee](https://buymeacoffee.com/mehulreshac)**
+
+<p align="left">
+  <a href="https://buymeacoffee.com/mehulreshac" target="_blank">
+    <img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" height="42" />
+  </a>
+</p>
+
+### ☕️ Support via UPI
+
+If you're in India or use any UPI-enabled payment app (Google Pay, PhonePe, Paytm, BHIM, Cred, Amazon Pay):
+
+- **UPI ID:** `mehulreshamwala7@okhdfcbank`
+- **Payee Name:** Mehul Reshamwala
+
+<p align="left">
+  <a href="upi://pay?pa=mehulreshamwala7@okhdfcbank&pn=Mehul%20Reshamwala&cu=INR&tn=Support%20react-native-flash-toast">
+    <img src="https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=upi%3A%2F%2Fpay%3Fpa%3Dmehulreshamwala7%40okhdfcbank%26pn%3DMehul%2520Reshamwala%26cu%3DINR%26tn%3DSupport%2520react-native-flash-toast" alt="Scan to Pay with UPI" width="180" height="180" />
+  </a>
+  <br />
+  <sub>Scan with Google Pay / PhonePe / Paytm or <a href="upi://pay?pa=mehulreshamwala7@okhdfcbank&pn=Mehul%20Reshamwala&cu=INR&tn=Support%20react-native-flash-toast">tap here on mobile to pay directly</a>.</sub>
+</p>
+
+---
+
+## 🤝 Contributing
+
+Contributions, feature requests, and bug reports are welcome! Please check the [Contributing Guide](CONTRIBUTING.md).
+
+## 📄 License
+
+MIT © 2026 Mehul. Free for personal and commercial use.
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.

package/dist/index.d.mts

@@ -0,0 +1,240 @@
+import React, { ReactNode } from 'react';
+import { StyleProp, ViewStyle, TextStyle } from 'react-native';
+
+type FlashMessageType = 'default' | 'success' | 'danger' | 'warning' | 'info';
+type FlashMessagePosition = 'top' | 'bottom' | 'center';
+type FlashMessageTransition = 'slide' | 'fade' | 'bounce';
+type FlashMessageIcon = FlashMessageType | 'none' | ReactNode | ((props: {
+    size: number;
+    color: string;
+}) => ReactNode);
+interface FlashMessageAction {
+    label: string;
+    onPress: () => void;
+    style?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+}
+interface FlashMessageOptions {
+    /** Unique ID for the message. Auto-generated if not provided */
+    id?: string;
+    /** Primary title or content */
+    message: string | ReactNode;
+    /** Secondary subtitle or body content */
+    description?: string | ReactNode;
+    /** Preset semantic style */
+    type?: FlashMessageType;
+    /** Screen position: 'top', 'bottom', or 'center'. Default: 'top' */
+    position?: FlashMessagePosition;
+    /** Display duration in milliseconds before auto-hiding. Default: 3000ms. Set to 0 to disable */
+    duration?: number;
+    /** Whether the message auto-dismisses after duration. Default: true */
+    autoHide?: boolean;
+    /** Floating pill with rounded corners vs edge-to-edge bar. Default: true */
+    floating?: boolean;
+    /** Preset or custom icon */
+    icon?: FlashMessageIcon;
+    /** Interactive action button (e.g. Undo, Retry) */
+    action?: FlashMessageAction;
+    /** Callback fired when the flash message card is tapped */
+    onPress?: () => void;
+    /** Callback fired when the flash message is long-pressed */
+    onLongPress?: () => void;
+    /** Callback fired after the message appears */
+    onShow?: () => void;
+    /** Callback fired after the message has fully hidden */
+    onHide?: () => void;
+    /** Custom container style */
+    style?: StyleProp<ViewStyle>;
+    /** Custom title text style */
+    titleStyle?: StyleProp<TextStyle>;
+    /** Custom description text style */
+    textStyle?: StyleProp<TextStyle>;
+    /** Override background color */
+    backgroundColor?: string;
+    /** Override text and icon color */
+    color?: string;
+    /** Dismiss when tapped. Default: true */
+    hideOnPress?: boolean;
+    /** Enable swipe up/down gesture to dismiss. Default: true */
+    swipeToDismiss?: boolean;
+    /** Temporarily pause the autoHide timer while finger touches the banner. Default: true */
+    pauseOnPress?: boolean;
+    /** Show an animated countdown progress bar at the bottom of the card. Default: false */
+    showProgressBar?: boolean;
+    /** Transition animation style: 'slide' | 'fade' | 'bounce'. Default: 'slide' */
+    transition?: FlashMessageTransition;
+    /** Override manual top inset / status bar height if needed */
+    statusBarHeight?: number;
+    /** Custom render function to completely override inner layout */
+    customComponent?: (options: FlashMessageOptions, hide: () => void) => ReactNode;
+}
+interface FlashMessageRef {
+    showMessage: (options: FlashMessageOptions) => void;
+    hideMessage: () => void;
+}
+interface FlashMessageContainerProps {
+    /** Default position for all messages if not specified in options */
+    position?: FlashMessagePosition;
+    /** Default duration in ms. Default: 3000 */
+    duration?: number;
+    /** Default floating style. Default: true */
+    floating?: boolean;
+    /** Default transition. Default: 'slide' */
+    transition?: FlashMessageTransition;
+    /** Optional top status bar offset */
+    statusBarOffset?: number;
+    /** Optional bottom navigation bar offset */
+    bottomOffset?: number;
+    /** Extra container style */
+    style?: StyleProp<ViewStyle>;
+    /** Can message replace current one immediately or queue. Default: 'replace' */
+    mode?: 'replace' | 'queue';
+}
+
+declare const FlashMessage: React.ForwardRefExoticComponent<FlashMessageContainerProps & React.RefAttributes<FlashMessageRef>>;
+
+declare class FlashMessageManager {
+    private defaultInstance;
+    private instances;
+    private pendingQueue;
+    register(ref: FlashMessageRef, id?: string): void;
+    unregister(id?: string): void;
+    showMessage(options: FlashMessageOptions, targetId?: string): void;
+    hideMessage(targetId?: string): void;
+}
+declare const flashManager: FlashMessageManager;
+/**
+ * Imperative helper to trigger a flash message from anywhere in the app
+ * (services, Zustand, Redux, API handlers, navigation screens).
+ */
+declare function showMessage(options: FlashMessageOptions): void;
+/**
+ * Imperative helper to dismiss the currently displayed flash message.
+ */
+declare function hideMessage(): void;
+/**
+ * Modern alias for showMessage
+ */
+declare const flash: typeof showMessage;
+declare const dismissFlash: typeof hideMessage;
+
+interface FlashMessageContextValue {
+    show: (options: FlashMessageOptions) => void;
+    hide: () => void;
+}
+interface FlashMessageProviderProps extends FlashMessageContainerProps {
+    children: React.ReactNode;
+}
+declare const FlashMessageProvider: React.FC<FlashMessageProviderProps>;
+declare function useFlashMessage(): FlashMessageContextValue;
+
+interface BuiltInIconProps {
+    type: FlashMessageType;
+    size?: number;
+    color?: string;
+}
+declare const BuiltInIcon: React.FC<BuiltInIconProps>;
+
+declare const COLORS: Record<FlashMessageType, {
+    background: string;
+    text: string;
+    icon: string;
+}>;
+declare const styles: {
+    rootOverlay: {
+        position: "absolute";
+        left: number;
+        right: number;
+        zIndex: number;
+        elevation: number;
+    };
+    rootTop: {
+        top: number;
+    };
+    rootBottom: {
+        bottom: number;
+    };
+    rootCenter: {
+        top: number;
+        bottom: number;
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    toastContainer: any;
+    floatingContainer: {
+        marginHorizontal: number;
+        borderRadius: number;
+        borderWidth: number;
+        borderColor: string;
+    };
+    edgeToEdgeContainer: {
+        marginHorizontal: number;
+        borderRadius: number;
+    };
+    contentWrapper: {
+        flex: number;
+        flexDirection: "row";
+        alignItems: "center";
+        paddingVertical: number;
+        paddingHorizontal: number;
+    };
+    iconContainer: {
+        marginRight: number;
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    iconBadge: {
+        width: number;
+        height: number;
+        borderRadius: number;
+        backgroundColor: string;
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    textContainer: {
+        flex: number;
+        justifyContent: "center";
+    };
+    titleText: {
+        fontSize: number;
+        fontWeight: "600";
+        letterSpacing: number;
+        lineHeight: number;
+        color: string;
+    };
+    descriptionText: {
+        fontSize: number;
+        fontWeight: "400";
+        color: string;
+        marginTop: number;
+        lineHeight: number;
+    };
+    actionButton: {
+        marginLeft: number;
+        paddingHorizontal: number;
+        paddingVertical: number;
+        borderRadius: number;
+        backgroundColor: string;
+        borderWidth: number;
+        borderColor: string;
+    };
+    actionButtonText: {
+        fontSize: number;
+        fontWeight: "600";
+        color: string;
+    };
+    progressBarContainer: {
+        position: "absolute";
+        bottom: number;
+        left: number;
+        right: number;
+        height: number;
+        backgroundColor: string;
+    };
+    progressBarFill: {
+        height: "100%";
+        backgroundColor: string;
+    };
+};
+
+export { BuiltInIcon, COLORS, FlashMessage, type FlashMessageAction, type FlashMessageContainerProps, type FlashMessageIcon, type FlashMessageOptions, type FlashMessagePosition, FlashMessageProvider, type FlashMessageRef, type FlashMessageTransition, type FlashMessageType, FlashMessage as default, dismissFlash, flash, flashManager, hideMessage, showMessage, styles, useFlashMessage };