react-native-inapp-inspector 1.0.9 → 1.0.11

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

@@ -161,7 +161,7 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
     iconBtnMinimal: {
         padding: number;
     };
-    closeButtonCircle: {
+    closeButtonSquare: {
         width: number;
         height: number;
         borderRadius: number;
@@ -198,6 +198,16 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         shadowOpacity: number;
         shadowRadius: number;
     };
+    fabIconContainer: {
+        backgroundColor: string;
+        borderRadius: number;
+        width: number;
+        height: number;
+        borderWidth: number;
+        borderColor: string;
+        alignItems: string;
+        justifyContent: string;
+    };
     fabPulseRing: {
         position: string;
         width: number;

package/dist/esm/styles/index.js

@@ -6,16 +6,16 @@ export const getRawStyles = (colors) => ({
         flexDirection: 'row',
         alignItems: 'center',
         paddingHorizontal: 12,
-        paddingVertical: 8,
+        paddingVertical: 10,
         zIndex: 10,
-        minHeight: 48,
+        minHeight: 64,
         shadowColor: '#000000',
         shadowOffset: { width: 0, height: 2 },
         shadowOpacity: 0.08,
         shadowRadius: 4,
         elevation: 4,
     },
-    headerLeft: { flex: 1, alignItems: 'flex-start' },
+    headerLeft: { flex: 2, alignItems: 'flex-start' },
     headerCenter: { flex: 3, alignItems: 'center' },
     headerRight: {
         flex: 1,
@@ -140,10 +140,10 @@ export const getRawStyles = (colors) => ({
         letterSpacing: 0.2,
     },
     iconBtnMinimal: { padding: 6 },
-    closeButtonCircle: {
+    closeButtonSquare: {
         width: 32,
         height: 32,
-        borderRadius: 16,
+        borderRadius: 8,
         backgroundColor: 'rgba(255, 255, 255, 0.15)',
         alignItems: 'center',
         justifyContent: 'center',
@@ -166,6 +166,16 @@ export const getRawStyles = (colors) => ({
         shadowOpacity: 0.4,
         shadowRadius: 12,
     },
+    fabIconContainer: {
+        backgroundColor: '#FFFFFF',
+        borderRadius: 28,
+        width: 56,
+        height: 56,
+        borderWidth: 1.5,
+        borderColor: colors.purple,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
     fabPulseRing: {
         position: 'absolute',
         width: 60,
@@ -1411,10 +1421,10 @@ export const getRawStyles = (colors) => ({
         gap: 10,
     },
     dashboardModuleCard: {
-        backgroundColor: '#FFFFFF',
+        backgroundColor: colors.primaryLight,
         borderRadius: 10,
         borderWidth: 1,
-        borderColor: '#EFEFEF',
+        borderColor: colors.grayBorderSecondary,
         padding: 12,
         shadowColor: '#000000',
         shadowOpacity: 0.03,
@@ -1428,7 +1438,7 @@ export const getRawStyles = (colors) => ({
         alignItems: 'center',
         marginBottom: 10,
         borderBottomWidth: 1,
-        borderBottomColor: '#F3F4F6',
+        borderBottomColor: colors.dividerColor,
         paddingBottom: 8,
     },
     dashboardModuleTitle: {
@@ -1450,7 +1460,7 @@ export const getRawStyles = (colors) => ({
     dashboardGridItem: {
         flex: 1,
         minWidth: '22%',
-        backgroundColor: '#F8FAFC',
+        backgroundColor: colors.grayBackground,
         borderRadius: 8,
         paddingVertical: 8,
         paddingHorizontal: 4,

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

@@ -92,6 +92,7 @@ export interface TreeNodeProps {
     level?: number;
     search?: string;
     forceOpen?: boolean;
+    defaultExpandDepth?: number;
 }
 export interface LogCardProps {
     item: NetworkLog;
@@ -109,6 +110,9 @@ export interface MetaAccordionProps {
     duration: number | null;
     size: string;
     triggeredAt: string;
+    method?: string;
+    contentType?: string;
+    url?: string;
 }
 export interface HeadersSectionProps {
     title: string;

package/example/App.tsx

@@ -17,6 +17,8 @@ import NetworkInspector, {
   connectReduxStore,
   subscribeNetworkLogs,
   subscribeConsoleLogs,
+  logAnalyticsEvent,
+  subscribeAnalyticsEvents,
 } from 'react-native-inapp-inspector';
 
 // ─── Mock Redux Store ────────────────────────────────────────────────────────
@@ -101,12 +103,14 @@ 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 [analyticsCount, setAnalyticsCount] = 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 unsubAnalytics = subscribeAnalyticsEvents(events => setAnalyticsCount(events.length));
     const unsubRedux = mockStore.subscribe(() => setReduxState(mockStore.getState()));
 
     // Initial Logs to populate stats
@@ -116,6 +120,7 @@ function HomeScreen({ navigation }: any) {
     return () => {
       unsubNet();
       unsubConsole();
+      unsubAnalytics();
       unsubRedux();
     };
   }, []);
@@ -175,6 +180,10 @@ function HomeScreen({ navigation }: any) {
               <Text style={styles.statVal}>{logCount}</Text>
               <Text style={styles.statLbl}>Logs</Text>
             </View>
+            <View style={styles.statBox}>
+              <Text style={[styles.statVal, { color: '#EA580C' }]}>{analyticsCount}</Text>
+              <Text style={styles.statLbl}>Analytics</Text>
+            </View>
             <View style={styles.statBox}>
               <Text style={[styles.statVal, { color: '#A78BFA' }]}>
                 {reduxState.ui.sidebarOpen ? 'Open' : 'Closed'}
@@ -204,6 +213,43 @@ function HomeScreen({ navigation }: any) {
           </TouchableOpacity>
         </View>
 
+        <View style={styles.panelCard}>
+          <Text style={styles.panelHeader}>📊 ANALYTICS LOG TESTS</Text>
+          <View style={styles.btnRow}>
+            <TouchableOpacity
+              style={[styles.gridBtn, { borderColor: '#EA580C' }]}
+              onPress={() => {
+                console.log('[App] Logged custom analytics event: click_button');
+                logAnalyticsEvent('click_button', {
+                  button_name: 'test_action',
+                  screen_name: 'Home',
+                  clicked_at: new Date().toLocaleTimeString(),
+                });
+              }}
+            >
+              <Text style={[styles.btnText, { color: '#EA580C' }]}>Log Custom Event</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={[styles.gridBtn, { borderColor: '#E11D48' }]}
+              onPress={() => {
+                console.log('[App] Logged analytics ecommerce event: item_purchase');
+                logAnalyticsEvent('item_purchase', {
+                  item_id: 'prod_999',
+                  item_name: 'Premium Debug Kit',
+                  price: 29.99,
+                  currency: 'USD',
+                  items: [{ id: 'prod_999', name: 'Premium Debug Kit', price: 29.99 }],
+                }, {
+                  user_tier: 'gold_member',
+                  signup_platform: 'ios_app',
+                });
+              }}
+            >
+              <Text style={[styles.btnText, { color: '#E11D48' }]}>Log Purchase</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+
         <View style={styles.panelCard}>
           <Text style={styles.panelHeader}>⚙️ REDUX & STATE ACTIONS</Text>
           <TouchableOpacity style={[styles.fullWidthBtn, { backgroundColor: '#8B5CF6' }]} onPress={handleToggleSidebar}>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-inapp-inspector",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "description": "A self-contained network, console, analytics, and webview inspector for React Native applications.",
   "repository": {
     "type": "git",
@@ -52,12 +52,14 @@
     "type": "github",
     "url": "https://github.com/sponsors/vengatmacuser"
   },
+  "dependencies": {
+    "@react-navigation/native": "^6.1.9",
+    "react-native-linear-gradient": "^2.8.3",
+    "react-native-svg": "^15.14.0"
+  },
   "peerDependencies": {
-    "@react-navigation/native": ">=6.0.0",
     "react": ">=18.0.0",
-    "react-native": ">=0.60.0",
-    "react-native-linear-gradient": ">=2.0.0",
-    "react-native-svg": ">=12.0.0"
+    "react-native": ">=0.60.0"
   },
   "devDependencies": {
     "@react-navigation/native": "^6.1.9",