ToastAndroid

Stacked notifications with swipe dismiss and actions.

$ npx lumioui add toast

import { useToast, ToastProvider } from "@/components/ui/toast/toast";

Parts: useToast · ToastProvider

Props5

children	React.ReactNode
position?	ToastPosition	Where toasts appear. Default "top".
defaultDuration?	number	Auto-dismiss duration in ms. 0 = manual dismiss only. Default 4000.
limit?	number	Max simultaneous toasts. Older ones are dismissed with an exit animation. Default 4.
maxVisible?	number	Stack levels that peek out behind the front toast. Deeper toasts stay queued (timers running) until a slot frees. Default 3.

Toast — Actionaction.tsx

toast/variants/action.tsx open

Stacked notifications with swipe dismiss and actions.

import { ToastAction } from "@/components/ui/toast/variants/action";

export function Example() {
  return (
    <ToastAction />
  );
}

import * as React from "react";
import { View } from "react-native";
import { useToast } from "../toast";
import { Button } from "../../button/button";

/** ToastAction — toast with an undo action button. */
export function ToastAction() {
  const { show, info } = useToast();
  const paymentWithUndo = () =>
    show("Payment sent", {
      description: "$4,280.50 to Porto · receipt #8421",
      variant: "default",
      action: { label: "Undo", onPress: () => info("Payment recalled", "Refund lands in ~2 min") },
    });
  return (
    <View className="w-full items-center py-6">
      <Button onPress={paymentWithUndo}>Send $4,280.50 with undo</Button>
    </View>
  );
}

Toast — Loadingloading.tsx

toast/variants/loading.tsx open

Stacked notifications with swipe dismiss and actions.

import { ToastLoading } from "@/components/ui/toast/variants/loading";

export function Example() {
  return (
    <ToastLoading />
  );
}

import * as React from "react";
import { View } from "react-native";
import { useToast } from "../toast";
import { Button } from "../../button/button";

/** ToastLoading — persistent loading toast that resolves to success. */
export function ToastLoading() {
  const { loading, success, dismiss } = useToast();
  const startLoading = () => {
    const id = loading("Syncing wallet…", "3 of 10 receipts");
    setTimeout(() => {
      if (id) dismiss(id);
      success("Wallet synced", "10 receipts up to date");
    }, 3000);
  };
  return (
    <View className="w-full items-center py-6">
      <Button variant="outline" onPress={startLoading}>Start syncing</Button>
    </View>
  );
}

Toast — Variantsvariants.tsx

toast/variants/variants.tsx open

Stacked notifications with swipe dismiss and actions.

import { ToastVariants } from "@/components/ui/toast/variants/variants";

export function Example() {
  return (
    <ToastVariants />
  );
}

import * as React from "react";
import { View } from "react-native";
import { useToast } from "../toast";
import { Button } from "../../button/button";

/** ToastVariants — info, success, error and warning triggers. */
export function ToastVariants() {
  const { success, error, warning, info } = useToast();
  return (
    <View className="w-full flex-row flex-wrap items-center justify-center gap-2 py-6">
      <Button size="sm" onPress={() => info("Message from Priya", "“Landed in Kyoto — ramen tomorrow?”")}>Info</Button>
      <Button size="sm" variant="outline" onPress={() => success("Order confirmed", "Sakura Ramen · arrives 2–4 pm")}>Success</Button>
      <Button size="sm" variant="destructive" onPress={() => error("Top-up failed", "Card ···· 4242 declined")}>Error</Button>
      <Button size="sm" variant="secondary" onPress={() => warning("Low balance", "$86.00 left · top up soon")}>Warning</Button>
    </View>
  );
}