react-native-inapp-inspector 1.0.0

package/dist/esm/components/NetworkIcons.js

@@ -0,0 +1,176 @@
+import React from 'react';
+import Svg, { Circle, Line, Path, Rect } from 'react-native-svg';
+// Stylesheet
+import { AppColors } from '../styles/AppColors';
+export const EmptyRadarIcon = ({ color = AppColors.purple, size = 32 }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+      <Circle cx="12" cy="11" r="3" stroke={color} strokeWidth="1.5"/>
+      <Path d="M12 14v3" stroke={color} strokeWidth="1.5" strokeLinecap="round"/>
+    </Svg>);
+};
+export const MapPinIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <Circle cx="12" cy="10" r="3" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </Svg>);
+};
+export const ScreenIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Rect x="3" y="4" width="18" height="16" rx="2" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <Path d="M3 8h18M8 20V8" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </Svg>);
+};
+export const ExpandCollapseIcon = ({ isExpanded, color = AppColors.grayTextWeak, size = 14, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      {isExpanded ? (<Path d="M4 14h6v6M20 10h-6V4M14 10l7-7M10 14l-7 7" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>) : (<Path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>)}
+    </Svg>);
+};
+export const SearchIcon = ({ color = AppColors.primaryLight, size = 18, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Circle cx="11" cy="11" r="8" stroke={color} strokeWidth="2"/>
+      <Line x1="16.5" y1="16.5" x2="22" y2="22" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+    </Svg>);
+};
+export const ClearIcon = ({ color = AppColors.grayTextWeak, size = 14 }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M18 6L6 18M6 6l12 12" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
+    </Svg>);
+};
+export const ClockIcon = ({ color = AppColors.grayTextWeak, size = 14 }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Circle cx="12" cy="12" r="10" stroke={color} strokeWidth="2"/>
+      <Line x1="12" y1="12" x2="12" y2="7" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+      <Line x1="12" y1="12" x2="16" y2="14" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+    </Svg>);
+};
+export const CalendarIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Rect x="3" y="4" width="18" height="18" rx="2" stroke={color} strokeWidth="2"/>
+      <Line x1="3" y1="9" x2="21" y2="9" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+      <Line x1="8" y1="2" x2="8" y2="6" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+      <Line x1="16" y1="2" x2="16" y2="6" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+    </Svg>);
+};
+export const StatusIcon = ({ color = AppColors.grayTextWeak }) => {
+    return (<Svg width={14} height={14} viewBox="0 0 24 24" fill="none">
+      <Circle cx="12" cy="12" r="10" stroke={color} strokeWidth="2"/>
+      <Line x1="12" y1="8" x2="12" y2="12" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+      <Circle cx="12" cy="16" r="1" fill={color}/>
+    </Svg>);
+};
+export const SizeIcon = ({ color = AppColors.grayTextWeak }) => {
+    return (<Svg width={14} height={14} viewBox="0 0 24 24" fill="none">
+      <Path d="M4 6h16M4 10h10M4 14h13M4 18h7" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+    </Svg>);
+};
+export const RequestIcon = ({ color = AppColors.offerPurple }) => {
+    return (<Svg width={14} height={14} viewBox="0 0 24 24" fill="none">
+      <Path d="M5 12h14M13 6l6 6-6 6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </Svg>);
+};
+export const ResponseIcon = ({ color = AppColors.greenColor }) => {
+    return (<Svg width={14} height={14} viewBox="0 0 24 24" fill="none">
+      <Path d="M19 12H5M11 18l-6-6 6-6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </Svg>);
+};
+export const HeadersIcon = ({ color = AppColors.skyBlue }) => {
+    return (<Svg width={14} height={14} viewBox="0 0 24 24" fill="none">
+      <Path d="M4 6h16M4 12h16M4 18h10" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+    </Svg>);
+};
+export const CopyIcon = ({ color = AppColors.grayTextWeak, size = 14 }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M9 9V5a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-4" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <Rect x="3" y="7" width="10" height="14" rx="2" stroke={color} strokeWidth="2"/>
+    </Svg>);
+};
+export const FetchIcon = ({ color = AppColors.grayTextWeak, size = 14 }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M8 9l3 3-3 3M13 15h3" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <Rect x="3" y="3" width="18" height="18" rx="2" stroke={color} strokeWidth="2"/>
+    </Svg>);
+};
+export const TerminalIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M4 17l6-6-6-6M12 19h8" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </Svg>);
+};
+export const CheckIcon = ({ color = AppColors.greenColor, size = 14 }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M20 6L9 17l-5-5" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
+    </Svg>);
+};
+export const FailIcon = ({ color = AppColors.errorColor, size = 10 }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M18 6L6 18M6 6l12 12" stroke={color} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
+    </Svg>);
+};
+export const TrashIcon = ({ color = AppColors.primaryLight, size = 18 }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </Svg>);
+};
+export const HeaderPauseIcon = ({ isPaused, color = AppColors.primaryLight, size = 20, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      {isPaused ? (<Path d="M5 3l14 9-14 9V3z" fill={color}/>) : (<Path d="M6 5h3v14H6V5zm9 0h3v14h-3V5z" fill={color}/>)}
+    </Svg>);
+};
+export const ExportIcon = ({ color = AppColors.primaryLight, size = 18, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </Svg>);
+};
+export const SignalIcon = ({ color = AppColors.primaryLight, size = 18, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M2 20h.01M7 20v-4M12 20v-8M17 20V8M22 20V4" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </Svg>);
+};
+export const DiffIcon = ({ color = AppColors.grayTextWeak, size = 14 }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M7 8h10M12 3v10" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+      <Path d="M7 19h10" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+    </Svg>);
+};
+export const GlobeIcon = ({ color = AppColors.grayTextWeak, size = 14 }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Circle cx="12" cy="12" r="10" stroke={color} strokeWidth="2"/>
+      <Path d="M12 2C8 7 8 17 12 22M12 2c4 5 4 15 0 20M2 12h20" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+    </Svg>);
+};
+export const SortArrowIcon = ({ color = AppColors.primaryLight, size = 20, direction = 'down', }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      {direction === 'down' ? (<>
+          <Path d="M4 6h10M4 12h7M4 18h4" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+          <Path d="M18 6v12m0 0l-3-3m3 3l3-3" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+        </>) : (<>
+          <Path d="M4 6h4M4 12h7M4 18h10" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+          <Path d="M18 18V6m0 0l-3 3m3-3l3 3" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+        </>)}
+    </Svg>);
+};
+export const ChevronIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
+    return (<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>);
+};
+export const FilterIcon = ({ color = AppColors.grayTextWeak, size = 18, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M4 6h16M7 12h10M10 18h4" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </Svg>);
+};
+export const DownloadIcon = ({ color = AppColors.primaryLight, size = 18, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </Svg>);
+};
+export const CloseWhite = ({ color = '#FFFFFF', size = 20 }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M18 6L6 18M6 6l12 12" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </Svg>);
+};
+export const WhiteBackNavigation = ({ color = '#FFFFFF', size = 20 }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M19 12H5M12 19l-7-7 7-7" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </Svg>);
+};

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SectionHeaderProps } from '../types';
+declare const SectionHeader: ({ title, value, expanded, onToggleExpand, showDiff, isDiffing, onToggleDiff, }: SectionHeaderProps) => React.JSX.Element;
+export default SectionHeader;

