react-native-earl-toastify 1.0.0

package/dist/useToastAnimation.js

@@ -0,0 +1,59 @@
+import { useRef, useEffect, useCallback } from "react";
+import { Animated } from "react-native";
+import { getInitialAnimatedValues, createEnterAnimation, createExitAnimation, DEFAULT_ANIMATION_CONFIG, } from "./animations";
+/**
+ * Custom hook for managing toast animations
+ */
+export const useToastAnimation = (animationIn, animationOut, position, animationDuration = DEFAULT_ANIMATION_CONFIG.duration) => {
+    // Get initial values based on enter animation
+    const initialValues = getInitialAnimatedValues(animationIn, position);
+    // Create animated values
+    const opacity = useRef(new Animated.Value(initialValues.opacity)).current;
+    const translateX = useRef(new Animated.Value(initialValues.translateX)).current;
+    const translateY = useRef(new Animated.Value(initialValues.translateY)).current;
+    // Animation config
+    const config = {
+        duration: animationDuration,
+        useNativeDriver: true,
+    };
+    /**
+     * Start enter animation
+     */
+    const startEnterAnimation = useCallback(() => {
+        const animation = createEnterAnimation({ opacity, translateX, translateY }, config);
+        animation.start();
+    }, [opacity, translateX, translateY, config.duration]);
+    /**
+     * Start exit animation with optional callback
+     */
+    const startExitAnimation = useCallback((callback) => {
+        const animation = createExitAnimation({ opacity, translateX, translateY }, animationOut, position, config);
+        animation.start(({ finished }) => {
+            if (finished && callback) {
+                callback();
+            }
+        });
+    }, [
+        opacity,
+        translateX,
+        translateY,
+        animationOut,
+        position,
+        config.duration,
+    ]);
+    // Start enter animation on mount
+    useEffect(() => {
+        startEnterAnimation();
+    }, []);
+    // Animated style object
+    const animatedStyle = {
+        opacity,
+        transform: [{ translateX }, { translateY }],
+    };
+    return {
+        animatedStyle,
+        startEnterAnimation,
+        startExitAnimation,
+    };
+};
+//# sourceMappingURL=useToastAnimation.js.map

package/dist/useToastAnimation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToastAnimation.js","sourceRoot":"","sources":["../src/useToastAnimation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EACN,wBAAwB,EACxB,oBAAoB,EACpB,mBAAmB,EACnB,wBAAwB,GACxB,MAAM,cAAc,CAAC;AAkBtB;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAChC,WAA2B,EAC3B,YAA4B,EAC5B,QAAuB,EACvB,oBAA4B,wBAAwB,CAAC,QAAQ,EACnC,EAAE;IAC5B,8CAA8C;IAC9C,MAAM,aAAa,GAAG,wBAAwB,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;IAEtE,yBAAyB;IACzB,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;IAC1E,MAAM,UAAU,GAAG,MAAM,CACxB,IAAI,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAC5C,CAAC,OAAO,CAAC;IACV,MAAM,UAAU,GAAG,MAAM,CACxB,IAAI,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAC5C,CAAC,OAAO,CAAC;IAEV,mBAAmB;IACnB,MAAM,MAAM,GAAG;QACd,QAAQ,EAAE,iBAAiB;QAC3B,eAAe,EAAE,IAAI;KACrB,CAAC;IAEF;;OAEG;IACH,MAAM,mBAAmB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC5C,MAAM,SAAS,GAAG,oBAAoB,CACrC,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,EACnC,MAAM,CACN,CAAC;QACF,SAAS,CAAC,KAAK,EAAE,CAAC;IACnB,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEvD;;OAEG;IACH,MAAM,kBAAkB,GAAG,WAAW,CACrC,CAAC,QAAqB,EAAE,EAAE;QACzB,MAAM,SAAS,GAAG,mBAAmB,CACpC,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,EACnC,YAAY,EACZ,QAAQ,EACR,MAAM,CACN,CAAC;QACF,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;YAChC,IAAI,QAAQ,IAAI,QAAQ,EAAE,CAAC;gBAC1B,QAAQ,EAAE,CAAC;YACZ,CAAC;QACF,CAAC,CAAC,CAAC;IACJ,CAAC,EACD;QACC,OAAO;QACP,UAAU;QACV,UAAU;QACV,YAAY;QACZ,QAAQ;QACR,MAAM,CAAC,QAAQ;KACf,CACD,CAAC;IAEF,iCAAiC;IACjC,SAAS,CAAC,GAAG,EAAE;QACd,mBAAmB,EAAE,CAAC;IACvB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,wBAAwB;IACxB,MAAM,aAAa,GAA6C;QAC/D,OAAO;QACP,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,EAAE,CAAqB;KAC/D,CAAC;IAEF,OAAO;QACN,aAAa;QACb,mBAAmB;QACnB,kBAAkB;KAClB,CAAC;AACH,CAAC,CAAC"}

