rn-toastify 1.0.8 → 1.0.10

package/README.MD

@@ -1,273 +1,190 @@
+# React Native Toastify
 
-# react-native-toast
+A highly customizable and performant toast notification library for React Native. Featuring smooth animations, swipe gestures, and flexible styling options.
 
-
-## Demo
-
-Animated toast message component for React Native.
 ![Demo GIF](https://github.com/muku534/react-native-toast/blob/master/docs/Toast.gif)
 
+---
 
+## 🚀 Features
 
-## 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.
 
-- 🚀 Imperative API
-- 🎨 Customizable layouts
-- 🔧 Flexible config
-- 📅 Promise Handling
-- 📍 Position Control
+---
 
+## 📦 Installation
 
-
-## Installation
+Install the package using npm or yarn:
 
 ```bash
 npm install rn-toastify
 ```
-    
-## Usage
-
-To integrate the toast notifications into your application, follow these steps:
-
-- Import and Setup
-
-Start by importing the necessary components and hooks from the library:
-
-```javascript
-import useToast from 'rn-toastify';
-import ToastContainer from 'rn-toastify';
-
-const AppContent = () => {
-  // Toast functions here
-
-  return (
-    <View style={styles.container}>
-      {/* Buttons to trigger toasts */}
-      <ToastContainer />
-    </View>
-  );
-};
 
-export default AppContent;
+Or:
 
+```bash
+yarn add rn-toastify
 ```
 
-- Implementing Toasts
-
-The useToast hook provides access to different types of toasts. Below are examples of how to implement each toast type:
+### Peer Dependencies
 
-- Success Toast
-```javascript
-import useToast from 'rn-toastify';
-
-const { success } = useToast();
+Ensure the following peer dependencies are installed:
 
-const handleSuccessToast = () => {
-  success('Operation was successful!', { duration: 1500, position: 'top' });
-};
+- `react`
+- `react-native`
+- `react-native-reanimated` (v2+)
+- `lottie-react-native`
 
+For iOS, run:
 
+```bash
+cd ios && pod install
 ```
-- Error Toast
-```javascript
-import useToast from 'rn-toastify';
 
-const { error } = useToast();
+---
 
-const handleErrorToast = () => {
-  error('Something went wrong!', { duration: 1500, position: 'top' });
-};
+## 🛠️ Quick Start
 
+### Step 1: Mount the Toast Container
 
-```
+Add the `ToastContainer` to your app's root component (e.g., `App.js`):
 
-- Promise Toast
 ```javascript
-import useToast from 'rn-toastify';
-
-const { promise } = useToast();
-
-const handlePromiseToast = () => {
-  const myPromise = new Promise((resolve, reject) => {
-    setTimeout(() => {
-      resolve();
-      // reject();
-    }, 1500);
-  });
+import React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import MainNavigator from './src/navigation';
+import { ToastContainer } from 'rn-toastify';
 
-  promise(myPromise, {
-    loading: 'Loading...',
-    success: 'Promise resolved!',
-    error: 'Promise rejected!',
-  });
-};
+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:
 
-- Custom Toast
 ```javascript
 import React from 'react';
-import { View, Text, Image, StyleSheet } from 'react-native';
+import { View, Button } from 'react-native';
 import useToast from 'rn-toastify';
 
-const { custom } = useToast();
+export default function HomeScreen() {
+  const { success, error } = useToast();
 
-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' }
+  return (
+    <View>
+      <Button title="Show Success" onPress={() => success('Operation successful!')} />
+      <Button title="Show Error" onPress={() => error('Something went wrong.', { position: 'top' })} />
+    </View>
   );
-};
-
-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',
-  },
-});
-
+}
 ```
 
-- Emoji Toast
-```javascript
-import useToast from 'rn-toastify';
+---
 
-const { emoji } = useToast();
+## 📖 API Reference
 
-const handleEmojiToast = () => {
-  emoji('Great job!', '👍', { duration: 1500, position: 'top' });
-};
+### `useToast` Hook
 
-```
+The `useToast` hook provides the following methods:
 
-- Full Example
+| 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.   |
 
-Here's a complete example to demonstrate how all the toast types can be implemented within a single component:
+### Common Options
 
-```javascript
-import React from 'react';
-import { StyleSheet, View, Button } from 'react-native';
-import useToast from 'rn-toastify';
-import ToastContainer from 'rn-toastify';
+| Option     | Type     | Description                          |
+|------------|----------|--------------------------------------|
+| `duration` | `number` | Duration in milliseconds.            |
+| `position` | `string` | `'top' | 'bottom' | 'center'`.       |
+| `style`    | `object` | Custom styles for the toast wrapper. |
 
