beautiful-snackbar 1.0.0

package/lib/manager.js

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.snackbar = exports.SnackbarManager = exports.SnackbarItem = void 0;
+const react_native_1 = require("react-native");
+class SnackbarItem {
+    constructor(options, id) {
+        this.onShowRequested = () => { };
+        this.onHideRequested = () => { };
+        this.id = id;
+        this.message = options.message;
+        this.messageStyle = options.messageStyle;
+        this.containerStyle = options.containerStyle;
+        this.actionLabel = options.actionLabel;
+        this.actionStyle = options.actionStyle;
+        this.onActionPress = options.onActionPress;
+        this.icon = options.icon;
+        this.duration = options.duration ?? 'short';
+        this.position = options.position;
+        this.animationType = options.animationType;
+        this.bottomOffset = options.bottomOffset;
+        this.topOffset = options.topOffset;
+        this.dismissOnNavigation = Boolean(options.dismissOnNavigation);
+        this.backgroundColor = options.backgroundColor;
+        this.textColor = options.textColor;
+        this.actionColor = options.actionColor;
+        this.type = options.type;
+        this.data = options.data;
+    }
+}
+exports.SnackbarItem = SnackbarItem;
+class SnackbarManager {
+    constructor() {
+        this.configListeners = [];
+        this.activeItems = [];
+        this.counter = 0;
+        this.config = {
+            avoidKeyboard: true,
+            position: 'bottom',
+            animationType: 'slide',
+            bottomOffset: 24,
+            topOffset: react_native_1.Platform.OS === 'ios' ? 50 : 24,
+        };
+    }
+    registerListener(listener) {
+        this.stateListener = listener;
+        listener([...this.activeItems]);
+    }
+    unregisterListener() {
+        this.stateListener = undefined;
+    }
+    registerConfigListener(listener) {
+        this.configListeners.push(listener);
+        listener({ ...this.config });
+        return () => {
+            this.configListeners = this.configListeners.filter((l) => l !== listener);
+        };
+    }
+    setAvoidKeyboard(val) {
+        this.config.avoidKeyboard = val;
+        this.configListeners.forEach((listener) => listener({ ...this.config }));
+    }
+    getAvoidKeyboard() {
+        return this.config.avoidKeyboard;
+    }
+    setPosition(val) {
+        this.config.position = val;
+        this.configListeners.forEach((listener) => listener({ ...this.config }));
+    }
+    getPosition() {
+        return this.config.position;
+    }
+    setAnimationType(val) {
+        this.config.animationType = val;
+        this.configListeners.forEach((listener) => listener({ ...this.config }));
+    }
+    getAnimationType() {
+        return this.config.animationType;
+    }
+    setBottomOffset(val) {
+        this.config.bottomOffset = val;
+        this.configListeners.forEach((listener) => listener({ ...this.config }));
+    }
+    getBottomOffset() {
+        return this.config.bottomOffset;
+    }
+    setTopOffset(val) {
+        this.config.topOffset = val;
+        this.configListeners.forEach((listener) => listener({ ...this.config }));
+    }
+    getTopOffset() {
+        return this.config.topOffset;
+    }
+    show(options) {
+        this.counter++;
+        const id = `sb_${Date.now()}_${this.counter}`;
+        const item = new SnackbarItem(options, id);
+        this.activeItems.push(item);
+        this.stateListener?.([...this.activeItems]);
+        return item;
+    }
+    dismiss(item) {
+        this.activeItems = this.activeItems.filter(x => x.id !== item.id);
+        this.stateListener?.([...this.activeItems]);
+    }
+}
+exports.SnackbarManager = SnackbarManager;
+exports.snackbar = new SnackbarManager();

package/lib/types.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+export type SnackbarDuration = 'short' | 'medium' | 'long' | 'infinite';
+export type SnackbarPosition = 'top' | 'bottom';
+export type SnackbarAnimationType = 'slide' | 'fade' | 'scale';
+export interface SnackbarOptions {
+    message: string;
+    messageStyle?: TextStyle;
+    containerStyle?: ViewStyle;
+    actionLabel?: string;
+    actionStyle?: TextStyle;
+    onActionPress?: () => void;
+    icon?: React.ReactNode;
+    duration?: SnackbarDuration;
+    position?: SnackbarPosition;
+    animationType?: SnackbarAnimationType;
+    bottomOffset?: number;
+    topOffset?: number;
+    dismissOnNavigation?: boolean;
+    backgroundColor?: string;
+    textColor?: string;
+    actionColor?: string;
+    type?: string;
+    data?: any;
+}