package/package.json

@@ -0,0 +1,58 @@
+{
+	"name": "react-native-earl-toastify",
+	"version": "1.0.0",
+	"description": "A beautiful, customizable toast notification library for React Native with animations, multiple toast types, and accessibility support",
+	"main": "dist/index.js",
+	"module": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"react-native": "src/index.ts",
+	"source": "src/index.ts",
+	"files": [
+		"src",
+		"dist",
+		"README.md",
+		"CHANGELOG.md"
+	],
+	"scripts": {
+		"build": "tsc",
+		"prepublishOnly": "npm run build",
+		"test": "echo \"No tests specified\" && exit 0"
+	},
+	"keywords": [
+		"react-native",
+		"toast",
+		"toastify",
+		"notification",
+		"alert",
+		"message",
+		"snackbar",
+		"popup",
+		"animated",
+		"accessible"
+	],
+	"author": "Ordovez, Earl Romeo",
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/Swif7ify/react-native-earl-toastify.git"
+	},
+	"bugs": {
+		"url": "https://github.com/Swif7ify/react-native-earl-toastify/issues"
+	},
+	"homepage": "https://github.com/Swif7ify/react-native-earl-toastify#readme",
+	"funding": {
+		"type": "github",
+		"url": "https://github.com/sponsors/Swif7ify"
+	},
+	"peerDependencies": {
+		"react": ">=17.0.0",
+		"react-native": ">=0.64.0"
+	},
+	"devDependencies": {
+		"@types/react": "^18.2.0",
+		"@types/react-native": "^0.72.0",
+		"react": "^18.2.0",
+		"react-native": "^0.72.0",
+		"typescript": "^5.0.0"
+	}
+}

package/src/Toast.tsx

