@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

npm install @juniorfixhow/react-native-toast

or with yarn:

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

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)

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)

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

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

🛠 Development

Clone and build locally:

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