react-native-modern-toast 0.1.0

package/README.md

@@ -0,0 +1,296 @@
+# react-native-flex-toast
+
+A lightweight, flexible toast notification component for React Native with support for multiple variants, custom icons, and images. Easy to integrate and highly customizable.
+
+## Features
+
+✨ **Multiple Variants** - Success, Error, Warning, Info, and Modern toast styles  
+🖼️ **Icon Support** - Use custom React nodes or image sources (URI or require)  
+⏱️ **Customizable Duration** - Control how long toasts are displayed  
+📍 **Flexible Positioning** - Show toasts at top or bottom of screen  
+🎨 **Custom Styling** - Override colors, height, and container styles  
+📦 **Lightweight** - Minimal dependencies, TypeScript support  
+🪝 **Hook-based API** - Simple `useToast()` hook for showing notifications  
+
+## Installation
+
+```bash
+npm install react-native-flex-toast
+# or
+yarn add react-native-flex-toast
+```
+
+## Quick Start
+
+### 1. Wrap Your App with ToastProvider
+
+```tsx
+import React from 'react';
+import { View } from 'react-native';
+import { ToastProvider } from 'react-native-flex-toast';
+
+export default function App() {
+  return (
+    <ToastProvider>
+      <YourAppContent />
+    </ToastProvider>
+  );
+}
+```
+
+### 2. Use the Hook to Show Toasts
+
+```tsx
+import { useToast } from 'react-native-flex-toast';
+import { View, Button } from 'react-native';
+
+export function MyComponent() {
+  const { showToast } = useToast();
+
+  const handleSuccess = () => {
+    showToast({
+      message: 'Action completed successfully!',
+      variant: 'success',
+    });
+  };
+
+  return (
+    <View>
+      <Button title="Show Toast" onPress={handleSuccess} />
+    </View>
+  );
+}
+```
+
+## Usage Examples
+
+### Basic Toast
+
+```tsx
+const { showToast } = useToast();
+
+showToast({
+  message: 'Hello World!',
+  variant: 'info',
+});
+```
+
+### Toast with Image Icon (URI)
+
+```tsx
+showToast({
+  message: 'Profile saved',
+  variant: 'success',
+  iconSource: { uri: 'https://example.com/check.png' },
+});
+```
+
+### Toast with Local Image
+
+```tsx
+showToast({
+  message: 'Download complete',
+  variant: 'success',
+  iconSource: require('./assets/download-icon.png'),
+});
+```
+
+### Toast with Custom React Node Icon
+
+```tsx
+import { Image, Text } from 'react-native';
+
+showToast({
+  message: 'Custom icon toast',
+  variant: 'info',
+  icon: (
+    <Image 
+      source={{ uri: 'https://example.com/avatar.png' }}
+      style={{ width: 28, height: 28, borderRadius: 14 }}
+    />
+  ),
+});
+```
+
+### Toast with Custom Duration
+
+```tsx
+showToast({
+  message: 'This will stay for 5 seconds',
+  variant: 'warning',
+  duration: 5000, // 5000ms
+});
+```
+
+### Toast with Custom Position
+
+```tsx
+showToast({
+  message: 'Bottom positioned toast',
+  variant: 'error',
+  position: 'bottom', // or 'top' (default)
+});
+```
+
+### Toast with Custom Colors & Styles
+
+```tsx
+showToast({
+  message: 'Custom styled toast',
+  backgroundColor: '#FF6B6B',
+  height: 70,
+  iconSource: { uri: 'https://example.com/icon.png' },
+});
+```
+
+### Complete Example with All Options
+
+```tsx
+showToast({
+  message: 'Profile updated successfully',
+  variant: 'success',
+  position: 'top',
+  duration: 4000,
+  icon: <Text style={{ fontSize: 20 }}>✓</Text>,
+  height: 65,
+  backgroundColor: '#10B981',
+  iconStyle: { width: 24, height: 24 },
+  containerStyle: { borderWidth: 1, borderColor: '#059669' },
+});
+```
+
+## API Reference
+
+### ToastProvider
+
+Wraps your app to provide toast functionality.
+
+```tsx
+<ToastProvider>
+  {children}
+</ToastProvider>
+```
+
+### useToast Hook
+
+Returns an object with the `showToast` function.
+
+```tsx
+const { showToast } = useToast();
+```
+
+### showToast(options: ToastOptions)
+
+Displays a toast notification with the provided options.
+
+**Parameters:**
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `message` | `string` | **Required** | The text content of the toast |
+| `variant` | `'success' \| 'error' \| 'warning' \| 'info' \| 'modern'` | `'info'` | Visual style/color variant |
+| `position` | `'top' \| 'bottom'` | `'top'` | Vertical position on screen |
+| `duration` | `number` | `3000` | How long to display (milliseconds) |
+| `backgroundColor` | `string` | - | Override the variant color |
+| `height` | `number` | `60` | Toast container height |
+| `icon` | `React.ReactNode` | - | Custom React component for icon |
+| `iconSource` | `ImageSourcePropType` | - | Image source (URI or require) |
+| `iconStyle` | `ImageStyle` | - | Styling for the image icon |
+| `containerStyle` | `ViewStyle` | - | Custom styles for toast container |
+
+## Toast Variants
+
+Each variant has a default color:
+
+| Variant | Color | Hex Code |
+|---------|-------|----------|
+| `success` | Green | `#22C55E` |
+| `error` | Red | `#EF4444` |
+| `warning` | Amber | `#F59E0B` |
+| `info` | Blue | `#3B82F6` |
+| `modern` | Dark Gray | `#111827` |
+
+## Variant Components
+
+The package also exports pre-styled variant components:
+
+```tsx
+import { SuccessToast, ErrorToast, WarningToast, InfoToast, ModernToast } from 'react-native-flex-toast';
+
+// These are pre-configured with their respective colors
+```
+
+## TypeScript Support
+
+Full TypeScript support with exported types:
+
+```tsx
+import type { ToastOptions, ToastProps, ToastVariant } from 'react-native-flex-toast';
+```
+
+## Project Structure
+
+```
+react-native-flex-toast/
+├── src/
+│   ├── Toast.tsx                 # Core Toast component
+│   ├── ToastProvider.tsx          # Provider and useToast hook
+│   ├── index.ts                   # Exports
+│   └── variants/
+│       ├── SuccessToast.tsx       # Success variant wrapper
+│       ├── ErrorToast.tsx         # Error variant wrapper
+│       ├── WarningToast.tsx       # Warning variant wrapper
+│       ├── InfoToast.tsx          # Info variant wrapper
+│       └── ModernToast.tsx        # Modern variant wrapper
+├── package.json
+└── README.md
+```
+
+## Key Features Explained
+
+### Icon/Image Props
+
+The component supports two ways to add icons:
+
+1. **`iconSource`** - For image assets (most common)
+   ```tsx
+   iconSource: { uri: 'https://...' }        // Web image
+   iconSource: require('./icon.png')         // Local image
+   ```
+
+2. **`icon`** - For custom React nodes
+   ```tsx
+   icon: <Text style={{ fontSize: 20 }}>✓</Text>
+   icon: <Image source={...} />
+   ```
+
+**Priority:** If both `icon` and `iconSource` are provided, `icon` takes precedence.
+
+### Auto-dismiss
+
+Toasts automatically dismiss after the specified `duration` (default 3000ms). Showing a new toast while one is active will replace and reset the timer.
+
+### Context Error Handling
+
+If you call `useToast()` outside of `ToastProvider`, a helpful error is thrown:
+```
+"useToast must be used within a ToastProvider"
+```
+
+## Best Practices
+
+✅ Always wrap your app/root component with `ToastProvider`  
+✅ Use appropriate `variant` for different message types  
+✅ Keep messages concise for better readability  
+✅ Use `duration` based on message length (4-5 seconds for longer text)  
+✅ Prefer `iconSource` with URIs for remote images  
+✅ Use custom `icon` nodes for lightweight SVG or emoji icons  
+
+## Requirements
+
+- React Native 0.72+
+- React 16.8+ (hooks)
+
+## License
+
+ISC

