beautiful-snackbar 1.0.0

package/src/constants.ts

@@ -0,0 +1,20 @@
+import { SnackbarDuration } from './types';
+
+export const DURATION_SHORT = 1500;
+export const DURATION_MEDIUM = 2200;
+export const DURATION_LONG = 3200;
+
+export const DEFAULT_HEIGHT_LIMIT = 90;
+export const TRANSITION_SPEED = 200;
+
+export const getDurationMs = (duration?: SnackbarDuration): number => {
+	switch (duration) {
+		case 'long':
+			return DURATION_LONG;
+		case 'medium':
+			return DURATION_MEDIUM;
+		case 'short':
+		default:
+			return DURATION_SHORT;
+	}
+};

package/src/index.ts

@@ -0,0 +1,5 @@
+export { BeautifulSnackbar } from './components/BeautifulSnackbar';
+export { snackbar, SnackbarManager, SnackbarItem } from './manager';
+export { useSnackbarAnimation } from './useSnackbarAnimation';
+export type { SnackbarOptions, SnackbarDuration, SnackbarPosition, SnackbarAnimationType } from './types';
+export type { BeautifulSnackbarProps } from './components/BeautifulSnackbar';

package/src/manager.ts

@@ -0,0 +1,151 @@
+import { ViewStyle, TextStyle, Platform } from 'react-native';
+import React from 'react';
+import { SnackbarOptions, SnackbarDuration, SnackbarPosition, SnackbarAnimationType } from './types';
+
+export interface SnackbarConfig {
+	avoidKeyboard: boolean;
+	position: SnackbarPosition;
+	animationType: SnackbarAnimationType;
+	bottomOffset: number;
+	topOffset: number;
+}
+
+export class SnackbarItem {
+	id: string;
+	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;
+
+	onShowRequested = () => {};
+	onHideRequested = () => {};
+	onDismissRequested?: () => void;
+
+	constructor(options: SnackbarOptions, id: string) {
+		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;
+	}
+}
+
+export class SnackbarManager {
+	private stateListener?: (items: SnackbarItem[]) => void;
+	private configListeners: ((config: SnackbarConfig) => void)[] = [];
+	private activeItems: SnackbarItem[] = [];
+	private counter = 0;
+	private config: SnackbarConfig = {
+		avoidKeyboard: true,
+		position: 'bottom',
+		animationType: 'slide',
+		bottomOffset: 24,
+		topOffset: Platform.OS === 'ios' ? 50 : 24,
+	};
+
+	registerListener(listener: (items: SnackbarItem[]) => void) {
+		this.stateListener = listener;
+		listener([...this.activeItems]);
+	}
+
+	unregisterListener() {
+		this.stateListener = undefined;
+	}
+
+	registerConfigListener(listener: (config: SnackbarConfig) => void) {
+		this.configListeners.push(listener);
+		listener({ ...this.config });
+		return () => {
+			this.configListeners = this.configListeners.filter((l) => l !== listener);
+		};
+	}
+
+	setAvoidKeyboard(val: boolean) {
+		this.config.avoidKeyboard = val;
+		this.configListeners.forEach((listener) => listener({ ...this.config }));
+	}
+
+	getAvoidKeyboard(): boolean {
+		return this.config.avoidKeyboard;
+	}
+
+	setPosition(val: SnackbarPosition) {
+		this.config.position = val;
+		this.configListeners.forEach((listener) => listener({ ...this.config }));
+	}
+
+	getPosition(): SnackbarPosition {
+		return this.config.position;
+	}
+
+	setAnimationType(val: SnackbarAnimationType) {
+		this.config.animationType = val;
+		this.configListeners.forEach((listener) => listener({ ...this.config }));
+	}
+
+	getAnimationType(): SnackbarAnimationType {
+		return this.config.animationType;
+	}
+
+	setBottomOffset(val: number) {
+		this.config.bottomOffset = val;
+		this.configListeners.forEach((listener) => listener({ ...this.config }));
+	}
+
+	getBottomOffset(): number {
+		return this.config.bottomOffset;
+	}
+
+	setTopOffset(val: number) {
+		this.config.topOffset = val;
+		this.configListeners.forEach((listener) => listener({ ...this.config }));
+	}
+
+	getTopOffset(): number {
+		return this.config.topOffset;
+	}
+
+	show(options: SnackbarOptions): SnackbarItem {
+		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: SnackbarItem) {
+		this.activeItems = this.activeItems.filter(x => x.id !== item.id);
+		this.stateListener?.([...this.activeItems]);
+	}
+}
+
+export const snackbar = new SnackbarManager();

package/src/types.ts

@@ -0,0 +1,27 @@
+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; // Key for registered custom template UI
+	data?: any;   // Custom metadata context passed to custom templates
+}

package/src/useSnackbarAnimation.ts

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

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "es2020",
+    "module": "commonjs",
+    "lib": ["esnext", "dom"],
+    "allowJs": true,
+    "jsx": "react-native",
+    "declaration": true,
+    "outDir": "./lib",
+    "strict": true,
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "baseUrl": ".",
+    "paths": {
+      "react": ["example/node_modules/react"],
+      "react-native": ["example/node_modules/react-native"],
+      "react-native-safe-area-context": ["example/node_modules/react-native-safe-area-context"]
+    }
+  },
+  "include": ["src"]
+}