react-native-earl-toastify 1.0.0

package/src/animations.ts

@@ -0,0 +1,161 @@
+import { Animated, Dimensions } from "react-native";
+import { ToastAnimation, ToastPosition } from "./types";
+
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("window");
+
+/**
+ * Animation configuration
+ */
+export interface AnimationConfig {
+	duration: number;
+	useNativeDriver: boolean;
+}
+
+/**
+ * Default animation configuration
+ */
+export const DEFAULT_ANIMATION_CONFIG: AnimationConfig = {
+	duration: 300,
+	useNativeDriver: true,
+};
+
+/**
+ * Get initial animated values based on animation type
+ */
+export const getInitialAnimatedValues = (
+	animation: ToastAnimation,
+	position: ToastPosition,
+): { opacity: number; translateX: number; translateY: number } => {
+	switch (animation) {
+		case "fade":
+			return { opacity: 0, translateX: 0, translateY: 0 };
+		case "up":
+			return {
+				opacity: 1,
+				translateX: 0,
+				translateY: position === "bottom" ? 100 : -100,
+			};
+		case "down":
+			return {
+				opacity: 1,
+				translateX: 0,
+				translateY: position === "top" ? -100 : 100,
+			};
+		case "left":
+			return { opacity: 1, translateX: -SCREEN_WIDTH, translateY: 0 };
+		case "right":
+			return { opacity: 1, translateX: SCREEN_WIDTH, translateY: 0 };
+		case "none":
+		default:
+			return { opacity: 1, translateX: 0, translateY: 0 };
+	}
+};
+
+/**
+ * Get final animated values (visible state)
+ */
+export const getFinalAnimatedValues = (): {
+	opacity: number;
+	translateX: number;
+	translateY: number;
+} => {
+	return { opacity: 1, translateX: 0, translateY: 0 };
+};
+
+/**
+ * Get exit animated values based on animation type
+ */
+export const getExitAnimatedValues = (
+	animation: ToastAnimation,
+	position: ToastPosition,
+): { opacity: number; translateX: number; translateY: number } => {
+	switch (animation) {
+		case "fade":
+			return { opacity: 0, translateX: 0, translateY: 0 };
+		case "up":
+			return {
+				opacity: 1,
+				translateX: 0,
+				translateY: position === "top" ? -100 : 100,
+			};
+		case "down":
+			return {
+				opacity: 1,
+				translateX: 0,
+				translateY: position === "bottom" ? 100 : -100,
+			};
+		case "left":
+			return { opacity: 1, translateX: -SCREEN_WIDTH, translateY: 0 };
+		case "right":
+			return { opacity: 1, translateX: SCREEN_WIDTH, translateY: 0 };
+		case "none":
+		default:
+			return { opacity: 0, translateX: 0, translateY: 0 };
+	}
+};
+
+/**
+ * Create enter animation
+ */
+export const createEnterAnimation = (
+	animatedValues: {
+		opacity: Animated.Value;
+		translateX: Animated.Value;
+		translateY: Animated.Value;
+	},
+	config: AnimationConfig = DEFAULT_ANIMATION_CONFIG,
+): Animated.CompositeAnimation => {
+	const finalValues = getFinalAnimatedValues();
+
+	return Animated.parallel([
+		Animated.timing(animatedValues.opacity, {
+			toValue: finalValues.opacity,
+			duration: config.duration,
+			useNativeDriver: config.useNativeDriver,
+		}),
+		Animated.timing(animatedValues.translateX, {
+			toValue: finalValues.translateX,
+			duration: config.duration,
+			useNativeDriver: config.useNativeDriver,
+		}),
+		Animated.timing(animatedValues.translateY, {
+			toValue: finalValues.translateY,
+			duration: config.duration,
+			useNativeDriver: config.useNativeDriver,
+		}),
+	]);
+};
+
+/**
+ * Create exit animation
+ */
+export const createExitAnimation = (
+	animatedValues: {
+		opacity: Animated.Value;
+		translateX: Animated.Value;
+		translateY: Animated.Value;
+	},
+	animation: ToastAnimation,
+	position: ToastPosition,
+	config: AnimationConfig = DEFAULT_ANIMATION_CONFIG,
+): Animated.CompositeAnimation => {
+	const exitValues = getExitAnimatedValues(animation, position);
+
+	return Animated.parallel([
+		Animated.timing(animatedValues.opacity, {
+			toValue: exitValues.opacity,
+			duration: config.duration,
+			useNativeDriver: config.useNativeDriver,
+		}),
+		Animated.timing(animatedValues.translateX, {
+			toValue: exitValues.translateX,
+			duration: config.duration,
+			useNativeDriver: config.useNativeDriver,
+		}),
+		Animated.timing(animatedValues.translateY, {
+			toValue: exitValues.translateY,
+			duration: config.duration,
+			useNativeDriver: config.useNativeDriver,
+		}),
+	]);
+};

