@juniorfixhow/react-native-toast/README.md

Toast everything easily in react native

# @juniorfixhow/react-native-toast

A lightweight, customizable **toast notification library** for React Native.  
Display success, error, warning, or info messages easily — anywhere in your app.

---

## ✨ Features

- 🚀 Simple API (`Toast.showToast(...)`)
- 🎨 Supports **success, error, warning, info**
- ⏱ Configurable timeout duration
- 📍 Position on **top** or **bottom**
- 🪶 Lightweight & zero dependencies (uses only React & React Native)

---

## 📦 Installation

```sh
npm install @juniorfixhow/react-native-toast
```

or with yarn:

```sh
yarn add @juniorfixhow/react-native-toast
```

---

## ⚙️ Peer Dependencies

This library expects you to already have these installed in your project:

- `react` (>=18.0.0 <20.0.0)
- `react-native` (>=0.72.0 <0.82.0)

---

## 🚀 Usage

### 1. Wrap your app in `ToastProvider`

```tsx
import React from "react";
import { ToastProvider, ToastComponent } from "@juniorfixhow/react-native-toast";
import { View, Text } from "react-native";

const App = () => {
  return (
    <ToastProvider>
      <View>
      {/* Add this component anywhere in your app under the ToastProvider*/}
        <ToastComponent /> 
        <Text>Hello World</Text>
      </View>
    </ToastProvider>
  );
};

export default App;
```

---

### 2. Show a toast globally (anywhere)

```tsx
import { Toast } from "@juniorfixhow/react-native-toast";

// Example: success toast
Toast.showToast({
  message: "Data saved successfully!",
  type: "success",
  timeout: 4000,
  position: "top",
});
```

---

### 3. Use the `useToast` hook (inside components)

```tsx
import React from "react";
import { Button } from "react-native";
import { useToast } from "@juniorfixhow/react-native-toast";

const DemoButton = () => {
  const { showToast } = useToast();

  return (
    <Button
      title="Show Toast"
      onPress={() =>
        showToast({
          message: "Button clicked!",
          type: "info",
          position: "bottom",
        })
      }
    />
  );
};

export default DemoButton;
```

---

## 🎨 Toast Options

| Option      | Type                                  | Default   | Description                                     |
|-------------|---------------------------------------|-----------|-------------------------------------------------|
| `message`   | `string`                              | —         | The text to display in the toast                |
| `type`      | `"success" \| "error" \| "warning" \| "info"` | `"info"`  | Toast style (background color)                  |
| `timeout`   | `number`                              | `3000`    | Duration (ms) before toast disappears           |
| `position`  | `"top" \| "bottom"`                   | `"bottom"`| Where to display the toast on the screen        |

---

## 📷 Example

```tsx
Toast.showToast({
  message: "Network error, try again.",
  type: "error",
  timeout: 5000,
  position: "top",
});
```

---

## 🖼 Demo

_(Add a GIF or screenshot here to showcase the toast in action)_

---

## 🛠 Development

Clone and build locally:

```sh
git clone https://github.com/JuniorFixHow/react-native-toast.git
cd react-native-toast
npm install
npm run build
```

---

## 🤝 Contributing

PRs and issues are welcome! Please open a discussion or submit a pull request if you’d like to improve this library.

---

## 📄 License

MIT © [JuniorFixHow](https://github.com/JuniorFixHow)