react-native-inapp-inspector 1.0.3 → 1.0.5

package/dist/commonjs/types/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export type ActiveTab = 'apis' | 'analytics' | 'logs' | 'webview';
+export type ActiveTab = 'insights' | 'apis' | 'analytics' | 'logs' | 'webview' | 'redux';
 export interface ConsoleLog {
     id: number;
     type: 'info' | 'warn' | 'error';
@@ -73,7 +73,7 @@ export type DiffResult = {
     newVal?: any;
 };
 export interface CopyButtonProps {
-    value: unknown;
+    value: unknown | (() => unknown);
     label: string;
     iconType?: 'copy' | 'terminal' | 'fetch';
 }

package/dist/esm/components/AnalyticsEventCard.js

@@ -171,8 +171,8 @@ const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPre
 // ─── Styles ───────────────────────────────────────────────────────────────────
 const cardStyles = StyleSheet.create({
     container: {
-        paddingHorizontal: 16,
-        paddingVertical: 4,
+        paddingHorizontal: 12,
+        paddingVertical: 3,
     },
     gapContainer: {
         alignItems: 'center',
@@ -189,7 +189,7 @@ const cardStyles = StyleSheet.create({
         borderRadius: 8,
         borderWidth: 1,
         borderColor: '#EFEFEF',
-        padding: 12,
+        padding: 8,
         shadowColor: '#000',
         shadowOpacity: 0.03,
         shadowRadius: 3,
@@ -201,11 +201,11 @@ const cardStyles = StyleSheet.create({
         flexDirection: 'row',
         justifyContent: 'space-between',
         alignItems: 'center',
-        marginBottom: 8,
+        marginBottom: 6,
     },
     nameBadge: {
-        paddingHorizontal: 8,
-        paddingVertical: 4,
+        paddingHorizontal: 6,
+        paddingVertical: 2.5,
         borderRadius: 6,
         borderWidth: 1,
     },
@@ -240,8 +240,8 @@ const cardStyles = StyleSheet.create({
         flexDirection: 'row',
         alignItems: 'center',
         backgroundColor: AppColors.grayBackground,
-        paddingHorizontal: 6,
-        paddingVertical: 3,
+        paddingHorizontal: 5,
+        paddingVertical: 2,
         borderRadius: 4,
         borderWidth: 1,
         borderColor: AppColors.grayBorderSecondary,
@@ -261,8 +261,8 @@ const cardStyles = StyleSheet.create({
         backgroundColor: '#FFE4E6',
         borderColor: '#FCC2D7',
         borderWidth: 1,
-        paddingHorizontal: 6,
-        paddingVertical: 3,
+        paddingHorizontal: 5,
+        paddingVertical: 2,
         borderRadius: 4,
     },
     duplicateText: {

package/dist/esm/components/CodeSnippet.js

@@ -1,5 +1,11 @@
-import React, { useMemo } from 'react';
-import { StyleSheet, Text, View, Platform, FlatList } from 'react-native';
+import React, { useMemo, useState, useRef, useEffect } from 'react';
+import { StyleSheet, Text, View, Platform, FlatList, TextInput, Pressable } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import { SearchIcon, ClearIcon } from './NetworkIcons';
+import CopyButton from './CopyButton';
+import TouchableScale from './TouchableScale';
+import { AppColors } from '../styles/AppColors';
+import { AppFonts } from '../styles/AppFonts';
 const escapeRegExp = (string) => {
     return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 };
@@ -100,7 +106,7 @@ const formatJS = (js) => {
 };
 const tokenizeJS = (text) => {
     const tokens = [];
-    const regex = /(\/\/.*|\/\*[\s\S]*?\*\/)|("(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|`(?:\\.|[^`\\])*`)|(\b(?:const|let|var|function|return|if|else|for|while|import|export|class|try|catch|new|this|async|await|break|continue|switch|case|default|throw|typeof|yield|let)\b)|(\b(?:console|window|document|fetch|global|require|module|exports|Promise|Map|Set|Array|Object|String|Number|Boolean)\b)|(\b\d+(?:\.\d+)?\b)/g;
+    const regex = /(\/\/.*|\/\*[\s\S]*?\*\/)|(\"(?:\\.|[^\"\\])*\"|\'(?:\\.|[^\'\\])*\'|\`(?:\\.|[^\`\\])*\`)|(\b(const|let|var|function|return|if|else|for|while|import|export|class|try|catch|new|this|async|await|break|continue|switch|case|default|throw|typeof|yield)\b)|(\b(console|window|document|fetch|global|require|module|exports|Promise|Map|Set|Array|Object|String|Number|Boolean)\b)|(\b\d+(?:\.\d+)?\b)/g;
     let lastIndex = 0;
     let match;
     while ((match = regex.exec(text)) !== null) {
@@ -166,7 +172,7 @@ const tokenizeCSS = (text) => {
 };
 const tokenizeHTML = (text) => {
     const tokens = [];
-    const regex = /(<!--[\s\S]*?-->)|(<\/?[a-zA-Z0-9:-]+>?)|("(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*')|([a-zA-Z0-9:-]+(?=\s*=))/g;
+    const regex = /(<!--[\s\S]*?-->)|(<\/?[a-zA-Z0-9:-]+>?)|(\"(?:\\.|[^\"\\])*\"|\'(?:\\.|[^\'\\])*\')|([a-zA-Z0-9:-]+(?=\s*=))/g;
     let lastIndex = 0;
     let match;
     while ((match = regex.exec(text)) !== null) {
@@ -221,7 +227,13 @@ const getStyleForType = (type) => {
             return styles.plain;
     }
 };
-const CodeSnippetLine = React.memo(({ line, lineIndex, language, search, }) => {
+const ArrowUpIcon = ({ color = '#64748B', size = 16 }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path d="M18 15l-6-6-6 6" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
+  </Svg>);
+const ArrowDownIcon = ({ color = '#64748B', size = 16 }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path d="M6 9l6 6 6-6" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
+  </Svg>);
+const CodeSnippetLine = React.memo(({ line, lineIndex, language, search, isActiveMatch, }) => {
     const tokens = useMemo(() => {
         if (language === 'html')
             return tokenizeHTML(line);
@@ -244,10 +256,10 @@ const CodeSnippetLine = React.memo(({ line, lineIndex, language, search, }) => {
             })}
         </Text>);
     };
-    return (<View style={styles.lineRow}>
+    return (<View style={[styles.lineRow, isActiveMatch && styles.activeMatchRow]}>
         {/* Gutter Line Number */}
-        <View style={styles.gutter}>
-          <Text style={styles.lineNumber}>{lineIndex + 1}</Text>
+        <View style={[styles.gutter, isActiveMatch && styles.activeMatchGutter]}>
+          <Text style={[styles.lineNumber, isActiveMatch && styles.activeMatchLineNumber]}>{lineIndex + 1}</Text>
         </View>
 
         {/* Highlighted Code Line */}
@@ -260,10 +272,27 @@ const CodeSnippetLine = React.memo(({ line, lineIndex, language, search, }) => {
         </View>
       </View>);
 });
-const CodeSnippet = ({ code, language, search = '', }) => {
+const CodeSnippet = ({ code, language, }) => {
+    const [searchQuery, setSearchQuery] = useState('');
+    const [debouncedQuery, setDebouncedQuery] = useState('');
+    const [currentMatchIdx, setCurrentMatchIdx] = useState(-1);
+    const [visibleLinesCount, setVisibleLinesCount] = useState(200);
+    const flatListRef = useRef(null);
+    // Debounce search query updates
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setDebouncedQuery(searchQuery);
+        }, 300);
+        return () => clearTimeout(timer);
+    }, [searchQuery]);
+    // If code is extremely large (e.g. > 150KB), skip the pretty printers
+    // to avoid blocking the single JS thread.
     const formattedCode = useMemo(() => {
         if (!code)
             return '';
+        if (code.length > 150000) {
+            return code;
+        }
         if (language === 'html')
             return formatHTML(code);
         if (language === 'css')
@@ -277,9 +306,135 @@ const CodeSnippet = ({ code, language, search = '', }) => {
             return [];
         return formattedCode.split(/\r?\n/);
     }, [formattedCode]);
-    const renderLine = ({ item, index }) => (<CodeSnippetLine line={item} lineIndex={index} language={language} search={search}/>);
-    return (<View style={styles.container}>
-      <FlatList data={lines} renderItem={renderLine} keyExtractor={(_, index) => String(index)} maxToRenderPerBatch={50} windowSize={10} initialNumToRender={30} removeClippedSubviews={Platform.OS === 'android'}/>
+    // Find all line indices matching the search query
+    const matches = useMemo(() => {
+        if (!debouncedQuery.trim() || debouncedQuery.length < 2)
+            return [];
+        const query = debouncedQuery.toLowerCase();
+        const indices = [];
+        for (let i = 0; i < lines.length; i++) {
+            if (lines[i].toLowerCase().includes(query)) {
+                indices.push(i);
+            }
+        }
+        return indices;
+    }, [debouncedQuery, lines]);
+    // Reset scroll and states on code/language changes
+    useEffect(() => {
+        setVisibleLinesCount(200);
+        setSearchQuery('');
+        setCurrentMatchIdx(-1);
+    }, [code, language]);
+    // Auto-scroll to the first match when search query returns matches
+    useEffect(() => {
+        if (matches.length > 0) {
+            setCurrentMatchIdx(0);
+            scrollToMatch(0);
+        }
+        else {
+            setCurrentMatchIdx(-1);
+        }
+    }, [matches]);
+    const scrollToMatch = (matchIdx) => {
+        if (matches.length === 0 || matchIdx < 0 || matchIdx >= matches.length)
+            return;
+        const lineIdx = matches[matchIdx];
+        // Ensure the targeted index is loaded in FlatList
+        if (lineIdx >= visibleLinesCount) {
+            setVisibleLinesCount(lineIdx + 100);
+        }
+        // Schedule scroll after state has applied
+        setTimeout(() => {
+            try {
+                flatListRef.current?.scrollToIndex({
+                    index: lineIdx,
+                    animated: true,
+                    viewPosition: 0.5,
+                });
+            }
+            catch (e) {
+                // Fallback recovery is handled by onScrollToIndexFailed
+            }
+        }, 100);
+    };
+    const onScrollToIndexFailed = (error) => {
+        flatListRef.current?.scrollToOffset({
+            offset: error.averageItemLength * error.index,
+            animated: true,
+        });
+        setTimeout(() => {
+            try {
+                flatListRef.current?.scrollToIndex({
+                    index: error.index,
+                    animated: true,
+                    viewPosition: 0.5,
+                });
+            }
+            catch (err) {
+                console.warn('Scroll to line index failed after fallback retry:', err);
+            }
+        }, 120);
+    };
+    const handleNextMatch = () => {
+        if (matches.length === 0)
+            return;
+        const nextIdx = (currentMatchIdx + 1) % matches.length;
+        setCurrentMatchIdx(nextIdx);
+        scrollToMatch(nextIdx);
+    };
+    const handlePrevMatch = () => {
+        if (matches.length === 0)
+            return;
+        const prevIdx = (currentMatchIdx - 1 + matches.length) % matches.length;
+        setCurrentMatchIdx(prevIdx);
+        scrollToMatch(prevIdx);
+    };
+    const visibleLines = useMemo(() => {
+        return lines.slice(0, visibleLinesCount);
+    }, [lines, visibleLinesCount]);
+    const handleEndReached = () => {
+        if (visibleLinesCount < lines.length) {
+            setVisibleLinesCount(prev => Math.min(prev + 150, lines.length));
+        }
+    };
+    const renderLine = ({ item, index }) => {
+        const isActiveMatch = matches.length > 0 && currentMatchIdx >= 0 && index === matches[currentMatchIdx];
+        return (<CodeSnippetLine line={item} lineIndex={index} language={language} search={debouncedQuery} isActiveMatch={isActiveMatch}/>);
+    };
+    return (<View style={{ flex: 1 }}>
+      {/* Search Header Row */}
+      <View style={styles.searchRow}>
+        <View style={styles.searchBar}>
+          <SearchIcon color={AppColors.grayTextWeak} size={15}/>
+          <TextInput placeholder={`Search ${language.toUpperCase()}...`} placeholderTextColor={AppColors.grayTextWeak} value={searchQuery} onChangeText={setSearchQuery} style={styles.searchInput} autoCorrect={false} autoCapitalize="none"/>
+
+          {/* Matches Info */}
+          {debouncedQuery.length >= 2 && (<Text style={styles.matchCountText}>
+              {matches.length > 0 ? `${currentMatchIdx + 1}/${matches.length}` : '0/0'}
+            </Text>)}
+
+          {searchQuery.length > 0 && (<Pressable onPress={() => setSearchQuery('')} hitSlop={8} style={styles.clearBtn}>
+              <ClearIcon color={AppColors.grayTextWeak} size={12}/>
+            </Pressable>)}
+        </View>
+
+        {/* Up / Down Arrow Navigation Buttons */}
+        {matches.length > 0 && (<View style={styles.navArrowsGroup}>
+            <TouchableScale onPress={handlePrevMatch} hitSlop={8} style={styles.navArrowBtn}>
+              <ArrowUpIcon color="#475569" size={14}/>
+            </TouchableScale>
+            <TouchableScale onPress={handleNextMatch} hitSlop={8} style={styles.navArrowBtn}>
+              <ArrowDownIcon color="#475569" size={14}/>
+            </TouchableScale>
+          </View>)}
+
+        <CopyButton value={code} label={`${language.toUpperCase()} Source`}/>
+      </View>
+
+      {/* Code Snippet list container */}
+      <View style={styles.container}>
+        <FlatList ref={flatListRef} data={visibleLines} renderItem={renderLine} keyExtractor={(_, index) => String(index)} maxToRenderPerBatch={30} windowSize={5} initialNumToRender={50} removeClippedSubviews={Platform.OS === 'android'} onEndReached={handleEndReached} onEndReachedThreshold={0.5} onScrollToIndexFailed={onScrollToIndexFailed}/>
+      </View>
     </View>);
 };
 const monoFont = Platform.OS === 'ios' ? 'Menlo' : 'monospace';
@@ -292,12 +447,69 @@ const styles = StyleSheet.create({
         borderColor: '#E2E8F0',
         overflow: 'hidden',
     },
+    searchRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 6,
+        gap: 8,
+    },
+    searchBar: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: '#FFFFFF',
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: '#E2E8F0',
+        paddingHorizontal: 8,
+        height: 32,
+    },
+    searchInput: {
+        flex: 1,
+        fontFamily: AppFonts.interRegular,
+        fontSize: 12,
+        color: '#0F172A',
+        marginLeft: 6,
+        paddingVertical: 0,
+    },
+    matchCountText: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 10,
+        color: '#64748B',
+        marginHorizontal: 6,
+        backgroundColor: '#F1F5F9',
+        paddingHorizontal: 6,
+        paddingVertical: 2,
+        borderRadius: 4,
+    },
+    clearBtn: {
+        padding: 4,
+    },
+    navArrowsGroup: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: '#FFFFFF',
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: '#E2E8F0',
+        height: 32,
+        paddingHorizontal: 2,
+    },
+    navArrowBtn: {
+        padding: 5,
+        borderRadius: 6,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
     lineRow: {
         flexDirection: 'row',
         alignItems: 'stretch',
         minHeight: 20,
         paddingVertical: 1,
     },
+    activeMatchRow: {
+        backgroundColor: 'rgba(234, 179, 8, 0.15)',
+    },
     gutter: {
         width: 40,
         backgroundColor: '#F1F5F9',
@@ -308,11 +520,19 @@ const styles = StyleSheet.create({
         paddingRight: 6,
         paddingTop: 1,
     },
+    activeMatchGutter: {
+        backgroundColor: 'rgba(234, 179, 8, 0.25)',
+        borderRightColor: 'rgba(234, 179, 8, 0.4)',
+    },
     lineNumber: {
         fontFamily: monoFont,
         fontSize: 9,
         color: '#94A3B8',
     },
+    activeMatchLineNumber: {
+        color: '#854D0E',
+        fontWeight: 'bold',
+    },
     codeLine: {
         flex: 1,
         paddingLeft: 10,

package/dist/esm/components/ConsoleLogCard.js

@@ -60,6 +60,52 @@ const getJsonPreviewText = (data) => {
         };
     }
 };
+const getLogMessageWithBadges = (message, searchStr, textStyle, highlightStyle, numberOfLines) => {
+    if (!message)
+        return null;
+    const prefixRegex = /^((?:\[[^\]]+\]\s*)+)/;
+    const match = message.match(prefixRegex);
+    if (match) {
+        const fullPrefix = match[1];
+        const remainingText = message.substring(fullPrefix.length);
+        const tags = fullPrefix.match(/\[[^\]]+\]/g) || [];
+        const getTagColor = (tag) => {
+            const cleanTag = tag.replace(/[\[\]]/g, '').trim().toUpperCase();
+            if (cleanTag === 'API')
+                return '#0284C7';
+            if (cleanTag === 'TEST')
+                return '#16A34A';
+            if (cleanTag === 'APP')
+                return '#4F46E5';
+            if (cleanTag === 'DETAILS')
+                return '#7C3AED';
+            if (cleanTag === 'WEBVIEW')
+                return '#EA580C';
+            if (cleanTag === 'MOCK REDUX' || cleanTag === 'REDUX')
+                return '#DB2777';
+            let hash = 0;
+            for (let i = 0; i < cleanTag.length; i++) {
+                hash = cleanTag.charCodeAt(i) + ((hash << 5) - hash);
+            }
+            const colors = ['#0891B2', '#0D9488', '#2563EB', '#D97706', '#E11D48', '#8B5CF6'];
+            return colors[Math.abs(hash) % colors.length];
+        };
+        return (<Text style={textStyle} numberOfLines={numberOfLines}>
+        {tags.map((tag, idx) => {
+                const color = getTagColor(tag);
+                return (<Text key={idx} style={{
+                        fontWeight: 'bold',
+                        color: color,
+                        fontFamily: AppFonts.interBold,
+                    }}>
+              {tag}{' '}
+            </Text>);
+            })}
+        <HighlightText text={remainingText} search={searchStr} style={textStyle} highlightStyle={highlightStyle} detectLinks={true}/>
+      </Text>);
+    }
+    return (<HighlightText text={message} search={searchStr} style={textStyle} highlightStyle={highlightStyle} numberOfLines={numberOfLines} detectLinks={true}/>);
+};
 export const ConsoleLogCard = React.memo(function ConsoleLogCard({ item, searchStr = '', isWebView = false, }) {
     const [expanded, setExpanded] = useState(false);
     const jsonContent = getJsonContent(item.message);
@@ -216,7 +262,7 @@ export const ConsoleLogCard = React.memo(function ConsoleLogCard({ item, searchS
         <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}/>
+                  {getLogMessageWithBadges(jsonContent.header, searchStr, styles.messageText, styles.highlight, numLines)}
                 </Pressable>) : null}
               {expanded ? (<View style={styles.jsonContainer}>
                   <JsonViewer data={jsonContent.data} search={searchStr} forceOpen={expanded}/>
@@ -224,7 +270,7 @@ export const ConsoleLogCard = React.memo(function ConsoleLogCard({ item, searchS
                   <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}/>
+              {getLogMessageWithBadges(item.message, searchStr, styles.messageText, styles.highlight, numLines)}
             </Pressable>)}
           {hasLongMessage && (<Pressable onPress={() => setExpanded(prev => !prev)} style={styles.seeMoreBtn} hitSlop={8}>
               <Text style={styles.seeMoreText}>
@@ -241,8 +287,8 @@ export const ConsoleLogCard = React.memo(function ConsoleLogCard({ item, searchS
 });
 const styles = StyleSheet.create({
     container: {
-        paddingHorizontal: 16,
-        paddingVertical: 4,
+        paddingHorizontal: 12,
+        paddingVertical: 3,
     },
     card: {
         alignSelf: 'stretch',
@@ -250,7 +296,7 @@ const styles = StyleSheet.create({
         borderRadius: 8,
         borderWidth: 1,
         borderColor: '#EFEFEF',
-        padding: 12,
+        padding: 8,
         shadowColor: '#000',
         shadowOpacity: 0.03,
         shadowRadius: 3,
@@ -263,7 +309,7 @@ const styles = StyleSheet.create({
         flexDirection: 'row',
         justifyContent: 'space-between',
         alignItems: 'center',
-        marginBottom: 8,
+        marginBottom: 6,
     },
     headerLeft: {
         flexDirection: 'row',
@@ -297,10 +343,10 @@ const styles = StyleSheet.create({
         maxWidth: '50%',
     },
     cardBody: {
-        marginTop: 8,
+        marginTop: 6,
         backgroundColor: '#FFFFFF',
-        paddingHorizontal: 10,
-        paddingVertical: 8,
+        paddingHorizontal: 8,
+        paddingVertical: 5,
         borderRadius: 6,
         borderWidth: 1,
         borderColor: '#EBECEF',

package/dist/esm/components/CopyButton.js

@@ -11,7 +11,8 @@ import styles from '../styles';
 const CopyButton = ({ value, label, iconType = 'copy' }) => {
     const [copied, setCopied] = useState(false);
     const handlePress = () => {
-        copyToClipboard(value, label);
+        const resolvedValue = typeof value === 'function' ? value() : value;
+        copyToClipboard(resolvedValue, label);
         setCopied(true);
         setTimeout(() => setCopied(false), 1200);
     };

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

@@ -0,0 +1,20 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+interface Props {
+    children: ReactNode;
+    onClose?: () => void;
+    onReset?: () => void;
+    fallbackType?: 'modal' | 'inline';
+}
+interface State {
+    hasError: boolean;
+    error: Error | null;
+}
+export declare class ErrorBoundary extends Component<Props, State> {
+    state: State;
+    static getDerivedStateFromError(error: Error): State;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    private handleReset;
+    private handleCopyTrace;
+    render(): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>> | React.JSX.Element;
+}
+export default ErrorBoundary;