react-native-inapp-inspector 1.1.1 → 1.1.2

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

@@ -35,6 +35,7 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         color: string;
         fontSize: number;
         letterSpacing: number;
+        paddingBottom: number;
     };
     headerButtonGroup: {
         flexDirection: string;
@@ -174,6 +175,26 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
     listContent: {
         paddingBottom: number;
     };
+    scrollTopBtn: {
+        position: string;
+        top: number;
+        right: number;
+        width: number;
+        height: number;
+        borderRadius: number;
+        backgroundColor: string;
+        alignItems: string;
+        justifyContent: string;
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+        zIndex: number;
+    };
     detailScroll: {
         flex: number;
     };
@@ -1420,6 +1441,9 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
     };
     headerGradient: {
         width: string;
+        borderTopLeftRadius: number;
+        borderTopRightRadius: number;
+        overflow: string;
     };
     statusChip: {
         paddingHorizontal: number;

package/dist/esm/styles/index.js

@@ -26,8 +26,9 @@ export const getRawStyles = (colors) => ({
     headerTitle: {
         fontFamily: AppFonts.interBold,
         color: colors.primaryLight,
-        fontSize: 18,
+        fontSize: 15,
         letterSpacing: 0.3,
+        paddingBottom: 4,
     },
     headerButtonGroup: {
         flexDirection: 'row',
@@ -151,6 +152,23 @@ export const getRawStyles = (colors) => ({
         borderColor: 'rgba(255, 255, 255, 0.08)',
     },
     listContent: { paddingBottom: 12 },
+    scrollTopBtn: {
+        position: 'absolute',
+        top: 12,
+        right: 16,
+        width: 38,
+        height: 38,
+        borderRadius: 19,
+        backgroundColor: colors.purple,
+        alignItems: 'center',
+        justifyContent: 'center',
+        shadowColor: '#000000',
+        shadowOffset: { width: 0, height: 3 },
+        shadowOpacity: 0.25,
+        shadowRadius: 5,
+        elevation: 6,
+        zIndex: 50,
+    },
     detailScroll: { flex: 1 },
     detailContent: { paddingHorizontal: 6, paddingTop: 8, paddingBottom: 20 },
     fabWrapper: {
@@ -1285,6 +1303,9 @@ export const getRawStyles = (colors) => ({
     },
     headerGradient: {
         width: '100%',
+        borderTopLeftRadius: 20,
+        borderTopRightRadius: 20,
+        overflow: 'hidden',
     },
     // Status chip used in MetaAccordion
     statusChip: {

package/example/App.tsx

@@ -95,16 +95,22 @@ 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');
+    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');
+    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 [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);
@@ -114,8 +120,12 @@ function HomeScreen({ navigation }: any) {
     // 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()));
+    const unsubAnalytics = subscribeAnalyticsEvents(events =>
+      setAnalyticsCount(events.length),
+    );
+    const unsubRedux = mockStore.subscribe(() =>
+      setReduxState(mockStore.getState()),
+    );
 
     // Initial Logs to populate stats
     console.log('[App] HomeScreen mounted and ready.');
@@ -130,9 +140,13 @@ function HomeScreen({ navigation }: any) {
   }, []);
 
   // Axios client — interceptors are automatically applied by setupNetworkLogger()
-  const axiosClient = React.useMemo(() => axios.create({
-    baseURL: 'https://jsonplaceholder.typicode.com',
-  }), []);
+  const axiosClient = React.useMemo(
+    () =>
+      axios.create({
+        baseURL: 'https://jsonplaceholder.typicode.com',
+      }),
+    [],
+  );
 
   const triggerAxiosGet = async () => {
     try {
@@ -198,7 +212,9 @@ function HomeScreen({ navigation }: any) {
   const triggerNetworkRequest = async () => {
     try {
       console.log('[API] Triggering fetch user...');
-      const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
+      const response = await fetch(
+        'https://jsonplaceholder.typicode.com/users/1',
+      );
       const data = await response.json();
       console.log('[API] Fetch completed successfully:', data.name);
     } catch (error) {
@@ -216,7 +232,9 @@ function HomeScreen({ navigation }: any) {
   };
 
   const triggerConsoleLogs = () => {
-    console.log('[App] Manual log triggered at ' + new Date().toLocaleTimeString());
+    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.');
   };
@@ -228,7 +246,10 @@ function HomeScreen({ navigation }: any) {
 
   return (
     <SafeAreaView style={styles.safeContainer}>
-      <ScrollView contentContainerStyle={styles.content} showsVerticalScrollIndicator={false}>
+      <ScrollView
+        contentContainerStyle={styles.content}
+        showsVerticalScrollIndicator={false}
+      >
         {/* Header Hero Section */}
         <View style={styles.headerHero}>
           <Text style={styles.headerBadge}>INSPECTOR PLAYGROUND</Text>
@@ -251,7 +272,9 @@ function HomeScreen({ navigation }: any) {
               <Text style={styles.statLbl}>Logs</Text>
             </View>
             <View style={styles.statBox}>
-              <Text style={[styles.statVal, { color: '#EA580C' }]}>{analyticsCount}</Text>
+              <Text style={[styles.statVal, { color: '#EA580C' }]}>
+                {analyticsCount}
+              </Text>
               <Text style={styles.statLbl}>Analytics</Text>
             </View>
             <View style={styles.statBox}>
@@ -267,35 +290,72 @@ function HomeScreen({ navigation }: any) {
         <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
+              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
+              style={[styles.gridBtn, { borderColor: '#F43F5E' }]}
+              onPress={triggerFailedNetworkRequest}
+            >
+              <Text style={[styles.btnText, { color: '#F43F5E' }]}>
+                Fetch (404 Err)
+              </Text>
             </TouchableOpacity>
           </View>
         </View>
 
         <View style={styles.panelCard}>
-          <Text style={styles.panelHeader}>⚡ AXIOS AUTOMATIC INTERCEPTION</Text>
+          <Text style={styles.panelHeader}>
+            ⚡ AXIOS AUTOMATIC INTERCEPTION
+          </Text>
           <View style={{ gap: 8 }}>
             <View style={styles.btnRow}>
-              <TouchableOpacity style={[styles.gridBtn, { borderColor: '#10B981' }]} onPress={triggerAxiosGet}>
-                <Text style={[styles.btnText, { color: '#10B981' }]}>Axios GET</Text>
+              <TouchableOpacity
+                style={[styles.gridBtn, { borderColor: '#10B981' }]}
+                onPress={triggerAxiosGet}
+              >
+                <Text style={[styles.btnText, { color: '#10B981' }]}>
+                  Axios GET
+                </Text>
               </TouchableOpacity>
-              <TouchableOpacity style={[styles.gridBtn, { borderColor: '#8B5CF6' }]} onPress={triggerAxiosPost}>
-                <Text style={[styles.btnText, { color: '#8B5CF6' }]}>Axios POST</Text>
+              <TouchableOpacity
+                style={[styles.gridBtn, { borderColor: '#8B5CF6' }]}
+                onPress={triggerAxiosPost}
+              >
+                <Text style={[styles.btnText, { color: '#8B5CF6' }]}>
+                  Axios POST
+                </Text>
               </TouchableOpacity>
             </View>
             <View style={styles.btnRow}>
-              <TouchableOpacity style={[styles.gridBtn, { borderColor: '#F59E0B' }]} onPress={triggerAxiosPut}>
-                <Text style={[styles.btnText, { color: '#F59E0B' }]}>Axios PUT</Text>
+              <TouchableOpacity
+                style={[styles.gridBtn, { borderColor: '#F59E0B' }]}
+                onPress={triggerAxiosPut}
+              >
+                <Text style={[styles.btnText, { color: '#F59E0B' }]}>
+                  Axios PUT
+                </Text>
               </TouchableOpacity>
-              <TouchableOpacity style={[styles.gridBtn, { borderColor: '#38BDF8' }]} onPress={triggerAxiosPatch}>
-                <Text style={[styles.btnText, { color: '#38BDF8' }]}>Axios PATCH</Text>
+              <TouchableOpacity
+                style={[styles.gridBtn, { borderColor: '#38BDF8' }]}
+                onPress={triggerAxiosPatch}
+              >
+                <Text style={[styles.btnText, { color: '#38BDF8' }]}>
+                  Axios PATCH
+                </Text>
               </TouchableOpacity>
-              <TouchableOpacity style={[styles.gridBtn, { borderColor: '#EF4444' }]} onPress={triggerAxiosDelete}>
-                <Text style={[styles.btnText, { color: '#EF4444' }]}>Axios DEL</Text>
+              <TouchableOpacity
+                style={[styles.gridBtn, { borderColor: '#EF4444' }]}
+                onPress={triggerAxiosDelete}
+              >
+                <Text style={[styles.btnText, { color: '#EF4444' }]}>
+                  Axios DEL
+                </Text>
               </TouchableOpacity>
             </View>
           </View>
@@ -303,8 +363,13 @@ function HomeScreen({ navigation }: any) {
 
         <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
+            style={[styles.fullWidthBtn, { backgroundColor: '#6366F1' }]}
+            onPress={triggerConsoleLogs}
+          >
+            <Text style={styles.fullWidthBtnText}>
+              Trigger Log, Warn & Error Logs
+            </Text>
           </TouchableOpacity>
         </View>
 
@@ -314,7 +379,9 @@ function HomeScreen({ navigation }: any) {
             <TouchableOpacity
               style={[styles.gridBtn, { borderColor: '#EA580C' }]}
               onPress={() => {
-                console.log('[App] Logged custom analytics event: click_button');
+                console.log(
+                  '[App] Logged custom analytics event: click_button',
+                );
                 logAnalyticsEvent('click_button', {
                   button_name: 'test_action',
                   screen_name: 'Home',
@@ -322,56 +389,111 @@ function HomeScreen({ navigation }: any) {
                 });
               }}
             >
-              <Text style={[styles.btnText, { color: '#EA580C' }]}>Log Custom Event</Text>
+              <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',
-                });
+                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>
+              <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}>
-            <Text style={styles.fullWidthBtnText}>Dispatch: Toggle Sidebar & Update Time</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
+              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
+              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>
+          <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
+              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
+              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>
@@ -397,17 +519,29 @@ function DetailsScreen({ navigation }: any) {
           <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.
+            The breadcrumbs inside the inspector track your stack route in
+            real-time.
           </Text>
         </View>
 
         <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
+            style={[
+              styles.fullWidthBtn,
+              { backgroundColor: '#10B981', marginBottom: 12 },
+            ]}
+            onPress={triggerDetailLogs}
+          >
+            <Text style={styles.fullWidthBtnText}>
+              Trigger Log from Details Screen
+            </Text>
           </TouchableOpacity>
 
-          <TouchableOpacity style={[styles.fullWidthBtn, { backgroundColor: '#475569' }]} onPress={() => navigation.goBack()}>
+          <TouchableOpacity
+            style={[styles.fullWidthBtn, { backgroundColor: '#475569' }]}
+            onPress={() => navigation.goBack()}
+          >
             <Text style={styles.fullWidthBtnText}>Go Back Home</Text>
           </TouchableOpacity>
         </View>
@@ -427,8 +561,12 @@ function WebViewScreen({ navigation }: any) {
         <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')}
+          onLoadStart={() =>
+            console.log('[WebView] Navigation started to apple.com')
+          }
+          onLoadEnd={() =>
+            console.log('[WebView] Navigation finished loading apple.com')
+          }
         />
       </View>
     </SafeAreaView>
@@ -488,7 +626,7 @@ const styles = StyleSheet.create({
     marginBottom: 6,
   },
   headerTitle: {
-    fontSize: 28,
+    fontSize: 14,
     fontWeight: '900',
     color: '#F8FAFC',
     marginBottom: 8,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-inapp-inspector",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "A self-contained network, console, analytics, and webview inspector for React Native applications.",
   "repository": {
     "type": "git",