package/lib/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/useSnackbarAnimation.d.ts

@@ -0,0 +1,14 @@
+import { Animated } from "react-native";
+import { SnackbarItem } from './manager';
+export declare const useSnackbarAnimation: (item: SnackbarItem) => {
+    animStyle: {
+        opacity: Animated.Value;
+        transform: ({
+            translateY: Animated.Value;
+            scale?: undefined;
+        } | {
+            scale: Animated.Value;
+            translateY?: undefined;
+        })[];
+    };
+};

package/lib/useSnackbarAnimation.js

@@ -0,0 +1,118 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSnackbarAnimation = void 0;
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const manager_1 = require("./manager");
+const constants_1 = require("./constants");
+const useSnackbarAnimation = (item) => {
+    const durationMs = (0, constants_1.getDurationMs)(item.duration);
+    const position = item.position || manager_1.snackbar.getPosition();
+    const animType = item.animationType || manager_1.snackbar.getAnimationType();
+    const isTop = position === "top";
+    const offset = isTop
+        ? item.topOffset !== undefined
+            ? item.topOffset
+            : manager_1.snackbar.getTopOffset()
+        : item.bottomOffset !== undefined
+            ? item.bottomOffset
+            : manager_1.snackbar.getBottomOffset();
+    const startVal = isTop ? -120 : 120;
+    const endVal = isTop ? offset : -offset;
+    const opacity = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    const scale = (0, react_1.useRef)(new react_native_1.Animated.Value(animType === "scale" ? 0.8 : 1)).current;
+    const translateY = (0, react_1.useRef)(new react_native_1.Animated.Value(animType === "slide" ? startVal : endVal)).current;
+    const animStyle = {
+        opacity,
+        transform: [{ translateY }, { scale }],
+    };
+    const removeSelf = (0, react_1.useCallback)(() => {
+        manager_1.snackbar.dismiss(item);
+    }, [item]);
+    const animateIntro = (0, react_1.useCallback)(() => {
+        const animations = [
+            react_native_1.Animated.timing(opacity, {
+                toValue: 1,
+                duration: constants_1.TRANSITION_SPEED,
+                useNativeDriver: true,
+            }),
+        ];
+        if (animType === "slide") {
+            animations.push(react_native_1.Animated.timing(translateY, {
+                toValue: endVal,
+                duration: constants_1.TRANSITION_SPEED,
+                useNativeDriver: true,
+            }));
+        }
+        if (animType === "scale") {
+            animations.push(react_native_1.Animated.spring(scale, {
+                toValue: 1,
+                tension: 40,
+                friction: 6,
+                useNativeDriver: true,
+            }));
+        }
+        return react_native_1.Animated.parallel(animations);
+    }, [opacity, translateY, scale, animType, endVal]);
+    const animateOutro = (0, react_1.useCallback)(() => {
+        const animations = [
+            react_native_1.Animated.timing(opacity, {
+                toValue: 0,
+                duration: constants_1.TRANSITION_SPEED,
+                useNativeDriver: true,
+            }),
+        ];
+        if (animType === "slide") {
+            animations.push(react_native_1.Animated.timing(translateY, {
+                toValue: startVal,
+                duration: constants_1.TRANSITION_SPEED,
+                useNativeDriver: true,
+            }));
+        }
+        if (animType === "scale") {
+            animations.push(react_native_1.Animated.timing(scale, {
+                toValue: 0.8,
+                duration: constants_1.TRANSITION_SPEED,
+                useNativeDriver: true,
+            }));
+        }
+        return react_native_1.Animated.parallel(animations);
+    }, [opacity, translateY, scale, animType, startVal]);
+    const animateIntroAndOutro = (0, react_1.useCallback)(() => {
+        react_native_1.Animated.sequence([
+            animateIntro(),
+            react_native_1.Animated.delay(durationMs),
+            animateOutro(),
+        ]).start(({ finished }) => {
+            if (finished) {
+                removeSelf();
+            }
+        });
+    }, [animateIntro, animateOutro, durationMs, removeSelf]);
+    const animateShow = (0, react_1.useCallback)(() => {
+        animateIntro().start();
+    }, [animateIntro]);
+    const animateHide = (0, react_1.useCallback)(() => {
+        animateOutro().start();
+    }, [animateOutro]);
+    const animateDismiss = (0, react_1.useCallback)(() => {
+        animateOutro().start(({ finished }) => {
+            if (finished) {
+                removeSelf();
+            }
+        });
+    }, [animateOutro, removeSelf]);
+    (0, react_1.useEffect)(() => {
+        if (item.duration !== 'infinite') {
+            animateIntroAndOutro();
+        }
+        else {
+            item.onShowRequested = animateShow;
+            item.onHideRequested = animateHide;
+            animateShow();
+        }
+        item.onDismissRequested = animateDismiss;
+    }, [animateDismiss, animateHide, item, animateShow, animateIntroAndOutro]);
+    return { animStyle };
+};
+exports.useSnackbarAnimation = useSnackbarAnimation;

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "beautiful-snackbar",
+  "version": "1.0.0",
+  "description": "A beautiful, highly customizable, animated snackbar for React Native.",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Satwikk1/beautiful-snackbar.git"
+  },
+  "scripts": {
+    "build": "tsc"
+  },
+  "private": false,
+  "keywords": [
+    "react-native",
+    "snackbar",
+    "toast",
+    "notification",
+    "animated"
+  ],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-safe-area-context": "*"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "@types/react": "^18.0.0 || ^19.0.0"
+  }
+}