@@ -0,0 +1,250 @@
+import React, { useEffect, useRef, useCallback } from "react";
+import {
+	Animated,
+	Text,
+	TouchableOpacity,
+	View,
+	StyleSheet,
+	AccessibilityInfo,
+} from "react-native";
+import { Toast as ToastData, ToastPosition, ToastAnimation } from "./types";
+import { useToastAnimation } from "./useToastAnimation";
+import {
+	getToastColors,
+	baseToastStyle,
+	getPositionalStyle,
+	titleStyle,
+	descriptionStyle,
+	messageStyle,
+	textContainerStyle,
+	iconContainerStyle,
+	closeButtonStyle,
+} from "./styles";
+import { DefaultIcons } from "./icons";
+
+export interface ToastProps {
+	toast: ToastData;
+	position: ToastPosition;
+	onHide: (id: string) => void;
+}
+
+/**
+ * Individual Toast component with animations
+ */
+export const Toast: React.FC<ToastProps> = ({ toast, position, onHide }) => {
+	const {
+		id,
+		title,
+		message,
+		type = "default",
+		duration = 3000,
+		animationIn = "fade",
+		animationOut = "fade",
+		animationDuration = 300,
+		dismissable = true,
+		icon,
+		hideIcon = false,
+		backgroundColor,
+		textColor,
+		borderColor,
+		style,
+		textStyle,
+		onShow,
+		onHide: onHideCallback,
+		onPress,
+	} = toast;
+
+	const timerRef = useRef<NodeJS.Timeout | null>(null);
+	const isHidingRef = useRef(false);
+
+	// Get colors based on type
+	const colors = getToastColors(type);
+	const finalBackgroundColor = backgroundColor || colors.background;
+	const finalTextColor = textColor || colors.text;
+	const finalBorderColor = borderColor || colors.border;
+
+	// Animation hook
+	const { animatedStyle, startExitAnimation } = useToastAnimation(
+		animationIn,
+		animationOut,
+		position,
+		animationDuration,
+	);
+
+	/**
+	 * Handle hiding the toast
+	 */
+	const handleHide = useCallback(() => {
+		if (isHidingRef.current) return;
+		isHidingRef.current = true;
+
+		// Clear timer
+		if (timerRef.current) {
+			clearTimeout(timerRef.current);
+			timerRef.current = null;
+		}
+
+		// Start exit animation
+		startExitAnimation(() => {
+			onHideCallback?.();
+			onHide(id);
+		});
+	}, [id, onHide, onHideCallback, startExitAnimation]);
+
+	/**
+	 * Handle press on toast
+	 */
+	const handlePress = useCallback(() => {
+		onPress?.();
+		if (dismissable) {
+			handleHide();
+		}
+	}, [onPress, dismissable, handleHide]);
+
+	// Setup auto-dismiss timer
+	useEffect(() => {
+		// Call onShow callback
+		onShow?.();
+
+		// Announce to accessibility
+		AccessibilityInfo.announceForAccessibility(message);
+
+		// Setup auto-dismiss if duration > 0
+		if (duration > 0) {
+			timerRef.current = setTimeout(() => {
+				handleHide();
+			}, duration);
+		}
+
+		return () => {
+			if (timerRef.current) {
+				clearTimeout(timerRef.current);
+			}
+		};
+	}, [duration, message, onShow, handleHide]);
+
+	// Render icon
+	const renderIcon = () => {
+		if (hideIcon) return null;
+
+		if (icon) {
+			return <View style={iconContainerStyle}>{icon}</View>;
+		}
+
+		// Use default icon based on type
+		const DefaultIcon = DefaultIcons[type];
+		if (DefaultIcon) {
+			return (
+				<View style={iconContainerStyle}>
+					<DefaultIcon color={colors.icon} size={20} />
+				</View>
+			);
+		}
+
+		return null;
+	};
+
+	// Render close button
+	const renderCloseButton = () => {
+		if (!dismissable) return null;
+
+		return (
+			<TouchableOpacity
+				style={closeButtonStyle}
+				onPress={handleHide}
+				accessibilityRole="button"
+				accessibilityLabel="Dismiss notification"
+				hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+			>
+				<DefaultIcons.close color={colors.icon} size={16} />
+			</TouchableOpacity>
+		);
+	};
+
+	const containerStyles = [
+		baseToastStyle,
+		getPositionalStyle(position),
+		{
+			backgroundColor: finalBackgroundColor,
+			borderLeftColor: finalBorderColor,
+		},
+		style,
+	];
+
+	// Accessibility label combines title and message
+	const accessibilityLabel = title ? `${title}. ${message}` : message;
+
+	// Render text content - title + description or just message
+	const renderTextContent = () => {
+		if (title) {
+			// Has title: render title (larger) + message as description (smaller)
+			return (
+				<View style={textContainerStyle}>
+					<Text
+						style={[
+							titleStyle,
+							{ color: finalTextColor },
+							textStyle,
+						]}
+						numberOfLines={2}
+					>
+						{title}
+					</Text>
+					<Text
+						style={[descriptionStyle, { color: finalTextColor }]}
+						numberOfLines={2}
+					>
+						{message}
+					</Text>
+				</View>
+			);
+		}
+		// No title: render message as main text
+		return (
+			<Text
+				style={[messageStyle, { color: finalTextColor }, textStyle]}
+				numberOfLines={3}
+			>
+				{message}
+			</Text>
+		);
+	};
+
+	return (
+		<Animated.View
+			style={[
+				containerStyles,
+				{
+					opacity: animatedStyle.opacity,
+					transform: animatedStyle.transform,
+				},
+			]}
+			accessibilityRole="alert"
+			accessibilityLiveRegion="polite"
+		>
+			<TouchableOpacity
+				style={styles.content}
+				onPress={handlePress}
+				activeOpacity={dismissable ? 0.8 : 1}
+				disabled={!dismissable && !onPress}
+				accessibilityRole="button"
+				accessibilityLabel={accessibilityLabel}
+				accessibilityHint={
+					dismissable ? "Double tap to dismiss" : undefined
+				}
+			>
+				{renderIcon()}
+				{renderTextContent()}
+				{renderCloseButton()}
+			</TouchableOpacity>
+		</Animated.View>
+	);
+};
+
+const styles = StyleSheet.create({
+	content: {
+		flex: 1,
+		flexDirection: "row",
+		alignItems: "center",
+	},
+});

package/src/ToastContainer.tsx

