@mehul214/react-native-flash-toast 0.0.0-stage → 1.0.1

package/src/FlashMessageManager.ts

@@ -0,0 +1,71 @@
+import type { FlashMessageOptions, FlashMessageRef } from './types';
+
+class FlashMessageManager {
+  private defaultInstance: FlashMessageRef | null = null;
+  private instances: Map<string, FlashMessageRef> = new Map();
+  private pendingQueue: FlashMessageOptions[] = [];
+
+  public register(ref: FlashMessageRef, id: string = 'default'): void {
+    this.instances.set(id, ref);
+    if (!this.defaultInstance || id === 'default') {
+      this.defaultInstance = ref;
+    }
+
+    // Flush any pending messages that arrived before mount
+    if (this.pendingQueue.length > 0) {
+      const next = this.pendingQueue.shift();
+      if (next) {
+        ref.showMessage(next);
+      }
+    }
+  }
+
+  public unregister(id: string = 'default'): void {
+    this.instances.delete(id);
+    if (this.defaultInstance === this.instances.get(id)) {
+      this.defaultInstance = this.instances.values().next().value || null;
+    }
+  }
+
+  public showMessage(options: FlashMessageOptions, targetId?: string): void {
+    const target = targetId ? this.instances.get(targetId) : this.defaultInstance;
+
+    if (target) {
+      target.showMessage(options);
+    } else {
+      // Buffer if component hasn't mounted yet
+      this.pendingQueue.push(options);
+    }
+  }
+
+  public hideMessage(targetId?: string): void {
+    const target = targetId ? this.instances.get(targetId) : this.defaultInstance;
+    if (target) {
+      target.hideMessage();
+    }
+  }
+}
+
+export const flashManager = new FlashMessageManager();
+
+/**
+ * Imperative helper to trigger a flash message from anywhere in the app
+ * (services, Zustand, Redux, API handlers, navigation screens).
+ */
+export function showMessage(options: FlashMessageOptions): void {
+  flashManager.showMessage(options);
+}
+
+/**
+ * Imperative helper to dismiss the currently displayed flash message.
+ */
+export function hideMessage(): void {
+  flashManager.hideMessage();
+}
+
+/**
+ * Modern alias for showMessage
+ */
+export const flash = showMessage;
+export const dismissFlash = hideMessage;
+

package/src/FlashMessageProvider.tsx

@@ -0,0 +1,48 @@
+import React, { createContext, useContext, useMemo } from 'react';
+import { FlashMessage } from './FlashMessage';
+import { flashManager } from './FlashMessageManager';
+import type { FlashMessageContainerProps, FlashMessageOptions } from './types';
+
+interface FlashMessageContextValue {
+  show: (options: FlashMessageOptions) => void;
+  hide: () => void;
+}
+
+const FlashMessageContext = createContext<FlashMessageContextValue | null>(null);
+
+export interface FlashMessageProviderProps extends FlashMessageContainerProps {
+  children: React.ReactNode;
+}
+
+export const FlashMessageProvider: React.FC<FlashMessageProviderProps> = ({
+  children,
+  ...containerProps
+}) => {
+  const contextValue = useMemo<FlashMessageContextValue>(
+    () => ({
+      show: (options: FlashMessageOptions) => flashManager.showMessage(options),
+      hide: () => flashManager.hideMessage(),
+    }),
+    []
+  );
+
+  return (
+    <FlashMessageContext.Provider value={contextValue}>
+      {children}
+      <FlashMessage {...containerProps} />
+    </FlashMessageContext.Provider>
+  );
+};
+
+export function useFlashMessage(): FlashMessageContextValue {
+  const context = useContext(FlashMessageContext);
+  if (!context) {
+    // Graceful fallback to global manager even if Provider is omitted
+    return {
+      show: (options: FlashMessageOptions) => flashManager.showMessage(options),
+      hide: () => flashManager.hideMessage(),
+    };
+  }
+  return context;
+}
+

package/src/hooks/useFlashMessage.ts

@@ -0,0 +1,2 @@
+export { useFlashMessage } from '../FlashMessageProvider';
+

package/src/icons.tsx

