rn-toastify 1.0.11 → 2.0.0

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2024 Mukesh Prajapati
-
-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.
+MIT License
+
+Copyright (c) 2024 Mukesh Prajapati
+
+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,190 +1,221 @@
-# React Native Toastify
-
-A highly customizable and performant toast notification library for React Native. Featuring smooth animations, swipe gestures, and flexible styling options.
-
-![Demo GIF](https://github.com/muku534/react-native-toast/blob/master/docs/Toast.gif)
-
----
-
-## 🚀 Features
-
-- **Single-root container**: Mount once at the app root.
-- **Imperative API**: Use `useToast` hook anywhere in your app.
-- **Light/Dark Theme**: System-aware with optional forced theme.
-- **Promise Helper**: Show loading, success, and error states.
-- **Customizable**: Add custom content, styles, and emojis.
-
----
-
-## 📦 Installation
-
-Install the package using npm or yarn:
-
-```bash
-npm install rn-toastify
-```
-
-Or:
-
-```bash
-yarn add rn-toastify
-```
-
-### Peer Dependencies
-
-Ensure the following peer dependencies are installed:
-
-- `react`
-- `react-native`
-- `react-native-reanimated` (v2+)
-- `lottie-react-native`
-
-For iOS, run:
-
-```bash
-cd ios && pod install
-```
-
----
-
-## 🛠️ Quick Start
-
-### Step 1: Mount the Toast Container
-
-Add the `ToastContainer` to your app's root component (e.g., `App.js`):
-
-```javascript
-import React from 'react';
-import { NavigationContainer } from '@react-navigation/native';
-import MainNavigator from './src/navigation';
-import { ToastContainer } from 'rn-toastify';
-
-export default function App() {
-  return (
-    <>
-      <NavigationContainer>
-        <MainNavigator />
-      </NavigationContainer>
-      <ToastContainer theme="dark" /> {/* Optional: Force theme */}
-    </>
-  );
-}
-```
-
-### Step 2: Use the `useToast` Hook
-
-Call toast methods anywhere in your app:
-
-```javascript
-import React from 'react';
-import { View, Button } from 'react-native';
-import useToast from 'rn-toastify';
-
-export default function HomeScreen() {
-  const { success, error } = useToast();
-
-  return (
-    <View>
-      <Button title="Show Success" onPress={() => success('Operation successful!')} />
-      <Button title="Show Error" onPress={() => error('Something went wrong.', { position: 'top' })} />
-    </View>
-  );
-}
-```
-
----
-
-## 📖 API Reference
-
-### `useToast` Hook
-
-The `useToast` hook provides the following methods:
-
-| Method   | Description                          |
-|----------|--------------------------------------|
-| `show`   | Display a custom toast.              |
-| `success`| Show a success toast.                |
-| `error`  | Show an error toast.                 |
-| `custom` | Render a custom React element.       |
-| `emoji`  | Display a toast with an emoji.       |
-| `promise`| Handle promise states with toasts.   |
-
-### Common Options
-
-| Option     | Type     | Description                          |
-|------------|----------|--------------------------------------|
-| `duration` | `number` | Duration in milliseconds.            |
-| `position` | `string` | `'top' | 'bottom' | 'center'`.       |
-| `style`    | `object` | Custom styles for the toast wrapper. |
-
-### `promise` Method Options
-
-| Option     | Type     | Description                          |
-|------------|----------|--------------------------------------|
-| `loading`  | `string` | Message during loading.              |
-| `success`  | `string` | Message on success.                  |
-| `error`    | `string` | Message on error.                    |
-
----
-
-## 🌈 Examples
-
-### Success Toast
-
-```javascript
-const { success } = useToast();
-success('Operation successful!', { duration: 1500, position: 'top' });
-```
-
-### Promise Helper
-
-```javascript
-const { promise } = useToast();
-
-const myPromise = fetch('/api/save');
-
-promise(myPromise, {
-  loading: 'Saving…',
-  success: 'Saved successfully!',
-  error: 'Save failed.',
-});
-```
-
-### Custom Content
-
-```javascript
-const { custom } = useToast();
-custom(<MyCustomComponent />, { duration: 2000 });
-```
-
-### Emoji Toast
-
-```javascript
-const { emoji } = useToast();
-emoji('Great job!', '🎉', { duration: 1300 });
-```
-
----
-
-## 🎨 Theme Support
-
-- **Automatic**: Detects system theme (light/dark).
-- **Forced**: Pass `theme="light"` or `theme="dark"` to `ToastContainer`.
-
-If the system theme is unavailable, the default is `light`.
-
----
-
-## 🐛 Troubleshooting
-
-### Common Issues
-
-- **Toasts not showing**: Ensure `ToastContainer` is mounted at the app root.
-- **Reanimated errors**: Add the Reanimated Babel plugin and rebuild.
-- **Lottie issues on iOS**: Run `cd ios && pod install`.
-
----
-
-## 📜 License
-
-MIT License. See [LICENSE](./LICENSE) for details.
+# 🍞 rn-toastify
+
+<p align="center">
+  <img src="./docs/demo.gif" alt="rn-toastify Demo" width="350" style="border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);" />
+</p>
+
+<p align="center">
+  <strong>A professional, production-ready toast notification library for React Native.</strong><br/>
+  Featuring a premium floating pill design, glassmorphic backgrounds, smooth spring animations, swipe-to-dismiss gestures, and seamless queue management.
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/rn-toastify"><img src="https://img.shields.io/npm/v/rn-toastify.svg?style=flat-square&color=6366F1" alt="npm version"></a>
+  <a href="LICENSE"><img src="https://img.shields.io/npm/l/rn-toastify.svg?style=flat-square&color=10B981" alt="license"></a>
+  <img src="https://img.shields.io/badge/platform-iOS%20%7C%20Android-3B82F6.svg?style=flat-square" alt="Platform">
+</p>
+
+---
+
+## ✨ What's New in v2: The Premium Redesign
+
+We completely overhauled rn-toastify to feel like a **native, premium OS feature** rather than a basic third-party library.
+
+- 💎 **Ultra-Premium Design**: Compact "floating pill" layout with soft, multi-layered drop shadows.
+- 🪞 **Glassmorphism**: Semi-transparent backgrounds that beautifully blend with your app's content in both light and dark modes.
+- 🎨 **Edge Accents**: Elegant left-edge color indicators for Success, Error, Info, and Warning states.
+- 🌊 **Fluid Physics**: Powered by `react-native-reanimated` for 60fps spring animations and interactive pan gestures.
+- 📦 **Zero Asset Bloat**: Completely removed Lottie dependencies. All icons are now built-in, lightweight animated components.
+
+---
+
+## 🚀 Core Features
+
+| Feature | Description |
+|---------|-------------|
+| 🎨 **6 Built-in Types** | Success, Error, Info, Warning, Loading, Emoji, plus full Custom support. |
+| 👆 **Interactive Swipes** | Swipe horizontally or vertically to intuitively dismiss alerts. |
+| 📊 **Progress Bar** | Animated, flush-to-bottom countdown indicator for auto-dismissal. |
+| 🎭 **System Theme** | Automatically adapts to Light/Dark mode, or can be forced via props. |
+| 📚 **Smart Queue** | Set a `maxVisible` limit; excess toasts automatically queue up. |
+| ⏳ **Promise API** | Elegant loading → success/error state management for async tasks. |
+| ⌨️ **Keyboard Aware** | Bottom toasts intelligently shift up when the keyboard appears. |
+| 🔷 **TypeScript** | Built with TS for full type safety and autocompletion. |
+
+---
+
+## 📦 Installation
+
+```bash
+npm install rn-toastify
+```
+
+```bash
+yarn add rn-toastify
+```
+
+### Required Peer Dependency
+
+This library relies on the amazing `react-native-reanimated` for 60fps performance.
+
+```bash
+npm install react-native-reanimated
+```
+
+> **Note:** Follow the [Reanimated installation guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/) and add the Babel plugin to your `babel.config.js`.
+
+For iOS, don't forget to install pods:
+```bash
+cd ios && pod install
+```
+
+---
+
+## 🏁 Quick Start
+
+### Step 1: Mount the Container
+Add `ToastContainer` at the very root of your app structure (e.g., in `App.js` or your main navigation wrapper).
+
+```jsx
+import React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { ToastContainer } from 'rn-toastify';
+
+export default function App() {
+  return (
+    <>
+      <NavigationContainer>
+        <MainNavigator />
+      </NavigationContainer>
+      
+      {/* Mount it once at the top level */}
+      <ToastContainer maxVisible={3} />
+    </>
+  );
+}
+```
+
+### Step 2: Show Toasts Anywhere!
+Use the `useToast` hook inside any of your functional components.
+
+```jsx
+import React from 'react';
+import { View, TouchableOpacity, Text } from 'react-native';
+import useToast from 'rn-toastify';
+
+export default function ProfileScreen() {
+  const toast = useToast();
+
+  const handleSave = () => {
+    toast.success('Your profile changes have been saved.', {
+      title: 'Success!',
+      duration: 3500,
+    });
+  };
+
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <TouchableOpacity onPress={handleSave}>
+        <Text>Save Profile</Text>
+      </TouchableOpacity>
+    </View>
+  );
+}
+```
+
+---
+
+## 📖 API Reference
+
+### The `useToast()` Hook
+
+| Method | Returns | Description |
+|--------|---------|-------------|
+| `success(message, options?)` | `string` (id) | Show a green success toast |
+| `error(message, options?)` | `string` (id) | Show a red error toast |
+| `info(message, options?)` | `string` (id) | Show a blue info toast |
+| `warning(message, options?)` | `string` (id) | Show an amber warning toast |
+| `emoji(message, emoji, options?)` | `string` (id) | Show a toast with a custom emoji |
+| `custom(content, options?)` | `string` (id) | Render entirely custom React nodes |
+| `promise(promise, messages, options?)` | `Promise` | Automatically handle async states |
+| `dismiss(id)` | `void` | Dismiss a specific toast |
+| `dismissAll()` | `void` | Clear the screen of all toasts |
+
+### Toast Options
+
+Pass these options as the second argument to customize individual toasts:
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `title` | `string` | `undefined` | Bold title text displayed above the message |
+| `duration` | `number` | `3000` | Delay in ms before auto-dismissing. Use `Infinity` to disable. |
+| `position` | `'top' \| 'bottom' \| 'center'` | `'top'` | Screen positioning |
+
+---
+
+## 🌟 Beautiful Examples
+
+### Promise Handling (Async Tasks)
+Let rn-toastify handle your loading, success, and error states automatically:
+
+```jsx
+const updateProfile = fetch('/api/user', { method: 'PUT', body: data });
+
+toast.promise(updateProfile, {
+  loading: 'Saving your changes...',
+  success: 'Changes saved successfully!',
+  error: 'Failed to save. Please try again.',
+});
+```
+
+### Dynamic Promise Messages
+You can pass functions to dynamically render the success/error messages based on the response:
+
+```jsx
+toast.promise(fetchUserData(), {
+  loading: 'Loading profile...',
+  success: (user) => `Welcome back, ${user.firstName}!`,
+  error: (err) => `Error: ${err.message}`,
+});
+```
+
+### Persistent Toasts
+Want a toast that never goes away until the user interacts with it?
+
+```jsx
+const id = toast.warning('Please verify your email address.', {
+  title: 'Action Required',
+  duration: Infinity, 
+});
+
+// Dismiss it later via code
+toast.dismiss(id);
+```
+
+---
+
+## 🛠 ToastContainer Props
+
+Customize global settings on the `<ToastContainer />`:
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `theme` | `'light' \| 'dark'` | system | Force a specific theme instead of following OS |
+| `maxVisible` | `number` | `3` | Max number of toasts on screen (excess are queued) |
+| `defaultPosition` | `'top' \| 'bottom' \| 'center'` | `'top'` | Default positioning for all toasts |
+| `topOffset` | `number` | `0` | Extra padding from the top edge |
+| `bottomOffset` | `number` | `0` | Extra padding from the bottom edge |
+
+---
+
+## 🤝 Contributing
+Contributions, issues, and feature requests are welcome!
+Feel free to check the [issues page](https://github.com/muku534/react-native-toast/issues).
+
+## 📜 License
+This project is [MIT](./LICENSE) licensed.
+
+---
+<p align="center">
+  <b>Crafted with ❤️ by <a href="https://github.com/muku534">Mukesh Prajapati</a></b>
+</p>

package/babel.config.js

@@ -1,6 +1,6 @@
-module.exports = {
-    plugins: [
-      ...
-      'react-native-reanimated/plugin',
-    ],
+module.exports = {
+    plugins: [
+      ...
+      'react-native-reanimated/plugin',
+    ],
   };

package/example/App.js

@@ -0,0 +1,193 @@
+/**
+ * rn-toastify v2.0 — Example / Demo App
+ *
+ * To test this, create a new React Native project:
+ *   npx react-native init ToastDemo
+ *   cd ToastDemo
+ *   npm install react-native-reanimated
+ *
+ * Then copy this file as App.js and copy/link the rn-toastify package.
+ */
+import React from 'react';
+import {
+    View,
+    Text,
+    TouchableOpacity,
+    StyleSheet,
+    SafeAreaView,
+    ScrollView,
+    StatusBar,
+} from 'react-native';
+
+// In a real app: import useToast, { ToastContainer } from 'rn-toastify';
+const useToast = require('./index');
+const { ToastContainer } = require('./index');
+
+const BUTTON_DATA = [
+    {
+        label: '✅  Success Toast',
+        color: '#10B981',
+        action: (toast) =>
+            toast.success('Your changes have been saved successfully.', {
+                title: 'Success!',
+                duration: 3500,
+            }),
+    },
+    {
+        label: '❌  Error Toast',
+        color: '#EF4444',
+        action: (toast) =>
+            toast.error('Failed to save your changes. Please try again.', {
+                title: 'Something went wrong',
+                duration: 4000,
+            }),
+    },
+    {
+        label: 'ℹ️  Info Toast',
+        color: '#3B82F6',
+        action: (toast) =>
+            toast.info('Version 2.0 is now available for download.', {
+                title: 'Update Available',
+                duration: 3500,
+            }),
+    },
+    {
+        label: '⚠️  Warning Toast',
+        color: '#F59E0B',
+        action: (toast) =>
+            toast.warning('Only 2 GB of storage remaining on your device.', {
+                title: 'Low Storage',
+                duration: 3500,
+            }),
+    },
+    {
+        label: '⏳  Loading Toast',
+        color: '#6366F1',
+        action: (toast) => {
+            const id = toast.show(
+                React.createElement(
+                    require('./src/components/LoadingToast').default,
+                    { message: 'Processing your request...' }
+                ),
+                { duration: Infinity }
+            );
+            setTimeout(() => toast.dismiss(id), 3000);
+        },
+    },
+    {
+        label: '🎉  Emoji Toast',
+        color: '#8B5CF6',
+        action: (toast) =>
+            toast.emoji('You completed the onboarding tutorial!', '🎉', {
+                title: 'Achievement Unlocked',
+                duration: 4000,
+            }),
+    },
+    {
+        label: '🔄  Promise Toast',
+        color: '#EC4899',
+        action: (toast) => {
+            const fakePromise = new Promise((resolve) =>
+                setTimeout(() => resolve({ name: 'Mukesh' }), 2000)
+            );
+            toast.promise(fakePromise, {
+                loading: 'Saving your profile...',
+                success: 'Profile saved successfully!',
+                error: 'Failed to save profile.',
+            });
+        },
+    },
+    {
+        label: '📌  Message Only (no title)',
+        color: '#6B7280',
+        action: (toast) =>
+            toast.success('This toast has no title — just a message.', {
+                duration: 3000,
+            }),
+    },
+    {
+        label: '⬇️  Bottom Position',
+        color: '#0EA5E9',
+        action: (toast) =>
+            toast.info('This appears at the bottom!', {
+                title: 'Bottom Toast',
+                position: 'bottom',
+                duration: 3000,
+            }),
+    },
+    {
+        label: '🧹  Dismiss All',
+        color: '#374151',
+        action: (toast) => toast.dismissAll(),
+    },
+];
+
+const ExampleApp = () => {
+    const toast = useToast();
+
+    return (
+        <>
+            <StatusBar barStyle="dark-content" />
+            <SafeAreaView style={styles.safe}>
+                <ScrollView contentContainerStyle={styles.scrollContent}>
+                    <Text style={styles.heading}>🍞 rn-toastify</Text>
+                    <Text style={styles.subheading}>v2.0 — Demo</Text>
+                    <View style={styles.grid}>
+                        {BUTTON_DATA.map((btn, i) => (
+                            <TouchableOpacity
+                                key={i}
+                                style={[styles.button, { backgroundColor: btn.color }]}
+                                activeOpacity={0.8}
+                                onPress={() => btn.action(toast)}
+                            >
+                                <Text style={styles.buttonText}>{btn.label}</Text>
+                            </TouchableOpacity>
+                        ))}
+                    </View>
+                </ScrollView>
+            </SafeAreaView>
+            <ToastContainer theme="light" maxVisible={3} />
+        </>
+    );
+};
+
+const styles = StyleSheet.create({
+    safe: {
+        flex: 1,
+        backgroundColor: '#F9FAFB',
+    },
+    scrollContent: {
+        padding: 24,
+        paddingTop: 40,
+    },
+    heading: {
+        fontSize: 32,
+        fontWeight: '800',
+        color: '#111827',
+        textAlign: 'center',
+    },
+    subheading: {
+        fontSize: 16,
+        fontWeight: '500',
+        color: '#6B7280',
+        textAlign: 'center',
+        marginTop: 4,
+        marginBottom: 32,
+    },
+    grid: {
+        gap: 12,
+    },
+    button: {
+        paddingVertical: 16,
+        paddingHorizontal: 20,
+        borderRadius: 12,
+        alignItems: 'center',
+    },
+    buttonText: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: '#FFFFFF',
+    },
+});
+
+export default ExampleApp;