react-native-modern-toast 0.1.0 → 0.1.1

package/README.md

@@ -1,296 +1,339 @@
-# react-native-flex-toast
+# react-native-modern-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.
+A lightweight, customizable React Native toast library with support for:
 
-## 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  
+* 🚀 Top, Center & Bottom Toast Positions
+* 🎨 Custom Background Colors
+* 📏 Custom Height
+* 🖼 Custom Icons
+* ⏱ Auto Dismiss Duration
+* 📱 Works Identically on Android & iOS
+* ⚡ No Native Dependencies
+* 🔷 TypeScript Support
+* 🎯 Multiple Toast Variants
 
 ## Installation
 
 ```bash
-npm install react-native-flex-toast
-# or
-yarn add react-native-flex-toast
+npm install react-native-modern-toast
+```
+
+or
+
+```bash
+yarn add react-native-modern-toast
 ```
 
-## Quick Start
+---
+
+## Setup
+
+Wrap your app with `ToastProvider`.
 
-### 1. Wrap Your App with ToastProvider
+### Expo Router
 
 ```tsx
-import React from 'react';
-import { View } from 'react-native';
-import { ToastProvider } from 'react-native-flex-toast';
+import { ToastProvider } from "react-native-modern-toast";
 
-export default function App() {
+export default function RootLayout() {
   return (
     <ToastProvider>
-      <YourAppContent />
+      <Stack />
     </ToastProvider>
   );
 }
 ```
 
-### 2. Use the Hook to Show Toasts
+### React Native
 
 ```tsx
-import { useToast } from 'react-native-flex-toast';
-import { View, Button } from 'react-native';
+import { ToastProvider } from "react-native-modern-toast";
+
+export default function App() {
+  return (
+    <ToastProvider>
+      <HomeScreen />
+    </ToastProvider>
+  );
+}
+```
+
+---
 
