rn-toastify 1.0.10 → 1.0.11

package/index.js

@@ -1,26 +1,27 @@
- // 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');
+// Fixed index.js - Simplified export structure
+const useToastModule = require('./src/hooks/useToast');
+const ToastModule = require('./src/Toast');
+const ToastContainerModule = require('./src/context/ToastContainer');
+const SuccessToastModule = require('./src/components/SuccessToast');
+const CustomeToastModule = require('./src/components/CustomeToast');
+const EmojiToastModule = require('./src/components/EmojiToast');
+const ErrorToastModule = require('./src/components/ErrorToast');
+const LoadingToastModule = 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;
+// Extract default exports properly
+const useToast = useToastModule.default || useToastModule;
+const Toast = ToastModule.default || ToastModule;
+const ToastContainer = ToastContainerModule.default || ToastContainerModule;
+const SuccessToast = SuccessToastModule.default || SuccessToastModule;
+const CustomeToast = CustomeToastModule.default || CustomeToastModule;
+const EmojiToast = EmojiToastModule.default || EmojiToastModule;
+const ErrorToast = ErrorToastModule.default || ErrorToastModule;
+const LoadingToast = LoadingToastModule.default || LoadingToastModule;
 
-// Export for both require() and import syntax
+// Primary default export
 module.exports = useToast;
-module.exports.default = useToast;
+
+// Named exports
 module.exports.useToast = useToast;
 module.exports.Toast = Toast;
 module.exports.ToastContainer = ToastContainer;
@@ -28,4 +29,7 @@ module.exports.SuccessToast = SuccessToast;
 module.exports.CustomeToast = CustomeToast;
 module.exports.EmojiToast = EmojiToast;
 module.exports.ErrorToast = ErrorToast;
-module.exports.LoadingToast = LoadingToast;
+module.exports.LoadingToast = LoadingToast;
+
+// Also support default property for ES6 imports
+module.exports.default = useToast;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-toastify",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "A customizable and performant toast notification library for React Native, featuring smooth animations, swipe gestures, and flexible styling options.",
   "main": "index.js",
   "repository": {
@@ -25,7 +25,7 @@
   "author": "Mukesh Prajapati",
   "license": "MIT",
   "peerDependencies": {
-    "react": ">=16.8.0 <19.0.0",
+    "react": ">=16.8.0 <20.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"

package/src/context/ToastContainer.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { View, StyleSheet, Appearance, StatusBar, Platform, SafeAreaView } from 'react-native';
+import { View, StyleSheet, Appearance, StatusBar, Platform } from 'react-native';
 import Toast from '../Toast';
 import toastManagerInstance from './ToastManager';
 import {
@@ -35,23 +35,29 @@ const ToastContainer = ({ theme: forcedTheme } = {}) => {
             toastManagerInstance.off('remove', handleRemove);
             if (appearanceSub && appearanceSub.remove) appearanceSub.remove();
         };
-    }, []);
+    }, [forcedTheme]);
+
+    // Calculate safe top margin for status bar
+    const getTopMargin = () => {
+        if (Platform.OS === 'android') {
+            return StatusBar.currentHeight || 0;
+        }
+        // For iOS, use a default safe area top margin
+        return 44; // Standard iOS notch/status bar height
+    };
 
     // 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 topMargin = getTopMargin();
+
     return (
         <>
             {/* Top positioned toasts */}
-            <SafeAreaView
-                style={[
-                    styles.topContainer,
-                    {
-                        top: Platform.OS === 'android' ? StatusBar.currentHeight || 0 : 0,
-                    },
-                ]}
+            <View
+                style={[styles.topContainer, { top: topMargin + hp(1) }]}
                 pointerEvents="box-none"
             >
                 {topToasts.map((toast, index) => (
@@ -61,13 +67,13 @@ const ToastContainer = ({ theme: forcedTheme } = {}) => {
                         duration={toast?.options?.duration}
                         position="top"
                         theme={theme}
-                        style={[toast?.options?.style || {}, { marginTop: index * 60 }]} // Adjust spacing between top toasts
+                        style={[toast?.options?.style || {}, { marginTop: index * (hp(7) + hp(1)) }]}
                         onHide={() => toastManagerInstance.remove(toast.id)}
                     >
                         {toast.content}
                     </Toast>
                 ))}
-            </SafeAreaView>
+            </View>
 
             {/* Center positioned toasts */}
             <View style={styles.centerContainer} pointerEvents="box-none">
@@ -78,7 +84,7 @@ const ToastContainer = ({ theme: forcedTheme } = {}) => {
                         duration={toast?.options?.duration}
                         position="center"
                         theme={theme}
-                        style={[toast?.options?.style || {}, { marginTop: index * 60 }]} // Adjust spacing between center toasts
+                        style={[toast?.options?.style || {}, { marginTop: index * (hp(7) + hp(1)) }]}
                         onHide={() => toastManagerInstance.remove(toast.id)}
                     >
                         {toast.content}
@@ -95,7 +101,7 @@ const ToastContainer = ({ theme: forcedTheme } = {}) => {
                         duration={toast?.options?.duration}
                         position="bottom"
                         theme={theme}
-                        style={[toast?.options?.style || {}, { bottom: hp(2) + index * 60 }]} // Adjust spacing between bottom toasts
+                        style={[toast?.options?.style || {}, { bottom: hp(2) + index * (hp(7) + hp(1)) }]}
                         onHide={() => toastManagerInstance.remove(toast.id)}
                     >
                         {toast.content}
@@ -109,7 +115,6 @@ const ToastContainer = ({ theme: forcedTheme } = {}) => {
 const styles = StyleSheet.create({
     topContainer: {
         position: 'absolute',
-        top: 0,
         left: 0,
         right: 0,
         zIndex: 9999,
@@ -119,13 +124,12 @@ const styles = StyleSheet.create({
     centerContainer: {
         position: 'absolute',
         top: '50%',
-        bottom: '50%',
         left: 0,
         right: 0,
         zIndex: 9999,
         pointerEvents: 'box-none',
         alignItems: 'center',
-        transform: [{ translateY: -30 }] // Center the first toast vertically
+        transform: [{ translateY: -hp(3.5) }]
     },
     bottomContainer: {
         position: 'absolute',
@@ -138,4 +142,4 @@ const styles = StyleSheet.create({
     },
 });
 
-export default React.memo(ToastContainer);
+export default React.memo(ToastContainer);