React Native Pop Toastr Component

A customizable toast notification component for React Native.

Installation

npm install react-native-pop-toastr

Example Usage

import React, { useState } from "react";
import { View, Button } from "react-native";
import Toast from "react-native-pop-toastr";
import { SafeAreaView } from "react-native-safe-area-context"; // install this package

const App = () => {
  const [toast, setToast] = useState<{
    message: string;
    type: "success" | "warning" | "error" | "info" | "custom";
    autoClose?: boolean;
    backgroundColor?: string;
    textColor?: string;
    icon?: string;
    iconColor?: string;
  } | null>(null);

  const showToast = (
    type: "success" | "warning" | "error" | "info" | "custom",
    message: string,
    autoClose = true,
    customProps?: {
      backgroundColor?: string;
      textColor?: string;
      icon?: string;
      iconColor?: string;
    }
  ) => {
    setToast({ type, message, autoClose, ...customProps });
  };

  const closeToast = () => {
    setToast(null);
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={{ flex: 1, justifyContent: "center" }}>
        <Button
          title="Show Success Toast"
          onPress={() => showToast("success", "Action completed successfully!")}
        />
        <Button
          title="Show Custom Toast"
          onPress={() =>
            showToast("custom", "This is a custom toast!", false, {
              backgroundColor: "#FF5733",
              textColor: "#000",
              icon: "star",
              iconColor: "#FFC300",
            })
          }
        />
        {toast && (
          <Toast
            message={toast.message}
            type={toast.type}
            onClose={closeToast}
            autoClose={toast.autoClose}
            duration={4000} // if you want a longer duration than the default one
            position="top" // or bottom
            animation="slide" // <=== animation type or "fade" & "scale"
            backgroundColor={toast.backgroundColor} // Pass custom props
            textColor={toast.textColor}
            icon={toast.icon}
            iconColor={toast.iconColor}
          />
        )}
      </View>
    </SafeAreaView>
  );
};

export default App;

Props

| Prop | Type | Default | Description | | ----------------- | --------------------------------------------------------- | ----------- | ---------------------------------------- | | message | string | Required | The message to display in the toast. | | type | "success" \| "warning" \| "error" \| "info" \| "custom" | "custom" | The type of toast. | | onClose | () => void | Required | Callback when the toast is closed. | | duration | number | 3000 | Duration in milliseconds for auto-close. | | autoClose | boolean | true | Whether the toast auto-closes. | | position | "top" \| "bottom" | "top" | Position of the toast on the screen. | | animation | "slide" \| "fade" \| "scale" | "slide" | Animation type for the toast. | | backgroundColor | string | Theme-based | Custom background color for the toast. | | textColor | string | "white" | Custom text color. | | icon | string | Theme-based | Custom icon name. | | iconColor | string | "white" | Custom icon color. |