@@ -0,0 +1,154 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import type { FlashMessageType } from './types';
+
+interface BuiltInIconProps {
+  type: FlashMessageType;
+  size?: number;
+  color?: string;
+}
+
+export const BuiltInIcon: React.FC<BuiltInIconProps> = ({
+  type,
+  size = 18,
+  color = '#FFFFFF',
+}) => {
+  switch (type) {
+    case 'success': {
+      // Crisp pixel-perfect checkmark
+      const checkWidth = size * 0.36;
+      const checkHeight = size * 0.65;
+      const stroke = Math.max(2, size * 0.12);
+      return (
+        <View style={[styles.center, { width: size, height: size }]}>
+          <View
+            style={{
+              width: checkWidth,
+              height: checkHeight,
+              borderColor: color,
+              borderBottomWidth: stroke,
+              borderRightWidth: stroke,
+              borderRadius: 1,
+              transform: [{ rotate: '45deg' }, { translateY: -size * 0.08 }],
+            }}
+          />
+        </View>
+      );
+    }
+
+    case 'danger': {
+      // Crisp pixel-perfect cross
+      const crossThickness = Math.max(2, size * 0.12);
+      const crossLength = size * 0.72;
+      return (
+        <View style={[styles.center, { width: size, height: size }]}>
+          <View
+            style={[
+              styles.crossBar,
+              {
+                width: crossLength,
+                height: crossThickness,
+                backgroundColor: color,
+                borderRadius: crossThickness / 2,
+                transform: [{ rotate: '45deg' }],
+              },
+            ]}
+          />
+          <View
+            style={[
+              styles.crossBar,
+              {
+                width: crossLength,
+                height: crossThickness,
+                backgroundColor: color,
+                borderRadius: crossThickness / 2,
+                transform: [{ rotate: '-45deg' }],
+              },
+            ]}
+          />
+        </View>
+      );
+    }
+
+    case 'warning': {
+      // Modern clean exclamation mark
+      const warnThickness = Math.max(2, size * 0.13);
+      const dotSize = warnThickness * 1.1;
+      return (
+        <View style={[styles.center, { width: size, height: size }]}>
+          <View
+            style={{
+              width: warnThickness,
+              height: size * 0.46,
+              backgroundColor: color,
+              borderRadius: warnThickness / 2,
+              marginBottom: size * 0.14,
+            }}
+          />
+          <View
+            style={{
+              width: dotSize,
+              height: dotSize,
+              borderRadius: dotSize / 2,
+              backgroundColor: color,
+            }}
+          />
+        </View>
+      );
+    }
+
+    case 'info': {
+      // Modern clean info icon: top dot, bottom stem (no double circle!)
+      const infoThickness = Math.max(2, size * 0.13);
+      const infoDotSize = infoThickness * 1.1;
+      return (
+        <View style={[styles.center, { width: size, height: size }]}>
+          <View
+            style={{
+              width: infoDotSize,
+              height: infoDotSize,
+              borderRadius: infoDotSize / 2,
+              backgroundColor: color,
+              marginBottom: size * 0.14,
+            }}
+          />
+          <View
+            style={{
+              width: infoThickness,
+              height: size * 0.46,
+              backgroundColor: color,
+              borderRadius: infoThickness / 2,
+            }}
+          />
+        </View>
+      );
+    }
+
+    case 'default':
+    default: {
+      const defaultDot = size * 0.44;
+      return (
+        <View style={[styles.center, { width: size, height: size }]}>
+          <View
+            style={{
+              width: defaultDot,
+              height: defaultDot,
+              borderRadius: defaultDot / 2,
+              backgroundColor: color,
+            }}
+          />
+        </View>
+      );
+    }
+  }
+};
+
+const styles = StyleSheet.create({
+  center: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  crossBar: {
+    position: 'absolute',
+  },
+});

package/src/index.ts

@@ -0,0 +1,31 @@
+import { FlashMessage } from './FlashMessage';
+
+export { FlashMessage };
+export default FlashMessage;
+
+export {
+  flashManager,
+  showMessage,
+  hideMessage,
+  flash,
+  dismissFlash,
+} from './FlashMessageManager';
+
+export {
+  FlashMessageProvider,
+  useFlashMessage,
+} from './FlashMessageProvider';
+
+export { BuiltInIcon } from './icons';
+export { COLORS, styles } from './styles';
+
+export type {
+  FlashMessageAction,
+  FlashMessageContainerProps,
+  FlashMessageIcon,
+  FlashMessageOptions,
+  FlashMessagePosition,
+  FlashMessageRef,
+  FlashMessageTransition,
+  FlashMessageType,
+} from './types';