package/src/icons.tsx

@@ -0,0 +1,152 @@
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { ToastType } from "./types";
+
+interface IconProps {
+	color: string;
+	size: number;
+}
+
+/**
+ * Simple SVG-like icons using View and Text components
+ * These are minimal default icons - users can replace with any icon library
+ */
+
+const SuccessIcon: React.FC<IconProps> = ({ color, size }) => (
+	<View
+		style={[
+			styles.iconCircle,
+			{ width: size, height: size, borderColor: color },
+		]}
+	>
+		<Text style={[styles.iconText, { color, fontSize: size * 0.6 }]}>
+			✓
+		</Text>
+	</View>
+);
+
+const WarningIcon: React.FC<IconProps> = ({ color, size }) => (
+	<View style={[styles.iconTriangle, { borderBottomColor: color }]}>
+		<Text style={[styles.warningText, { fontSize: size * 0.5 }]}>!</Text>
+	</View>
+);
+
+const ErrorIcon: React.FC<IconProps> = ({ color, size }) => (
+	<View
+		style={[
+			styles.iconCircle,
+			{
+				width: size,
+				height: size,
+				borderColor: color,
+				backgroundColor: color,
+			},
+		]}
+	>
+		<Text
+			style={[
+				styles.iconText,
+				{ color: "#FFFFFF", fontSize: size * 0.6 },
+			]}
+		>
+			✕
+		</Text>
+	</View>
+);
+
+const InfoIcon: React.FC<IconProps> = ({ color, size }) => (
+	<View
+		style={[
+			styles.iconCircle,
+			{ width: size, height: size, borderColor: color },
+		]}
+	>
+		<Text
+			style={[
+				styles.iconText,
+				{ color, fontSize: size * 0.6, fontWeight: "bold" },
+			]}
+		>
+			i
+		</Text>
+	</View>
+);
+
+const DefaultIcon: React.FC<IconProps> = ({ color, size }) => (
+	<View
+		style={[
+			styles.iconCircle,
+			{ width: size, height: size, borderColor: color },
+		]}
+	>
+		<Text style={[styles.iconText, { color, fontSize: size * 0.5 }]}>
+			●
+		</Text>
+	</View>
+);
+
+const CloseIcon: React.FC<IconProps> = ({ color, size }) => (
+	<View
+		style={{
+			width: size,
+			height: size,
+			alignItems: "center",
+			justifyContent: "center",
+		}}
+	>
+		<Text
+			style={{
+				color,
+				fontSize: size,
+				lineHeight: size,
+				fontWeight: "300",
+			}}
+		>
+			×
+		</Text>
+	</View>
+);
+
+/**
+ * Default icons for each toast type
+ */
+export const DefaultIcons: Record<ToastType | "close", React.FC<IconProps>> = {
+	success: SuccessIcon,
+	warning: WarningIcon,
+	error: ErrorIcon,
+	info: InfoIcon,
+	default: DefaultIcon,
+	custom: DefaultIcon,
+	close: CloseIcon,
+};
+
+const styles = StyleSheet.create({
+	iconCircle: {
+		borderWidth: 2,
+		borderRadius: 999,
+		alignItems: "center",
+		justifyContent: "center",
+	},
+	iconText: {
+		textAlign: "center",
+		includeFontPadding: false,
+		textAlignVertical: "center",
+	},
+	iconTriangle: {
+		width: 0,
+		height: 0,
+		borderLeftWidth: 10,
+		borderRightWidth: 10,
+		borderBottomWidth: 18,
+		borderLeftColor: "transparent",
+		borderRightColor: "transparent",
+		alignItems: "center",
+		justifyContent: "flex-end",
+	},
+	warningText: {
+		color: "#FFFFFF",
+		fontWeight: "bold",
+		position: "absolute",
+		bottom: -16,
+	},
+});