package/dist/esm/components/SectionHeader.js

@@ -0,0 +1,49 @@
+import React, { useRef, useEffect } from 'react';
+import { Animated, View, Pressable, Text } from 'react-native';
+// Stylesheet
+import { AppColors } from '../styles/AppColors';
+// Components
+import CopyButton from './CopyButton';
+import TouchableScale from './TouchableScale';
+// Assets
+import { RequestIcon, ResponseIcon, HeadersIcon, DiffIcon, ChevronIcon, } from './NetworkIcons';
+// Stylesheet
+import styles from '../styles';
+const SectionHeader = ({ title, value, expanded, onToggleExpand, showDiff, isDiffing, onToggleDiff, }) => {
+    const isOpen = expanded === undefined ? false : !!expanded;
+    const chevronAnim = useRef(new Animated.Value(isOpen ? 1 : 0)).current;
+    useEffect(() => {
+        Animated.timing(chevronAnim, {
+            toValue: isOpen ? 1 : 0,
+            duration: 220,
+            useNativeDriver: true,
+        }).start();
+    }, [isOpen]);
+    const chevronRotate = chevronAnim.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['0deg', '180deg'],
+    });
+    return (<View style={styles.sectionHeaderGradient}>
+      <View style={styles.sectionHeaderRow}>
+        <Pressable style={styles.sectionTitleRow} onPress={onToggleExpand} hitSlop={12}>
+          {title === 'Request' || title === 'API' ? (<RequestIcon color={AppColors.offerPurple}/>) : title === 'Response' ? (<ResponseIcon color={AppColors.greenColor}/>) : (<HeadersIcon color={AppColors.skyBlue}/>)}
+          <Text style={styles.sectionTitle}>{title}</Text>
+        </Pressable>
+        <View style={styles.sectionHeaderActions}>
+          {showDiff && (<TouchableScale onPress={onToggleDiff} hitSlop={12} style={[
+                styles.iconSquareBtn,
+                isDiffing ? styles.iconSquareBtnActive : null,
+            ]}>
+              <DiffIcon color={isDiffing ? AppColors.skyBlue : AppColors.grayTextWeak} size={14}/>
+            </TouchableScale>)}
+          <CopyButton value={value} label={title}/>
+          <TouchableScale onPress={onToggleExpand} hitSlop={12} style={styles.iconSquareBtn}>
+            <Animated.View style={{ transform: [{ rotate: chevronRotate }] }}>
+              <ChevronIcon color={AppColors.grayTextStrong} size={14}/>
+            </Animated.View>
+          </TouchableScale>
+        </View>
+      </View>
+    </View>);
+};
+export default SectionHeader;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SourcePageCardProps } from '../types';
+declare const SourcePageCard: ({ routeInfo }: SourcePageCardProps) => React.JSX.Element;
+export default SourcePageCard;

