react-native-inapp-inspector 1.0.4 → 1.0.5

package/dist/esm/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/example/App.tsx

@@ -8,118 +8,289 @@ import {
   ScrollView,
   useColorScheme,
 } from 'react-native';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { SafeAreaProvider, SafeAreaView } 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';
+import NetworkInspector, {
+  WebView,
+  ErrorBoundary,
+  connectReduxStore,
+  subscribeNetworkLogs,
+  subscribeConsoleLogs,
+} from 'react-native-inapp-inspector';
+
+// ─── Mock Redux Store ────────────────────────────────────────────────────────
+const mockStore = {
+  state: {
+    auth: {
+      user: { id: 101, name: 'Venkatesh', role: 'Lead Architect' },
+      token: 'bearer-jwt-tok_5548b366d86',
+      isAuthenticated: true,
+      lastLogin: new Date().toLocaleTimeString(),
+    },
+    settings: {
+      theme: 'dark',
+      notifications: true,
+      fontSize: 14,
+      locales: ['en-US', 'ta-IN'],
+    },
+    ui: {
+      sidebarOpen: false,
+      activeModal: null,
+      loadingStates: {
+        fetchUser: false,
+        updateSettings: false,
+      },
+    },
+  },
+  listeners: new Set<() => void>(),
+  getState() {
+    return this.state;
+  },
+  subscribe(listener: () => void) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  },
+  dispatch(action: any) {
+    console.log('[Mock Redux] Dispatching action:', action);
+    if (action.type === 'TOGGLE_SIDEBAR') {
+      this.state = {
+        ...this.state,
+        ui: {
+          ...this.state.ui,
+          sidebarOpen: !this.state.ui.sidebarOpen,
+        },
+      };
+    } else if (action.type === 'SET_THEME') {
+      this.state = {
+        ...this.state,
+        settings: {
+          ...this.state.settings,
+          theme: action.payload,
+        },
+      };
+    } else if (action.type === 'UPDATE_USER_TIME') {
+      this.state = {
+        ...this.state,
+        auth: {
+          ...this.state.auth,
+          lastLogin: new Date().toLocaleTimeString(),
+        },
+      };
+    }
+    this.listeners.forEach(l => l());
+  },
+};
+
+// Connect mock store to the inspector
+connectReduxStore(mockStore);
+
+function BuggyComponent({ type }: { type: 'js' | 'native' }) {
+  if (type === 'js') {
+    throw new Error('Simulated JavaScript Crash: ReferenceError: x is not defined in App.tsx at line 67');
+  }
+  if (type === 'native') {
+    throw new Error('Simulated Native Crash: fatal error: Index out of range in Native Swift/Java module at line 70');
+  }
+  return null;
+}
 
 function HomeScreen({ navigation }: any) {
+  const [activeCrash, setActiveCrash] = React.useState<'none' | 'js' | 'native'>('none');
+  const [apiCount, setApiCount] = React.useState(0);
+  const [logCount, setLogCount] = React.useState(0);
+  const [reduxState, setReduxState] = React.useState(mockStore.getState());
+
+  React.useEffect(() => {
+    // Subscribe to logs to display live dashboard counters
+    const unsubNet = subscribeNetworkLogs(logs => setApiCount(logs.length));
+    const unsubConsole = subscribeConsoleLogs(logs => setLogCount(logs.length));
+    const unsubRedux = mockStore.subscribe(() => setReduxState(mockStore.getState()));
+
+    // Initial Logs to populate stats
+    console.log('[App] HomeScreen mounted and ready.');
+    console.warn('[App] Check the Redux tab to inspect the connected state!');
+
+    return () => {
+      unsubNet();
+      unsubConsole();
+      unsubRedux();
+    };
+  }, []);
+
   const triggerNetworkRequest = async () => {
     try {
-      console.log('[API] Triggering network request...');
-      const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
+      console.log('[API] Triggering fetch user...');
+      const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
       const data = await response.json();
-      console.log('[API] Network request succeeded:', data);
+      console.log('[API] Fetch completed successfully:', data.name);
     } catch (error) {
-      console.error('[API] Network request failed:', error);
+      console.error('[API] Fetch failed:', error);
     }
   };
 
   const triggerFailedNetworkRequest = async () => {
     try {
-      console.log('[API] Triggering failing network request...');
-      await fetch('https://jsonplaceholder.typicode.com/invalid-url-404');
+      console.log('[API] Triggering failing fetch request...');
+      await fetch('https://jsonplaceholder.typicode.com/invalid-route-error');
     } catch (error) {
-      console.error('[API] Network request failed:', error);
+      console.error('[API] Fetch failed with error:', error);
     }
   };
 
   const triggerConsoleLogs = () => {
-    console.log('[App] Normal log triggered at ' + new Date().toLocaleTimeString());
-    console.warn('[App] Warning log triggered. Something might be off!');
-    console.error('[App] Error log triggered! Simulated critical error.');
+    console.log('[App] Manual log triggered at ' + new Date().toLocaleTimeString());
+    console.warn('[App] Simulated warning. Please check the API config.');
+    console.error('[App] Simulated error! Critical DB connection timeout.');
   };
 
-  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);
-  }, []);
+  const handleToggleSidebar = () => {
+    mockStore.dispatch({ type: 'TOGGLE_SIDEBAR' });
+    mockStore.dispatch({ type: 'UPDATE_USER_TIME' });
+  };
 
   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.
