Toast

1import { cn } from "@/lib/utils";
2import { cva } from "class-variance-authority";
3import * as React from "react";
4import { Animated, StyleSheet, Text, View } from "react-native";
5 
6type ToastType = "default" | "success" | "error" | "warning" | "info";
7 
8interface ToastContextValue {
9	show: (message: string, type?: ToastType) => void;
10}
11 
12const ToastContext = React.createContext<ToastContextValue | undefined>(
13	undefined,
14);
15 
16export const useToast = () => {
17	const context = React.useContext(ToastContext);
18	if (!context) {
19		throw new Error("useToast must be used within a ToastProvider");
20	}
21	return context;
22};
23 
24const toastVariants = cva("px-5 py-4 rounded-2xl border", {
25	variants: {
26		variant: {
27			default: "bg-background border-border backdrop-blur-sm",
28			success:
29				"bg-green-50 border-green-200 dark:bg-green-950 dark:border-green-800 backdrop-blur-sm",
30			error:
31				"bg-red-50 border-red-200 dark:bg-red-950 dark:border-red-800 backdrop-blur-sm",
32			warning:
33				"bg-yellow-50 border-yellow-200 dark:bg-yellow-950 dark:border-yellow-800 backdrop-blur-sm",
34			info: "bg-blue-50 border-blue-200 dark:bg-blue-950 dark:border-blue-800 backdrop-blur-sm",
35		},
36	},
37	defaultVariants: {
38		variant: "default",
39	},
40});
41 
42const toastTextVariants = cva("text-sm font-medium", {
43	variants: {
44		variant: {
45			default: "text-foreground",
46			success: "text-green-900 dark:text-green-100",
47			error: "text-red-900 dark:text-red-100",
48			warning: "text-yellow-900 dark:text-yellow-100",
49			info: "text-blue-900 dark:text-blue-100",
50		},
51	},
52	defaultVariants: {
53		variant: "default",
54	},
55});
56 
57interface ToastProviderProps {
58	children: React.ReactNode;
59	duration?: number;
60	position?: "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
61}
62 
63export function ToastProvider({
64	children,
65	duration = 3000,
66	position = "bottom",
67}: ToastProviderProps) {
68	const [toast, setToast] = React.useState<{
69		message: string;
70		type: ToastType;
71	} | null>(null);
72	const fadeAnim = React.useRef(new Animated.Value(0)).current;
73	const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(
74		undefined,
75	);
76 
77	const show = React.useCallback(
78		(message: string, type: ToastType = "default") => {
79			if (timeoutRef.current) {
80				clearTimeout(timeoutRef.current);
81			}
82 
83			setToast({ message, type });
84 
85			Animated.timing(fadeAnim, {
86				toValue: 1,
87				duration: 200,
88				useNativeDriver: true,
89			}).start(() => {
90				timeoutRef.current = setTimeout(() => {
91// … truncated