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

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,74 @@
+import React from 'react';
+import { View, Text, 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 = 22,
+  color = '#FFFFFF',
+}) => {
+  const containerStyle = [
+    styles.circle,
+    {
+      width: size,
+      height: size,
+      borderRadius: size / 2,
+      borderColor: color,
+    },
+  ];
+
+  switch (type) {
+    case 'success':
+      return (
+        <View style={containerStyle}>
+          <Text style={[styles.symbol, { color, fontSize: size * 0.65 }]}>✓</Text>
+        </View>
+      );
+    case 'danger':
+      return (
+        <View style={containerStyle}>
+          <Text style={[styles.symbol, { color, fontSize: size * 0.65 }]}>✕</Text>
+        </View>
+      );
+    case 'warning':
+      return (
+        <View style={containerStyle}>
+          <Text style={[styles.symbol, { color, fontSize: size * 0.65 }]}>!</Text>
+        </View>
+      );
+    case 'info':
+      return (
+        <View style={containerStyle}>
+          <Text style={[styles.symbol, { color, fontSize: size * 0.65 }]}>ℹ</Text>
+        </View>
+      );
+    case 'default':
+    default:
+      return (
+        <View style={containerStyle}>
+          <Text style={[styles.symbol, { color, fontSize: size * 0.6 }]}>●</Text>
+        </View>
+      );
+  }
+};
+
+const styles = StyleSheet.create({
+  circle: {
+    borderWidth: 1.5,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  symbol: {
+    fontWeight: '800',
+    textAlign: 'center',
+    includeFontPadding: false,
+    lineHeight: 22,
+  },
+});
+

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,135 @@
+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.18,
+        shadowRadius: 12,
+      },
+      android: {
+        elevation: 8,
+      },
+      web: {
+        boxShadow: '0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.1)',
+      } as any,
+    }),
+  },
+  floatingContainer: {
+    marginHorizontal: 16,
+    borderRadius: 14,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: 'rgba(255, 255, 255, 0.15)',
+  },
+  edgeToEdgeContainer: {
+    marginHorizontal: 0,
+    borderRadius: 0,
+  },
+  contentWrapper: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 14,
+    paddingHorizontal: 16,
+  },
+  iconContainer: {
+    marginRight: 12,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  textContainer: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  titleText: {
+    fontSize: 15,
+    fontWeight: '600',
+    letterSpacing: -0.2,
+    color: '#FFFFFF',
+  },
+  descriptionText: {
+    fontSize: 13,
+    fontWeight: '400',
+    color: 'rgba(255, 255, 255, 0.88)',
+    marginTop: 2,
+    lineHeight: 18,
+  },
+  actionButton: {
+    marginLeft: 10,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 8,
+    backgroundColor: 'rgba(255, 255, 255, 0.2)',
+  },
+  actionButtonText: {
+    fontSize: 13,
+    fontWeight: '700',
+    color: '#FFFFFF',
+  },
+  progressBarContainer: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: 3,
+    backgroundColor: 'rgba(255, 255, 255, 0.25)',
+  },
+  progressBarFill: {
+    height: '100%',
+    backgroundColor: '#FFFFFF',
+  },
+});
+

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,
+  };
+}
+