-export function MyComponent() {
-  const { showToast } = useToast();
+## Usage
+
+```tsx
+import { useToast } from "react-native-modern-toast";
 
-  const handleSuccess = () => {
-    showToast({
-      message: 'Action completed successfully!',
-      variant: 'success',
-    });
-  };
+export default function HomeScreen() {
+  const toast = useToast();
 
   return (
-    <View>
-      <Button title="Show Toast" onPress={handleSuccess} />
-    </View>
+    <Button
+      title="Show Toast"
+      onPress={() =>
+        toast?.showToast({
+          title: "Success",
+          message: "Profile updated successfully",
+          variant: "success",
+        })
+      }
+    />
   );
 }
 ```
 
-## Usage Examples
+---
 
-### Basic Toast
+## Top Toast
 
 ```tsx
-const { showToast } = useToast();
-
-showToast({
-  message: 'Hello World!',
-  variant: 'info',
+toast?.showToast({
+  title: "Success",
+  message: "Top Toast",
+  variant: "success",
+  position: "top",
 });
 ```
 
-### Toast with Image Icon (URI)
+---
+
+## Center Toast
 
 ```tsx
-showToast({
-  message: 'Profile saved',
-  variant: 'success',
-  iconSource: { uri: 'https://example.com/check.png' },
+toast?.showToast({
+  title: "Information",
+  message: "Center Toast",
+  variant: "info",
+  position: "center",
 });
 ```
 
-### Toast with Local Image
+---
+
+## Bottom Toast
 
 ```tsx
-showToast({
-  message: 'Download complete',
-  variant: 'success',
-  iconSource: require('./assets/download-icon.png'),
+toast?.showToast({
+  title: "Warning",
+  message: "Bottom Toast",
+  variant: "warning",
+  position: "bottom",
 });
 ```
 
-### Toast with Custom React Node Icon
+---
+
+## Variants
+
+### Success
 
 ```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?.showToast({
+  message: "Success Toast",
+  variant: "success",
 });
 ```
 
-### Toast with Custom Duration
+### Error
 
 ```tsx
-showToast({
-  message: 'This will stay for 5 seconds',
-  variant: 'warning',
-  duration: 5000, // 5000ms
+toast?.showToast({
+  message: "Error Toast",
+  variant: "error",
 });
 ```
 
-### Toast with Custom Position
+### Warning
 
 ```tsx
-showToast({
-  message: 'Bottom positioned toast',
-  variant: 'error',
-  position: 'bottom', // or 'top' (default)
+toast?.showToast({
+  message: "Warning Toast",
+  variant: "warning",
 });
 ```
 
-### Toast with Custom Colors & Styles
+### Info
 
 ```tsx
-showToast({
-  message: 'Custom styled toast',
-  backgroundColor: '#FF6B6B',
-  height: 70,
-  iconSource: { uri: 'https://example.com/icon.png' },
+toast?.showToast({
+  message: "Info Toast",
+  variant: "info",
 });
 ```
 
-### Complete Example with All Options
+### Modern
 
 ```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' },
+toast?.showToast({
+  message: "Modern Toast",
+  variant: "modern",
 });
 ```
 
-## API Reference
-
-### ToastProvider
+---
 
-Wraps your app to provide toast functionality.
+## Custom Background Color
 
 ```tsx
-<ToastProvider>
-  {children}
-</ToastProvider>
+toast?.showToast({
+  title: "Custom",
+  message: "Custom Color Toast",
+  backgroundColor: "#3251A0",
+});
 ```
 
-### useToast Hook
+---
 
-Returns an object with the `showToast` function.
+## Custom Height
 
 ```tsx
-const { showToast } = useToast();
+toast?.showToast({
+  message: "Large Toast",
+  height: 90,
+});
 ```
 
-### showToast(options: ToastOptions)
+---
 
-Displays a toast notification with the provided options.
+## Custom Icon
 
-**Parameters:**
+```tsx
+toast?.showToast({
+  title: "Success",
+  message: "Uploaded Successfully",
+  icon: require("./assets/success.png"),
+});
+```
 
-| 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 |
+### Network Image
 
-## Toast Variants
+```tsx
+toast?.showToast({
+  title: "Profile",
+  message: "Image Loaded",
+  icon: "https://example.com/icon.png",
+});
+```
 
-Each variant has a default color:
+### Use `type` alias for variant
 
-| Variant | Color | Hex Code |
-|---------|-------|----------|
-| `success` | Green | `#22C55E` |
-| `error` | Red | `#EF4444` |
-| `warning` | Amber | `#F59E0B` |
-| `info` | Blue | `#3B82F6` |
-| `modern` | Dark Gray | `#111827` |
+```tsx
+toast?.showToast({
+  title: "Info",
+  message: "Type alias works",
+  type: "info",
+  position: "center",
+  time: 8,
+  icon: "https://example.com/info.png",
+});
+```
 
-## Variant Components
+---
 
-The package also exports pre-styled variant components:
+## Custom Duration
 
 ```tsx
-import { SuccessToast, ErrorToast, WarningToast, InfoToast, ModernToast } from 'react-native-flex-toast';
+toast?.showToast({
+  message: "Will hide after 5 seconds",
+  duration: 5000,
+});
+```
+
+---
+
+## Custom Time (seconds)
 
-// These are pre-configured with their respective colors
+```tsx
+toast?.showToast({
+  message: "Will hide after 10 seconds",
+  time: 10,
+});
 ```
 
-## TypeScript Support
+---
 
-Full TypeScript support with exported types:
+## Custom Top Padding
 
 ```tsx
-import type { ToastOptions, ToastProps, ToastVariant } from 'react-native-flex-toast';
+toast?.showToast({
+  message: "Top Padding",
+  position: "top",
+  topPadding: 100,
+});
 ```
 
-## Project Structure
+---
+
+## Custom Bottom Padding
 
+```tsx
+toast?.showToast({
+  message: "Bottom Padding",
+  position: "bottom",
+  bottomPadding: 100,
+});
 ```
-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
+
+---
+
+## API Reference
+
+| Prop            | Type                                      | Default       |
+| --------------- | ----------------------------------------- | ------------- |
+| title           | string                                    | undefined     |
+| message         | string                                    | required      |
+| variant         | success | error | warning | info | modern | info          |
+| type            | success | error | warning | info | modern | info          |
+| position        | top | center | bottom                     | top           |
+| duration        | number                                    | 3000          |
+| time            | number                                    | undefined     |
+| backgroundColor | string                                    | variant color |
+| height          | number                                    | 70            |
+| topPadding      | number                                    | 50            |
+| bottomPadding   | number                                    | 40            |
+| icon            | ImageSourcePropType | string              | undefined     |
+
+---
+
+## TypeScript
+
+Fully typed and TypeScript ready.
+
+```tsx
+import { ToastOptions } from "react-native-modern-toast";
 ```
 
-## Key Features Explained
+---
 
-### Icon/Image Props
+## Features
 
-The component supports two ways to add icons:
+✅ Android Support
 
-1. **`iconSource`** - For image assets (most common)
-   ```tsx
-   iconSource: { uri: 'https://...' }        // Web image
-   iconSource: require('./icon.png')         // Local image
-   ```
+✅ iOS Support
 
-2. **`icon`** - For custom React nodes
-   ```tsx
-   icon: <Text style={{ fontSize: 20 }}>✓</Text>
-   icon: <Image source={...} />
-   ```
+✅ Expo Support
 
-**Priority:** If both `icon` and `iconSource` are provided, `icon` takes precedence.
+✅ React Native CLI Support
 
-### Auto-dismiss
+✅ TypeScript Support
 
-Toasts automatically dismiss after the specified `duration` (default 3000ms). Showing a new toast while one is active will replace and reset the timer.
+✅ Custom Icons
 
-### Context Error Handling
+✅ Custom Height
 
-If you call `useToast()` outside of `ToastProvider`, a helpful error is thrown:
-```
-"useToast must be used within a ToastProvider"
-```
+✅ Custom Colors
 
-## Best Practices
+✅ Top / Center / Bottom Position
 
-✅ 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  
+✅ Lightweight
 
-## Requirements
+✅ No Native Modules
 
-- React Native 0.72+
-- React 16.8+ (hooks)
+---
 
 ## License
 
-ISC
+MIT
+
+Neeraj Singh

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-modern-toast",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A lightweight React Native toast provider with icon support, multiple variants, and TypeScript definitions.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",