package/dist/esm/components/SourcePageCard.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import { View, Pressable, Text, Animated } from 'react-native';
+import Svg, { Rect, Path } from 'react-native-svg';
+// Components
+import CopyButton from './CopyButton';
+// Custom Hooks
+import useAccordion from '../customHooks/useAccordion';
+// Assets
+import { ChevronIcon } from './NetworkIcons';
+// Stylesheet
+import { AppColors } from '../styles/AppColors';
+import styles from '../styles';
+const SourcePageCard = ({ routeInfo }) => {
+    const main = useAccordion(true, 600, 280);
+    const params = useAccordion(false, 800, 260);
+    const hasParams = routeInfo.params && Object.keys(routeInfo.params).length > 0;
+    return (<View style={styles.sourcePageCard}>
+      <Pressable onPress={main.toggleOpen} hitSlop={12}>
+        <View style={styles.sourcePageAccordionHeader}>
+          <View style={styles.sourcePageTop}>
+            <View style={styles.sourcePageIcon}>
+              <Svg width={14} height={14} viewBox="0 0 24 24" fill="none">
+                <Rect x="3" y="3" width="7" height="7" rx="1.5" stroke={AppColors.purple} strokeWidth="2"/>
+                <Rect x="14" y="3" width="7" height="7" rx="1.5" stroke={AppColors.purple} strokeWidth="2"/>
+                <Rect x="3" y="14" width="7" height="7" rx="1.5" stroke={AppColors.purple} strokeWidth="2"/>
+                <Path d="M14 17.5h7M17.5 14v7" stroke={AppColors.purple} strokeWidth="2" strokeLinecap="round"/>
+              </Svg>
+            </View>
+            <View style={{ flex: 1 }}>
+              <Text style={styles.sourcePageLabel}>Source Page</Text>
+              <Text style={styles.sourcePageValue} numberOfLines={1}>
+                {routeInfo.path}
+              </Text>
+            </View>
+          </View>
+          <View style={styles.sourcePageHeaderRight}>
+            <CopyButton value={routeInfo.path} label="Source Path"/>
+            <View style={styles.iconSquareBtn}>
+              <Animated.View style={main.chevronStyle}>
+                <ChevronIcon color={AppColors.grayTextStrong} size={14}/>
+              </Animated.View>
+            </View>
+          </View>
+        </View>
+      </Pressable>
+
+      <Animated.View style={main.bodyStyle}>
+        {hasParams && (<View style={styles.sourceParamsBox}>
+            <Pressable onPress={params.toggleOpen} hitSlop={10}>
+              <View style={styles.paramsAccordionHeader}>
+                <View style={styles.paramsAccordionLeft}>
+                  <Text style={styles.sourceParamsLabel}>Parameters</Text>
+                  <View style={styles.headerCountBadge}>
+                    <Text style={styles.headerCountText}>
+                      {Object.keys(routeInfo.params).length}
+                    </Text>
+                  </View>
+                </View>
+                <View style={styles.paramsAccordionRight}>
+                  <CopyButton value={routeInfo.params} label="Parameters"/>
+                  <View style={styles.iconSquareBtn}>
+                    <Animated.View style={params.chevronStyle}>
+                      <ChevronIcon color={AppColors.grayTextStrong} size={14}/>
+                    </Animated.View>
+                  </View>
+                </View>
+              </View>
+            </Pressable>
+
+            <Animated.View style={params.bodyStyle}>
+              <View style={styles.paramsBody}>
+                {Object.entries(routeInfo.params).map(([key, val], i, arr) => (<View key={key} style={[
+                    styles.paramRow,
+                    i < arr.length - 1 ? styles.paramRowBorder : null,
+                ]}>
+                    <Text style={styles.paramKey}>{key}</Text>
+                    <View style={styles.paramValueRow}>
+                      <Text selectable style={styles.paramValue}>
+                        {typeof val === 'object'
+                    ? JSON.stringify(val)
+                    : String(val)}
+                      </Text>
+                      <CopyButton value={typeof val === 'object'
+                    ? JSON.stringify(val)
+                    : String(val)} label={key}/>
+                    </View>
+                  </View>))}
+              </View>
+            </Animated.View>
+          </View>)}
+      </Animated.View>
+    </View>);
+};
+export default SourcePageCard;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+declare const TouchableScale: ({ onPress, style, children, hitSlop, disabled, }: {
+    onPress?: () => void;
+    style?: any;
+    children: React.ReactNode;
+    hitSlop?: any;
+    disabled?: boolean;
+}) => React.JSX.Element;
+export default TouchableScale;

