react-native-inapp-inspector 1.0.0

package/dist/esm/components/ConsoleLogCard.js

@@ -0,0 +1,362 @@
+import React, { useState } from 'react';
+import { StyleSheet, Text, View, Pressable, Platform } from 'react-native';
+import { AppColors } from '../styles/AppColors';
+import { AppFonts } from '../styles/AppFonts';
+import HighlightText from './HighlightText';
+import CopyButton from './CopyButton';
+import { ChevronIcon } from './NetworkIcons';
+import JsonViewer from './JsonViewer';
+const formatTime = (ts) => {
+    const d = new Date(ts);
+    const hh = String(d.getHours()).padStart(2, '0');
+    const mm = String(d.getMinutes()).padStart(2, '0');
+    const ss = String(d.getSeconds()).padStart(2, '0');
+    const ms = String(d.getMilliseconds()).padStart(3, '0');
+    return `${hh}:${mm}:${ss}.${ms}`;
+};
+const getJsonContent = (message) => {
+    if (!message)
+        return null;
+    const indices = [];
+    for (let i = 0; i < message.length; i++) {
+        if (message[i] === '{' || message[i] === '[') {
+            indices.push(i);
+        }
+    }
+    for (const index of indices) {
+        const candidate = message.substring(index).trim();
+        try {
+            const parsed = JSON.parse(candidate);
+            if (parsed !== null && typeof parsed === 'object') {
+                const header = message.substring(0, index).trim();
+                return { header, data: parsed };
+            }
+        }
+        catch (e) {
+            // Ignore
+        }
+    }
+    return null;
+};
+const getJsonPreviewText = (data) => {
+    try {
+        const formatted = JSON.stringify(data, null, 2);
+        const lines = formatted.split('\n');
+        if (lines.length > 3) {
+            return {
+                text: lines.slice(0, 3).join('\n') + '\n...',
+                hasMore: true,
+            };
+        }
+        return {
+            text: formatted,
+            hasMore: false,
+        };
+    }
+    catch (e) {
+        return {
+            text: String(data),
+            hasMore: false,
+        };
+    }
+};
+export const ConsoleLogCard = React.memo(function ConsoleLogCard({ item, searchStr = '', isWebView = false, }) {
+    const [expanded, setExpanded] = useState(false);
+    const jsonContent = getJsonContent(item.message);
+    const isAnalyticsError = item.message
+        .toLowerCase()
+        .includes('[analytics error]');
+    const isUserLog = !isWebView && item.sourceMethod === 'log';
+    const caller = 'caller' in item ? item.caller : undefined;
+    const getLogColors = () => {
+        if (isWebView) {
+            const label = item.type.toUpperCase();
+            switch (item.type) {
+                case 'error':
+                    return {
+                        border: AppColors.errorColor,
+                        badgeBg: `${AppColors.errorColor}15`,
+                        badgeText: AppColors.errorColor,
+                        label,
+                        cardBg: '#FFF5F6',
+                    };
+                case 'warn':
+                    return {
+                        border: AppColors.lightOrange,
+                        badgeBg: `${AppColors.lightOrange}15`,
+                        badgeText: AppColors.darkOrange || AppColors.lightOrange,
+                        label,
+                        cardBg: '#FFFDF6',
+                    };
+                default:
+                    return {
+                        border: '#475569',
+                        badgeBg: '#F1F5F9',
+                        badgeText: '#475569',
+                        label,
+                        cardBg: '#F8FAFC',
+                    };
+            }
+        }
+        if (isAnalyticsError) {
+            return {
+                border: AppColors.skyBlue,
+                badgeBg: `${AppColors.skyBlue}15`,
+                badgeText: AppColors.skyBlue,
+                label: 'ERROR',
+                cardBg: '#E6F2FF', // light sky blue background for analytics errors
+            };
+        }
+        switch (item.type) {
+            case 'error':
+                return {
+                    border: AppColors.errorColor,
+                    badgeBg: `${AppColors.errorColor}15`,
+                    badgeText: AppColors.errorColor,
+                    label: 'ERROR',
+                    cardBg: '#FFF5F6', // light red background
+                };
+            case 'warn':
+                return {
+                    border: AppColors.lightOrange,
+                    badgeBg: `${AppColors.lightOrange}15`,
+                    badgeText: AppColors.darkOrange || AppColors.lightOrange,
+                    label: 'WARN',
+                    cardBg: '#FFFDF6', // light yellow/orange background
+                };
+            default:
+                if (isUserLog) {
+                    return {
+                        border: '#475569',
+                        badgeBg: '#E2E8F0',
+                        badgeText: '#334155',
+                        label: 'INFO',
+                        cardBg: '#F1F5F9', // slate-blue / steel-blue background for user log
+                    };
+                }
+                return {
+                    border: AppColors.purple,
+                    badgeBg: `${AppColors.purple}15`,
+                    badgeText: AppColors.purple,
+                    label: 'INFO',
+                    cardBg: '#F9F5FF', // light purple background for general info
+                };
+        }
+    };
+    const colors = getLogColors();
+    // Show limited lines unless expanded
+    const numLines = expanded ? undefined : 5;
+    const hasLongMessage = jsonContent
+        ? getJsonPreviewText(jsonContent.data).hasMore ||
+            jsonContent.header.length > 120 ||
+            jsonContent.header.includes('\n')
+        : item.message.length > 120 || item.message.includes('\n');
+    return (<View style={styles.container}>
+      <View style={[
+            styles.card,
+            {
+                borderLeftWidth: 4,
+                borderLeftColor: colors.border,
+                backgroundColor: colors.cardBg,
+            },
+        ]}>
+        <Pressable onPress={() => setExpanded(prev => !prev)} style={styles.cardHeader}>
+          <View style={styles.headerLeft}>
+            <CopyButton value={item.message} label="Log message"/>
+            <View style={[styles.badge, { backgroundColor: colors.badgeBg }]}>
+              <Text style={[styles.badgeText, { color: colors.badgeText }]}>
+                {colors.label}
+              </Text>
+            </View>
+            {isAnalyticsError && (<View style={[
+                styles.badge,
+                { backgroundColor: `${AppColors.skyBlue}15` },
+            ]}>
+                <Text style={[styles.badgeText, { color: AppColors.skyBlue }]}>
+                  Analytics
+                </Text>
+              </View>)}
+            {isUserLog && (<View style={[
+                styles.badge,
+                {
+                    backgroundColor: '#F3F4F6',
+                    borderColor: '#D1D5DB',
+                    borderWidth: 1,
+                },
+            ]}>
+                <Text style={[styles.badgeText, { color: '#4B5563' }]}>
+                  user-log
+                </Text>
+              </View>)}
+            {isWebView && (<View style={[
+                styles.badge,
+                {
+                    backgroundColor: '#F1F5F9',
+                    borderColor: '#E2E8F0',
+                    borderWidth: 1,
+                },
+            ]}>
+                <Text style={[styles.badgeText, { color: '#475569' }]}>
+                  webview
+                </Text>
+              </View>)}
+            <Text style={styles.serialNumber}>#{item.id + 1}</Text>
+            <Text style={styles.timestamp}>{formatTime(item.timestamp)}</Text>
+          </View>
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+            {caller && caller !== 'Unknown' && (<Text style={styles.callerText} numberOfLines={1} ellipsizeMode="middle">
+                {caller.split('/').pop() || caller}
+              </Text>)}
+            <View style={{ transform: [{ rotate: expanded ? '180deg' : '0deg' }] }}>
+              <ChevronIcon size={14} color={AppColors.grayTextWeak}/>
+            </View>
+          </View>
+        </Pressable>
+
+        <View style={styles.cardBody}>
+          {jsonContent ? (<>
+              {jsonContent.header ? (<Pressable onPress={() => setExpanded(prev => !prev)}>
+                  <HighlightText text={jsonContent.header} search={searchStr} style={styles.messageText} highlightStyle={styles.highlight} numberOfLines={numLines} detectLinks={true}/>
+                </Pressable>) : null}
+              {expanded ? (<View style={styles.jsonContainer}>
+                  <JsonViewer data={jsonContent.data} search={searchStr} forceOpen={expanded}/>
+                </View>) : (<Pressable onPress={() => setExpanded(prev => !prev)} style={styles.jsonPreviewContainer}>
+                  <HighlightText text={getJsonPreviewText(jsonContent.data).text} search={searchStr} style={styles.jsonPreviewText} highlightStyle={styles.highlight} detectLinks={true}/>
+                </Pressable>)}
+            </>) : (<Pressable onPress={() => setExpanded(prev => !prev)}>
+              <HighlightText text={item.message} search={searchStr} style={styles.messageText} highlightStyle={styles.highlight} numberOfLines={numLines} detectLinks={true}/>
+            </Pressable>)}
+          {hasLongMessage && (<Pressable onPress={() => setExpanded(prev => !prev)} style={styles.seeMoreBtn} hitSlop={8}>
+              <Text style={styles.seeMoreText}>
+                {expanded ? 'See Less' : 'See More'}
+              </Text>
+            </Pressable>)}
+        </View>
+
+        {caller && caller !== 'Unknown' && expanded && (<View style={styles.cardFooter}>
+            <Text style={styles.fullCallerText}>Caller: {caller}</Text>
+          </View>)}
+      </View>
+    </View>);
+});
+const styles = StyleSheet.create({
+    container: {
+        paddingHorizontal: 16,
+        paddingVertical: 4,
+    },
+    card: {
+        alignSelf: 'stretch',
+        backgroundColor: '#FFFFFF',
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: '#EFEFEF',
+        padding: 12,
+        shadowColor: '#000',
+        shadowOpacity: 0.03,
+        shadowRadius: 3,
+        shadowOffset: { width: 0, height: 1 },
+        elevation: 1,
+        overflow: 'hidden',
+    },
+    cardHeader: {
+        alignSelf: 'stretch',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: 8,
+    },
+    headerLeft: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+    },
+    badge: {
+        paddingHorizontal: 6,
+        paddingVertical: 3,
+        borderRadius: 4,
+    },
+    badgeText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 9,
+        letterSpacing: 0.5,
+    },
+    timestamp: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 11,
+        color: AppColors.grayTextWeak,
+    },
+    serialNumber: {
+        fontFamily: AppFonts.interBold,
+        color: AppColors.grayTextWeak,
+        fontSize: 11,
+    },
+    callerText: {
+        fontFamily: AppFonts.interRegular,
+        fontSize: 10,
+        color: AppColors.grayTextWeak,
+        maxWidth: '50%',
+    },
+    cardBody: {
+        marginTop: 8,
+        backgroundColor: '#FFFFFF',
+        paddingHorizontal: 10,
+        paddingVertical: 8,
+        borderRadius: 6,
+        borderWidth: 1,
+        borderColor: '#EBECEF',
+    },
+    messageText: {
+        fontFamily: Platform.OS === 'ios' ? 'System' : 'sans-serif',
+        fontSize: 12,
+        color: AppColors.primaryBlack,
+        lineHeight: 16,
+    },
+    highlight: {
+        backgroundColor: '#FFE44D',
+        color: AppColors.primaryBlack,
+        borderRadius: 2,
+    },
+    jsonContainer: {
+        marginTop: 4,
+        backgroundColor: '#FFFFFF',
+        borderRadius: 4,
+        borderWidth: 1,
+        borderColor: '#E2E8F0',
+        padding: 6,
+    },
+    jsonPreviewContainer: {
+        marginTop: 4,
+        backgroundColor: '#FFFFFF',
+        borderRadius: 4,
+        borderWidth: 1,
+        borderColor: '#E2E8F0',
+        padding: 6,
+    },
+    jsonPreviewText: {
+        fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+        fontSize: 11,
+        color: AppColors.primaryBlack,
+        lineHeight: 15,
+    },
+    cardFooter: {
+        marginTop: 8,
+        paddingTop: 8,
+        borderTopWidth: 1,
+        borderTopColor: AppColors.dividerColor,
+    },
+    fullCallerText: {
+        fontFamily: AppFonts.interRegular,
+        fontSize: 10,
+        color: AppColors.grayText,
+    },
+    seeMoreBtn: {
+        marginTop: 6,
+        alignSelf: 'flex-start',
+    },
+    seeMoreText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 11,
+        color: AppColors.purple,
+        textDecorationLine: 'underline',
+    },
+});