package/lib/Toast.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ToastOptions } from './types';
+interface Props extends ToastOptions {
+}
+declare const Toast: ({ title, message, variant, backgroundColor, height, icon, }: Props) => React.JSX.Element;
+export default Toast;

package/lib/Toast.js

@@ -0,0 +1,104 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const constants_1 = require("./constants");
+const Toast = ({ title, message, variant = 'info', backgroundColor, height = 70, icon, }) => {
+    const iconSource = typeof icon === 'string'
+        ? { uri: icon }
+        : icon;
+    return (react_1.default.createElement(react_native_1.View, { style: [
+            styles.container,
+            {
+                height,
+                backgroundColor: backgroundColor || constants_1.COLORS[variant],
+            },
+        ] },
+        iconSource ? (react_1.default.createElement(react_native_1.Image, { source: iconSource, style: styles.icon })) : null,
+        react_1.default.createElement(react_native_1.View, { style: styles.content },
+            title ? (react_1.default.createElement(react_native_1.Text, { style: styles.title }, title)) : null,
+            react_1.default.createElement(react_native_1.Text, { style: styles.message }, message))));
+};
+exports.default = Toast;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        marginHorizontal: 15,
+        borderRadius: 14,
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 15,
+        elevation: 5,
+    },
+    icon: {
+        width: 32,
+        height: 32,
+        marginRight: 12,
+        resizeMode: 'contain',
+    },
+    content: {
+        flex: 1,
+    },
+    title: {
+        color: '#fff',
+        fontSize: 16,
+        fontWeight: '700',
+    },
+    message: {
+        color: '#fff',
+        marginTop: 2,
+        fontSize: 14,
+    },
+});
+// import React from 'react';
+// import { View, Text, StyleSheet } from 'react-native';
+// interface ToastProps {
+//     message: string;
+//     backgroundColor?: string;
+//     height?: number;
+//     variant?: 'success' | 'error' | 'warning' | 'info' | 'modern';
+// }
+// const defaultColors = {
+//     success: '#22C55E',
+//     error: '#EF4444',
+//     warning: '#F59E0B',
+//     info: '#3B82F6',
+//     modern: '#111827',
+// };
+// const Toast = ({
+//     message,
+//     backgroundColor,
+//     height = 60,
+//     variant = 'info',
+// }: ToastProps) => {
+//     return (
+//         <View
+//             style={[
+//                 styles.container,
+//                 {
+//                     height,
+//                     backgroundColor:
+//                         backgroundColor || defaultColors[variant],
+//                 },
+//             ]}
+//         >
+//             <Text style={styles.text}>{message}</Text>
+//         </View>
+//     );
+// };
+// export default Toast;
+// const styles = StyleSheet.create({
+//     container: {
+//         borderRadius: 12,
+//         paddingHorizontal: 16,
+//         justifyContent: 'center',
+//         marginHorizontal: 16,
+//     },
+//     text: {
+//         color: '#fff',
+//         fontSize: 15,
+//         fontWeight: '600',
+//     },
+// });