@@ -0,0 +1,70 @@
+import React, { useMemo } from "react";
+import { View, StyleSheet } from "react-native";
+import { Toast as ToastData, ToastPosition } from "./types";
+import { Toast } from "./Toast";
+
+export interface ToastContainerProps {
+	toasts: ToastData[];
+	position: ToastPosition;
+	onHide: (id: string) => void;
+}
+
+/**
+ * Container component that positions and renders toasts
+ */
+export const ToastContainer: React.FC<ToastContainerProps> = ({
+	toasts,
+	position,
+	onHide,
+}) => {
+	// Filter toasts for this position
+	const positionedToasts = useMemo(() => {
+		return toasts.filter((toast) => (toast.position || "top") === position);
+	}, [toasts, position]);
+
+	if (positionedToasts.length === 0) return null;
+
+	// Get container positioning based on position
+	const getContainerPositionStyle = () => {
+		switch (position) {
+			case "top":
+				return { top: 0, paddingTop: 50 }; // 50px for status bar
+			case "bottom":
+				return { bottom: 0, paddingBottom: 34 }; // 34px for home indicator
+			case "center":
+				return { top: 0, bottom: 0, justifyContent: "center" as const };
+			default:
+				return { top: 0, paddingTop: 50 };
+		}
+	};
+
+	return (
+		<View
+			style={[styles.container, getContainerPositionStyle()]}
+			pointerEvents="box-none"
+		>
+			{positionedToasts.map((toast, index) => (
+				<View
+					key={toast.id}
+					style={index > 0 ? styles.toastGap : undefined}
+				>
+					<Toast toast={toast} position={position} onHide={onHide} />
+				</View>
+			))}
+		</View>
+	);
+};
+
+const styles = StyleSheet.create({
+	container: {
+		position: "absolute",
+		left: 0,
+		right: 0,
+		zIndex: 9999,
+		elevation: 9999,
+		pointerEvents: "box-none",
+	},
+	toastGap: {
+		marginTop: 8,
+	},
+});

package/src/ToastProvider.tsx