package/dist/esm/components/CopyButton.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CopyButtonProps } from '../types';
+declare const CopyButton: ({ value, label, iconType }: CopyButtonProps) => React.JSX.Element;
+export default CopyButton;

package/dist/esm/components/CopyButton.js

@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+// Components
+import TouchableScale from './TouchableScale';
+// Helpers
+import { copyToClipboard } from '../helpers';
+// Assets
+import { TerminalIcon, FetchIcon, CopyIcon, CheckIcon } from './NetworkIcons';
+// Stylesheet
+import { AppColors } from '../styles/AppColors';
+import styles from '../styles';
+const CopyButton = ({ value, label, iconType = 'copy' }) => {
+    const [copied, setCopied] = useState(false);
+    const handlePress = () => {
+        copyToClipboard(value, label);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1200);
+    };
+    const containerStyle = [
+        styles.iconSquareBtn,
+        copied && styles.iconSquareBtnSuccess,
+    ];
+    const IconComponent = iconType === 'terminal'
+        ? TerminalIcon
+        : iconType === 'fetch'
+            ? FetchIcon
+            : CopyIcon;
+    return (<TouchableScale onPress={handlePress} hitSlop={12} style={containerStyle}>
+      {copied ? (<CheckIcon color={AppColors.greenColor} size={14}/>) : (<IconComponent color={AppColors.grayTextWeak} size={14}/>)}
+    </TouchableScale>);
+};
+export default CopyButton;