package/src/index.ts

@@ -0,0 +1,41 @@
+// Main exports
+export { ToastProvider } from "./ToastProvider";
+export { useToast } from "./useToast";
+export { Toast } from "./Toast";
+export { ToastContainer } from "./ToastContainer";
+
+// Types
+export type {
+	ToastType,
+	ToastAnimation,
+	ToastPosition,
+	ToastConfig,
+	Toast as ToastData,
+	ToastContextValue,
+	ToastProviderConfig,
+} from "./types";
+
+// Styles (for customization)
+export {
+	TOAST_COLORS,
+	getToastColors,
+	baseToastStyle,
+	getPositionalStyle,
+	getContainerStyle,
+} from "./styles";
+
+// Animation utilities (for advanced customization)
+export {
+	getInitialAnimatedValues,
+	getFinalAnimatedValues,
+	getExitAnimatedValues,
+	createEnterAnimation,
+	createExitAnimation,
+	DEFAULT_ANIMATION_CONFIG,
+} from "./animations";
+
+// Animation hook
+export { useToastAnimation } from "./useToastAnimation";
+
+// Icons (for reference or custom implementations)
+export { DefaultIcons } from "./icons";

package/src/styles.ts

@@ -0,0 +1,208 @@
+import { ViewStyle, TextStyle } from "react-native";
+import { ToastType, ToastPosition } from "./types";
+
+/**
+ * Color configuration for each toast type
+ * All colors meet WCAG 2.1 AA contrast requirements (4.5:1 minimum)
+ */
+export interface ToastColors {
+	background: string;
+	text: string;
+	icon: string;
+	border: string;
+}
+
+/**
+ * Toast type color schemes - accessible and visually distinct
+ */
+export const TOAST_COLORS: Record<ToastType, ToastColors> = {
+	success: {
+		background: "#ECFDF5",
+		text: "#065F46",
+		icon: "#10B981",
+		border: "#10B981",
+	},
+	warning: {
+		background: "#FFFBEB",
+		text: "#92400E",
+		icon: "#F59E0B",
+		border: "#F59E0B",
+	},
+	error: {
+		background: "#FEF2F2",
+		text: "#991B1B",
+		icon: "#EF4444",
+		border: "#EF4444",
+	},
+	info: {
+		background: "#EFF6FF",
+		text: "#1E40AF",
+		icon: "#3B82F6",
+		border: "#3B82F6",
+	},
+	default: {
+		background: "#F9FAFB",
+		text: "#374151",
+		icon: "#6B7280",
+		border: "#D1D5DB",
+	},
+	custom: {
+		background: "#F9FAFB",
+		text: "#374151",
+		icon: "#6B7280",
+		border: "#D1D5DB",
+	},
+};
+
+/**
+ * Get colors for a specific toast type
+ */
+export const getToastColors = (type: ToastType): ToastColors => {
+	return TOAST_COLORS[type] || TOAST_COLORS.default;
+};
+
+/**
+ * Base toast container styles
+ */
+export const baseToastStyle: ViewStyle = {
+	flexDirection: "row",
+	alignItems: "center",
+	paddingVertical: 14,
+	paddingHorizontal: 16,
+	minHeight: 52,
+	borderLeftWidth: 4,
+	shadowColor: "#000",
+	shadowOffset: { width: 0, height: 2 },
+	shadowOpacity: 0.1,
+	shadowRadius: 8,
+	elevation: 5,
+};
+
+/**
+ * Get toast style based on position
+ * Top/Bottom: Full width, no rounded corners
+ * Center: Rounded corners with margin
+ */
+export const getPositionalStyle = (position: ToastPosition): ViewStyle => {
+	if (position === "center") {
+		return {
+			marginHorizontal: 16,
+			borderRadius: 12,
+		};
+	}
+
+	// Top or bottom - full width, no rounded corners
+	return {
+		marginHorizontal: 0,
+		borderRadius: 0,
+	};
+};
+
+/**
+ * Container positioning styles
+ */
+export const getContainerStyle = (position: ToastPosition): ViewStyle => {
+	const baseContainer: ViewStyle = {
+		position: "absolute",
+		left: 0,
+		right: 0,
+		zIndex: 9999,
+		elevation: 9999,
+	};
+
+	switch (position) {
+		case "top":
+			return {
+				...baseContainer,
+				top: 0,
+			};
+		case "bottom":
+			return {
+				...baseContainer,
+				bottom: 0,
+			};
+		case "center":
+			return {
+				...baseContainer,
+				top: 0,
+				bottom: 0,
+				justifyContent: "center",
+			};
+		default:
+			return {
+				...baseContainer,
+				top: 0,
+			};
+	}
+};
+
+/**
+ * Toast title text style (primary text, larger)
+ */
+export const titleStyle: TextStyle = {
+	fontSize: 15,
+	fontWeight: "600",
+	lineHeight: 20,
+};
+
+/**
+ * Toast description text style (secondary text, smaller)
+ */
+export const descriptionStyle: TextStyle = {
+	fontSize: 13,
+	fontWeight: "400",
+	lineHeight: 18,
+	marginTop: 2,
+	opacity: 0.85,
+};
+
+/**
+ * Toast message text style (when no title, used as main text)
+ */
+export const messageStyle: TextStyle = {
+	fontSize: 15,
+	fontWeight: "500",
+	flex: 1,
+	lineHeight: 20,
+};
+
+/**
+ * Text container style for title + description
+ */
+export const textContainerStyle: ViewStyle = {
+	flex: 1,
+};
+
+/**
+ * Toast icon container style
+ */
+export const iconContainerStyle: ViewStyle = {
+	marginRight: 12,
+	width: 24,
+	height: 24,
+	alignItems: "center",
+	justifyContent: "center",
+};
+
+/**
+ * Close button style
+ */
+export const closeButtonStyle: ViewStyle = {
+	marginLeft: 12,
+	padding: 4,
+	borderRadius: 4,
+};
+
+/**
+ * Safe area padding for different positions
+ */
+export const getSafeAreaPadding = (position: ToastPosition): ViewStyle => {
+	switch (position) {
+		case "top":
+			return { paddingTop: 50 }; // Account for status bar
+		case "bottom":
+			return { paddingBottom: 34 }; // Account for home indicator
+		default:
+			return {};
+	}
+};