package/src/styles.ts

@@ -0,0 +1,145 @@
+import { StyleSheet, Platform } from 'react-native';
+import type { FlashMessageType } from './types';
+
+export const COLORS: Record<FlashMessageType, { background: string; text: string; icon: string }> = {
+  default: {
+    background: '#1F2937', // Slate 800
+    text: '#FFFFFF',
+    icon: '#9CA3AF',
+  },
+  success: {
+    background: '#059669', // Emerald 600
+    text: '#FFFFFF',
+    icon: '#D1FAE5',
+  },
+  danger: {
+    background: '#DC2626', // Red 600
+    text: '#FFFFFF',
+    icon: '#FEE2E2',
+  },
+  warning: {
+    background: '#D97706', // Amber 600
+    text: '#FFFFFF',
+    icon: '#FEF3C7',
+  },
+  info: {
+    background: '#2563EB', // Blue 600
+    text: '#FFFFFF',
+    icon: '#DBEAFE',
+  },
+};
+
+export const styles = StyleSheet.create({
+  rootOverlay: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    zIndex: 99999,
+    elevation: 99999,
+  },
+  rootTop: {
+    top: 0,
+  },
+  rootBottom: {
+    bottom: 0,
+  },
+  rootCenter: {
+    top: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  toastContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    overflow: 'hidden',
+    ...Platform.select({
+      ios: {
+        shadowColor: '#000000',
+        shadowOffset: { width: 0, height: 6 },
+        shadowOpacity: 0.2,
+        shadowRadius: 14,
+      },
+      android: {
+        elevation: 8,
+      },
+      web: {
+        boxShadow: '0 10px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.15)',
+      } as any,
+    }),
+  },
+  floatingContainer: {
+    marginHorizontal: 16,
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: 'rgba(255, 255, 255, 0.16)',
+  },
+  edgeToEdgeContainer: {
+    marginHorizontal: 0,
+    borderRadius: 0,
+  },
+  contentWrapper: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 13,
+    paddingHorizontal: 16,
+  },
+  iconContainer: {
+    marginRight: 12,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  iconBadge: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    backgroundColor: 'rgba(255, 255, 255, 0.22)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  textContainer: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  titleText: {
+    fontSize: 15,
+    fontWeight: '600',
+    letterSpacing: -0.2,
+    lineHeight: 20,
+    color: '#FFFFFF',
+  },
+  descriptionText: {
+    fontSize: 13,
+    fontWeight: '400',
+    color: 'rgba(255, 255, 255, 0.9)',
+    marginTop: 2,
+    lineHeight: 18,
+  },
+  actionButton: {
+    marginLeft: 12,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 8,
+    backgroundColor: 'rgba(255, 255, 255, 0.22)',
+    borderWidth: 1,
+    borderColor: 'rgba(255, 255, 255, 0.2)',
+  },
+  actionButtonText: {
+    fontSize: 13,
+    fontWeight: '600',
+    color: '#FFFFFF',
+  },
+  progressBarContainer: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: 3,
+    backgroundColor: 'rgba(255, 255, 255, 0.2)',
+  },
+  progressBarFill: {
+    height: '100%',
+    backgroundColor: 'rgba(255, 255, 255, 0.9)',
+  },
+});

package/src/types.ts