package/lib/ToastProvider.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ToastOptions } from './types';
+export declare const ToastProvider: ({ children, }: any) => React.JSX.Element;
+export declare const useToast: () => {
+    showToast: (options: ToastOptions) => void;
+} | null;

package/lib/ToastProvider.js

@@ -0,0 +1,131 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToast = exports.ToastProvider = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const Toast_1 = __importDefault(require("./Toast"));
+const ToastContext = (0, react_1.createContext)(null);
+const ToastProvider = ({ children, }) => {
+    const [toast, setToast] = (0, react_1.useState)(null);
+    const timeoutRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+    const showToast = (options) => {
+        var _a;
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        setToast(Object.assign(Object.assign({}, options), { variant: options.variant || options.type || 'info' }));
+        const duration = (_a = options.duration) !== null && _a !== void 0 ? _a : (options.time ? options.time * 1000 : 3000);
+        timeoutRef.current =
+            setTimeout(() => {
+                setToast(null);
+                timeoutRef.current = null;
+            }, duration);
+    };
+    const wrapperStyle = {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        alignItems: 'center',
+    };
+    if ((toast === null || toast === void 0 ? void 0 : toast.position) === 'bottom') {
+        wrapperStyle.bottom = toast.bottomPadding || 40;
+    }
+    else if ((toast === null || toast === void 0 ? void 0 : toast.position) === 'center') {
+        wrapperStyle.top = 0;
+        wrapperStyle.bottom = 0;
+        wrapperStyle.justifyContent = 'center';
+    }
+    else {
+        wrapperStyle.top = (toast === null || toast === void 0 ? void 0 : toast.topPadding) || 50;
+    }
+    return (react_1.default.createElement(ToastContext.Provider, { value: { showToast } },
+        children,
+        toast && (react_1.default.createElement(react_native_1.View, { pointerEvents: "none", style: wrapperStyle },
+            react_1.default.createElement(Toast_1.default, Object.assign({}, toast))))));
+};
+exports.ToastProvider = ToastProvider;
+const useToast = () => (0, react_1.useContext)(ToastContext);
+exports.useToast = useToast;
+// import React, { createContext, useContext, useState } from 'react';
+// import { View } from 'react-native';
+// import Toast from './Toast';
+// interface ToastOptions {
+//     message: string;
+//     position?: 'top' | 'bottom';
+//     backgroundColor?: string;
+//     height?: number;
+//     variant?: 'success' | 'error' | 'warning' | 'info' | 'modern';
+// }
+// const ToastContext = createContext<any>(null);
+// export const ToastProvider = ({ children }: any) => {
+//     const [toast, setToast] = useState<any>(null);
+//     const showToast = (options: ToastOptions) => {
+//         setToast(options);
+//         setTimeout(() => {
+//             setToast(null);
+//         }, 3000);
+//     };
+//     return (
+//         <ToastContext.Provider value={{ showToast }}>
+//             {children}
+//             {toast && (
+//                 <View
+//                     style={{
+//                         position: 'absolute',
+//                         left: 0,
+//                         right: 0,
+//                         ...(toast.position === 'bottom'
+//                             ? { bottom: 40 }
+//                             : { top: 50 }),
+//                     }}
+//                 >
+//                     <Toast {...toast} />
+//                 </View>
+//             )}
+//         </ToastContext.Provider>
+//     );
+// };
+// export const useToast = () => useContext(ToastContext);