package/src/types.ts

@@ -0,0 +1,157 @@
+import { ReactNode } from "react";
+import { ViewStyle, TextStyle } from "react-native";
+
+/**
+ * Toast type determines the color scheme and default icon
+ */
+export type ToastType =
+	| "success"
+	| "warning"
+	| "error"
+	| "default"
+	| "info"
+	| "custom";
+
+/**
+ * Animation type for toast enter/exit
+ */
+export type ToastAnimation = "fade" | "up" | "down" | "left" | "right" | "none";
+
+/**
+ * Position of the toast on screen
+ */
+export type ToastPosition = "top" | "bottom" | "center";
+
+/**
+ * Configuration options for a toast notification
+ */
+export interface ToastConfig {
+	/** Title to display in the toast (primary text, larger) */
+	title?: string;
+
+	/** Message/description to display in the toast (secondary text, smaller) */
+	message: string;
+
+	/** Type of toast - determines color scheme */
+	type?: ToastType;
+
+	/** Position on screen */
+	position?: ToastPosition;
+
+	/** Duration in milliseconds before auto-dismiss (0 = no auto-dismiss) */
+	duration?: number;
+
+	/** Animation type for entering */
+	animationIn?: ToastAnimation;
+
+	/** Animation type for exiting */
+	animationOut?: ToastAnimation;
+
+	/** Animation duration in milliseconds */
+	animationDuration?: number;
+
+	/** Whether toast can be dismissed by tapping */
+	dismissable?: boolean;
+
+	/** Custom icon element (e.g., from react-native-lucide) */
+	icon?: ReactNode;
+
+	/** Hide the default icon */
+	hideIcon?: boolean;
+
+	/** Custom background color (for 'custom' type) */
+	backgroundColor?: string;
+
+	/** Custom text color (for 'custom' type) */
+	textColor?: string;
+
+	/** Custom border color (for 'custom' type) */
+	borderColor?: string;
+
+	/** Custom container style */
+	style?: ViewStyle;
+
+	/** Custom text style */
+	textStyle?: TextStyle;
+
+	/** Callback when toast is shown */
+	onShow?: () => void;
+
+	/** Callback when toast is hidden */
+	onHide?: () => void;
+
+	/** Callback when toast is pressed */
+	onPress?: () => void;
+}
+
+/**
+ * Internal toast data with unique ID
+ */
+export interface Toast extends ToastConfig {
+	id: string;
+}
+
+/**
+ * Toast context value for useToast hook
+ */
+export interface ToastContextValue {
+	/** Show a toast with configuration */
+	show: (config: ToastConfig) => string;
+
+	/** Show a success toast - can be (message) or (title, description) */
+	success: (
+		titleOrMessage: string,
+		descriptionOrConfig?: string | Partial<ToastConfig>,
+		config?: Partial<ToastConfig>,
+	) => string;
+
+	/** Show a warning toast - can be (message) or (title, description) */
+	warning: (
+		titleOrMessage: string,
+		descriptionOrConfig?: string | Partial<ToastConfig>,
+		config?: Partial<ToastConfig>,
+	) => string;
+
+	/** Show an error toast - can be (message) or (title, description) */
+	error: (
+		titleOrMessage: string,
+		descriptionOrConfig?: string | Partial<ToastConfig>,
+		config?: Partial<ToastConfig>,
+	) => string;
+
+	/** Show an info toast - can be (message) or (title, description) */
+	info: (
+		titleOrMessage: string,
+		descriptionOrConfig?: string | Partial<ToastConfig>,
+		config?: Partial<ToastConfig>,
+	) => string;
+
+	/** Hide a specific toast by ID */
+	hide: (id: string) => void;
+
+	/** Hide all toasts */
+	hideAll: () => void;
+}
+
+/**
+ * Global configuration for ToastProvider
+ */
+export interface ToastProviderConfig {
+	/** Default position for all toasts */
+	defaultPosition?: ToastPosition;
+
+	/** Default duration for all toasts */
+	defaultDuration?: number;
+
+	/** Default animation in */
+	defaultAnimationIn?: ToastAnimation;
+
+	/** Default animation out */
+	defaultAnimationOut?: ToastAnimation;
+
+	/** Default animation duration */
+	defaultAnimationDuration?: number;
+
+	/** Maximum number of toasts visible at once */
+	maxToasts?: number;
+}