-const AppContent = () => {
-  const { success, error, promise, custom, emoji } = useToast();
+### `promise` Method Options
 
-  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!' });
-      }} />
-      <Button title="Show Custom Toast" onPress={() => custom(
-        <View style={styles.customContent}>
-          <Text>Custom Toast Content</Text>
-        </View>, 
-        { duration: 1500, position: 'top' }
-      )} />
-      <Button title="Show Emoji Toast" onPress={() => emoji('Great job!', '👍', { duration: 1500, position: 'top' })} />
-      <ToastContainer />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  customContent: {
-    padding: 10,
-    backgroundColor: '#fff',
-    borderRadius: 5,
-  },
-});
+| Option     | Type     | Description                          |
+|------------|----------|--------------------------------------|
+| `loading`  | `string` | Message during loading.              |
+| `success`  | `string` | Message on success.                  |
+| `error`    | `string` | Message on error.                    |
 
-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.
+---
 
+## 🌈 Examples
 
-## API Reference
+### Success Toast
+
+```javascript
+const { success } = useToast();
+success('Operation successful!', { duration: 1500, position: 'top' });
+```
 
-#### useToast Hook Methods
-All toast methods accept the following parameters:
+### Promise Helper
 
-| Parameter | Type     | Description                |
-| :-------- | :------- | :------------------------- |
-| `message` | `string` | **Required**. The message to display in the toast. |
-| `options` | `object` | **Optional**. Configuration options for the toast (e.g., duration, position). |
+```javascript
+const { promise } = useToast();
 
+const myPromise = fetch('/api/save');
 
-- Methods
+promise(myPromise, {
+  loading: 'Saving…',
+  success: 'Saved successfully!',
+  error: 'Save failed.',
+});
+```
 
-- success : Displays a success toast.
+### Custom Content
 
-- error : Displays an error toast.
+```javascript
+const { custom } = useToast();
+custom(<MyCustomComponent />, { duration: 2000 });
+```
 
-- promise : Handles a promise and displays loading, success, and error toasts based on the promise's state.
+### Emoji Toast
 
-Additional options for promise method:
-| Option | Type     | Description                |
-| :-------- | :------- | :------------------------- |
-| `loading` | `string` | The message to display in the toast. |
-| `success` | `string` | Message to display if the promise resolves. |
-| `error` | `string` | Message to display if the promise is rejected. |
+```javascript
+const { emoji } = useToast();
+emoji('Great job!', '🎉', { duration: 1300 });
+```
 
-- custom
+---
 
-Displays a custom toast with your own content.
+## 🎨 Theme Support
 
-| Parameter | Type     | Description                |
-| :-------- | :------- | :------------------------- |
-| `content` | `element` |  **Required**. React element to render in the toast. |
+- **Automatic**: Detects system theme (light/dark).
+- **Forced**: Pass `theme="light"` or `theme="dark"` to `ToastContainer`.
 
-- emoji
+If the system theme is unavailable, the default is `light`.
 
-Displays a custom toast with your own content.
+---
 
-| Parameter | Type     | Description                |
-| :-------- | :------- | :------------------------- |
-| `emoji` | `string` |  **Required**. The emoji to display alongside the message. |
+## 🐛 Troubleshooting
 
-- options
+### Common Issues
 
-All toast methods accept an options object for configuration:
+- **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`.
 
-| Option | Type     | Description                |
-| :-------- | :------- | :------------------------- |
-| `duration` | `number` |**Optional**. Duration in milliseconds for which the toast is visible. |
-| `position` | `string` | **Optional**. Position of the toast on the screen (top, bottom, center). |
+---
 
-## License
+## 📜 License
 
-[MIT](https://choosealicense.com/licenses/mit/)
+MIT License. See [LICENSE](./LICENSE) for details.

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.10",
+  "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, StatusBar, Platform, SafeAreaView } 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,44 +23,62 @@ 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}>
+            <SafeAreaView
+                style={[
+                    styles.topContainer,
+                    {
+                        top: Platform.OS === 'android' ? StatusBar.currentHeight || 0 : 0,
+                    },
+                ]}
+                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 || {}, { marginTop: index * 60 }]} // Adjust spacing between top toasts
                         onHide={() => toastManagerInstance.remove(toast.id)}
                     >
                         {toast.content}
                     </Toast>
                 ))}
-            </View>
+            </SafeAreaView>
 
             {/* 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 +87,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);