package/dist/esm/components/TouchableScale.js

@@ -0,0 +1,9 @@
+import React, { useRef } from 'react';
+import { Animated, Pressable } from 'react-native';
+const TouchableScale = ({ onPress, style, children, hitSlop, disabled, }) => {
+    const scale = useRef(new Animated.Value(1)).current;
+    return (<Pressable disabled={disabled} style={style} onPressIn={() => Animated.spring(scale, { toValue: 0.94, useNativeDriver: true }).start()} onPressOut={() => Animated.spring(scale, { toValue: 1, useNativeDriver: true }).start()} onPress={onPress} hitSlop={hitSlop}>
+      <Animated.View style={{ transform: [{ scale }] }}>{children}</Animated.View>
+    </Pressable>);
+};
+export default TouchableScale;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TreeNodeProps } from '../types';
+declare const TreeNode: React.NamedExoticComponent<TreeNodeProps>;
+export default TreeNode;

package/dist/esm/components/TreeNode.js

@@ -0,0 +1,102 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Text, View, Image, Animated, Pressable } from 'react-native';
+// Helpers
+import { escapeRegex } from '../helpers';
+// Assets
+import { ChevronIcon } from './NetworkIcons';
+// Stylesheet
+import { AppColors } from '../styles/AppColors';
+import styles from '../styles';
+const TreeNode = React.memo(function TreeNode({ data, name, level = 0, search, forceOpen, }) {
+    const [localOpen, setLocalOpen] = useState(level < 1);
+    const open = forceOpen !== undefined ? forceOpen : localOpen;
+    const isObject = typeof data === 'object' && data !== null;
+    const isArray = Array.isArray(data);
+    function renderHighlighted(text) {
+        if (text === 'null' || text === 'undefined') {
+            return [
+                <Text key="nil" style={styles.codeTextNil}>
+          {text}
+        </Text>,
+            ];
+        }
+        if (!search) {
+            return [
+                <Text key="plain" style={styles.codeText}>
+          {text}
+        </Text>,
+            ];
+        }
+        const regex = new RegExp(`(${escapeRegex(search)})`, 'gi');
+        const parts = text.split(regex);
+        return parts.map((part, i) => part.toLowerCase() === search.toLowerCase() ? (<Text key={i} style={styles.highlight}>
+          {part}
+        </Text>) : (<Text key={i} style={styles.codeText}>
+          {part}
+        </Text>));
+    }
+    const indentStyle = { paddingLeft: level * 12 };
+    if (isObject && data._isFile) {
+        const file = data;
+        const isImage = file.type?.includes('image');
+        return (<View style={[indentStyle, styles.filePreviewNode]}>
+        {name !== undefined && (<Text style={[styles.codeKey, { marginBottom: 4 }]}>{`"${String(name)}": `}</Text>)}
+        <View style={styles.filePreviewCard}>
+          {isImage ? (<Image source={{ uri: file.uri }} style={styles.filePreviewThumb} resizeMode="cover"/>) : (<View style={styles.filePreviewDoc}>
+              <Text style={{ fontSize: 20 }}>📄</Text>
+            </View>)}
+          <View style={{ flex: 1 }}>
+            <Text style={styles.filePreviewName} numberOfLines={1}>
+              {file.name}
+            </Text>
+            <Text style={styles.filePreviewType}>{file.type}</Text>
+          </View>
+        </View>
+      </View>);
+    }
+    if (!isObject) {
+        const serialized = JSON.stringify(data) ?? String(data);
+        const prefix = name !== undefined ? `"${String(name)}": ` : null;
+        return (<View style={indentStyle}>
+        <Text selectable={true} style={styles.codeText}>
+          <Text style={styles.codeKey}>{prefix}</Text>
+          {renderHighlighted(serialized)}
+        </Text>
+      </View>);
+    }
+    const entries = isArray
+        ? data.map((v, i) => [i, v])
+        : Object.entries(data);
+    const countLabel = isArray ? `[${entries.length}]` : `{${entries.length}}`;
+    const treeChevronAnim = useRef(new Animated.Value(open ? 1 : 0)).current;
+    useEffect(() => {
+        Animated.timing(treeChevronAnim, {
+            toValue: open ? 1 : 0,
+            duration: 160,
+            useNativeDriver: true,
+        }).start();
+    }, [open]);
+    const treeChevronRotate = treeChevronAnim.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['0deg', '180deg'],
+    });
+    return (<View style={indentStyle}>
+      <Pressable style={styles.treeRow} onPress={() => setLocalOpen(v => !v)} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
+        <Animated.View style={{ transform: [{ rotate: treeChevronRotate }], marginRight: 6 }}>
+          <ChevronIcon color={AppColors.grayTextWeak} size={12}/>
+        </Animated.View>
+        {name !== undefined && (<Text style={[styles.codeKey, styles.treeKeyMargin]}>{`"${String(name)}"`}</Text>)}
+        {isArray ? (<View style={styles.arrayBadge}>
+            <Text style={styles.arrayBadgeText}>{countLabel}</Text>
+          </View>) : (<View style={styles.objectBadge}>
+            <Text style={styles.objectBadgeText}>{countLabel}</Text>
+          </View>)}
+      </Pressable>
+
+      {open &&
+            entries.map(([k, v]) => (<TreeNode key={String(k)} name={k} data={v} level={level + 1} search={search} forceOpen={forceOpen}/>))}
+
+      {open && <Text style={styles.codeSyntax}>{isArray ? ']' : '}'}</Text>}
+    </View>);
+});
+export default TreeNode;