package/src/components/ActionableSnackbar.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View, Animated } from 'react-native';
+import { SnackbarItem, snackbar } from '../manager';
+import { useSnackbarAnimation } from '../useSnackbarAnimation';
+
+interface ActionableSnackbarProps {
+	item: SnackbarItem;
+}
+
+export const ActionableSnackbar = ({ item }: ActionableSnackbarProps) => {
+	const { animStyle } = useSnackbarAnimation(item);
+
+	const customContainerStyle = [
+		styles.wrap,
+		item.backgroundColor ? { backgroundColor: item.backgroundColor } : null,
+		item.containerStyle,
+	];
+
+	const customMessageStyle = [
+		styles.message,
+		item.textColor ? { color: item.textColor } : null,
+		item.messageStyle,
+	];
+
+	const customActionStyle = [
+		styles.actionText,
+		item.actionColor ? { color: item.actionColor } : null,
+		item.actionStyle,
+	];
+
+	const isTop = (item.position || snackbar.getPosition()) === 'top';
+	const positionStyle = isTop ? { top: 0 } : { bottom: 0 };
+
+	const handleActionPress = () => {
+		item.onActionPress?.();
+		item.onDismissRequested?.();
+	};
+
+	return (
+		<Animated.View style={[styles.outer, positionStyle, animStyle]}>
+			<View style={customContainerStyle}>
+				<TouchableOpacity activeOpacity={1} style={styles.contentArea}>
+					{item.icon && <View style={styles.iconWrap}>{item.icon}</View>}
+					<Text numberOfLines={2} style={customMessageStyle}>
+						{item.message}
+					</Text>
+				</TouchableOpacity>
+				{item.actionLabel && (
+					<TouchableOpacity 
+						onPress={handleActionPress} 
+						style={styles.actionBtn}
+						activeOpacity={0.7}
+					>
+						<Text style={customActionStyle}>
+							{item.actionLabel}
+						</Text>
+					</TouchableOpacity>
+				)}
+			</View>
+		</Animated.View>
+	);
+};
+
+const styles = StyleSheet.create({
+	outer: {
+		width: '100%',
+		position: 'absolute',
+	},
+	wrap: {
+		paddingVertical: 14,
+		paddingHorizontal: 16,
+		marginHorizontal: 16,
+		backgroundColor: '#1E293B',
+		flexDirection: 'row',
+		alignItems: 'center',
+		justifyContent: 'space-between',
+		borderRadius: 10,
+		shadowColor: '#000',
+		shadowOffset: { width: 0, height: 4 },
+		shadowOpacity: 0.15,
+		shadowRadius: 6,
+		elevation: 4,
+	},
+	contentArea: {
+		flexDirection: 'row',
+		alignItems: 'center',
+		flex: 1,
+		paddingRight: 12,
+	},
+	iconWrap: {
+		marginRight: 10,
+		justifyContent: 'center',
+		alignItems: 'center',
+	},
+	message: {
+		color: '#F8FAFC',
+		fontSize: 14,
+		fontWeight: '600',
+		flexShrink: 1,
+	},
+	actionBtn: {
+		justifyContent: 'center',
+	},
+	actionText: {
+		color: '#10B981', // Emerald 500
+		fontSize: 14,
+		fontWeight: '700',
+	},
+});

