@amitsolanki1409/react-native-toast-message/README.md

A customizable and lightweight toast component for React Native.

# @amitsolanki1409/react-native-toast-message

> A customizable and lightweight Toast notification component for React Native.

`@amitsolanki1409/react-native-toast-message` provides a fully configurable toast message system for your React Native app. You can show success, error, info, or warning toasts with optional icons, custom durations, and custom styling.

---


## ✨ Features

- 🧩 Fully customizable styles
- ⏱ Configurable duration
- 🔁 Optional icons
- 📦 Lightweight and framework-agnostic
- 🧠 Written in TypeScript
- 📐 Supports top, center, and bottom positions
- 🎯 Easy to integrate with a single line

---


## 📦 Installation

```bash
npm install @amitsolanki1409/react-native-toast-message
# or
yarn add @amitsolanki1409/react-native-toast-message
```

---


## ⚙️ Usage

### 1. **Wrap your app with `Toast.ToastContainer()`**

In your root component (usually `App.tsx` or `MainLayout.tsx`):

```tsx
import React from "react";
import { View } from "react-native";
import Toast from "@amitsolanki1409/react-native-toast-message";

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      {/* Your app's UI */}
      <Toast.ToastContainer />
    </View>
  );
}
```

---


### 2. **Show a toast**

Anywhere in your app:

```tsx
import Toast from "@amitsolanki1409/react-native-toast-message";

Toast.show({
  message: "Profile updated successfully!",
  type: "success", // success | error | info | warning
});
```

---


### 3. **With optional title and position**

```tsx
Toast.show({
  title: "Success",
  message: "Data saved!",
  type: "success",
  position: "bottom", // top | center | bottom
});
```

---


### 4. **Custom Icon**

Pass in any valid React element as the `Icon`:

```tsx
import Icon from "react-native-vector-icons/MaterialCommunityIcons";

Toast.show({
  message: "No internet connection",
  type: "error",
  Icon: <Icon name="wifi-off" size={24} color="#fff" />,
});
```

---


### 5. **Custom Styles**

```tsx
Toast.show({
  message: "Custom styled toast",
  title: "Notice",
  type: "info",
  titleStyle: { fontSize: 20, fontWeight: "bold" },
  messageStyle: { color: "#333" },
  containerStyle: { borderWidth: 2, borderColor: "#000" },
  alertColor: "#0af", // overrides icon background color
});
```

---


## 🧩 Props Reference

| Prop             | Type                                          | Default      | Description                                |
| ---------------- | --------------------------------------------- | ------------ | ------------------------------------------ |
| `title`          | `string`                                      | `type` value | Title of the toast                         |
| `message`        | `string`                                      | **Required** | Message text                               |
| `type`           | `"success" \| "error" \| "info" \| "warning"` | `"success"`  | Type of toast, determines background color |
| `position`       | `"top" \| "center" \| "bottom"`               | `"top"`      | Position of toast on screen                |
| `duration`       | `number`                                      | `3000`       | Duration in milliseconds                   |
| `onClose`        | `() => void`                                  | No           | Callback when toast is dismissed           |
| `Icon`           | `ReactNode`                                   | No           | Custom React icon component                |
| `titleStyle`     | `TextStyle`                                   | No           | Custom style for title                     |
| `messageStyle`   | `TextStyle`                                   | No           | Custom style for message                   |
| `containerStyle` | `ViewStyle`                                   | No           | Custom style for the toast container       |
| `alertColor`     | `ColorValue`                                  | No           | Background color of the icon container     |

---


## 🧪 Example

```tsx
import React from "react";
import { Button, View } from "react-native";
import Toast from "@amitsolanki1409/react-native-toast-message";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";

export default function DemoScreen() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Button
        title="Show Toast"
        onPress={() =>
          Toast.show({
            title: "Error",
            message: "Something went wrong!",
            type: "error",
            position: "bottom",
            Icon: <Icon name="alert-circle" size={24} color="#fff" />,
          })
        }
      />
    </View>
  );
}
```

---


## 🧼 Manual Hide

You can manually hide the toast by calling:

```ts
Toast.hide();
```

---


## 🧠 Best Practices

- Make sure to include `Toast.ToastContainer` at the root level of your app. like:
  <ToastManager.ToastContainer />
- Customize the `Icon` and styles per your app’s theme.
- Avoid showing multiple toasts rapidly—this library is intended to display one toast at a time.

---


## 📁 Folder Structure Suggestion

You can keep the components like this if you're building your own:

```
components/
  └── Toast/
      ├── Toast.tsx          # Singleton logic
      ├── ToastService.tsx   # UI renderer
```

---


## 📜 License

MIT © 2025 \[Amitkumar Solanki]