rn-toastify 1.0.9 → 1.0.11

package/README.MD

@@ -1,47 +1,63 @@
+# 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 GIF](https://github.com/muku534/react-native-toast/blob/master/docs/Toast.gif)
 
-## Demo
+---
 
-Animated toast message component for React Native.
- # rn-toastify (react-native-toast)
+## 🚀 Features
 
-Animated, customizable toast notifications for React Native with a simple imperative API, responsive animations, and built-in light/dark theme support.
+- **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.
 
-Demo GIF: https://github.com/muku534/react-native-toast/blob/master/docs/Toast.gif
+---
 
-## Key features
+## 📦 Installation
 
-- 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
+Install the package using npm or yarn:
 
 ```bash
 npm install rn-toastify
 ```
 
-Or with yarn:
+Or:
 
 ```bash
 yarn add rn-toastify
 ```
 
-## Quick start (recommended)
+### 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
+```
+
+---
 
-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.
+## 🛠️ Quick Start
 
-App.js
+### 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 useToast, { ToastContainer } from 'rn-toastify';
+import { ToastContainer } from 'rn-toastify';
 
 export default function App() {
   return (
@@ -49,15 +65,15 @@ export default function App() {
       <NavigationContainer>
         <MainNavigator />
       </NavigationContainer>
-
-      {/* Mount once at root. Optionally force theme: <ToastContainer theme="dark" /> */}
-      <ToastContainer />
+      <ToastContainer theme="dark" /> {/* Optional: Force theme */}
     </>
   );
 }
 ```
 
-2. Use the `useToast()` hook anywhere in your app (inside React function components):
+### Step 2: Use the `useToast` Hook
+
+Call toast methods anywhere in your app:
 
 ```javascript
 import React from 'react';
@@ -65,44 +81,62 @@ import { View, Button } from 'react-native';
 import useToast from 'rn-toastify';
 
 export default function HomeScreen() {
-  const { success, error, promise, custom, emoji } = useToast();
+  const { success, error } = useToast();
 
   return (
     <View>
-      <Button title="Success" onPress={() => success('Saved successfully')} />
-      <Button title="Error" onPress={() => error('Failed to save', { position: 'top' })} />
+      <Button title="Show Success" onPress={() => success('Operation successful!')} />
+      <Button title="Show Error" onPress={() => error('Something went wrong.', { position: 'top' })} />
     </View>
   );
 }
 ```
 
-## API (summary)
+---
+
+## 📖 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.   |
 
-`useToast()` returns an object with convenience methods:
+### Common Options
 
-- `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)`
+| Option     | Type     | Description                          |
+|------------|----------|--------------------------------------|
+| `duration` | `number` | Duration in milliseconds.            |
+| `position` | `string` | `'top' | 'bottom' | 'center'`.       |
+| `style`    | `object` | Custom styles for the toast wrapper. |
 
-### Options (common)
+### `promise` Method Options
 
-- `duration`: number (milliseconds). Use `Infinity` for persistent toasts.
-- `position`: `'top' | 'bottom' | 'center'`
-- `style`: object — custom style to apply to the toast wrapper
+| Option     | Type     | Description                          |
+|------------|----------|--------------------------------------|
+| `loading`  | `string` | Message during loading.              |
+| `success`  | `string` | Message on success.                  |
+| `error`    | `string` | Message on error.                    |
 
-## Examples
+---
 
-Success toast
+## 🌈 Examples
+
+### Success Toast
 
 ```javascript
 const { success } = useToast();
-success('Operation successful', { duration: 1500, position: 'top' });
+success('Operation successful!', { duration: 1500, position: 'top' });
 ```
 
-Promise helper
+### Promise Helper
 
 ```javascript
 const { promise } = useToast();
@@ -111,174 +145,46 @@ const myPromise = fetch('/api/save');
 
 promise(myPromise, {
   loading: 'Saving…',
-  success: 'Saved!',
-  error: 'Save failed',
+  success: 'Saved successfully!',
+  error: 'Save failed.',
 });
 ```
 
-Custom content
+### Custom Content
 
 ```javascript
 const { custom } = useToast();
-custom(<MyCustomView />, { duration: 2000 });
+custom(<MyCustomComponent />, { duration: 2000 });
 ```
 
-Emoji toast
+### Emoji Toast
 
 ```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" />
-```
-
-If the system color scheme is unavailable, the toast theme defaults to `light`.
-
-## Compatibility & installation notes
-
-- 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:
-
-```javascript
-// ES default + named
-import useToast, { ToastContainer } from 'rn-toastify';
-
-// CommonJS
-const rnToastify = require('rn-toastify');
-const useToast = rnToastify.useToast || rnToastify.default;
-const { ToastContainer } = rnToastify;
+emoji('Great job!', '🎉', { duration: 1300 });
 ```
 
-## Troubleshooting
-
-- 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.
-
-- Lottie errors on iOS:
-  - Run `cd ios && pod install` and rebuild from Xcode.
-
-- Toasts not showing:
-  - Make sure `ToastContainer` is mounted once at the app root.
-  - Ensure native peer dependencies are installed and app rebuilt.
-
-## Publishing & versioning
-
-When you're ready to release this change to npm:
-
-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`).
-
-## Contributing
-
-PRs welcome. Please open an issue if you find bugs or want features like scoped containers, configurable color tokens, or example apps.
-
-## License
-
-MIT
-      <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,
-  },
-});
-
-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
-
-#### useToast Hook Methods
-All toast methods accept the following parameters:
-
-| 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). |
-
-
-- Methods
-
-- success : Displays a success toast.
-
-- error : Displays an error toast.
-
-- promise : Handles a promise and displays loading, success, and error toasts based on the promise's state.
-
-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. |
-
-- 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,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.9",
+  "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 } from 'react-native';
+import { View, StyleSheet, Appearance, StatusBar, Platform } from 'react-native';
 import Toast from '../Toast';
 import toastManagerInstance from './ToastManager';
 import {
@@ -35,17 +35,31 @@ 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 */}
-            <View style={styles.topContainer} pointerEvents="box-none">
+            <View
+                style={[styles.topContainer, { top: topMargin + hp(1) }]}
+                pointerEvents="box-none"
+            >
                 {topToasts.map((toast, index) => (
                     <Toast
                         key={toast.id}
@@ -53,7 +67,7 @@ const ToastContainer = ({ theme: forcedTheme } = {}) => {
                         duration={toast?.options?.duration}
                         position="top"
                         theme={theme}
-                        style={[toast?.options?.style || {}, { top: hp(0.1) + index * 60 }]} // Adjust spacing between top toasts
+                        style={[toast?.options?.style || {}, { marginTop: index * (hp(7) + hp(1)) }]}
                         onHide={() => toastManagerInstance.remove(toast.id)}
                     >
                         {toast.content}
@@ -70,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}
@@ -87,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}
@@ -101,7 +115,6 @@ const ToastContainer = ({ theme: forcedTheme } = {}) => {
 const styles = StyleSheet.create({
     topContainer: {
         position: 'absolute',
-        top: 0,
         left: 0,
         right: 0,
         zIndex: 9999,
@@ -111,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',
@@ -130,4 +142,4 @@ const styles = StyleSheet.create({
     },
 });
 
-export default React.memo(ToastContainer);
+export default React.memo(ToastContainer);