package/dist/esm/components/DiffViewer.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare const DiffViewer: React.MemoExoticComponent<({ oldData, newData, forceOpen, }: {
+    oldData: any;
+    newData: any;
+    forceOpen?: boolean;
+}) => React.JSX.Element>;
+export default DiffViewer;

package/dist/esm/components/DiffViewer.js

@@ -0,0 +1,48 @@
+import React, { useMemo } from 'react';
+import { View, Text, ScrollView } from 'react-native';
+// Helpers
+import { getDiff } from '../helpers';
+// Stylesheet
+import { AppColors } from '../styles/AppColors';
+import styles from '../styles';
+const DiffViewer = React.memo(({ oldData, newData, forceOpen, }) => {
+    const diffs = useMemo(() => getDiff(oldData, newData), [oldData, newData]);
+    if (forceOpen === false) {
+        return (<View style={styles.codeBlock}>
+          <Text style={[styles.codeText, { color: AppColors.grayTextWeak }]}>
+            {'{ Diff hidden }'}
+          </Text>
+        </View>);
+    }
+    if (diffs.length === 0) {
+        return (<View style={styles.codeBlock}>
+          <Text style={styles.codeText}>No differences from previous API.</Text>
+        </View>);
+    }
+    return (<ScrollView horizontal showsHorizontalScrollIndicator={true} style={styles.codeBlockScroll}>
+        <View style={styles.diffBlock}>
+          {diffs.map((d, i) => {
+            const key = d.path === 'root' ? '' : `"${d.path}": `;
+            if (d.type === 'added') {
+                return (<Text key={i} selectable={true} style={styles.diffAdded}>
+                  + <Text style={styles.codeKey}>{key}</Text>
+                  {JSON.stringify(d.newVal)}
+                </Text>);
+            }
+            if (d.type === 'removed') {
+                return (<Text key={i} selectable={true} style={styles.diffRemoved}>
+                  - <Text style={styles.codeKey}>{key}</Text>
+                  {JSON.stringify(d.oldVal)}
+                </Text>);
+            }
+            return (<Text key={i} selectable={true} style={styles.diffChanged}>
+                ~ <Text style={styles.codeKey}>{key}</Text>
+                {JSON.stringify(d.oldVal)}{' '}
+                <Text style={{ color: AppColors.grayTextWeak }}>➔</Text>{' '}
+                {JSON.stringify(d.newVal)}
+              </Text>);
+        })}
+        </View>
+      </ScrollView>);
+});
+export default DiffViewer;

