@zizwar/react-native-debug-console 1.0.0

package/dist/DebugOverlay.js

@@ -0,0 +1,176 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * React Native Debug Console - Overlay
+ * Full-screen modal displaying captured logs
+ */
+import React from 'react';
+import { View, Text, ScrollView, TouchableOpacity, StyleSheet, Modal, SafeAreaView, Share, Platform, } from 'react-native';
+import { useDebugConsole } from './DebugProvider';
+import { DebugIcon } from './Icons';
+const LogEntryItem = ({ entry, colors }) => {
+    const getTypeColor = (type) => {
+        switch (type) {
+            case 'error': return colors.error;
+            case 'warn': return colors.warning;
+            case 'info': return colors.info;
+            default: return colors.textSecondary;
+        }
+    };
+    const getTypeIcon = (type) => {
+        switch (type) {
+            case 'error': return 'close-circle';
+            case 'warn': return 'warning';
+            case 'info': return 'information-circle';
+            default: return 'ellipse';
+        }
+    };
+    const formatTime = (date) => {
+        return date.toLocaleTimeString('en-US', {
+            hour12: false,
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit',
+        });
+    };
+    return (_jsxs(View, { style: [
+            styles.logEntry,
+            { backgroundColor: colors.surface, borderLeftColor: getTypeColor(entry.type) }
+        ], children: [_jsxs(View, { style: styles.logHeader, children: [_jsx(DebugIcon, { name: getTypeIcon(entry.type), size: 14, color: getTypeColor(entry.type) }), _jsx(Text, { style: [styles.logTime, { color: colors.textSecondary }], children: formatTime(entry.timestamp) }), _jsx(Text, { style: [styles.logType, { color: getTypeColor(entry.type) }], children: entry.type.toUpperCase() })] }), _jsx(Text, { style: [styles.logMessage, { color: colors.text }], selectable: true, children: entry.message })] }));
+};
+export const DebugOverlay = () => {
+    const { logs, isVisible, hideConsole, clearLogs, config } = useDebugConsole();
+    const colors = config.colors;
+    const handleShare = async () => {
+        const logText = logs.map(log => `[${log.timestamp.toISOString()}] [${log.type.toUpperCase()}] ${log.message}`).join('\n');
+        try {
+            await Share.share({
+                message: logText,
+                title: `${config.appName} Debug Logs`,
+            });
+        }
+        catch (error) {
+            // Silently fail if sharing not available
+        }
+    };
+    if (!isVisible || !config.enabled)
+        return null;
+    const errorCount = logs.filter(l => l.type === 'error').length;
+    const warnCount = logs.filter(l => l.type === 'warn').length;
+    return (_jsx(Modal, { visible: isVisible, animationType: "slide", transparent: false, onRequestClose: hideConsole, children: _jsxs(SafeAreaView, { style: [styles.container, { backgroundColor: colors.background }], children: [_jsxs(View, { style: [styles.header, { borderBottomColor: colors.surface }], children: [_jsxs(View, { style: styles.headerLeft, children: [_jsx(DebugIcon, { name: "bug", size: 24, color: colors.error }), _jsx(Text, { style: [styles.headerTitle, { color: colors.text }], children: "Debug Console" })] }), _jsxs(View, { style: styles.headerStats, children: [errorCount > 0 && (_jsx(View, { style: [styles.statBadge, { backgroundColor: colors.error }], children: _jsxs(Text, { style: styles.statText, children: [errorCount, " errors"] }) })), warnCount > 0 && (_jsx(View, { style: [styles.statBadge, { backgroundColor: colors.warning }], children: _jsxs(Text, { style: [styles.statText, { color: '#000' }], children: [warnCount, " warns"] }) }))] }), _jsx(TouchableOpacity, { onPress: hideConsole, style: styles.closeButton, children: _jsx(DebugIcon, { name: "close", size: 24, color: colors.text }) })] }), _jsxs(View, { style: [styles.actions, { borderBottomColor: colors.surface }], children: [_jsxs(TouchableOpacity, { style: [styles.actionButton, { backgroundColor: colors.surface }], onPress: clearLogs, children: [_jsx(DebugIcon, { name: "trash", size: 18, color: colors.error }), _jsx(Text, { style: [styles.actionText, { color: colors.text }], children: "Clear" })] }), _jsxs(TouchableOpacity, { style: [styles.actionButton, { backgroundColor: colors.surface }], onPress: handleShare, children: [_jsx(DebugIcon, { name: "share", size: 18, color: colors.info }), _jsx(Text, { style: [styles.actionText, { color: colors.text }], children: "Share" })] }), _jsxs(Text, { style: [styles.logCount, { color: colors.textSecondary }], children: [logs.length, " logs"] })] }), _jsx(ScrollView, { style: styles.logsContainer, contentContainerStyle: styles.logsContent, showsVerticalScrollIndicator: true, children: logs.length === 0 ? (_jsxs(View, { style: styles.emptyState, children: [_jsx(DebugIcon, { name: "document", size: 48, color: colors.textSecondary }), _jsx(Text, { style: [styles.emptyText, { color: colors.textSecondary }], children: "No logs yet" }), _jsx(Text, { style: [styles.emptySubtext, { color: colors.textSecondary }], children: "Console logs will appear here" })] })) : (logs.map(entry => (_jsx(LogEntryItem, { entry: entry, colors: colors }, entry.id)))) }), _jsx(View, { style: [styles.footer, { borderTopColor: colors.surface }], children: _jsxs(Text, { style: [styles.footerText, { color: colors.textSecondary }], children: ["Tap on log to copy \u2022 ", config.appName] }) })] }) }));
+};
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        borderBottomWidth: 1,
+    },
+    headerLeft: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+    },
+    headerTitle: {
+        fontSize: 18,
+        fontWeight: 'bold',
+    },
+    headerStats: {
+        flexDirection: 'row',
+        gap: 8,
+    },
+    statBadge: {
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        borderRadius: 12,
+    },
+    statText: {
+        fontSize: 12,
+        fontWeight: 'bold',
+        color: '#fff',
+    },
+    closeButton: {
+        padding: 8,
+    },
+    actions: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+        borderBottomWidth: 1,
+        gap: 16,
+    },
+    actionButton: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        paddingVertical: 6,
+        paddingHorizontal: 12,
+        borderRadius: 8,
+    },
+    actionText: {
+        fontSize: 14,
+    },
+    logCount: {
+        marginLeft: 'auto',
+        fontSize: 12,
+    },
+    logsContainer: {
+        flex: 1,
+    },
+    logsContent: {
+        padding: 8,
+    },
+    logEntry: {
+        borderRadius: 8,
+        padding: 10,
+        marginBottom: 8,
+        borderLeftWidth: 3,
+    },
+    logHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+        marginBottom: 4,
+    },
+    logTime: {
+        fontSize: 11,
+        fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+    },
+    logType: {
+        fontSize: 10,
+        fontWeight: 'bold',
+    },
+    logMessage: {
+        fontSize: 12,
+        fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+        lineHeight: 18,
+    },
+    emptyState: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 60,
+    },
+    emptyText: {
+        marginTop: 12,
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    emptySubtext: {
+        marginTop: 4,
+        fontSize: 14,
+    },
+    footer: {
+        padding: 12,
+        borderTopWidth: 1,
+        alignItems: 'center',
+    },
+    footerText: {
+        fontSize: 12,
+    },
+});
+export default DebugOverlay;