package/src/components/BeautifulSnackbar.tsx

@@ -0,0 +1,203 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { Animated, Keyboard, Platform, StyleSheet, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { SnackbarItem, snackbar } from '../manager';
+import { StandardSnackbar } from './StandardSnackbar';
+import { ActionableSnackbar } from './ActionableSnackbar';
+import { useSnackbarAnimation } from '../useSnackbarAnimation';
+
+export interface BeautifulSnackbarProps {
+	navigation?: any;
+	avoidKeyboard?: boolean;
+	templates?: Record<string, React.ComponentType<{ item: SnackbarItem; dismiss?: () => void }>>;
+}
+
+const CustomTemplateWrapper = ({
+	item,
+	Template,
+}: {
+	item: SnackbarItem;
+	Template: React.ComponentType<{ item: SnackbarItem; dismiss?: () => void }>;
+}) => {
+	const { animStyle } = useSnackbarAnimation(item);
+	const isTop = (item.position || snackbar.getPosition()) === 'top';
+	const positionStyle = isTop ? { top: 0 } : { bottom: 0 };
+	const dismiss = useCallback(() => {
+		item.onDismissRequested?.();
+	}, [item]);
+
+	return (
+		<Animated.View style={[styles.customOuter, positionStyle, animStyle]}>
+			<Template item={item} dismiss={dismiss} />
+		</Animated.View>
+	);
+};
+
+export const BeautifulSnackbar = ({
+	navigation,
+	avoidKeyboard: propAvoidKeyboard,
+	templates,
+}: BeautifulSnackbarProps) => {
+	const [activeItems, setActiveItems] = useState<SnackbarItem[]>([]);
+	const [avoidKeyboard, setAvoidKeyboard] = useState(snackbar.getAvoidKeyboard());
+	const [globalPosition, setGlobalPosition] = useState(snackbar.getPosition());
+	const [keyboardOffset] = useState(() => new Animated.Value(0));
+
+	const insets = useSafeAreaInsets();
+	const bottomInset = insets.bottom;
+
+	useEffect(() => {
+		snackbar.registerListener(setActiveItems);
+		const unregisterConfig = snackbar.registerConfigListener((config) => {
+			setAvoidKeyboard(config.avoidKeyboard);
+			setGlobalPosition(config.position);
+		});
+
+		return () => {
+			snackbar.unregisterListener();
+			unregisterConfig();
+		};
+	}, []);
+
+	// Prioritize prop value if specified, otherwise fall back to manager configuration
+	const finalAvoidKeyboard = propAvoidKeyboard !== undefined ? propAvoidKeyboard : avoidKeyboard;
+
+	useEffect(() => {
+		if (!finalAvoidKeyboard) {
+			Animated.timing(keyboardOffset, {
+				toValue: 0,
+				duration: 200,
+				useNativeDriver: true,
+			}).start();
+			return;
+		}
+
+		const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+		const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+
+		const showSubscription = Keyboard.addListener(showEvent, (e: any) => {
+			const targetOffset = Math.max(0, e.endCoordinates.height - bottomInset);
+			Animated.timing(keyboardOffset, {
+				toValue: targetOffset,
+				duration: e.duration || 250,
+				useNativeDriver: true,
+			}).start();
+		});
+
+		const hideSubscription = Keyboard.addListener(hideEvent, (e: any) => {
+			Animated.timing(keyboardOffset, {
+				toValue: 0,
+				duration: e.duration || 250,
+				useNativeDriver: true,
+			}).start();
+		});
+
+		return () => {
+			showSubscription.remove();
+			hideSubscription.remove();
+		};
+	}, [finalAvoidKeyboard, keyboardOffset, bottomInset]);
+
+	const handleNavigationStateChange = useCallback(() => {
+		activeItems.forEach((item: SnackbarItem) => {
+			if (item.dismissOnNavigation) {
+				item.onDismissRequested?.();
+			}
+		});
+	}, [activeItems]);
+
+	useEffect(() => {
+		let cleanup: (() => void) | undefined;
+		if (navigation && typeof navigation.addListener === 'function') {
+			try {
+				const isReady = typeof navigation.isReady === 'function' ? navigation.isReady() : true;
+				if (isReady) {
+					cleanup = navigation.addListener('state', handleNavigationStateChange);
+				}
+			} catch (e) {
+				console.warn('BeautifulSnackbar failed to bind navigation listener:', e);
+			}
+		}
+		return cleanup;
+	}, [handleNavigationStateChange, navigation]);
+
+	const renderItem = (item: SnackbarItem) => {
+		// Custom template checks
+		if (item.type && templates && templates[item.type]) {
+			const TemplateComponent = templates[item.type];
+			return (
+				<CustomTemplateWrapper
+					key={item.id}
+					item={item}
+					Template={TemplateComponent}
+				/>
+			);
+		}
+
+		if (item.actionLabel && item.onActionPress) {
+			return <ActionableSnackbar key={item.id} item={item} />;
+		}
+		return <StandardSnackbar key={item.id} item={item} />;
+	};
+
+	const topItems = activeItems.filter(
+		(item: SnackbarItem) => (item.position || globalPosition) === 'top'
+	);
+	const bottomItems = activeItems.filter(
+		(item: SnackbarItem) => (item.position || globalPosition) === 'bottom'
+	);
+
+	return (
+		<View style={styles.rootContainer} pointerEvents="box-none">
+			<View style={styles.topContainer} pointerEvents="box-none">
+				{topItems.map(renderItem)}
+			</View>
+			<Animated.View
+				style={[
+					styles.bottomContainer,
+					{
+						transform: [
+							{
+								translateY: keyboardOffset.interpolate({
+									inputRange: [0, 1000],
+									outputRange: [0, -1000],
+								}),
+							},
+						],
+					},
+				]}
+				pointerEvents="box-none"
+			>
+				{bottomItems.map(renderItem)}
+			</Animated.View>
+		</View>
+	);
+};
+
+const styles = StyleSheet.create({
+	rootContainer: {
+		position: 'absolute',
+		bottom: 0,
+		left: 0,
+		right: 0,
+		top: 0,
+	},
+	topContainer: {
+		position: 'absolute',
+		top: 0,
+		left: 0,
+		right: 0,
+		justifyContent: 'flex-start',
+	},
+	bottomContainer: {
+		position: 'absolute',
+		bottom: 0,
+		left: 0,
+		right: 0,
+		justifyContent: 'flex-end',
+	},
+	customOuter: {
+		width: '100%',
+		position: 'absolute',
+	},
+});

package/src/components/StandardSnackbar.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { StyleSheet, Text, View, Animated } from 'react-native';
+import { SnackbarItem, snackbar } from '../manager';
+import { useSnackbarAnimation } from '../useSnackbarAnimation';
+
+interface StandardSnackbarProps {
+	item: SnackbarItem;
+}
+
+export const StandardSnackbar = ({ item }: StandardSnackbarProps) => {
+	const { animStyle } = useSnackbarAnimation(item);
+
+	const customContainerStyle = [
+		styles.wrap,
+		item.backgroundColor ? { backgroundColor: item.backgroundColor } : null,
+		item.containerStyle,
+	];
+
+	const customMessageStyle = [
+		styles.message,
+		item.textColor ? { color: item.textColor } : null,
+		item.messageStyle,
+	];
+
+	const isTop = (item.position || snackbar.getPosition()) === 'top';
+	const positionStyle = isTop ? { top: 0 } : { bottom: 0 };
+
+	return (
+		<Animated.View style={[styles.outer, positionStyle, animStyle]}>
+			<View style={customContainerStyle}>
+				{item.icon && <View style={styles.iconWrap}>{item.icon}</View>}
+				<Text numberOfLines={2} style={customMessageStyle}>
+					{item.message}
+				</Text>
+			</View>
+		</Animated.View>
+	);
+};
+
+const styles = StyleSheet.create({
+	outer: {
+		width: '100%',
+		position: 'absolute',
+	},
+	wrap: {
+		paddingVertical: 14,
+		paddingHorizontal: 16,
+		marginHorizontal: 16,
+		backgroundColor: '#1E293B',
+		flexDirection: 'row',
+		alignItems: 'center',
+		borderRadius: 10,
+		shadowColor: '#000',
+		shadowOffset: { width: 0, height: 4 },
+		shadowOpacity: 0.15,
+		shadowRadius: 6,
+		elevation: 4,
+	},
+	iconWrap: {
+		marginRight: 10,
+		justifyContent: 'center',
+		alignItems: 'center',
+	},
+	message: {
+		color: '#F8FAFC',
+		fontSize: 14,
+		fontWeight: '600',
+		flexShrink: 1,
+	},
+});