package/dist/esm/components/DomainHeader.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { LocalFilter } from '../types';
+declare const DomainHeader: ({ pageName, color, stats, activeFilters, onToggleFilter, isCollapsed, onToggleCollapse, isFirst, timestamp, }: {
+    pageName: string;
+    color: string;
+    stats: {
+        success: number;
+        failed: number;
+        loading: number;
+    };
+    activeFilters: Set<LocalFilter>;
+    onToggleFilter: (pageName: string, filter: LocalFilter) => void;
+    isCollapsed: boolean;
+    onToggleCollapse: (pageName: string) => void;
+    isFirst: boolean;
+    timestamp: number;
+}) => React.JSX.Element;
+export default DomainHeader;

package/dist/esm/components/DomainHeader.js

@@ -0,0 +1,98 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, Pressable, View, Text } from 'react-native';
+// Stylesheet
+import { AppColors } from '../styles/AppColors';
+// Helpers
+import { formatDateTime } from '../helpers';
+// Assets
+import { ChevronIcon, ScreenIcon, CheckIcon, FailIcon, ClockIcon, } from './NetworkIcons';
+// Stylesheet
+import styles from '../styles';
+const DomainHeader = ({ pageName, color, stats, activeFilters, onToggleFilter, isCollapsed, onToggleCollapse, isFirst, timestamp, }) => {
+    const chevronAnim = useRef(new Animated.Value(isCollapsed ? 0 : 1)).current;
+    useEffect(() => {
+        Animated.timing(chevronAnim, {
+            toValue: isCollapsed ? 0 : 1,
+            duration: 220,
+            useNativeDriver: true,
+        }).start();
+    }, [isCollapsed]);
+    const chevronRotate = chevronAnim.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['-90deg', '0deg'],
+    });
+    const visibleStats = ['success', 'failed', 'loading'];
+    return (<Pressable style={[styles.domainHeaderRow, !isFirst && styles.domainHeaderSeparator]} onPress={() => onToggleCollapse(pageName)}>
+      <View style={styles.domainHeaderLeft}>
+        <Animated.View style={{ transform: [{ rotate: chevronRotate }] }}>
+          <ChevronIcon color={AppColors.grayTextWeak} size={14}/>
+        </Animated.View>
+        <ScreenIcon color={color} size={16}/>
+        <View style={{ flex: 1, marginLeft: 6, justifyContent: 'center' }}>
+          <Text style={[styles.domainHeaderText, { color, marginLeft: 0 }]} numberOfLines={1}>
+            {pageName}
+          </Text>
+          <View style={styles.domainSubRow}>
+            <Text style={styles.domainTimestamp}>
+              {formatDateTime(timestamp)}
+            </Text>
+          </View>
+        </View>
+      </View>
+
+      <View style={styles.domainStatsGroup}>
+        {visibleStats.map((type, index) => {
+            const isLast = index === visibleStats.length - 1;
+            const isActive = activeFilters.has(type);
+            let IconComponent;
+            let activeColor = '';
+            let count = 0;
+            let bgStyle = {};
+            if (type === 'success') {
+                IconComponent = CheckIcon;
+                activeColor = AppColors.greenColor;
+                count = stats.success;
+                bgStyle = {
+                    backgroundColor: isActive
+                        ? `${AppColors.greenColor}15`
+                        : 'transparent',
+                };
+            }
+            else if (type === 'failed') {
+                IconComponent = FailIcon;
+                activeColor = AppColors.errorColor;
+                count = stats.failed;
+                bgStyle = {
+                    backgroundColor: isActive
+                        ? `${AppColors.errorColor}15`
+                        : 'transparent',
+                };
+            }
+            else {
+                IconComponent = ClockIcon;
+                activeColor = AppColors.darkOrange;
+                count = stats.loading;
+                bgStyle = {
+                    backgroundColor: isActive
+                        ? `${AppColors.darkOrange}15`
+                        : 'transparent',
+                };
+            }
+            return (<Pressable key={type} onPress={() => onToggleFilter(pageName, type)} style={[
+                    styles.groupBtnItem,
+                    bgStyle,
+                    !isLast && styles.groupBtnBorderRight,
+                ]}>
+              <IconComponent color={isActive ? activeColor : AppColors.grayTextWeak} size={type === 'failed' ? 8 : 10}/>
+              <Text style={[
+                    styles.domainStatText,
+                    { color: isActive ? activeColor : AppColors.grayTextWeak },
+                ]}>
+                {count}
+              </Text>
+            </Pressable>);
+        })}
+      </View>
+    </Pressable>);
+};
+export default DomainHeader;