+    <SafeAreaView style={styles.safeContainer}>
+      <ScrollView contentContainerStyle={styles.content} showsVerticalScrollIndicator={false}>
+        {/* Header Hero Section */}
+        <View style={styles.headerHero}>
+          <Text style={styles.headerBadge}>INSPECTOR PLAYGROUND</Text>
+          <Text style={styles.headerTitle}>Debug Dashboard</Text>
+          <Text style={styles.headerSubtitle}>
+            A plug-and-play developer kit for real-time inspection.
           </Text>
+        </View>
 
-          <TouchableOpacity style={styles.button} onPress={triggerNetworkRequest}>
-            <Text style={styles.buttonText}>Trigger Fetch (200 OK)</Text>
-          </TouchableOpacity>
+        {/* System Status Metrics Card */}
+        <View style={styles.statsCard}>
+          <Text style={styles.sectionTitle}>SYSTEM STATUS</Text>
+          <View style={styles.statsGrid}>
+            <View style={styles.statBox}>
+              <Text style={styles.statVal}>{apiCount}</Text>
+              <Text style={styles.statLbl}>APIs</Text>
+            </View>
+            <View style={styles.statBox}>
+              <Text style={styles.statVal}>{logCount}</Text>
+              <Text style={styles.statLbl}>Logs</Text>
+            </View>
+            <View style={styles.statBox}>
+              <Text style={[styles.statVal, { color: '#A78BFA' }]}>
+                {reduxState.ui.sidebarOpen ? 'Open' : 'Closed'}
+              </Text>
+              <Text style={styles.statLbl}>Sidebar</Text>
+            </View>
+          </View>
+        </View>
 
-          <TouchableOpacity style={[styles.button, styles.dangerButton]} onPress={triggerFailedNetworkRequest}>
-            <Text style={styles.buttonText}>Trigger Fetch (404 Error)</Text>
-          </TouchableOpacity>
+        {/* Action Panel Grid */}
+        <View style={styles.panelCard}>
+          <Text style={styles.panelHeader}>🌐 API & NETWORK TESTS</Text>
+          <View style={styles.btnRow}>
+            <TouchableOpacity style={[styles.gridBtn, { borderColor: '#38BDF8' }]} onPress={triggerNetworkRequest}>
+              <Text style={[styles.btnText, { color: '#38BDF8' }]}>Fetch (200 OK)</Text>
+            </TouchableOpacity>
+            <TouchableOpacity style={[styles.gridBtn, { borderColor: '#F43F5E' }]} onPress={triggerFailedNetworkRequest}>
+              <Text style={[styles.btnText, { color: '#F43F5E' }]}>Fetch (404 Err)</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
 
