@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

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):

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:

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

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:

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

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

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:

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]