package/dist/esm/components/EmptyState.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const EmptyState: ({ isSearch }: {
+    isSearch?: boolean;
+}) => React.JSX.Element;
+export default EmptyState;

package/dist/esm/components/EmptyState.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { DevSettings, Alert, View, Text } from 'react-native';
+// Components
+import TouchableScale from './TouchableScale';
+// Assets
+import { EmptyRadarIcon } from './NetworkIcons';
+// Stylesheet
+import { AppColors } from '../styles/AppColors';
+import styles from '../styles';
+const EmptyState = ({ isSearch }) => {
+    const handleReload = () => {
+        if (__DEV__ && DevSettings && DevSettings.reload) {
+            DevSettings.reload();
+            return;
+        }
+        Alert.alert('Reload', 'App reload is typically only available in development mode.');
+    };
+    return (<View style={styles.emptyContainer}>
+      <View style={styles.emptyIconWrap}>
+        <EmptyRadarIcon color={AppColors.purple} size={32}/>
+      </View>
+      <Text style={styles.emptyTitle}>
+        {isSearch ? 'No matching APIs' : 'No network activity'}
+      </Text>
+      <Text style={styles.emptySub}>
+        {isSearch
+            ? 'Try adjusting your filters or search.'
+            : 'Listening for incoming API calls...'}
+      </Text>
+      {!isSearch && (<TouchableScale style={styles.reloadBtn} onPress={handleReload}>
+          <Text style={styles.reloadBtnText}>Reload App</Text>
+        </TouchableScale>)}
+    </View>);
+};
+export default EmptyState;

package/dist/esm/components/HeadersSection.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { HeadersSectionProps } from '../types';
+declare const HeadersSection: ({ title, headers, search, resetKey, }: HeadersSectionProps) => React.JSX.Element;
+export default HeadersSection;