package/dist/esm/constants/index.d.ts

@@ -0,0 +1,7 @@
+import { Method } from '../types';
+import { StatusFilter } from '../types';
+export declare const STATUS_FILTERS: StatusFilter[];
+export declare const METHOD_COLORS: Record<Method, string>;
+export declare const DOMAIN_COLORS: string[];
+export declare const DURATION_FAST_MS = 200;
+export declare const DURATION_SLOW_MS = 800;

package/dist/esm/constants/index.js

@@ -0,0 +1,32 @@
+// Styles
+import { AppColors } from '../styles/AppColors';
+export const STATUS_FILTERS = [
+    'ALL',
+    '2xx',
+    '3xx',
+    '4xx',
+    '5xx',
+    'Failed',
+];
+export const METHOD_COLORS = {
+    ALL: AppColors.grayText,
+    GET: AppColors.purple,
+    POST: AppColors.greenColor,
+    PUT: AppColors.lightOrange,
+    PATCH: AppColors.offerPurple,
+    DELETE: AppColors.errorColor,
+};
+export const DOMAIN_COLORS = [
+    '#1a5276',
+    '#8e44ad',
+    '#1e8449',
+    '#c0392b',
+    '#d35400',
+    '#d68910',
+    '#16a085',
+    '#27ae60',
+    '#2c3e50',
+    '#c2185b',
+];
+export const DURATION_FAST_MS = 200;
+export const DURATION_SLOW_MS = 800;

package/dist/esm/customHooks/analyticsLogger.d.ts

@@ -0,0 +1,21 @@
+import { AnalyticsEvent } from '../types';
+export declare const subscribeAnalyticsEvents: (callback: (events: AnalyticsEvent[]) => void) => () => void;
+export declare const clearAnalyticsEvents: () => void;
+export declare const getAnalyticsEvents: () => AnalyticsEvent[];
+/**
+ * Directly push an event into the inspector without going through Firebase.
+ * Useful for custom analytics wrappers or testing.
+ */
+export declare const logAnalyticsEvent: (name: string, params?: Record<string, any>, userProperties?: Record<string, any>) => void;
+/**
+ * Monkey-patches a @react-native-firebase/analytics instance so all calls
+ * are intercepted and forwarded to the NetworkInspector analytics tab.
+ *
+ * Pass the result of `analytics()` (the default app instance or any named one).
+ * Safe to call multiple times with the same instance — won't double-patch.
+ *
+ * @example
+ *   import analytics from '@react-native-firebase/analytics';
+ *   setupAnalyticsLogger(analytics());
+ */
+export declare const setupAnalyticsLogger: (analyticsInstance: any) => void;