package/lib/constants.d.ts

@@ -0,0 +1,7 @@
+export declare const COLORS: {
+    success: string;
+    error: string;
+    warning: string;
+    info: string;
+    modern: string;
+};

package/lib/constants.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.COLORS = void 0;
+exports.COLORS = {
+    success: '#22C55E',
+    error: '#EF4444',
+    warning: '#F59E0B',
+    info: '#3B82F6',
+    modern: '#111827',
+};

package/lib/index.d.ts

@@ -0,0 +1,3 @@
+export { ToastProvider } from './ToastProvider';
+export { useToast } from './ToastProvider';
+export type { ToastOptions, ToastVariant, } from './types';

package/lib/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToast = exports.ToastProvider = void 0;
+var ToastProvider_1 = require("./ToastProvider");
+Object.defineProperty(exports, "ToastProvider", { enumerable: true, get: function () { return ToastProvider_1.ToastProvider; } });
+var ToastProvider_2 = require("./ToastProvider");
+Object.defineProperty(exports, "useToast", { enumerable: true, get: function () { return ToastProvider_2.useToast; } });

package/lib/types.d.ts

@@ -0,0 +1,16 @@
+import { ImageSourcePropType } from 'react-native';
+export type ToastVariant = 'success' | 'error' | 'warning' | 'info' | 'modern';
+export interface ToastOptions {
+    title?: string;
+    message: string;
+    variant?: ToastVariant;
+    position?: 'top' | 'bottom' | 'center';
+    duration?: number;
+    time?: number;
+    backgroundColor?: string;
+    height?: number;
+    topPadding?: number;
+    bottomPadding?: number;
+    icon?: ImageSourcePropType | string;
+    type?: ToastVariant;
+}

package/lib/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/variants/ErrorToast.d.ts

@@ -0,0 +1,2 @@
+import Toast from '../Toast';
+export default Toast;

package/lib/variants/ErrorToast.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Toast_1 = __importDefault(require("../Toast"));
+exports.default = Toast_1.default;

package/lib/variants/InfoToast.d.ts

@@ -0,0 +1,2 @@
+import Toast from '../Toast';
+export default Toast;

package/lib/variants/InfoToast.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Toast_1 = __importDefault(require("../Toast"));
+exports.default = Toast_1.default;

package/lib/variants/ModernToast.d.ts

@@ -0,0 +1,2 @@
+import Toast from '../Toast';
+export default Toast;

package/lib/variants/ModernToast.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Toast_1 = __importDefault(require("../Toast"));
+exports.default = Toast_1.default;

package/lib/variants/SuccessToast.d.ts

@@ -0,0 +1,2 @@
+import Toast from '../Toast';
+export default Toast;

package/lib/variants/SuccessToast.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Toast_1 = __importDefault(require("../Toast"));
+exports.default = Toast_1.default;

package/lib/variants/WarningToast.d.ts

@@ -0,0 +1,2 @@
+import Toast from '../Toast';
+export default Toast;

package/lib/variants/WarningToast.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Toast_1 = __importDefault(require("../Toast"));
+exports.default = Toast_1.default;

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "react-native-modern-toast",
+  "version": "0.1.0",
+  "description": "A lightweight React Native toast provider with icon support, multiple variants, and TypeScript definitions.",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "lib",
+    "README.md",
+    "package.json"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "keywords": [
+    "react-native",
+    "toast",
+    "notification",
+    "toast-provider",
+    "typescript"
+  ],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@types/react": "^19.2.17",
+    "@types/react-native": "^0.72.8",
+    "typescript": "^6.0.3"
+  }
+}