package/dist/DebugProvider.d.ts

@@ -0,0 +1,20 @@
+/**
+ * React Native Debug Console - Provider
+ * Context provider that captures console logs and manages state
+ */
+import React, { ReactNode } from 'react';
+import { DebugConsoleConfig, DebugConsoleContextType } from './types';
+interface DebugProviderProps {
+    children: ReactNode;
+    config?: DebugConsoleConfig;
+}
+export declare const DebugProvider: React.FC<DebugProviderProps>;
+/**
+ * Hook to access the debug console context
+ */
+export declare const useDebugConsole: () => DebugConsoleContextType;
+/**
+ * Optional hook that doesn't throw if used outside provider
+ */
+export declare const useDebugConsoleOptional: () => DebugConsoleContextType | null;
+export default DebugProvider;

package/dist/DebugProvider.js

@@ -0,0 +1,139 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * React Native Debug Console - Provider
+ * Context provider that captures console logs and manages state
+ */
+import React, { createContext, useContext, useState, useCallback, useEffect, useMemo, } from 'react';
+import { DEFAULT_CONFIG, } from './types';
+const DebugConsoleContext = createContext(undefined);
+// Store original console methods
+const originalConsole = {
+    log: console.log.bind(console),
+    warn: console.warn.bind(console),
+    error: console.error.bind(console),
+    info: console.info.bind(console),
+};
+export const DebugProvider = ({ children, config: userConfig }) => {
+    // Merge user config with defaults
+    const config = useMemo(() => {
+        return {
+            ...DEFAULT_CONFIG,
+            ...userConfig,
+            colors: {
+                ...DEFAULT_CONFIG.colors,
+                ...userConfig?.colors,
+            },
+            buttonPosition: {
+                ...DEFAULT_CONFIG.buttonPosition,
+                ...userConfig?.buttonPosition,
+            },
+        };
+    }, [userConfig]);
+    const [logs, setLogs] = useState([]);
+    const [isVisible, setIsVisible] = useState(false);
+    const addLog = useCallback((type, message, data) => {
+        const entry = {
+            id: `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+            timestamp: new Date(),
+            type,
+            message: typeof message === 'string' ? message : JSON.stringify(message),
+            data,
+        };
+        setLogs(prev => {
+            const newLogs = [...prev, entry];
+            // Keep only last N logs based on config
+            if (newLogs.length > config.maxLogs) {
+                return newLogs.slice(-config.maxLogs);
+            }
+            return newLogs;
+        });
+    }, [config.maxLogs]);
+    const clearLogs = useCallback(() => {
+        setLogs([]);
+    }, []);
+    const toggleVisibility = useCallback(() => {
+        setIsVisible(prev => !prev);
+    }, []);
+    const showConsole = useCallback(() => {
+        setIsVisible(true);
+    }, []);
+    const hideConsole = useCallback(() => {
+        setIsVisible(false);
+    }, []);
+    // Override console methods to capture logs
+    useEffect(() => {
+        if (!config.enabled) {
+            return;
+        }
+        const formatArgs = (args) => {
+            return args.map(arg => {
+                if (typeof arg === 'object') {
+                    try {
+                        return JSON.stringify(arg, null, 2);
+                    }
+                    catch {
+                        return String(arg);
+                    }
+                }
+                return String(arg);
+            }).join(' ');
+        };
+        const wrapConsole = (type, originalFn) => {
+            return (...args) => {
+                // Always call original console method
+                originalFn(...args);
+                // Add to our logs
+                const message = formatArgs(args);
+                addLog(type, message);
+            };
+        };
+        // Override console methods based on config
+        if (config.captureLog) {
+            console.log = wrapConsole('log', originalConsole.log);
+        }
+        if (config.captureWarn) {
+            console.warn = wrapConsole('warn', originalConsole.warn);
+        }
+        if (config.captureError) {
+            console.error = wrapConsole('error', originalConsole.error);
+        }
+        if (config.captureInfo) {
+            console.info = wrapConsole('info', originalConsole.info);
+        }
+        // Restore original methods on cleanup
+        return () => {
+            console.log = originalConsole.log;
+            console.warn = originalConsole.warn;
+            console.error = originalConsole.error;
+            console.info = originalConsole.info;
+        };
+    }, [config.enabled, config.captureLog, config.captureWarn, config.captureError, config.captureInfo, addLog]);
+    const contextValue = useMemo(() => ({
+        logs,
+        isVisible,
+        config,
+        addLog,
+        clearLogs,
+        toggleVisibility,
+        showConsole,
+        hideConsole,
+    }), [logs, isVisible, config, addLog, clearLogs, toggleVisibility, showConsole, hideConsole]);
+    return (_jsx(DebugConsoleContext.Provider, { value: contextValue, children: children }));
+};
+/**
+ * Hook to access the debug console context
+ */
+export const useDebugConsole = () => {
+    const context = useContext(DebugConsoleContext);
+    if (!context) {
+        throw new Error('useDebugConsole must be used within a DebugProvider');
+    }
+    return context;
+};
+/**
+ * Optional hook that doesn't throw if used outside provider
+ */
+export const useDebugConsoleOptional = () => {
+    return useContext(DebugConsoleContext) ?? null;
+};
+export default DebugProvider;

package/dist/Icons.d.ts

@@ -0,0 +1,43 @@
+/**
+ * React Native Debug Console - Icons
+ * Simple text-based icons to avoid external dependencies
+ */
+import React from 'react';
+interface IconProps {
+    name: IconName;
+    size?: number;
+    color?: string;
+}
+export type IconName = 'bug' | 'close' | 'close-circle' | 'warning' | 'information-circle' | 'trash' | 'share' | 'document' | 'ellipse';
+export declare const DebugIcon: React.FC<IconProps>;
+export declare const SvgIcons: {
+    Bug: ({ size, color }: {
+        size?: number;
+        color?: string;
+    }) => any;
+    Close: ({ size, color }: {
+        size?: number;
+        color?: string;
+    }) => any;
+    Error: ({ size, color }: {
+        size?: number;
+        color?: string;
+    }) => any;
+    Warning: ({ size, color }: {
+        size?: number;
+        color?: string;
+    }) => any;
+    Info: ({ size, color }: {
+        size?: number;
+        color?: string;
+    }) => any;
+    Trash: ({ size, color }: {
+        size?: number;
+        color?: string;
+    }) => any;
+    Share: ({ size, color }: {
+        size?: number;
+        color?: string;
+    }) => any;
+};
+export default DebugIcon;

package/dist/Icons.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * React Native Debug Console - Icons
+ * Simple text-based icons to avoid external dependencies
+ */
+import React from 'react';
+import { Text, View, StyleSheet } from 'react-native';
+const ICONS = {
+    'bug': '🐛',
+    'close': '✕',
+    'close-circle': '⊗',
+    'warning': '⚠',
+    'information-circle': 'ℹ',
+    'trash': '🗑',
+    'share': '↗',
+    'document': '📄',
+    'ellipse': '●',
+};
+export const DebugIcon = ({ name, size = 16, color = '#fff' }) => {
+    return (_jsx(Text, { style: [styles.icon, { fontSize: size, color }], children: ICONS[name] || '●' }));
+};
+// SVG-based icons for better quality (optional, requires react-native-svg)
+export const SvgIcons = {
+    Bug: ({ size = 24, color = '#fff' }) => (_jsx(View, { style: { width: size, height: size, justifyContent: 'center', alignItems: 'center' }, children: _jsx(Text, { style: { fontSize: size * 0.8, color }, children: "\uD83D\uDC1B" }) })),
+    Close: ({ size = 24, color = '#fff' }) => (_jsx(View, { style: { width: size, height: size, justifyContent: 'center', alignItems: 'center' }, children: _jsx(Text, { style: { fontSize: size * 0.8, color, fontWeight: 'bold' }, children: "\u2715" }) })),
+    Error: ({ size = 24, color = '#FF5252' }) => (_jsx(View, { style: { width: size, height: size, justifyContent: 'center', alignItems: 'center' }, children: _jsx(Text, { style: { fontSize: size * 0.8, color }, children: "\u2297" }) })),
+    Warning: ({ size = 24, color = '#FFD740' }) => (_jsx(View, { style: { width: size, height: size, justifyContent: 'center', alignItems: 'center' }, children: _jsx(Text, { style: { fontSize: size * 0.8, color }, children: "\u26A0" }) })),
+    Info: ({ size = 24, color = '#40C4FF' }) => (_jsx(View, { style: { width: size, height: size, justifyContent: 'center', alignItems: 'center' }, children: _jsx(Text, { style: { fontSize: size * 0.8, color }, children: "\u2139" }) })),
+    Trash: ({ size = 24, color = '#fff' }) => (_jsx(View, { style: { width: size, height: size, justifyContent: 'center', alignItems: 'center' }, children: _jsx(Text, { style: { fontSize: size * 0.8, color }, children: "\uD83D\uDDD1" }) })),
+    Share: ({ size = 24, color = '#fff' }) => (_jsx(View, { style: { width: size, height: size, justifyContent: 'center', alignItems: 'center' }, children: _jsx(Text, { style: { fontSize: size * 0.8, color }, children: "\u2197" }) })),
+};
+const styles = StyleSheet.create({
+    icon: {
+        textAlign: 'center',
+    },
+});
+export default DebugIcon;

package/dist/index.d.ts

@@ -0,0 +1,32 @@
+/**
+ * React Native Debug Console
+ *
+ * A floating debug console for React Native / Expo apps.
+ * Captures console logs, errors, and warnings with a beautiful overlay UI.
+ *
+ * @example
+ * ```tsx
+ * import { DebugConsole } from 'react-native-debug-console';
+ *
+ * export default function App() {
+ *   return (
+ *     <DebugConsole
+ *       config={{
+ *         enabled: process.env.EXPO_PUBLIC_DEBUG === 'true',
+ *         appName: 'MyApp',
+ *       }}
+ *     >
+ *       <YourApp />
+ *     </DebugConsole>
+ *   );
+ * }
+ * ```
+ */
+export { DebugConsole, withDebugConsole } from './DebugConsole';
+export { DebugProvider, useDebugConsole, useDebugConsoleOptional } from './DebugProvider';
+export { DebugOverlay } from './DebugOverlay';
+export { DebugButton } from './DebugButton';
+export { DebugIcon } from './Icons';
+export type { LogEntry, LogType, DebugConsoleConfig, DebugConsoleColors, ButtonPosition, DebugConsoleContextType, } from './types';
+export { DEFAULT_CONFIG } from './types';
+export { DebugConsole as default } from './DebugConsole';

package/dist/index.js

@@ -0,0 +1,33 @@
+/**
+ * React Native Debug Console
+ *
+ * A floating debug console for React Native / Expo apps.
+ * Captures console logs, errors, and warnings with a beautiful overlay UI.
+ *
+ * @example
+ * ```tsx
+ * import { DebugConsole } from 'react-native-debug-console';
+ *
+ * export default function App() {
+ *   return (
+ *     <DebugConsole
+ *       config={{
+ *         enabled: process.env.EXPO_PUBLIC_DEBUG === 'true',
+ *         appName: 'MyApp',
+ *       }}
+ *     >
+ *       <YourApp />
+ *     </DebugConsole>
+ *   );
+ * }
+ * ```
+ */
+// Main components
+export { DebugConsole, withDebugConsole } from './DebugConsole';
+export { DebugProvider, useDebugConsole, useDebugConsoleOptional } from './DebugProvider';
+export { DebugOverlay } from './DebugOverlay';
+export { DebugButton } from './DebugButton';
+export { DebugIcon } from './Icons';
+export { DEFAULT_CONFIG } from './types';
+// Default export
+export { DebugConsole as default } from './DebugConsole';

package/dist/types.d.ts

@@ -0,0 +1,71 @@
+/**
+ * React Native Debug Console - Types
+ */
+export type LogType = 'log' | 'warn' | 'error' | 'info';
+export interface LogEntry {
+    id: string;
+    timestamp: Date;
+    type: LogType;
+    message: string;
+    data?: any;
+}
+export interface DebugConsoleConfig {
+    /** Enable or disable the debug console (default: true) */
+    enabled?: boolean;
+    /** Maximum number of logs to keep (default: 100) */
+    maxLogs?: number;
+    /** Custom colors for the theme */
+    colors?: DebugConsoleColors;
+    /** Position of the floating button */
+    buttonPosition?: ButtonPosition;
+    /** Custom app name for sharing logs */
+    appName?: string;
+    /** Capture console.log (default: true) */
+    captureLog?: boolean;
+    /** Capture console.warn (default: true) */
+    captureWarn?: boolean;
+    /** Capture console.error (default: true) */
+    captureError?: boolean;
+    /** Capture console.info (default: true) */
+    captureInfo?: boolean;
+}
+export interface DebugConsoleColors {
+    /** Primary background color */
+    background?: string;
+    /** Card/surface background color */
+    surface?: string;
+    /** Primary text color */
+    text?: string;
+    /** Secondary text color */
+    textSecondary?: string;
+    /** Error color */
+    error?: string;
+    /** Warning color */
+    warning?: string;
+    /** Info color */
+    info?: string;
+    /** Log color */
+    log?: string;
+    /** Floating button background color */
+    buttonBackground?: string;
+    /** Floating button icon color */
+    buttonIcon?: string;
+}
+export interface ButtonPosition {
+    bottom?: number;
+    right?: number;
+    left?: number;
+    top?: number;
+}
+export interface DebugConsoleContextType {
+    logs: LogEntry[];
+    isVisible: boolean;
+    config: Required<DebugConsoleConfig>;
+    addLog: (type: LogType, message: string, data?: any) => void;
+    clearLogs: () => void;
+    toggleVisibility: () => void;
+    showConsole: () => void;
+    hideConsole: () => void;
+}
+/** Default configuration */
+export declare const DEFAULT_CONFIG: Required<DebugConsoleConfig>;

package/dist/types.js

@@ -0,0 +1,29 @@
+/**
+ * React Native Debug Console - Types
+ */
+/** Default configuration */
+export const DEFAULT_CONFIG = {
+    enabled: true,
+    maxLogs: 100,
+    appName: 'App',
+    captureLog: true,
+    captureWarn: true,
+    captureError: true,
+    captureInfo: true,
+    colors: {
+        background: '#1a1a2e',
+        surface: '#2a2a3e',
+        text: '#ffffff',
+        textSecondary: '#888888',
+        error: '#FF5252',
+        warning: '#FFD740',
+        info: '#40C4FF',
+        log: '#888888',
+        buttonBackground: '#FF6B6B',
+        buttonIcon: '#ffffff',
+    },
+    buttonPosition: {
+        bottom: 100,
+        right: 20,
+    },
+};

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@zizwar/react-native-debug-console",
+  "version": "1.0.0",
+  "description": "A floating debug console for React Native / Expo apps. Captures console logs, errors, and warnings with a beautiful overlay UI.",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build",
+    "test": "echo \"No tests yet\""
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0"
+  },
+  "keywords": [
+    "react-native",
+    "expo",
+    "debug",
+    "console",
+    "logger",
+    "debugger",
+    "overlay",
+    "floating-button",
+    "error-tracking",
+    "development-tools"
+  ],
+  "author": "Ibrahim BIDI",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-native": ">=0.64.0",
+    "react-native-svg": ">=12.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native-svg": {
+      "optional": true
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Zizwar/react-native-debug-console"
+  },
+  "bugs": {
+    "url": "https://github.com/Zizwar/react-native-debug-console/issues"
+  },
+  "homepage": "https://github.com/Zizwar/tvslayer/tree/main/packages/react-native-debug-console#readme"
+}