rn-toastify 1.0.8 → 1.0.9

package/README.MD

@@ -5,188 +5,194 @@
 ## Demo
 
 Animated toast message component for React Native.
-![Demo GIF](https://github.com/muku534/react-native-toast/blob/master/docs/Toast.gif)
+ # rn-toastify (react-native-toast)
 
+Animated, customizable toast notifications for React Native with a simple imperative API, responsive animations, and built-in light/dark theme support.
 
+Demo GIF: https://github.com/muku534/react-native-toast/blob/master/docs/Toast.gif
 
-## Features
-
-- 🚀 Imperative API
-- 🎨 Customizable layouts
-- 🔧 Flexible config
-- 📅 Promise Handling
-- 📍 Position Control
-
+## Key features
 
+- Single-root container (mount once at App entry)
+- Imperative hook API (useToast) — call from anywhere in your component tree
+- System-aware light/dark theme with optional forced theme
+- Promise helper (loading → success/error)
+- Custom content and emoji toasts
 
 ## Installation
 
 ```bash
 npm install rn-toastify
 ```
-    
-## Usage
 
-To integrate the toast notifications into your application, follow these steps:
+Or with yarn:
+
+```bash
+yarn add rn-toastify
+```
+
+## Quick start (recommended)
+
+1. Mount a single `ToastContainer` at the top of your app (App.js). This container listens to the package singleton manager and renders toasts from anywhere in the app.
+
+App.js
+
+```javascript
+import React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import MainNavigator from './src/navigation';
+import useToast, { ToastContainer } from 'rn-toastify';
+
+export default function App() {
+  return (
+    <>
+      <NavigationContainer>
+        <MainNavigator />
+      </NavigationContainer>
 
-- Import and Setup
+      {/* Mount once at root. Optionally force theme: <ToastContainer theme="dark" /> */}
+      <ToastContainer />
+    </>
+  );
+}
+```
 
-Start by importing the necessary components and hooks from the library:
+2. Use the `useToast()` hook anywhere in your app (inside React function components):
 
 ```javascript
+import React from 'react';
+import { View, Button } from 'react-native';
 import useToast from 'rn-toastify';
-import ToastContainer from 'rn-toastify';
 
-const AppContent = () => {
-  // Toast functions here
+export default function HomeScreen() {
+  const { success, error, promise, custom, emoji } = useToast();
 
   return (
-    <View style={styles.container}>
-      {/* Buttons to trigger toasts */}
-      <ToastContainer />
+    <View>
+      <Button title="Success" onPress={() => success('Saved successfully')} />
+      <Button title="Error" onPress={() => error('Failed to save', { position: 'top' })} />
     </View>
   );
-};
+}
+```
 
-export default AppContent;
+## API (summary)
 
-```
+`useToast()` returns an object with convenience methods:
 
-- Implementing Toasts
+- `show(content, options)` — show a raw element or text (content can be a React element)
+- `success(messageOrElement, options)`
+- `error(messageOrElement, options)`
+- `custom(element, options)`
+- `emoji(message, emojiChar, options)`
+- `promise(promise, { loading, success, error }, options)`
 
-The useToast hook provides access to different types of toasts. Below are examples of how to implement each toast type:
+### Options (common)
 
-- Success Toast
-```javascript
-import useToast from 'rn-toastify';
+- `duration`: number (milliseconds). Use `Infinity` for persistent toasts.
+- `position`: `'top' | 'bottom' | 'center'`
+- `style`: object — custom style to apply to the toast wrapper
 
+## Examples
+
+Success toast
+
+```javascript
 const { success } = useToast();
+success('Operation successful', { duration: 1500, position: 'top' });
+```
 
-const handleSuccessToast = () => {
-  success('Operation was successful!', { duration: 1500, position: 'top' });
-};
+Promise helper
 
+```javascript
+const { promise } = useToast();
+
+const myPromise = fetch('/api/save');
 
+promise(myPromise, {
+  loading: 'Saving…',
+  success: 'Saved!',
+  error: 'Save failed',
+});
 ```
-- Error Toast
+
+Custom content
+
 ```javascript
-import useToast from 'rn-toastify';
+const { custom } = useToast();
+custom(<MyCustomView />, { duration: 2000 });
+```
 
-const { error } = useToast();
+Emoji toast
 
-const handleErrorToast = () => {
-  error('Something went wrong!', { duration: 1500, position: 'top' });
-};
+```javascript
+const { emoji } = useToast();
+emoji('Great job!', '👍', { duration: 1300 });
+```
+
+## Theme
 
+- By default `ToastContainer` detects the system color scheme (via `Appearance`) and passes a `theme` prop to visual toast components.
+- To force a theme, mount the container with `theme`:
 
+```jsx
+<ToastContainer theme="dark" />
 ```
 
-- Promise Toast
-```javascript
-import useToast from 'rn-toastify';
+If the system color scheme is unavailable, the toast theme defaults to `light`.
 
-const { promise } = useToast();
+## Compatibility & installation notes
 
-const handlePromiseToast = () => {
-  const myPromise = new Promise((resolve, reject) => {
-    setTimeout(() => {
-      resolve();
-      // reject();
-    }, 1500);
-  });
-
-  promise(myPromise, {
-    loading: 'Loading...',
-    success: 'Promise resolved!',
-    error: 'Promise rejected!',
-  });
-};
+- Peer dependencies: `react`, `react-native`, `react-native-reanimated` (v2+), `lottie-react-native` (if using animations). Install and link those in your app. See `package.json`.
+- Reanimated setup: add `react-native-reanimated/plugin` to `babel.config.js` as the last plugin.
+- iOS: run `cd ios && pod install` on macOS after installing native dependencies.
 
+## Import styles
 
-```
+This package exports a default `useToast` hook and named exports. Both of the following work:
 
-- Custom Toast
 ```javascript
-import React from 'react';
-import { View, Text, Image, StyleSheet } from 'react-native';
-import useToast from 'rn-toastify';
+// ES default + named
+import useToast, { ToastContainer } from 'rn-toastify';
 
-const { custom } = useToast();
+// CommonJS
+const rnToastify = require('rn-toastify');
+const useToast = rnToastify.useToast || rnToastify.default;
+const { ToastContainer } = rnToastify;
+```
 
-const handleCustomToast = () => {
-  custom(
-    <View style={styles.customContent}>
-      <Image
-        style={styles.image}
-        source={{
-          uri: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixqx=6GHAjsWpt9&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.2&w=160&h=160&q=80',
-        }}
-      />
-      <View style={styles.textContainer}>
-        <Text style={styles.customText}>Emilia Gates</Text>
-        <Text style={styles.customSubText}>Sure! 8:30pm works great!</Text>
-      </View>
-    </View>,
-    { duration: 1500, position: 'top' }
-  );
-};
+## Troubleshooting
 
-const styles = StyleSheet.create({
-  customContent: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  image: {
-    width: 50,
-    height: 50,
-    borderRadius: 25,
-  },
-  textContainer: {
-    marginLeft: 10,
-  },
-  customText: {
-    fontWeight: 'bold',
-  },
-  customSubText: {
-    color: 'gray',
-  },
-});
+- Crash on app start / `_rnToastify.default is not a function`:
+  - Clear Metro cache and rebuild: `npx react-native start --reset-cache` and rebuild the app.
+  - Ensure your app resolves the package's `index.js` correctly (this package exports a CommonJS-friendly entry to avoid interop issues).
 
-```
+- Reanimated-related errors:
+  - Add the Reanimated babel plugin and rebuild the app. See Reanimated installation docs.
 
-- Emoji Toast
-```javascript
-import useToast from 'rn-toastify';
+- Lottie errors on iOS:
+  - Run `cd ios && pod install` and rebuild from Xcode.
 
-const { emoji } = useToast();
+- Toasts not showing:
+  - Make sure `ToastContainer` is mounted once at the app root.
+  - Ensure native peer dependencies are installed and app rebuilt.
 
-const handleEmojiToast = () => {
-  emoji('Great job!', '👍', { duration: 1500, position: 'top' });
-};
+## Publishing & versioning
 
-```
+When you're ready to release this change to npm:
 
-- Full Example
+1. Update the package version in `package.json` (or run `npm version patch|minor|major`).
+2. Run tests and build (if any): `npm test`.
+3. Pack and inspect: `npm pack`.
+4. Publish: `npm publish --access public` (make sure you're logged in via `npm login`).
 
-Here's a complete example to demonstrate how all the toast types can be implemented within a single component:
+## Contributing
 
-```javascript
-import React from 'react';
-import { StyleSheet, View, Button } from 'react-native';
-import useToast from 'rn-toastify';
-import ToastContainer from 'rn-toastify';
+PRs welcome. Please open an issue if you find bugs or want features like scoped containers, configurable color tokens, or example apps.
 
-const AppContent = () => {
-  const { success, error, promise, custom, emoji } = useToast();
+## License
 
-  return (
-    <View style={styles.container}>
-      <Button title="Show Success Toast" onPress={() => success('Operation was successful!', { duration: 1500, position: 'top' })} />
-      <Button title="Show Error Toast" onPress={() => error('Something went wrong!', { duration: 1500, position: 'top' })} />
-      <Button title="Show Promise Toast" onPress={() => {
-        const myPromise = new Promise((resolve) => setTimeout(resolve, 1500));
-        promise(myPromise, { loading: 'Loading...', success: 'Promise resolved!', error: 'Promise rejected!' });
-      }} />
+MIT
       <Button title="Show Custom Toast" onPress={() => custom(
         <View style={styles.customContent}>
           <Text>Custom Toast Content</Text>
@@ -216,6 +222,11 @@ export default AppContent;
 ```
 This example integrates multiple toast types and demonstrates how to trigger each one. It also includes the necessary ToastContainer to display the toasts.
 
+Theme and single-root notes
+- Mount `ToastContainer` once at the app root (recommended). The container detects the system color scheme by default and passes a `theme` prop to all toast components.
+- To force a theme, pass `theme="dark"` or `theme="light"` to `<ToastContainer />`.
+- If the system color scheme is unavailable, the toast theme defaults to `light`.
+
 
 ## API Reference
 

package/index.js

@@ -1,8 +1,31 @@
-export { default as toast } from './src/Toast';
-export { default as useToast } from './src/hooks/useToast';
-export { default as ToastContainer } from './src/context/ToastContainer';
-export { SuccessToast } from './src/components/SuccessToast';
-export { CustomeToast } from './src/components/CustomeToast';
-export { EmojiToast } from './src/components/EmojiToast';
-export { ErrorToast } from './src/components/ErrorToast';
-export { LoadingToast } from './src/components/LoadingToast';
+ // CommonJS-friendly entry to avoid default/import interop issues with Metro in some RN versions
+// We attempt to require modules and use .default if present (handles transpiled ESM)
+const _useToastMod = require('./src/hooks/useToast');
+const _toastMod = require('./src/Toast');
+const _containerMod = require('./src/context/ToastContainer');
+const _successMod = require('./src/components/SuccessToast');
+const _customeMod = require('./src/components/CustomeToast');
+const _emojiMod = require('./src/components/EmojiToast');
+const _errorMod = require('./src/components/ErrorToast');
+const _loadingMod = require('./src/components/LoadingToast');
+
+const useToast = (_useToastMod && _useToastMod.__esModule) ? _useToastMod.default : _useToastMod;
+const Toast = (_toastMod && _toastMod.__esModule) ? _toastMod.default : _toastMod;
+const ToastContainer = (_containerMod && _containerMod.__esModule) ? _containerMod.default : _containerMod;
+const SuccessToast = (_successMod && _successMod.__esModule) ? _successMod.default : _successMod;
+const CustomeToast = (_customeMod && _customeMod.__esModule) ? _customeMod.default : _customeMod;
+const EmojiToast = (_emojiMod && _emojiMod.__esModule) ? _emojiMod.default : _emojiMod;
+const ErrorToast = (_errorMod && _errorMod.__esModule) ? _errorMod.default : _errorMod;
+const LoadingToast = (_loadingMod && _loadingMod.__esModule) ? _loadingMod.default : _loadingMod;
+
+// Export for both require() and import syntax
+module.exports = useToast;
+module.exports.default = useToast;
+module.exports.useToast = useToast;
+module.exports.Toast = Toast;
+module.exports.ToastContainer = ToastContainer;
+module.exports.SuccessToast = SuccessToast;
+module.exports.CustomeToast = CustomeToast;
+module.exports.EmojiToast = EmojiToast;
+module.exports.ErrorToast = ErrorToast;
+module.exports.LoadingToast = LoadingToast;

package/package.json

@@ -1,44 +1,44 @@
-{
-  "name": "rn-toastify",
-  "version": "1.0.8",
-  "description": "A customizable and performant toast notification library for React Native, featuring smooth animations, swipe gestures, and flexible styling options.",
-  "main": "index.js",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/muku534/react-native-toast"
-  },
-  "homepage": "https://github.com/muku534/react-native-toast#readme",
-  "scripts": {
-    "test": "jest"
-  },
-  "keywords": [
-    "react-native",
-    "toast",
-    "react-native-toastify",
-    "react-native-toast",
-    "react-native-toast-message",
-    "rn-toastify",
-    "alert",
-    "notification",
-    "library"
-  ],
-  "author": "Mukesh Prajapati",
-  "license": "MIT",
-  "peerDependencies": {
-    "react": ">=16.8.0 <19.0.0",
-    "react-native": ">=0.60.0 <1.0.0",
-    "react-native-reanimated": ">=2.0.0 <4.0.0",
-    "lottie-react-native": ">=3.0.0 <7.0.0"
-  },
-  "dependencies": {
-    "events": "^3.3.0"
-  },
-  "devDependencies": {
-    "@testing-library/jest-native": "^5.4.3",
-    "@testing-library/react-native": "^12.5.2",
-    "@types/jest": "^28.1.0",
-    "@types/react-native": "^0.67.3",
-    "jest": "^28.1.0",
-    "react-test-renderer": "^17.0.2"
-  }
+{
+  "name": "rn-toastify",
+  "version": "1.0.9",
+  "description": "A customizable and performant toast notification library for React Native, featuring smooth animations, swipe gestures, and flexible styling options.",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/muku534/react-native-toast"
+  },
+  "homepage": "https://github.com/muku534/react-native-toast#readme",
+  "scripts": {
+    "test": "jest"
+  },
+  "keywords": [
+    "react-native",
+    "toast",
+    "react-native-toastify",
+    "react-native-toast",
+    "react-native-toast-message",
+    "rn-toastify",
+    "alert",
+    "notification",
+    "library"
+  ],
+  "author": "Mukesh Prajapati",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=16.8.0 <19.0.0",
+    "react-native": ">=0.60.0 <1.0.0",
+    "react-native-reanimated": ">=2.0.0 <5.0.0",
+    "lottie-react-native": ">=3.0.0 <9.0.0"
+  },
+  "dependencies": {
+    "events": "^3.3.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-native": "^5.4.3",
+    "@testing-library/react-native": "^12.5.2",
+    "@types/jest": "^28.1.0",
+    "@types/react-native": "^0.67.3",
+    "jest": "^28.1.0",
+    "react-test-renderer": "^17.0.2"
+  }
 }

package/src/Toast.js

@@ -9,7 +9,7 @@ import Animated, {
     Easing,
 } from 'react-native-reanimated';
 
-const Toast = ({ visible, duration, position, children, onHide, style }) => {
+const Toast = ({ visible, duration, position, children, onHide, style, theme }) => {
     const opacity = useSharedValue(0);
     const translateY = useSharedValue(position === 'top' ? -50 : 50);
     const translateX = useSharedValue(0);
@@ -77,12 +77,20 @@ const Toast = ({ visible, duration, position, children, onHide, style }) => {
 
     if (!visible) return null;
 
+    // If children is a React element, inject theme prop; otherwise render as-is.
+    const renderContent = () => {
+        if (React.isValidElement(children)) {
+            return React.cloneElement(children, { theme });
+        }
+        return children;
+    };
+
     return (
         <Animated.View
             {...panResponder.panHandlers}
             style={[styles.container, animatedStyle, positionStyle, style]}
         >
-            {children}
+            {renderContent()}
         </Animated.View>
     );
 };

package/src/components/CustomeToast.js

@@ -5,9 +5,11 @@ import {
     widthPercentageToDP as wp,
 } from '../utils/Pixel/Index';
 
-const CustomToast = ({ content }) => {
+const CustomToast = ({ content, theme = 'light' }) => {
+    const isDark = theme === 'dark';
+    const bg = isDark ? '#111827' : '#FFFFFF';
     return (
-        <View style={styles.customToast}>
+        <View style={[styles.customToast, { backgroundColor: bg }]}>
             {content}
         </View>
     );

package/src/components/EmojiToast.js

@@ -5,10 +5,14 @@ import {
     widthPercentageToDP as wp,
 } from '../utils/Pixel/Index';
 
-const EmojiToast = ({ message, emoji }) => {
+const EmojiToast = ({ message, emoji, theme = 'light' }) => {
+    const isDark = theme === 'dark';
+    const bg = isDark ? '#111827' : '#F7F7FC';
+    const textColor = isDark ? '#F3F4F6' : 'black';
+
     return (
-        <View style={styles.emojiToast}>
-            <Text style={styles.text}>{emoji} {message}</Text>
+        <View style={[styles.emojiToast, { backgroundColor: bg }]}>
+            <Text style={[styles.text, { color: textColor }]}>{emoji} {message}</Text>
         </View>
     );
 }

package/src/components/ErrorToast.js

@@ -7,9 +7,13 @@ import {
     widthPercentageToDP as wp,
 } from '../utils/Pixel/Index';
 
-const ErrorToast = ({ message }) => {
+const ErrorToast = ({ message, theme = 'light' }) => {
+    const isDark = theme === 'dark';
+    const containerBg = isDark ? '#111827' : '#F7F7FC';
+    const textColor = isDark ? '#FEE2E2' : '#991B1B';
+
     return (
-        <View style={styles.container}>
+        <View style={[styles.container, { backgroundColor: containerBg }]}>
             <LottieView
                 source={require('../../assets/animated_Icon/ErrorAnimation.json')}  // Replace with your success Lottie animation path
                 autoPlay
@@ -17,7 +21,7 @@ const ErrorToast = ({ message }) => {
                 speed={1.5}
                 style={styles.lottie}
             />
-            <Text style={styles.text}>{message}</Text>
+            <Text style={[styles.text, { color: textColor }]}>{message}</Text>
         </View>
     );
 }

package/src/components/LoadingToast.js

@@ -6,10 +6,14 @@ import {
     widthPercentageToDP as wp,
 } from '../utils/Pixel/Index';
 
-const LoadingToast = ({ message }) => {
+const LoadingToast = ({ message, theme = 'light' }) => {
+    const isDark = theme === 'dark';
+    const bg = isDark ? '#111827' : '#FFFFFF';
+    const indicatorColor = isDark ? '#9CA3AF' : '#6B7280';
+
     return (
-        <View style={styles.toast}>
-            <ActivityIndicator size="large" color={'#a9a9a9'} />
+        <View style={[styles.toast, { backgroundColor: bg }]}>
+            <ActivityIndicator size="small" color={indicatorColor} />
             {/** <Text style={styles.text}>{message}</Text>  */}
         </View>
     );

package/src/components/SuccessToast.js

@@ -6,9 +6,13 @@ import {
     widthPercentageToDP as wp,
 } from '../utils/Pixel/Index';
 
-const SuccessToast = ({ message }) => {
+const SuccessToast = ({ message, theme = 'light' }) => {
+    const isDark = theme === 'dark';
+    const containerBg = isDark ? '#111827' : '#F7F7FC';
+    const textColor = isDark ? '#F3F4F6' : '#064E3B';
+
     return (
-        <View style={styles.container}>
+        <View style={[styles.container, { backgroundColor: containerBg }]}>
             <LottieView
                 source={require('../../assets/animated_Icon/SuccessAnimation.json')}  // Replace with your success Lottie animation path
                 autoPlay
@@ -16,7 +20,7 @@ const SuccessToast = ({ message }) => {
                 style={styles.lottie}
                 speed={1.2}
             />
-            <Text style={styles.text}>{message}</Text>
+            <Text style={[styles.text, { color: textColor }]}>{message}</Text>
         </View>
     );
 };
@@ -27,8 +31,8 @@ const styles = StyleSheet.create({
         height: hp(6.8),
         paddingHorizontal: wp(4),
         borderRadius: wp(4),
-        // backgroundColor: '#d2f7d2',
-        backgroundColor: '#F7F7FC',
+            // backgroundColor: '#d2f7d2',
+            backgroundColor: '#F7F7FC',
         alignItems: 'center',
         flexDirection: 'row',
     },

package/src/context/ToastContainer.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View, StyleSheet, Appearance } from 'react-native';
 import Toast from '../Toast';
 import toastManagerInstance from './ToastManager';
 import {
@@ -7,8 +7,9 @@ import {
     widthPercentageToDP as wp,
 } from '../utils/Pixel/Index';
 
-const ToastContainer = () => {
+const ToastContainer = ({ theme: forcedTheme } = {}) => {
     const [toasts, setToasts] = useState([]);
+    const [theme, setTheme] = useState(forcedTheme ?? (Appearance.getColorScheme() || 'light'));
 
     useEffect(() => {
         const handleShow = (toast) => {
@@ -22,28 +23,37 @@ const ToastContainer = () => {
         toastManagerInstance.on('show', handleShow);
         toastManagerInstance.on('remove', handleRemove);
 
+        let appearanceSub;
+        if (!forcedTheme && Appearance && Appearance.addChangeListener) {
+            appearanceSub = Appearance.addChangeListener(({ colorScheme }) => {
+                setTheme(colorScheme ?? 'light');
+            });
+        }
+
         return () => {
             toastManagerInstance.off('show', handleShow);
             toastManagerInstance.off('remove', handleRemove);
+            if (appearanceSub && appearanceSub.remove) appearanceSub.remove();
         };
     }, []);
 
     // Separate toasts by position
-    const topToasts = toasts.filter(toast => toast.options.position === 'top');
-    const centerToasts = toasts.filter(toast => toast.options.position === 'center');
-    const bottomToasts = toasts.filter(toast => toast.options.position === 'bottom');
+    const topToasts = toasts.filter(toast => toast?.options?.position === 'top');
+    const centerToasts = toasts.filter(toast => toast?.options?.position === 'center');
+    const bottomToasts = toasts.filter(toast => toast?.options?.position === 'bottom');
 
     return (
         <>
             {/* Top positioned toasts */}
-            <View style={styles.topContainer}>
+            <View style={styles.topContainer} pointerEvents="box-none">
                 {topToasts.map((toast, index) => (
                     <Toast
                         key={toast.id}
                         visible={true}
-                        duration={toast.options.duration}
+                        duration={toast?.options?.duration}
                         position="top"
-                        style={[toast.options.style, { top: hp(0.1) + index * 60 }]} // Adjust spacing between top toasts
+                        theme={theme}
+                        style={[toast?.options?.style || {}, { top: hp(0.1) + index * 60 }]} // Adjust spacing between top toasts
                         onHide={() => toastManagerInstance.remove(toast.id)}
                     >
                         {toast.content}
@@ -52,14 +62,15 @@ const ToastContainer = () => {
             </View>
 
             {/* Center positioned toasts */}
-            <View style={styles.centerContainer}>
+            <View style={styles.centerContainer} pointerEvents="box-none">
                 {centerToasts.map((toast, index) => (
                     <Toast
                         key={toast.id}
                         visible={true}
-                        duration={toast.options.duration}
+                        duration={toast?.options?.duration}
                         position="center"
-                        style={[toast.options.style, { marginTop: index * 60 }]} // Adjust spacing between center toasts
+                        theme={theme}
+                        style={[toast?.options?.style || {}, { marginTop: index * 60 }]} // Adjust spacing between center toasts
                         onHide={() => toastManagerInstance.remove(toast.id)}
                     >
                         {toast.content}
@@ -68,14 +79,15 @@ const ToastContainer = () => {
             </View>
 
             {/* Bottom positioned toasts */}
-            <View style={styles.bottomContainer}>
+            <View style={styles.bottomContainer} pointerEvents="box-none">
                 {bottomToasts.map((toast, index) => (
                     <Toast
                         key={toast.id}
                         visible={true}
-                        duration={toast.options.duration}
+                        duration={toast?.options?.duration}
                         position="bottom"
-                        style={[toast.options.style, { bottom: hp(2) + index * 60 }]} // Adjust spacing between bottom toasts
+                        theme={theme}
+                        style={[toast?.options?.style || {}, { bottom: hp(2) + index * 60 }]} // Adjust spacing between bottom toasts
                         onHide={() => toastManagerInstance.remove(toast.id)}
                     >
                         {toast.content}

package/src/context/ToastManager.js

@@ -1,14 +1,16 @@
 import { EventEmitter } from 'events';
 
 class ToastManager extends EventEmitter {
-    show(content, options = {}) {
-        const id = Date.now().toString();
+    // show accepts an optional id so callers (like promise) can control the id lifecycle
+    show(content, options = {}, id = null) {
+        const _id = id ?? Date.now().toString();
         const defaultOptions = {
             duration: 1000,
             position: 'bottom',
             style: {},
         };
-        this.emit('show', { id, content, options: { ...defaultOptions, ...options } });
+        this.emit('show', { id: _id, content, options: { ...defaultOptions, ...options } });
+        return _id;
     }
 
     remove(id) {
@@ -17,7 +19,8 @@ class ToastManager extends EventEmitter {
 
     async promise(promise, { loading, success, error }) {
         const id = Date.now().toString();
-        this.show(loading, { duration: Infinity, position: 'top' });
+        // show the loading toast using the same id so we can remove it later
+        this.show(loading, { duration: Infinity, position: 'top' }, id);
         try {
             await promise;
             this.remove(id);