react-native-inapp-inspector 1.0.2 → 1.0.4

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

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

package/dist/commonjs/customHooks/consoleLogger.js

@@ -108,7 +108,7 @@ exports.clearConsoleLogs = clearConsoleLogs;
 const getConsoleLogs = () => [...logs];
 exports.getConsoleLogs = getConsoleLogs;
 const setupConsoleLogger = () => {
-    if (global.__CONSOLE_LOGGER_INITIALIZED__)
+    if (globalThis.__CONSOLE_LOGGER_INITIALIZED__)
         return;
     const originalConsole = {
         log: console.log,
@@ -136,6 +136,6 @@ const setupConsoleLogger = () => {
         addLog('error', args, 'error');
         originalConsole.error(...args);
     };
-    global.__CONSOLE_LOGGER_INITIALIZED__ = true;
+    globalThis.__CONSOLE_LOGGER_INITIALIZED__ = true;
 };
 exports.setupConsoleLogger = setupConsoleLogger;

package/dist/commonjs/customHooks/networkLogger.js

@@ -117,12 +117,12 @@ const addOrUpdateLog = (log) => {
 };
 // ─── Setup ────────────────────────────────────────────────────────────────────
 const setupNetworkLogger = () => {
-    if (global.__NETWORK_LOGGER_INITIALIZED__)
+    if (globalThis.__NETWORK_LOGGER_INITIALIZED__)
         return;
-    global.__NETWORK_LOGGER__ = addOrUpdateLog;
-    const originalFetch = global.fetch;
+    globalThis.__NETWORK_LOGGER__ = addOrUpdateLog;
+    const originalFetch = globalThis.fetch;
     if (originalFetch) {
-        global.fetch = async (url, options = {}) => {
+        globalThis.fetch = async (url, options = {}) => {
             const method = (options?.method || 'GET').toUpperCase();
             if (!ALLOWED_METHODS.includes(method))
                 return originalFetch(url, options);
@@ -192,7 +192,7 @@ const setupNetworkLogger = () => {
             }
         };
     }
-    global.__NETWORK_LOGGER_INITIALIZED__ = true;
+    globalThis.__NETWORK_LOGGER_INITIALIZED__ = true;
 };
 exports.setupNetworkLogger = setupNetworkLogger;
 // ─── Axios interceptor helper ─────────────────────────────────────────────────

package/dist/commonjs/index.js

@@ -79,6 +79,13 @@ const AnalyticsDetail_1 = __importDefault(require("./components/AnalyticsDetail"
 // WebView
 const webViewLogger_1 = require("./customHooks/webViewLogger");
 const constants_1 = require("./constants");
+const NavigationTracker = ({ onStateChange }) => {
+    const navState = (0, native_1.useNavigationState)(state => state);
+    (0, react_1.useEffect)(() => {
+        onStateChange(navState);
+    }, [navState, onStateChange]);
+    return null;
+};
 const NetworkInspector = () => {
     const [logs, setLogs] = (0, react_1.useState)([]);
     const [visible, setVisible] = (0, react_1.useState)(false);
@@ -145,13 +152,17 @@ const NetworkInspector = () => {
     const [topEventsExpanded, setTopEventsExpanded] = (0, react_1.useState)(true);
     const [newEventIds, setNewEventIds] = (0, react_1.useState)(new Set());
     const prevEventIdsRef = (0, react_1.useRef)(new Set());
-    const navState = (0, native_1.useNavigationState)(state => state);
+    const [navState, setNavState] = (0, react_1.useState)(null);
+    const navigationContext = react_1.default.useContext(native_1.NavigationContext);
+    const hasNavigationContext = navigationContext !== undefined;
     const currentRouteRef = (0, react_1.useRef)({
         path: 'Navigators',
         params: null,
     });
     (0, react_1.useEffect)(() => {
-        currentRouteRef.current = (0, helpers_1.getNavigationInfo)(navState);
+        if (navState) {
+            currentRouteRef.current = (0, helpers_1.getNavigationInfo)(navState);
+        }
     }, [navState]);
     const logRouteMapRef = (0, react_1.useRef)(new Map());
     const prevLogIdsRef = (0, react_1.useRef)(new Set());
@@ -804,6 +815,7 @@ const NetworkInspector = () => {
         toggleSectionCollapse,
     ]);
     return (<>
+      {hasNavigationContext && (<NavigationTracker onStateChange={setNavState}/>)}
       <TouchableScale_1.default style={styles_1.default.fabWrapper} onPress={() => setVisible(true)} hitSlop={10}>
         <react_native_1.Animated.View style={[styles_1.default.fabPulseRing, { transform: [{ scale: pulseAnim }] }]}/>
         <react_native_linear_gradient_1.default colors={[AppColors_1.AppColors.purple, '#8F6EFF']} style={styles_1.default.fab}>

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

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

package/dist/esm/customHooks/consoleLogger.js

@@ -102,7 +102,7 @@ export const clearConsoleLogs = () => {
 };
 export const getConsoleLogs = () => [...logs];
 export const setupConsoleLogger = () => {
-    if (global.__CONSOLE_LOGGER_INITIALIZED__)
+    if (globalThis.__CONSOLE_LOGGER_INITIALIZED__)
         return;
     const originalConsole = {
         log: console.log,
@@ -130,5 +130,5 @@ export const setupConsoleLogger = () => {
         addLog('error', args, 'error');
         originalConsole.error(...args);
     };
-    global.__CONSOLE_LOGGER_INITIALIZED__ = true;
+    globalThis.__CONSOLE_LOGGER_INITIALIZED__ = true;
 };

package/dist/esm/customHooks/networkLogger.js

@@ -111,12 +111,12 @@ const addOrUpdateLog = (log) => {
 };
 // ─── Setup ────────────────────────────────────────────────────────────────────
 export const setupNetworkLogger = () => {
-    if (global.__NETWORK_LOGGER_INITIALIZED__)
+    if (globalThis.__NETWORK_LOGGER_INITIALIZED__)
         return;
-    global.__NETWORK_LOGGER__ = addOrUpdateLog;
-    const originalFetch = global.fetch;
+    globalThis.__NETWORK_LOGGER__ = addOrUpdateLog;
+    const originalFetch = globalThis.fetch;
     if (originalFetch) {
-        global.fetch = async (url, options = {}) => {
+        globalThis.fetch = async (url, options = {}) => {
             const method = (options?.method || 'GET').toUpperCase();
             if (!ALLOWED_METHODS.includes(method))
                 return originalFetch(url, options);
@@ -186,7 +186,7 @@ export const setupNetworkLogger = () => {
             }
         };
     }
-    global.__NETWORK_LOGGER_INITIALIZED__ = true;
+    globalThis.__NETWORK_LOGGER_INITIALIZED__ = true;
 };
 // ─── Axios interceptor helper ─────────────────────────────────────────────────
 export const addAxiosInterceptors = (axiosInstance) => {

package/dist/esm/index.js

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react'
 import { Alert, Animated, StyleSheet, FlatList, SectionList, Modal, Platform, Pressable, ScrollView, Text, TextInput, View, Linking, Image, InteractionManager, ActivityIndicator, StatusBar, } from 'react-native';
 import Svg, { Circle, Path } from 'react-native-svg';
 import LinearGradient from 'react-native-linear-gradient';
-import { useNavigationState } from '@react-navigation/native';
+import { useNavigationState, NavigationContext } from '@react-navigation/native';
 // Components
 import TouchableScale from './components/TouchableScale';
 import useAccordion from './customHooks/useAccordion';
@@ -40,6 +40,13 @@ import AnalyticsDetail from './components/AnalyticsDetail';
 // WebView
 import { getWebViewLogs, getWebViewNavHistory, getWebViewHtml, getWebViewCss, getWebViewJs, getWebViewHtmlUrl, clearWebViewData, subscribeWebView, } from './customHooks/webViewLogger';
 import { METHOD_COLORS, STATUS_FILTERS } from './constants';
+const NavigationTracker = ({ onStateChange }) => {
+    const navState = useNavigationState(state => state);
+    useEffect(() => {
+        onStateChange(navState);
+    }, [navState, onStateChange]);
+    return null;
+};
 const NetworkInspector = () => {
     const [logs, setLogs] = useState([]);
     const [visible, setVisible] = useState(false);
@@ -106,13 +113,17 @@ const NetworkInspector = () => {
     const [topEventsExpanded, setTopEventsExpanded] = useState(true);
     const [newEventIds, setNewEventIds] = useState(new Set());
     const prevEventIdsRef = useRef(new Set());
-    const navState = useNavigationState(state => state);
+    const [navState, setNavState] = useState(null);
+    const navigationContext = React.useContext(NavigationContext);
+    const hasNavigationContext = navigationContext !== undefined;
     const currentRouteRef = useRef({
         path: 'Navigators',
         params: null,
     });
     useEffect(() => {
-        currentRouteRef.current = getNavigationInfo(navState);
+        if (navState) {
+            currentRouteRef.current = getNavigationInfo(navState);
+        }
     }, [navState]);
     const logRouteMapRef = useRef(new Map());
     const prevLogIdsRef = useRef(new Set());
@@ -765,6 +776,7 @@ const NetworkInspector = () => {
         toggleSectionCollapse,
     ]);
     return (<>
+      {hasNavigationContext && (<NavigationTracker onStateChange={setNavState}/>)}
       <TouchableScale style={styles.fabWrapper} onPress={() => setVisible(true)} hitSlop={10}>
         <Animated.View style={[styles.fabPulseRing, { transform: [{ scale: pulseAnim }] }]}/>
         <LinearGradient colors={[AppColors.purple, '#8F6EFF']} style={styles.fab}>

package/example/App.tsx

@@ -8,12 +8,12 @@ import {
   ScrollView,
   useColorScheme,
 } from 'react-native';
-import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import NetworkInspector from 'react-native-inapp-inspector';
 
-function App() {
-  const isDarkMode = useColorScheme() === 'dark';
-
+function HomeScreen({ navigation }: any) {
   const triggerNetworkRequest = async () => {
     try {
       console.log('[API] Triggering network request...');
@@ -40,37 +40,116 @@ function App() {
     console.error('[App] Error log triggered! Simulated critical error.');
   };
 
+  React.useEffect(() => {
+    console.log('[Test] HomeScreen mounted, triggering automated tests...');
+    triggerNetworkRequest();
+    triggerConsoleLogs();
+    
+    const timer = setTimeout(() => {
+      console.log('[Test] Navigating to Details screen...');
+      navigation.navigate('Details');
+    }, 2500);
+    
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <ScrollView contentContainerStyle={styles.content}>
+        <Text style={styles.title}>RN In-App Inspector</Text>
+        <Text style={styles.subtitle}>Reference Implementation</Text>
+
+        <View style={styles.card}>
+          <Text style={styles.cardTitle}>Inspect Network & Console Logs</Text>
+          <Text style={styles.cardDesc}>
+            Tap the buttons below to trigger simulated background events, then click the floating inspector badge to open the inspector overlay.
+          </Text>
+
+          <TouchableOpacity style={styles.button} onPress={triggerNetworkRequest}>
+            <Text style={styles.buttonText}>Trigger Fetch (200 OK)</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity style={[styles.button, styles.dangerButton]} onPress={triggerFailedNetworkRequest}>
+            <Text style={styles.buttonText}>Trigger Fetch (404 Error)</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity style={[styles.button, styles.infoButton]} onPress={triggerConsoleLogs}>
+            <Text style={styles.buttonText}>Trigger Console Logs</Text>
+          </TouchableOpacity>
+          
+          <TouchableOpacity style={[styles.button, styles.successButton]} onPress={() => navigation.navigate('Details')}>
+            <Text style={styles.buttonText}>Go to Details Screen</Text>
+          </TouchableOpacity>
+        </View>
+      </ScrollView>
+      <NetworkInspector />
+    </View>
+  );
+}
+
+function DetailsScreen({ navigation }: any) {
+  const triggerDetailLogs = () => {
+    console.log('[Details] User navigated to details screen and triggered a log.');
+  };
+
+  React.useEffect(() => {
+    console.log('[Test] DetailsScreen mounted!');
+    triggerDetailLogs();
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <ScrollView contentContainerStyle={styles.content}>
+        <Text style={styles.title}>Details Screen</Text>
+        <Text style={styles.subtitle}>Navigation State Verification</Text>
+
+        <View style={styles.card}>
+          <Text style={styles.cardTitle}>Verify Navigation Routing</Text>
+          <Text style={styles.cardDesc}>
+            The inspector tracks your current navigation route. Open the inspector overlay and check the 'route' metadata on new network/console logs.
+          </Text>
+
+          <TouchableOpacity style={styles.button} onPress={triggerDetailLogs}>
+            <Text style={styles.buttonText}>Trigger Log from Details</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity style={[styles.button, styles.secondaryButton]} onPress={() => navigation.goBack()}>
+            <Text style={styles.buttonText}>Go Back Home</Text>
+          </TouchableOpacity>
+        </View>
+      </ScrollView>
+      <NetworkInspector />
+    </View>
+  );
+}
+
+const Stack = createNativeStackNavigator();
+
+function App() {
+  const isDarkMode = useColorScheme() === 'dark';
+
   return (
     <SafeAreaProvider>
       <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
-      <SafeAreaView style={styles.container}>
-        <ScrollView contentContainerStyle={styles.content}>
-          <Text style={styles.title}>RN In-App Inspector</Text>
-          <Text style={styles.subtitle}>Reference Implementation</Text>
-
-          <View style={styles.card}>
-            <Text style={styles.cardTitle}>Inspect Network & Console Logs</Text>
-            <Text style={styles.cardDesc}>
-              Tap the buttons below to trigger simulated background events, then click the floating inspector badge to open the inspector overlay.
-            </Text>
-
-            <TouchableOpacity style={styles.button} onPress={triggerNetworkRequest}>
-              <Text style={styles.buttonText}>Trigger Fetch (200 OK)</Text>
-            </TouchableOpacity>
-
-            <TouchableOpacity style={[styles.button, styles.dangerButton]} onPress={triggerFailedNetworkRequest}>
-              <Text style={styles.buttonText}>Trigger Fetch (404 Error)</Text>
-            </TouchableOpacity>
-
-            <TouchableOpacity style={[styles.button, styles.infoButton]} onPress={triggerConsoleLogs}>
-              <Text style={styles.buttonText}>Trigger Console Logs</Text>
-            </TouchableOpacity>
-          </View>
-        </ScrollView>
-
-        {/* Floating In-App Debug Inspector */}
-        <NetworkInspector />
-      </SafeAreaView>
+      <NavigationContainer>
+        <Stack.Navigator
+          screenOptions={{
+            headerStyle: {
+              backgroundColor: '#1E1E24',
+            },
+            headerTintColor: '#FFFFFF',
+            headerTitleStyle: {
+              fontWeight: 'bold',
+            },
+            contentStyle: {
+              backgroundColor: '#121214',
+            },
+          }}
+        >
+          <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Dashboard' }} />
+          <Stack.Screen name="Details" component={DetailsScreen} options={{ title: 'Details' }} />
+        </Stack.Navigator>
+      </NavigationContainer>
     </SafeAreaProvider>
   );
 }
@@ -133,6 +212,12 @@ const styles = StyleSheet.create({
   infoButton: {
     backgroundColor: '#5856D6',
   },
+  successButton: {
+    backgroundColor: '#34C759',
+  },
+  secondaryButton: {
+    backgroundColor: '#8E8E93',
+  },
   buttonText: {
     fontSize: 15,
     fontWeight: '600',