react-native-inapp-inspector 1.1.35 → 2.0.0

package/android/src/main/java/com/inappinspector/NetworkInspectorPackage.kt

@@ -0,0 +1,17 @@
+package com.inappinspector
+
+import com.facebook.react.ReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ViewManager
+import java.util.Collections
+
+class NetworkInspectorPackage : ReactPackage {
+    override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
+        return listOf(NetworkInspectorModule(reactContext))
+    }
+
+    override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+        return Collections.emptyList()
+    }
+}

package/dist/commonjs/components/CopyButton.js

@@ -42,6 +42,7 @@ const react_native_1 = require("react-native");
 const TouchableScale_1 = __importDefault(require("./TouchableScale"));
 // Helpers
 const helpers_1 = require("../helpers");
+const NativeInspector_1 = require("../native/NativeInspector");
 // Assets
 const NetworkIcons_1 = require("./NetworkIcons");
 // Stylesheet
@@ -50,6 +51,7 @@ const styles_1 = __importDefault(require("../styles"));
 const CopyButton = react_1.default.memo(({ value, label, iconType = 'copy' }) => {
     const [copied, setCopied] = (0, react_1.useState)(false);
     const handlePress = (0, react_1.useCallback)(() => {
+        (0, NativeInspector_1.triggerNativeHaptic)('success');
         const resolvedValue = typeof value === 'function' ? value() : value;
         (0, helpers_1.copyToClipboard)(resolvedValue, label);
         setCopied(true);
@@ -57,6 +59,7 @@ const CopyButton = react_1.default.memo(({ value, label, iconType = 'copy' }) =>
     }, [value, label]);
     const handleLongPress = (0, react_1.useCallback)(() => {
         try {
+            (0, NativeInspector_1.triggerNativeHaptic)('medium');
             const resolvedValue = typeof value === 'function' ? value() : value;
             const textToShare = typeof resolvedValue === 'string'
                 ? resolvedValue

package/dist/commonjs/components/ErrorBoundary.js

@@ -43,6 +43,7 @@ const i18n_1 = require("../i18n");
 const NetworkIcons_1 = require("./NetworkIcons");
 const crashHandler_1 = require("../customHooks/crashHandler");
 const enums_1 = require("../types/enums");
+const NativeInspector_1 = require("../native/NativeInspector");
 function parseStackTrace(stack) {
     if (!stack)
         return { rootFrame: null, frames: [] };
@@ -145,6 +146,8 @@ ${error.stack || 'No stack trace available'}
         try {
             const stack = error?.stack || errorInfo?.componentStack || '';
             (0, crashHandler_1.handleInterceptedCrash)(error, stack, false, enums_1.CrashType.Render, errorInfo?.componentStack);
+            (0, NativeInspector_1.showNativeFloatingButton)();
+            (0, NativeInspector_1.setNativeFloatingButtonBadge)(true);
         }
         catch { }
     }

package/dist/commonjs/components/Inspector/AnalyticsTab.js

@@ -59,6 +59,10 @@ const AnalyticsHeader = react_1.default.memo(() => {
     const userProperties = (0, analyticsLogger_1.getCurrentUserProperties)();
     const defaultParams = (0, analyticsLogger_1.getDefaultEventParameters)();
     const isTrackingEnabled = (0, analyticsLogger_1.getCollectionEnabled)();
+    // If there are no analytics events in the session, hide the graph, category breakdown, and realtime card
+    if (analyticsEvents.length === 0) {
+        return null;
+    }
     const hasUserProps = Object.keys(userProperties).length > 0;
     const hasDefaultParams = Object.keys(defaultParams).length > 0;
     const totalEvents = filteredAnalyticsEvents.length;
@@ -628,8 +632,8 @@ const AnalyticsHeader = react_1.default.memo(() => {
         </react_native_1.View>
 
         {/* ── Crashlytics-Style Multi-Bar Histogram with Trendline Overlay ── */}
-        <react_native_1.View style={{ height: chartHeight, position: 'relative' }}>
-          <react_native_svg_1.default width="100%" height={chartHeight} viewBox={`0 0 ${svgWidth} ${chartHeight}`}>
+        <react_native_1.View style={{ height: chartHeight, position: 'relative', overflow: 'hidden', borderRadius: 8 }}>
+          <react_native_svg_1.default width="100%" height={chartHeight} viewBox={`0 0 ${svgWidth} ${chartHeight}`} preserveAspectRatio="none">
             <react_native_svg_1.Defs>
               <react_native_svg_1.LinearGradient id="crashlyticsBarGrad" x1="0" y1="0" x2="0" y2="1">
                 <react_native_svg_1.Stop offset="0%" stopColor="#8B5CF6" stopOpacity="0.9"/>
@@ -993,7 +997,7 @@ const AnalyticsTab = react_1.default.memo(() => {
       <AnalyticsFilterModal_1.default visible={isFilterModalOpen} onClose={() => setIsFilterModalOpen(false)}/>
 
       <react_native_1.View style={{ flex: 1 }} onLayout={() => setIsAnalyticsLayoutReady(true)}>
-        {selectedEvent != null ? (<AnalyticsDetail_1.default event={selectedEvent}/>) : isAnalyticsLayoutReady ? (<react_native_1.FlatList data={filteredAnalyticsEvents} keyExtractor={keyExtractor} ListHeaderComponent={AnalyticsHeader} renderItem={renderItem} initialNumToRender={20} maxToRenderPerBatch={20} windowSize={5} removeClippedSubviews={false} ListEmptyComponent={<react_native_1.View style={styles_1.default.emptyContainer}>
+        {selectedEvent != null ? (<AnalyticsDetail_1.default event={selectedEvent}/>) : isAnalyticsLayoutReady ? (<react_native_1.FlatList data={filteredAnalyticsEvents} keyExtractor={keyExtractor} ListHeaderComponent={AnalyticsHeader} renderItem={renderItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<react_native_1.View style={styles_1.default.emptyContainer}>
                 <react_native_1.View style={styles_1.default.emptyIconWrap}>
                   <NetworkIcons_1.EmptyRadarIcon color={AppColors_1.AppColors.purple} size={32}/>
                 </react_native_1.View>

package/dist/commonjs/components/Inspector/BundleTab.js

@@ -856,7 +856,7 @@ const BundleTab = react_1.default.memo(() => {
                           {analysis.scriptURL.length} chars
                         </react_native_1.Text>
                       </react_native_1.View>
-                      <react_native_1.Text selectable={true} style={{
+                      <react_native_1.Text selectable={true} numberOfLines={1} ellipsizeMode="tail" style={{
                     fontFamily: AppFonts_1.AppFonts.interMedium,
                     fontSize: 11,
                     color: AppColors_1.AppColors.skyBlue,

package/dist/commonjs/components/Inspector/ConsoleTab.js

@@ -507,7 +507,7 @@ const ConsoleTab = react_1.default.memo(() => {
         </react_native_1.ScrollView>
       </react_native_1.View>
 
-      <react_native_1.FlatList data={filteredConsoleLogs} keyExtractor={keyExtractor} ListHeaderComponent={listHeader} renderItem={renderItem} initialNumToRender={15} maxToRenderPerBatch={15} windowSize={7} removeClippedSubviews={true} ListEmptyComponent={<EmptyState_1.default isSearch={logSearch.length > 0 || logFilters.size > 0}/>} ListFooterComponent={filteredConsoleLogs.length > 0 ? (<EndOfListFooter_1.default count={filteredConsoleLogs.length} label="logs"/>) : null} contentContainerStyle={[
+      <react_native_1.FlatList data={filteredConsoleLogs} keyExtractor={keyExtractor} ListHeaderComponent={listHeader} renderItem={renderItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState_1.default isSearch={logSearch.length > 0 || logFilters.size > 0}/>} ListFooterComponent={filteredConsoleLogs.length > 0 ? (<EndOfListFooter_1.default count={filteredConsoleLogs.length} label="logs"/>) : null} contentContainerStyle={[
             styles_1.default.listContent,
             filteredConsoleLogs.length === 0 && { flexGrow: 1 },
         ]} keyboardShouldPersistTaps="handled"/>

package/dist/commonjs/components/Inspector/CrashTab.js

@@ -147,11 +147,16 @@ const CrashTab = react_1.default.memo(() => {
             }
             // Search filter
             if (searchQuery.trim().length > 0) {
-                const q = searchQuery.toLowerCase();
-                const msg = (item.message || '').toLowerCase();
-                const name = (item.name || '').toLowerCase();
-                const stack = (item.stack || '').toLowerCase();
-                return msg.includes(q) || name.includes(q) || stack.includes(q);
+                const queryTokens = searchQuery.trim().toLowerCase().split(/\s+/).filter(Boolean);
+                const searchTarget = [
+                    item.message || '',
+                    item.name || '',
+                    item.stack || '',
+                    item.type || '',
+                    item.deviceInfo?.platform || '',
+                    ...(item.breadcrumbs || []).map(b => `${b.type || ''} ${b.message || ''}`),
+                ].join(' ').toLowerCase();
+                return queryTokens.every(token => searchTarget.includes(token));
             }
             return true;
         });
@@ -288,74 +293,75 @@ const CrashTab = react_1.default.memo(() => {
         </AnimatedEntrance_1.default>);
     }, [searchQuery, setSelectedCrash]);
     return (<react_native_1.View style={localStyles.container}>
-      {/* ─── Top Stats Bar ─── */}
-      <react_native_1.View style={localStyles.statsBar}>
-        <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={localStyles.statsScrollContent}>
-          <react_native_1.View style={[localStyles.statChip, localStyles.statChipActive]}>
-            <react_native_1.Text style={localStyles.statChipValue}>{stats.total}</react_native_1.Text>
-            <react_native_1.Text style={localStyles.statChipLabel}>{t('crash.statCrashes')}</react_native_1.Text>
-          </react_native_1.View>
+      {crashRecords.length > 0 && (<>
+          {/* ─── Top Stats Bar ─── */}
+          <react_native_1.View style={localStyles.statsBar}>
+            <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={localStyles.statsScrollContent}>
+              <react_native_1.View style={[localStyles.statChip, localStyles.statChipActive]}>
+                <react_native_1.Text style={localStyles.statChipValue}>{stats.total}</react_native_1.Text>
+                <react_native_1.Text style={localStyles.statChipLabel}>{t('crash.statCrashes')}</react_native_1.Text>
+              </react_native_1.View>
 
-          <react_native_1.View style={localStyles.statChip}>
-            <react_native_1.Text style={[localStyles.statChipValue, { color: AppColors_1.AppColors.errorColor }]}>
-              {stats.fatalCount}
-            </react_native_1.Text>
-            <react_native_1.Text style={localStyles.statChipLabel}>{t('crash.statFatal')}</react_native_1.Text>
-          </react_native_1.View>
+              <react_native_1.View style={localStyles.statChip}>
+                <react_native_1.Text style={[localStyles.statChipValue, { color: AppColors_1.AppColors.errorColor }]}>
+                  {stats.fatalCount}
+                </react_native_1.Text>
+                <react_native_1.Text style={localStyles.statChipLabel}>{t('crash.statFatal')}</react_native_1.Text>
+              </react_native_1.View>
 
-          <react_native_1.View style={localStyles.statChip}>
-            <react_native_1.Text style={[localStyles.statChipValue, { color: AppColors_1.AppColors.offerPurple }]}>
-              {stats.jsCount}
-            </react_native_1.Text>
-            <react_native_1.Text style={localStyles.statChipLabel}>{t('crash.statJsErrors')}</react_native_1.Text>
-          </react_native_1.View>
+              <react_native_1.View style={localStyles.statChip}>
+                <react_native_1.Text style={[localStyles.statChipValue, { color: AppColors_1.AppColors.offerPurple }]}>
+                  {stats.jsCount}
+                </react_native_1.Text>
+                <react_native_1.Text style={localStyles.statChipLabel}>{t('crash.statJsErrors')}</react_native_1.Text>
+              </react_native_1.View>
 
-          <react_native_1.View style={localStyles.statChip}>
-            <react_native_1.Text style={[localStyles.statChipValue, { color: AppColors_1.AppColors.darkOrange }]}>
-              {stats.promiseCount}
-            </react_native_1.Text>
-            <react_native_1.Text style={localStyles.statChipLabel}>{t('crash.statPromises')}</react_native_1.Text>
-          </react_native_1.View>
+              <react_native_1.View style={localStyles.statChip}>
+                <react_native_1.Text style={[localStyles.statChipValue, { color: AppColors_1.AppColors.darkOrange }]}>
+                  {stats.promiseCount}
+                </react_native_1.Text>
+                <react_native_1.Text style={localStyles.statChipLabel}>{t('crash.statPromises')}</react_native_1.Text>
+              </react_native_1.View>
 
-          <react_native_1.View style={localStyles.statChip}>
-            <react_native_1.Text style={[localStyles.statChipValue, { color: AppColors_1.AppColors.purple }]}>
-              {stats.renderCount}
-            </react_native_1.Text>
-            <react_native_1.Text style={localStyles.statChipLabel}>{t('crash.statRender')}</react_native_1.Text>
-          </react_native_1.View>
+              <react_native_1.View style={localStyles.statChip}>
+                <react_native_1.Text style={[localStyles.statChipValue, { color: AppColors_1.AppColors.purple }]}>
+                  {stats.renderCount}
+                </react_native_1.Text>
+                <react_native_1.Text style={localStyles.statChipLabel}>{t('crash.statRender')}</react_native_1.Text>
+              </react_native_1.View>
 
-          <react_native_1.View style={localStyles.statChip}>
-            <react_native_1.Text style={[localStyles.statChipValue, { color: AppColors_1.AppColors.skyBlue }]}>
-              {stats.nativeCount}
-            </react_native_1.Text>
-            <react_native_1.Text style={localStyles.statChipLabel}>{t('crash.statNative')}</react_native_1.Text>
+              <react_native_1.View style={localStyles.statChip}>
+                <react_native_1.Text style={[localStyles.statChipValue, { color: AppColors_1.AppColors.skyBlue }]}>
+                  {stats.nativeCount}
+                </react_native_1.Text>
+                <react_native_1.Text style={localStyles.statChipLabel}>{t('crash.statNative')}</react_native_1.Text>
+              </react_native_1.View>
+            </react_native_1.ScrollView>
           </react_native_1.View>
-        </react_native_1.ScrollView>
-      </react_native_1.View>
 
-      {/* ─── Search & Controls ─── */}
-      <react_native_1.View style={localStyles.controlsContainer}>
-        <react_native_1.View style={localStyles.searchRow}>
-          <react_native_1.View style={localStyles.searchInputWrapper}>
-            <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
-            <react_native_1.TextInput value={searchQuery} onChangeText={setSearchQuery} placeholder={t('crash.searchPlaceholder')} placeholderTextColor={AppColors_1.AppColors.grayTextWeak} style={localStyles.searchInput} autoCapitalize="none" autoCorrect={false}/>
-            {searchQuery.length > 0 && (<react_native_1.TouchableOpacity onPress={() => setSearchQuery('')} hitSlop={8}>
-                <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
-              </react_native_1.TouchableOpacity>)}
-          </react_native_1.View>
+          {/* ─── Search & Controls ─── */}
+          <react_native_1.View style={localStyles.controlsContainer}>
+            <react_native_1.View style={localStyles.searchRow}>
+              <react_native_1.View style={localStyles.searchInputWrapper}>
+                <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+                <react_native_1.TextInput value={searchQuery} onChangeText={setSearchQuery} placeholder={t('crash.searchPlaceholder')} placeholderTextColor={AppColors_1.AppColors.grayTextWeak} style={localStyles.searchInput} autoCapitalize="none" autoCorrect={false}/>
+                {searchQuery.length > 0 && (<react_native_1.TouchableOpacity onPress={() => setSearchQuery('')} hitSlop={8}>
+                    <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+                  </react_native_1.TouchableOpacity>)}
+              </react_native_1.View>
 
-          {/* Crash Filters */}
-          {crashRecords.length > 0 && (<TouchableScale_1.default onPress={() => setIsFilterModalOpen(true)} style={[
+              {/* Crash Filters */}
+              <TouchableScale_1.default onPress={() => setIsFilterModalOpen(true)} style={[
                 localStyles.filterButton,
                 !(0, CrashFilterModal_1.isCrashFiltersDefault)(crashFilters) && {
                     borderColor: `${AppColors_1.AppColors.brandPurple}60`,
                     backgroundColor: `${AppColors_1.AppColors.brandPurple}15`,
                 },
             ]}>
-              <NetworkIcons_1.FilterIcon size={14} color={(0, CrashFilterModal_1.isCrashFiltersDefault)(crashFilters)
+                <NetworkIcons_1.FilterIcon size={14} color={(0, CrashFilterModal_1.isCrashFiltersDefault)(crashFilters)
                 ? AppColors_1.AppColors.grayTextStrong
                 : AppColors_1.AppColors.brandPurple}/>
-              {!(0, CrashFilterModal_1.isCrashFiltersDefault)(crashFilters) && (<react_native_1.View style={{
+                {!(0, CrashFilterModal_1.isCrashFiltersDefault)(crashFilters) && (<react_native_1.View style={{
                     position: 'absolute',
                     top: 2,
                     right: 2,
@@ -366,40 +372,41 @@ const CrashTab = react_1.default.memo(() => {
                     borderWidth: 1,
                     borderColor: AppColors_1.AppColors.white,
                 }}/>)}
-            </TouchableScale_1.default>)}
+              </TouchableScale_1.default>
 
-          {/* Clear Crashes */}
-          {crashRecords.length > 0 && (<TouchableScale_1.default onPress={handleClearAll} style={localStyles.clearButton}>
-              <NetworkIcons_1.TrashIcon size={14} color={AppColors_1.AppColors.errorColor}/>
-            </TouchableScale_1.default>)}
-        </react_native_1.View>
+              {/* Clear Crashes */}
+              <TouchableScale_1.default onPress={handleClearAll} style={localStyles.clearButton}>
+                <NetworkIcons_1.TrashIcon size={14} color={AppColors_1.AppColors.errorColor}/>
+              </TouchableScale_1.default>
+            </react_native_1.View>
 
-        {/* ─── Filter Chips ─── */}
-        <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={localStyles.filterScrollContent}>
-          {[
-            { key: 'all', label: t('crash.filterAll'), Icon: NetworkIcons_1.LayersIcon },
-            { key: 'fatal', label: t('crash.filterFatal'), Icon: NetworkIcons_1.SkullIcon },
-            { key: 'js', label: t('crash.filterJsError'), Icon: NetworkIcons_1.JsIcon },
-            { key: 'promise', label: t('crash.filterPromise'), Icon: NetworkIcons_1.HourglassIcon },
-            { key: 'render', label: t('crash.filterRender'), Icon: NetworkIcons_1.LayoutIcon },
-            { key: 'native', label: t('crash.filterNative'), Icon: NetworkIcons_1.ChipIcon },
-        ].map(chip => {
-            const isActive = filterType === chip.key;
-            return (<react_native_1.TouchableOpacity key={chip.key} onPress={() => setFilterType(chip.key)} style={[
-                    localStyles.filterChip,
-                    isActive && localStyles.filterChipActive,
-                ]}>
-                <chip.Icon size={12} color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayTextStrong}/>
-                <react_native_1.Text style={[
-                    localStyles.filterChipText,
-                    isActive && localStyles.filterChipTextActive,
-                ]}>
-                  {chip.label}
-                </react_native_1.Text>
-              </react_native_1.TouchableOpacity>);
-        })}
-        </react_native_1.ScrollView>
-      </react_native_1.View>
+            {/* ─── Filter Chips ─── */}
+            <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={localStyles.filterScrollContent}>
+              {[
+                { key: 'all', label: t('crash.filterAll'), Icon: NetworkIcons_1.LayersIcon },
+                { key: 'fatal', label: t('crash.filterFatal'), Icon: NetworkIcons_1.SkullIcon },
+                { key: 'js', label: t('crash.filterJsError'), Icon: NetworkIcons_1.JsIcon },
+                { key: 'promise', label: t('crash.filterPromise'), Icon: NetworkIcons_1.HourglassIcon },
+                { key: 'render', label: t('crash.filterRender'), Icon: NetworkIcons_1.LayoutIcon },
+                { key: 'native', label: t('crash.filterNative'), Icon: NetworkIcons_1.ChipIcon },
+            ].map(chip => {
+                const isActive = filterType === chip.key;
+                return (<react_native_1.TouchableOpacity key={chip.key} onPress={() => setFilterType(chip.key)} style={[
+                        localStyles.filterChip,
+                        isActive && localStyles.filterChipActive,
+                    ]}>
+                    <chip.Icon size={12} color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayTextStrong}/>
+                    <react_native_1.Text style={[
+                        localStyles.filterChipText,
+                        isActive && localStyles.filterChipTextActive,
+                    ]}>
+                      {chip.label}
+                    </react_native_1.Text>
+                  </react_native_1.TouchableOpacity>);
+            })}
+            </react_native_1.ScrollView>
+          </react_native_1.View>
+        </>)}
 
       {/* ─── Crash List or Empty State ─── */}
       {filteredList.length === 0 ? (<react_native_1.ScrollView contentContainerStyle={localStyles.emptyContainer} showsVerticalScrollIndicator={false}>
@@ -412,7 +419,7 @@ const CrashTab = react_1.default.memo(() => {
                 ? t('crash.emptySearchSubtitle')
                 : t('crash.emptySubtitle')}
           </react_native_1.Text>
-        </react_native_1.ScrollView>) : (<react_native_1.FlatList data={filteredList} keyExtractor={item => item.id} renderItem={renderCard} contentContainerStyle={localStyles.listContent} showsVerticalScrollIndicator={false} ListFooterComponent={<EndOfListFooter_1.default />}/>)}
+        </react_native_1.ScrollView>) : (<react_native_1.FlatList data={filteredList} keyExtractor={item => item.id} renderItem={renderCard} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} contentContainerStyle={localStyles.listContent} showsVerticalScrollIndicator={false} ListFooterComponent={<EndOfListFooter_1.default />}/>)}
 
       {/* Filter Modal */}
       <CrashFilterModal_1.default visible={isFilterModalOpen} onClose={() => setIsFilterModalOpen(false)} filters={crashFilters} onApply={setCrashFilters} searchQuery={searchQuery}/>

package/dist/commonjs/components/Inspector/InspectorHeader.js

@@ -226,23 +226,27 @@ const InspectorHeader = react_1.default.memo(() => {
                       </react_native_1.Text>
                     </react_native_1.View>
 
-                    <react_native_1.View style={{
-                backgroundColor: `${AppColors_1.AppColors.white}14`,
+                    <react_native_1.Pressable onPress={() => react_native_1.Linking.openURL('https://www.npmjs.com/package/react-native-inapp-inspector').catch(() => { })} style={{
+                backgroundColor: '#CB383726',
                 borderRadius: 4,
-                paddingHorizontal: 4.5,
+                paddingHorizontal: 5,
                 paddingVertical: 1.5,
                 borderWidth: 1,
-                borderColor: `${AppColors_1.AppColors.white}20`,
+                borderColor: '#CB383780',
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 3.5,
                 flexShrink: 0,
             }}>
+                      <NetworkIcons_1.NpmIcon size={11} color="#FF6B6B"/>
                       <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interMedium,
-                fontSize: 8.5,
-                color: `${AppColors_1.AppColors.white}B3`,
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 9,
+                color: '#FF6B6B',
             }} numberOfLines={1}>
                         v{constants_2.LIB_VERSION}
                       </react_native_1.Text>
-                    </react_native_1.View>
+                    </react_native_1.Pressable>
                   </react_native_1.View>
                 </react_native_1.View>
               </react_native_1.View>) : null}

package/dist/commonjs/components/Inspector/MainScreen.js

@@ -1,42 +1,9 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const react_native_1 = require("react-native");
 const InspectorContext_1 = require("./InspectorContext");
 const ErrorBoundary_1 = __importDefault(require("../ErrorBoundary"));
@@ -61,25 +28,16 @@ const styles_1 = __importDefault(require("../../styles"));
 const AppColors_1 = require("../../styles/AppColors");
 const NavigationTracker_1 = __importDefault(require("./NavigationTracker"));
 const MainScreen = () => {
-    const { visible, modalAnimationType, closeModal, modalHeightPercent, selected, selectedEvent, selectedLog, selectedReduxSlice, selectedReduxAction, selectedCrash, settingsPage, activeTab, isReady, isEnabled, hasNavigationContext, setNavState, } = (0, InspectorContext_1.useInspector)();
-    // Lazy-mount each tab on first visit and cache it in memory for 0ms instantaneous switching
-    const [mountedTabs, setMountedTabs] = (0, react_1.useState)({
-        [activeTab]: true,
-    });
-    (0, react_1.useEffect)(() => {
-        setMountedTabs(prev => {
-            if (prev[activeTab])
-                return prev;
-            return { ...prev, [activeTab]: true };
-        });
-    }, [activeTab]);
+    const { visible, modalAnimationType, closeModal, modalHeightPercent, selected, selectedEvent, selectedLog, selectedReduxSlice, selectedReduxAction, selectedCrash, settingsPage, activeTab, isReady, isEnabled, useNativeFab, hasNavigationContext, setNavState, } = (0, InspectorContext_1.useInspector)();
     const isDetailActive = (activeTab === 'apis' && selected != null) ||
         (activeTab === 'analytics' && selectedEvent != null) ||
         (activeTab === 'logs' && selectedLog != null) ||
         (activeTab === 'redux' && (selectedReduxSlice != null || selectedReduxAction != null)) ||
         (activeTab === 'crash' && selectedCrash != null);
     return (<>
-      {(react_native_1.Platform.OS === 'ios' || react_native_1.Platform.OS === 'android') && isEnabled && <FabLauncher_1.default />}
+      {(react_native_1.Platform.OS === 'ios' || react_native_1.Platform.OS === 'android') &&
+            isEnabled &&
+            !useNativeFab && <FabLauncher_1.default />}
       <react_native_1.Modal visible={visible} animationType={modalAnimationType} transparent statusBarTranslucent={true}>
       {visible && (<ErrorBoundary_1.default onClose={closeModal}>
           <react_native_1.View style={styles_1.default.modalBackdrop}>
@@ -99,66 +57,21 @@ const MainScreen = () => {
               {/* ─── Horizontal Scrollable Tab Bar inside Content ─── */}
               {!isDetailActive && settingsPage === null ? (<TabBar_1.default />) : null}
 
-              {isReady ? (isDetailActive ? (activeTab === 'apis' && selected != null ? (<NetworkDetail_1.default />) : activeTab === 'analytics' && selectedEvent != null ? (<AnalyticsDetail_1.default event={selectedEvent}/>) : activeTab === 'logs' && selectedLog != null ? (<LogDetail_1.default />) : activeTab === 'redux' ? (<ReduxDetail_1.default />) : activeTab === 'crash' && selectedCrash != null ? (<CrashDetail_1.default />) : null) : (<>
-                    <react_native_1.View style={{
-                    flex: 1,
-                    display: activeTab === 'apis' ? 'flex' : 'none',
-                }}>
-                      {mountedTabs.apis && <NetworkTab_1.default />}
-                    </react_native_1.View>
-                    <react_native_1.View style={{
-                    flex: 1,
-                    display: activeTab === 'logs' ? 'flex' : 'none',
-                }}>
-                      {mountedTabs.logs && <ConsoleTab_1.default />}
-                    </react_native_1.View>
-                    <react_native_1.View style={{
-                    flex: 1,
-                    display: activeTab === 'analytics' ? 'flex' : 'none',
-                }}>
-                      {mountedTabs.analytics && <AnalyticsTab_1.default />}
-                    </react_native_1.View>
-                    <react_native_1.View style={{
-                    flex: 1,
-                    display: activeTab === 'redux' ? 'flex' : 'none',
-                }}>
-                      {mountedTabs.redux && <ReduxTab_1.default />}
-                    </react_native_1.View>
-                    <react_native_1.View style={{
-                    flex: 1,
-                    display: activeTab === 'bundle' ? 'flex' : 'none',
-                }}>
-                      {mountedTabs.bundle && <BundleTab_1.default />}
-                    </react_native_1.View>
-                    <react_native_1.View style={{
-                    flex: 1,
-                    display: activeTab === 'performance' ? 'flex' : 'none',
-                }}>
-                      {mountedTabs.performance && <PerformanceTab_1.default />}
-                    </react_native_1.View>
-                    <react_native_1.View style={{
-                    flex: 1,
-                    display: activeTab === 'crash' ? 'flex' : 'none',
-                }}>
-                      {mountedTabs.crash && <CrashTab_1.default />}
-                    </react_native_1.View>
-                  </>)) : (<react_native_1.View style={styles_1.default.empty}>
+              {settingsPage !== null ? (<SettingsPanel_1.default />) : isReady ? (isDetailActive ? (activeTab === 'apis' && selected != null ? (<NetworkDetail_1.default />) : activeTab === 'analytics' && selectedEvent != null ? (<AnalyticsDetail_1.default event={selectedEvent}/>) : activeTab === 'logs' && selectedLog != null ? (<LogDetail_1.default />) : activeTab === 'redux' ? (<ReduxDetail_1.default />) : activeTab === 'crash' && selectedCrash != null ? (<CrashDetail_1.default />) : null) : (<react_native_1.View style={{ flex: 1 }}>
+                    {activeTab === 'apis' && <NetworkTab_1.default />}
+                    {activeTab === 'logs' && <ConsoleTab_1.default />}
+                    {activeTab === 'analytics' && <AnalyticsTab_1.default />}
+                    {activeTab === 'redux' && <ReduxTab_1.default />}
+                    {activeTab === 'bundle' && <BundleTab_1.default />}
+                    {activeTab === 'performance' && <PerformanceTab_1.default />}
+                    {activeTab === 'crash' && <CrashTab_1.default />}
+                  </react_native_1.View>)) : (<react_native_1.View style={styles_1.default.empty}>
                   <react_native_1.ActivityIndicator size="large" color={AppColors_1.AppColors.purple}/>
                   <react_native_1.Text style={[styles_1.default.emptySub, { marginTop: 12 }]}>
                     Loading logs...
                   </react_native_1.Text>
                 </react_native_1.View>)}
 
-              {settingsPage !== null && (<react_native_1.View style={[
-                    react_native_1.StyleSheet.absoluteFill,
-                    {
-                        backgroundColor: AppColors_1.AppColors.grayBackground,
-                        zIndex: 99999,
-                    },
-                ]}>
-                  <SettingsPanel_1.default />
-                </react_native_1.View>)}
-
               {/* Bottom floating toast notification */}
               <Toast_1.default />
             </react_native_1.View>