@@ -0,0 +1,101 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
+
+export type FlashMessageType = 'default' | 'success' | 'danger' | 'warning' | 'info';
+
+export type FlashMessagePosition = 'top' | 'bottom' | 'center';
+
+export type FlashMessageTransition = 'slide' | 'fade' | 'bounce';
+
+export type FlashMessageIcon =
+  | FlashMessageType
+  | 'none'
+  | ReactNode
+  | ((props: { size: number; color: string }) => ReactNode);
+
+export interface FlashMessageAction {
+  label: string;
+  onPress: () => void;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+}
+
+export interface FlashMessageOptions {
+  /** Unique ID for the message. Auto-generated if not provided */
+  id?: string;
+  /** Primary title or content */
+  message: string | ReactNode;
+  /** Secondary subtitle or body content */
+  description?: string | ReactNode;
+  /** Preset semantic style */
+  type?: FlashMessageType;
+  /** Screen position: 'top', 'bottom', or 'center'. Default: 'top' */
+  position?: FlashMessagePosition;
+  /** Display duration in milliseconds before auto-hiding. Default: 3000ms. Set to 0 to disable */
+  duration?: number;
+  /** Whether the message auto-dismisses after duration. Default: true */
+  autoHide?: boolean;
+  /** Floating pill with rounded corners vs edge-to-edge bar. Default: true */
+  floating?: boolean;
+  /** Preset or custom icon */
+  icon?: FlashMessageIcon;
+  /** Interactive action button (e.g. Undo, Retry) */
+  action?: FlashMessageAction;
+  /** Callback fired when the flash message card is tapped */
+  onPress?: () => void;
+  /** Callback fired when the flash message is long-pressed */
+  onLongPress?: () => void;
+  /** Callback fired after the message appears */
+  onShow?: () => void;
+  /** Callback fired after the message has fully hidden */
+  onHide?: () => void;
+  /** Custom container style */
+  style?: StyleProp<ViewStyle>;
+  /** Custom title text style */
+  titleStyle?: StyleProp<TextStyle>;
+  /** Custom description text style */
+  textStyle?: StyleProp<TextStyle>;
+  /** Override background color */
+  backgroundColor?: string;
+  /** Override text and icon color */
+  color?: string;
+  /** Dismiss when tapped. Default: true */
+  hideOnPress?: boolean;
+  /** Enable swipe up/down gesture to dismiss. Default: true */
+  swipeToDismiss?: boolean;
+  /** Temporarily pause the autoHide timer while finger touches the banner. Default: true */
+  pauseOnPress?: boolean;
+  /** Show an animated countdown progress bar at the bottom of the card. Default: false */
+  showProgressBar?: boolean;
+  /** Transition animation style: 'slide' | 'fade' | 'bounce'. Default: 'slide' */
+  transition?: FlashMessageTransition;
+  /** Override manual top inset / status bar height if needed */
+  statusBarHeight?: number;
+  /** Custom render function to completely override inner layout */
+  customComponent?: (options: FlashMessageOptions, hide: () => void) => ReactNode;
+}
+
+export interface FlashMessageRef {
+  showMessage: (options: FlashMessageOptions) => void;
+  hideMessage: () => void;
+}
+
+export interface FlashMessageContainerProps {
+  /** Default position for all messages if not specified in options */
+  position?: FlashMessagePosition;
+  /** Default duration in ms. Default: 3000 */
+  duration?: number;
+  /** Default floating style. Default: true */
+  floating?: boolean;
+  /** Default transition. Default: 'slide' */
+  transition?: FlashMessageTransition;
+  /** Optional top status bar offset */
+  statusBarOffset?: number;
+  /** Optional bottom navigation bar offset */
+  bottomOffset?: number;
+  /** Extra container style */
+  style?: StyleProp<ViewStyle>;
+  /** Can message replace current one immediately or queue. Default: 'replace' */
+  mode?: 'replace' | 'queue';
+}
+

package/src/utils/safeArea.ts

@@ -0,0 +1,45 @@
+import { Platform, StatusBar, Dimensions } from 'react-native';
+
+export interface EdgeInsets {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+}
+
+/**
+ * Returns safe default insets when react-native-safe-area-context is not present.
+ * If the user's app wraps FlashMessage in SafeAreaProvider, safe-area context takes precedence.
+ */
+export function getDefaultSafeAreaInsets(): EdgeInsets {
+  const { width, height } = Dimensions.get('window');
+  const isLandscape = width > height;
+
+  if (Platform.OS === 'android') {
+    return {
+      top: StatusBar.currentHeight ?? 24,
+      bottom: 16,
+      left: 0,
+      right: 0,
+    };
+  }
+
+  if (Platform.OS === 'ios') {
+    // Dynamic island & modern notch iPhones typically have 47-59pt top inset
+    const isModernIphone = !Platform.isPad && !Platform.isTV && (height >= 812 || width >= 812);
+    return {
+      top: isModernIphone ? (isLandscape ? 0 : 50) : 20,
+      bottom: isModernIphone ? 34 : 0,
+      left: 0,
+      right: 0,
+    };
+  }
+
+  return {
+    top: 16,
+    bottom: 16,
+    left: 0,
+    right: 0,
+  };
+}
+