react-native-modern-toast

A lightweight, customizable React Native toast library with support for:

• 🚀 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

npm install react-native-modern-toast

or

yarn add react-native-modern-toast

Setup

Wrap your app with ToastProvider.

Expo Router

import { ToastProvider } from "react-native-modern-toast";

export default function RootLayout() {
  return (
    <ToastProvider>
      <Stack />
    </ToastProvider>
  );
}

React Native

import { ToastProvider } from "react-native-modern-toast";

export default function App() {
  return (
    <ToastProvider>
      <HomeScreen />
    </ToastProvider>
  );
}

Usage

import { useToast } from "react-native-modern-toast";

export default function HomeScreen() {
  const toast = useToast();

  return (
    <Button
      title="Show Toast"
      onPress={() =>
        toast?.showToast({
          title: "Success",
          message: "Profile updated successfully",
          variant: "success",
        })
      }
    />
  );
}

Top Toast

toast?.showToast({
  title: "Success",
  message: "Top Toast",
  variant: "success",
  position: "top",
});

Center Toast

toast?.showToast({
  title: "Information",
  message: "Center Toast",
  variant: "info",
  position: "center",
});

Bottom Toast

toast?.showToast({
  title: "Warning",
  message: "Bottom Toast",
  variant: "warning",
  position: "bottom",
});

Variants

Success

toast?.showToast({
  message: "Success Toast",
  variant: "success",
});

Error

toast?.showToast({
  message: "Error Toast",
  variant: "error",
});

Warning

toast?.showToast({
  message: "Warning Toast",
  variant: "warning",
});

Info

toast?.showToast({
  message: "Info Toast",
  variant: "info",
});

Modern

toast?.showToast({
  message: "Modern Toast",
  variant: "modern",
});

Custom Background Color

toast?.showToast({
  title: "Custom",
  message: "Custom Color Toast",
  backgroundColor: "#3251A0",
});

Custom Height

toast?.showToast({
  message: "Large Toast",
  height: 90,
});

Custom Icon

toast?.showToast({
  title: "Success",
  message: "Uploaded Successfully",
  icon: require("./assets/success.png"),
});

Network Image

toast?.showToast({
  title: "Profile",
  message: "Image Loaded",
  icon: "https://example.com/icon.png",
});

Use type alias for variant

toast?.showToast({
  title: "Info",
  message: "Type alias works",
  type: "info",
  position: "center",
  time: 8,
  icon: "https://example.com/info.png",
});

Custom Duration

toast?.showToast({
  message: "Will hide after 5 seconds",
  duration: 5000,
});

Custom Time (seconds)

toast?.showToast({
  message: "Will hide after 10 seconds",
  time: 10,
});

Custom Top Padding

toast?.showToast({
  message: "Top Padding",
  position: "top",
  topPadding: 100,
});

Custom Bottom Padding

toast?.showToast({
  message: "Bottom Padding",
  position: "bottom",
  bottomPadding: 100,
});

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.

import { ToastOptions } from "react-native-modern-toast";

Features

✅ Android Support

✅ iOS Support

✅ Expo Support

✅ React Native CLI Support

✅ TypeScript Support

✅ Custom Icons

✅ Custom Height

✅ Custom Colors

✅ Top / Center / Bottom Position

✅ Lightweight

✅ No Native Modules

License

MIT

Neeraj Singh