-          <TouchableOpacity style={[styles.button, styles.infoButton]} onPress={triggerConsoleLogs}>
-            <Text style={styles.buttonText}>Trigger Console Logs</Text>
+        <View style={styles.panelCard}>
+          <Text style={styles.panelHeader}>📝 CONSOLE EVENT ACTIONS</Text>
+          <TouchableOpacity style={[styles.fullWidthBtn, { backgroundColor: '#6366F1' }]} onPress={triggerConsoleLogs}>
+            <Text style={styles.fullWidthBtnText}>Trigger Log, Warn & Error Logs</Text>
           </TouchableOpacity>
-          
-          <TouchableOpacity style={[styles.button, styles.successButton]} onPress={() => navigation.navigate('Details')}>
-            <Text style={styles.buttonText}>Go to Details Screen</Text>
+        </View>
+
+        <View style={styles.panelCard}>
+          <Text style={styles.panelHeader}>⚙️ REDUX & STATE ACTIONS</Text>
+          <TouchableOpacity style={[styles.fullWidthBtn, { backgroundColor: '#8B5CF6' }]} onPress={handleToggleSidebar}>
+            <Text style={styles.fullWidthBtnText}>Dispatch: Toggle Sidebar & Update Time</Text>
           </TouchableOpacity>
         </View>
+
+        <View style={styles.panelCard}>
+          <Text style={styles.panelHeader}>➔ ROUTING & WEBVIEW</Text>
+          <View style={styles.btnRow}>
+            <TouchableOpacity style={[styles.gridBtn, { borderColor: '#10B981' }]} onPress={() => navigation.navigate('Details')}>
+              <Text style={[styles.btnText, { color: '#10B981' }]}>Go to Details</Text>
+            </TouchableOpacity>
+            <TouchableOpacity style={[styles.gridBtn, { borderColor: '#F59E0B' }]} onPress={() => navigation.navigate('WebView')}>
+              <Text style={[styles.btnText, { color: '#F59E0B' }]}>Go to WebView</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+
+        <View style={[styles.panelCard, { borderColor: '#F43F5E' }]}>
+          <Text style={[styles.panelHeader, { color: '#F43F5E' }]}>💥 CRASH SIMULATION TESTS</Text>
+          <View style={styles.btnRow}>
+            <TouchableOpacity style={[styles.gridBtn, { borderColor: '#F43F5E', backgroundColor: 'rgba(244,63,94,0.05)' }]} onPress={() => setActiveCrash('js')}>
+              <Text style={[styles.btnText, { color: '#F43F5E' }]}>JS Crash</Text>
+            </TouchableOpacity>
+            <TouchableOpacity style={[styles.gridBtn, { borderColor: '#EF4444', backgroundColor: 'rgba(239,68,68,0.1)' }]} onPress={() => setActiveCrash('native')}>
+              <Text style={[styles.btnText, { color: '#EF4444' }]}>Native Crash</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
       </ScrollView>
-      <NetworkInspector />
-    </View>
+      {activeCrash !== 'none' && <BuggyComponent type={activeCrash} />}
+    </SafeAreaView>
   );
 }
 
 function DetailsScreen({ navigation }: any) {
   const triggerDetailLogs = () => {
-    console.log('[Details] User navigated to details screen and triggered a log.');
+    console.log('[Details] User triggered log from Details screen.');
   };
 
   React.useEffect(() => {
     console.log('[Test] DetailsScreen mounted!');
-    triggerDetailLogs();
   }, []);
 
   return (
-    <View style={styles.container}>
+    <SafeAreaView style={styles.safeContainer}>
       <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.
+        <View style={styles.headerHero}>
+          <Text style={styles.headerBadge}>DETAILS MODULE</Text>
+          <Text style={styles.headerTitle}>Navigation Tracking</Text>
+          <Text style={styles.headerSubtitle}>
+            The breadcrumbs inside the inspector track your stack route in real-time.
           </Text>
+        </View>
 
-          <TouchableOpacity style={styles.button} onPress={triggerDetailLogs}>
-            <Text style={styles.buttonText}>Trigger Log from Details</Text>
+        <View style={styles.panelCard}>
+          <Text style={styles.panelHeader}>MODULE ACTIONS</Text>
+          <TouchableOpacity style={[styles.fullWidthBtn, { backgroundColor: '#10B981', marginBottom: 12 }]} onPress={triggerDetailLogs}>
+            <Text style={styles.fullWidthBtnText}>Trigger Log from Details Screen</Text>
           </TouchableOpacity>
 
-          <TouchableOpacity style={[styles.button, styles.secondaryButton]} onPress={() => navigation.goBack()}>
-            <Text style={styles.buttonText}>Go Back Home</Text>
+          <TouchableOpacity style={[styles.fullWidthBtn, { backgroundColor: '#475569' }]} onPress={() => navigation.goBack()}>
+            <Text style={styles.fullWidthBtnText}>Go Back Home</Text>
           </TouchableOpacity>
         </View>
       </ScrollView>
-      <NetworkInspector />
-    </View>
+    </SafeAreaView>
+  );
+}
+
+function WebViewScreen({ navigation }: any) {
+  React.useEffect(() => {
+    console.log('[WebView] WebViewScreen mounted, loading apple.com...');
+  }, []);
+
+  return (
+    <SafeAreaView style={styles.safeContainer}>
+      <View style={{ flex: 1 }}>
+        <WebView
+          source={{ uri: 'https://apple.com' }}
+          style={{ flex: 1 }}
+          onLoadStart={() => console.log('[WebView] Navigation started to apple.com')}
+          onLoadEnd={() => console.log('[WebView] Navigation finished loading apple.com')}
+        />
+      </View>
+    </SafeAreaView>
   );
 }
 