@@ -0,0 +1,271 @@
+import React, {
+	createContext,
+	useState,
+	useCallback,
+	useMemo,
+	ReactNode,
+} from "react";
+import { View, StyleSheet } from "react-native";
+import {
+	Toast as ToastData,
+	ToastConfig,
+	ToastContextValue,
+	ToastProviderConfig,
+	ToastPosition,
+} from "./types";
+import { ToastContainer } from "./ToastContainer";
+
+/**
+ * Toast context for accessing toast functions
+ */
+export const ToastContext = createContext<ToastContextValue | null>(null);
+
+/**
+ * Generate unique ID for toasts
+ */
+const generateId = (): string => {
+	return `toast-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+};
+
+/**
+ * Default configuration values
+ */
+const DEFAULT_CONFIG: Required<ToastProviderConfig> = {
+	defaultPosition: "top",
+	defaultDuration: 3000,
+	defaultAnimationIn: "fade",
+	defaultAnimationOut: "fade",
+	defaultAnimationDuration: 300,
+	maxToasts: 5,
+};
+
+export interface ToastProviderProps {
+	children: ReactNode;
+	config?: ToastProviderConfig;
+}
+
+/**
+ * ToastProvider - Wrap your app with this component to enable toasts
+ *
+ * @example
+ * ```tsx
+ * <ToastProvider config={{ defaultPosition: 'bottom' }}>
+ *   <App />
+ * </ToastProvider>
+ * ```
+ */
+export const ToastProvider: React.FC<ToastProviderProps> = ({
+	children,
+	config = {},
+}) => {
+	const [toasts, setToasts] = useState<ToastData[]>([]);
+
+	// Merge config with defaults
+	const mergedConfig = useMemo(
+		() => ({ ...DEFAULT_CONFIG, ...config }),
+		[config],
+	);
+
+	/**
+	 * Show a toast notification
+	 */
+	const show = useCallback(
+		(toastConfig: ToastConfig): string => {
+			const id = generateId();
+
+			const newToast: ToastData = {
+				id,
+				title: toastConfig.title,
+				message: toastConfig.message,
+				type: toastConfig.type || "default",
+				position: toastConfig.position || mergedConfig.defaultPosition,
+				duration: toastConfig.duration ?? mergedConfig.defaultDuration,
+				animationIn:
+					toastConfig.animationIn || mergedConfig.defaultAnimationIn,
+				animationOut:
+					toastConfig.animationOut ||
+					mergedConfig.defaultAnimationOut,
+				animationDuration:
+					toastConfig.animationDuration ||
+					mergedConfig.defaultAnimationDuration,
+				dismissable: toastConfig.dismissable ?? true,
+				icon: toastConfig.icon,
+				hideIcon: toastConfig.hideIcon,
+				backgroundColor: toastConfig.backgroundColor,
+				textColor: toastConfig.textColor,
+				borderColor: toastConfig.borderColor,
+				style: toastConfig.style,
+				textStyle: toastConfig.textStyle,
+				onShow: toastConfig.onShow,
+				onHide: toastConfig.onHide,
+				onPress: toastConfig.onPress,
+			};
+
+			setToasts((prev) => {
+				// Limit to maxToasts
+				const updated = [...prev, newToast];
+				if (updated.length > mergedConfig.maxToasts) {
+					return updated.slice(-mergedConfig.maxToasts);
+				}
+				return updated;
+			});
+
+			return id;
+		},
+		[mergedConfig],
+	);
+
+	/**
+	 * Helper to parse flexible arguments: (message) or (title, description)
+	 */
+	const parseArgs = (
+		titleOrMessage: string,
+		descriptionOrConfig?: string | Partial<ToastConfig>,
+		config?: Partial<ToastConfig>,
+	): { title?: string; message: string; config?: Partial<ToastConfig> } => {
+		if (typeof descriptionOrConfig === "string") {
+			// Called as (title, description, config?)
+			return {
+				title: titleOrMessage,
+				message: descriptionOrConfig,
+				config,
+			};
+		} else {
+			// Called as (message, config?)
+			return {
+				message: titleOrMessage,
+				config: descriptionOrConfig,
+			};
+		}
+	};
+
+	/**
+	 * Show a success toast
+	 */
+	const success = useCallback(
+		(
+			titleOrMessage: string,
+			descriptionOrConfig?: string | Partial<ToastConfig>,
+			config?: Partial<ToastConfig>,
+		): string => {
+			const {
+				title,
+				message,
+				config: cfg,
+			} = parseArgs(titleOrMessage, descriptionOrConfig, config);
+			return show({ ...cfg, title, message, type: "success" });
+		},
+		[show],
+	);
+
+	/**
+	 * Show a warning toast
+	 */
+	const warning = useCallback(
+		(
+			titleOrMessage: string,
+			descriptionOrConfig?: string | Partial<ToastConfig>,
+			config?: Partial<ToastConfig>,
+		): string => {
+			const {
+				title,
+				message,
+				config: cfg,
+			} = parseArgs(titleOrMessage, descriptionOrConfig, config);
+			return show({ ...cfg, title, message, type: "warning" });
+		},
+		[show],
+	);
+
+	/**
+	 * Show an error toast
+	 */
+	const error = useCallback(
+		(
+			titleOrMessage: string,
+			descriptionOrConfig?: string | Partial<ToastConfig>,
+			config?: Partial<ToastConfig>,
+		): string => {
+			const {
+				title,
+				message,
+				config: cfg,
+			} = parseArgs(titleOrMessage, descriptionOrConfig, config);
+			return show({ ...cfg, title, message, type: "error" });
+		},
+		[show],
+	);
+
+	/**
+	 * Show an info toast
+	 */
+	const info = useCallback(
+		(
+			titleOrMessage: string,
+			descriptionOrConfig?: string | Partial<ToastConfig>,
+			config?: Partial<ToastConfig>,
+		): string => {
+			const {
+				title,
+				message,
+				config: cfg,
+			} = parseArgs(titleOrMessage, descriptionOrConfig, config);
+			return show({ ...cfg, title, message, type: "info" });
+		},
+		[show],
+	);
+
+	/**
+	 * Hide a specific toast by ID
+	 */
+	const hide = useCallback((id: string): void => {
+		setToasts((prev) => prev.filter((toast) => toast.id !== id));
+	}, []);
+
+	/**
+	 * Hide all toasts
+	 */
+	const hideAll = useCallback((): void => {
+		setToasts([]);
+	}, []);
+
+	// Context value
+	const contextValue = useMemo<ToastContextValue>(
+		() => ({
+			show,
+			success,
+			warning,
+			error,
+			info,
+			hide,
+			hideAll,
+		}),
+		[show, success, warning, error, info, hide, hideAll],
+	);
+
+	// Group toasts by position
+	const positions: ToastPosition[] = ["top", "center", "bottom"];
+
+	return (
+		<ToastContext.Provider value={contextValue}>
+			<View style={styles.container}>
+				{children}
+				{/* Render toast containers for each position */}
+				{positions.map((position) => (
+					<ToastContainer
+						key={position}
+						toasts={toasts}
+						position={position}
+						onHide={hide}
+					/>
+				))}
+			</View>
+		</ToastContext.Provider>
+	);
+};
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+	},
+});