@@ -131,96 +302,149 @@ function App() {
   return (
     <SafeAreaProvider>
       <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
-      <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>
+      <ErrorBoundary>
+        <NavigationContainer>
+          <Stack.Navigator
+            screenOptions={{
+              headerShown: false,
+              contentStyle: {
+                backgroundColor: '#0F172A',
+              },
+            }}
+          >
+            <Stack.Screen name="Home" component={HomeScreen} />
+            <Stack.Screen name="Details" component={DetailsScreen} />
+            <Stack.Screen name="WebView" component={WebViewScreen} />
+          </Stack.Navigator>
+        </NavigationContainer>
+        {/* Render inspector globally exactly once at the root level */}
+        <NetworkInspector />
+      </ErrorBoundary>
     </SafeAreaProvider>
   );
 }
 
 const styles = StyleSheet.create({
-  container: {
+  safeContainer: {
     flex: 1,
-    backgroundColor: '#121214',
+    backgroundColor: '#0F172A',
+    paddingTop: 12,
   },
   content: {
-    padding: 24,
+    paddingHorizontal: 20,
+    paddingBottom: 40,
+  },
+  headerHero: {
+    marginTop: 20,
+    marginBottom: 24,
     alignItems: 'center',
   },
-  title: {
-    fontSize: 28,
+  headerBadge: {
+    fontSize: 10,
     fontWeight: 'bold',
-    color: '#FFFFFF',
-    marginTop: 20,
+    color: '#818CF8',
+    letterSpacing: 1.5,
+    marginBottom: 6,
   },
-  subtitle: {
-    fontSize: 16,
-    color: '#8E8E93',
-    marginBottom: 40,
+  headerTitle: {
+    fontSize: 28,
+    fontWeight: '900',
+    color: '#F8FAFC',
+    marginBottom: 8,
   },
-  card: {
-    width: '100%',
-    backgroundColor: '#1E1E24',
+  headerSubtitle: {
+    fontSize: 14,
+    color: '#94A3B8',
+    textAlign: 'center',
+    lineHeight: 20,
+  },
+  statsCard: {
+    backgroundColor: '#1E293B',
     borderRadius: 16,
-    padding: 20,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.3,
-    shadowRadius: 8,
-    elevation: 5,
+    padding: 16,
+    borderWidth: 1,
+    borderColor: '#334155',
+    marginBottom: 20,
   },
-  cardTitle: {
+  sectionTitle: {
+    fontSize: 11,
+    fontWeight: '800',
+    color: '#94A3B8',
+    letterSpacing: 1.2,
+    marginBottom: 12,
+  },
+  statsGrid: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    gap: 12,
+  },
+  statBox: {
+    flex: 1,
+    backgroundColor: '#0F172A',
+    borderRadius: 12,
+    paddingVertical: 12,
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: '#1E293B',
+  },
+  statVal: {
     fontSize: 18,
+    fontWeight: 'bold',
+    color: '#38BDF8',
+  },
+  statLbl: {
+    fontSize: 10,
+    color: '#64748B',
+    marginTop: 2,
     fontWeight: '600',
-    color: '#FFFFFF',
-    marginBottom: 8,
   },
-  cardDesc: {
-    fontSize: 14,
-    color: '#AEAEB2',
-    lineHeight: 20,
-    marginBottom: 24,
+  panelCard: {
+    backgroundColor: '#1E293B',
+    borderRadius: 16,
+    padding: 16,
+    borderWidth: 1,
+    borderColor: '#334155',
+    marginBottom: 16,
   },
-  button: {
-    width: '100%',
-    height: 48,
-    backgroundColor: '#007AFF',
-    borderRadius: 10,
-    justifyContent: 'center',
-    alignItems: 'center',
+  panelHeader: {
+    fontSize: 12,
+    fontWeight: '800',
+    color: '#F8FAFC',
+    letterSpacing: 0.8,
     marginBottom: 12,
   },
-  dangerButton: {
-    backgroundColor: '#FF3B30',
+  btnRow: {
+    flexDirection: 'row',
+    gap: 12,
   },
-  infoButton: {
-    backgroundColor: '#5856D6',
+  gridBtn: {
+    flex: 1,
+    height: 44,
+    borderRadius: 10,
+    borderWidth: 1.5,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(255,255,255,0.02)',
   },
-  successButton: {
-    backgroundColor: '#34C759',
+  btnText: {
+    fontSize: 13,
+    fontWeight: 'bold',
   },
-  secondaryButton: {
-    backgroundColor: '#8E8E93',
+  fullWidthBtn: {
+    width: '100%',
+    height: 44,
+    borderRadius: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.2,
+    shadowRadius: 4,
+    elevation: 3,
   },
-  buttonText: {
-    fontSize: 15,
-    fontWeight: '600',
+  fullWidthBtnText: {
+    fontSize: 13,
+    fontWeight: 'bold',
     color: '#FFFFFF',
   },
 });

package/example/ios/Podfile.lock

@@ -1473,6 +1473,28 @@ PODS:
     - ReactCommon/turbomodule/core
     - ReactNativeDependencies
     - Yoga
+  - react-native-webview (13.16.1):
+    - hermes-engine
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-Core-prebuilt
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-renderercss
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - ReactNativeDependencies
+    - Yoga
   - React-NativeModulesApple (0.85.3):
     - hermes-engine
     - React-callinvoker
@@ -1995,6 +2017,7 @@ DEPENDENCIES:
   - React-microtasksnativemodule (from `../node_modules/react-native/ReactCommon/react/nativemodule/microtasks`)
   - React-mutationobservernativemodule (from `../node_modules/react-native/ReactCommon/react/nativemodule/mutationobserver`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
+  - react-native-webview (from `../node_modules/react-native-webview`)
   - React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
   - React-networking (from `../node_modules/react-native/ReactCommon/react/networking`)
   - React-oscompat (from `../node_modules/react-native/ReactCommon/oscompat`)
@@ -2117,6 +2140,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/react/nativemodule/mutationobserver"
   react-native-safe-area-context:
     :path: "../node_modules/react-native-safe-area-context"
+  react-native-webview:
+    :path: "../node_modules/react-native-webview"
   React-NativeModulesApple:
     :path: "../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios"
   React-networking:
@@ -2234,6 +2259,7 @@ SPEC CHECKSUMS:
   React-microtasksnativemodule: ab33a818d339f5a1da308893c11b487be66121a8
   React-mutationobservernativemodule: a42d1626651ccd7d0dc02a56e69d4ec77c248893
   react-native-safe-area-context: fb5c8ee9f6dd62ef710611b3d370c501f42a4ac0
+  react-native-webview: 2da09bdea1aeb6c46e27dd94632e21059cade6c1
   React-NativeModulesApple: deba264b03bd79c6bd61014fa30e40321b5e443a
   React-networking: 35e6070b084f435429f85c5db40b4d5b38652fe9
   React-oscompat: 64a0c7ef5441855dc6e2a6afe8ba8f92aa05075e