react-native-inapp-inspector 2.3.15 → 2.3.17

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

@@ -228,7 +228,6 @@ const NetworkTab = react_1.default.memo(() => {
           </react_native_1.View>
           <react_native_1.View style={styles_1.default.treeCardWrapper}>
             <LogCard_1.default item={log} isSelected={selectedLogs.has(log.id)} onToggleSelect={toggleSelect} onPress={() => {
-                (0, InspectorContext_1.animateNextLayout)();
                 setSelected(log);
             }} timelineMinStart={minStart} timelineTotalRange={totalRange} isNew={newLogIds.has(log.id)} searchStr={search}/>
           </react_native_1.View>
@@ -245,33 +244,33 @@ const NetworkTab = react_1.default.memo(() => {
         setSelected,
     ]);
     return (<react_native_1.View style={{ flex: 1 }}>
-      <react_native_1.FlatList ref={apisListRef} data={groupedData} keyExtractor={item => item?.id?.toString()} renderItem={renderItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListHeaderComponent={<react_native_1.View style={{ marginTop: 6 }}>
+      <react_native_1.View style={{ marginTop: 6 }}>
             
             {networkMetrics != null && networkMetrics.totalCount > 0 && (<react_native_1.View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                    backgroundColor: AppColors_1.AppColors.grayBackground,
-                    borderRadius: 8,
-                    paddingHorizontal: 10,
-                    paddingVertical: 5.5,
-                    marginHorizontal: 12,
-                    marginBottom: 6,
-                    borderWidth: 1,
-                    borderColor: AppColors_1.AppColors.dividerColor,
-                }}>
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                backgroundColor: AppColors_1.AppColors.grayBackground,
+                borderRadius: 8,
+                paddingHorizontal: 10,
+                paddingVertical: 5.5,
+                marginHorizontal: 12,
+                marginBottom: 6,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.dividerColor,
+            }}>
                 
                 <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 4.5 }}>
                   <react_native_1.View style={{
-                    width: 6,
-                    height: 6,
-                    borderRadius: 3,
-                    backgroundColor: networkMetrics.successRate >= 95
-                        ? AppColors_1.AppColors.greenColor
-                        : networkMetrics.successRate >= 80
-                            ? AppColors_1.AppColors.amber500
-                            : AppColors_1.AppColors.errorColor,
-                }}/>
+                width: 6,
+                height: 6,
+                borderRadius: 3,
+                backgroundColor: networkMetrics.successRate >= 95
+                    ? AppColors_1.AppColors.greenColor
+                    : networkMetrics.successRate >= 80
+                        ? AppColors_1.AppColors.amber500
+                        : AppColors_1.AppColors.errorColor,
+            }}/>
                   <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 10.5, color: AppColors_1.AppColors.primaryBlack }}>
                     {networkMetrics.successRate}%
                   </react_native_1.Text>
@@ -309,33 +308,33 @@ const NetworkTab = react_1.default.memo(() => {
             
             <react_native_1.View style={styles_1.default.toolbarRow}>
               <react_native_1.View style={[
-                styles_1.default.searchContainer,
-                isSearchFocused && {
-                    borderColor: AppColors_1.AppColors.purple,
-                    borderWidth: 1.5,
-                },
-            ]}>
+            styles_1.default.searchContainer,
+            isSearchFocused && {
+                borderColor: AppColors_1.AppColors.purple,
+                borderWidth: 1.5,
+            },
+        ]}>
                 <NetworkIcons_1.SearchIcon color={isSearchFocused
-                ? AppColors_1.AppColors.purple
-                : AppColors_1.AppColors.grayTextWeak} size={15}/>
+            ? AppColors_1.AppColors.purple
+            : AppColors_1.AppColors.grayTextWeak} size={15}/>
                 <react_native_1.TextInput placeholder="Search URL, status, method, headers, body..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={search} onChangeText={setSearch} onFocus={() => setIsSearchFocused(true)} onBlur={() => setIsSearchFocused(false)} style={styles_1.default.searchInput} autoCorrect={false} autoCapitalize="none"/>
 
                 {search.length > 0 && (<react_native_1.View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 4,
-                }}>
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 4,
+            }}>
                     <react_native_1.View style={{
-                    backgroundColor: `${AppColors_1.AppColors.purple}20`,
-                    borderRadius: 10,
-                    paddingHorizontal: 6,
-                    paddingVertical: 1.5,
-                }}>
+                backgroundColor: `${AppColors_1.AppColors.purple}20`,
+                borderRadius: 10,
+                paddingHorizontal: 6,
+                paddingVertical: 1.5,
+            }}>
                       <react_native_1.Text style={{
-                    color: AppColors_1.AppColors.purple,
-                    fontSize: 9.5,
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                }}>
+                color: AppColors_1.AppColors.purple,
+                fontSize: 9.5,
+                fontFamily: AppFonts_1.AppFonts.interBold,
+            }}>
                         {filteredLogs.length}
                       </react_native_1.Text>
                     </react_native_1.View>
@@ -347,24 +346,24 @@ const NetworkTab = react_1.default.memo(() => {
 
               <react_native_1.View style={styles_1.default.toolbarRight}>
                 <TouchableScale_1.default style={[
-                styles_1.default.toolbarBtn,
-                isNetworkPaused && {
-                    borderColor: `${AppColors_1.AppColors.darkOrange}50`,
-                    backgroundColor: `${AppColors_1.AppColors.darkOrange}18`,
-                },
-            ]} onPress={() => setIsNetworkPaused(p => !p)} hitSlop={6}>
+            styles_1.default.toolbarBtn,
+            isNetworkPaused && {
+                borderColor: `${AppColors_1.AppColors.darkOrange}50`,
+                backgroundColor: `${AppColors_1.AppColors.darkOrange}18`,
+            },
+        ]} onPress={() => setIsNetworkPaused(p => !p)} hitSlop={6}>
                   <NetworkIcons_1.HeaderPauseIcon isPaused={isNetworkPaused} color={isNetworkPaused
-                ? AppColors_1.AppColors.darkOrange
-                : AppColors_1.AppColors.grayTextStrong} size={16}/>
+            ? AppColors_1.AppColors.darkOrange
+            : AppColors_1.AppColors.grayTextStrong} size={16}/>
                 </TouchableScale_1.default>
 
                 <TouchableScale_1.default style={[
-                styles_1.default.toolbarBtn,
-                {
-                    borderColor: `${AppColors_1.AppColors.errorColor}38`,
-                    backgroundColor: `${AppColors_1.AppColors.errorColor}0F`,
-                },
-            ]} onPress={handleDelete} hitSlop={6}>
+            styles_1.default.toolbarBtn,
+            {
+                borderColor: `${AppColors_1.AppColors.errorColor}38`,
+                backgroundColor: `${AppColors_1.AppColors.errorColor}0F`,
+            },
+        ]} onPress={handleDelete} hitSlop={6}>
                   <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={15}/>
                   {selectedLogs.size > 0 && (<react_native_1.View style={styles_1.default.trashBadge}>
                       <react_native_1.Text style={styles_1.default.trashBadgeText}>
@@ -378,51 +377,57 @@ const NetworkTab = react_1.default.memo(() => {
                 </TouchableScale_1.default>
 
                 <TouchableScale_1.default style={[
-                styles_1.default.toolbarBtn,
-                (statusFilters.size > 0 || methodFilters.size > 0) && {
-                    borderColor: AppColors_1.AppColors.purple,
-                    backgroundColor: `${AppColors_1.AppColors.purple}15`,
-                },
-            ]} onPress={() => setIsFilterModalOpen(true)} hitSlop={6}>
+            styles_1.default.toolbarBtn,
+            (statusFilters.size > 0 || methodFilters.size > 0) && {
+                borderColor: AppColors_1.AppColors.purple,
+                backgroundColor: `${AppColors_1.AppColors.purple}15`,
+            },
+        ]} onPress={() => setIsFilterModalOpen(true)} hitSlop={6}>
                   <NetworkIcons_1.FilterIcon color={statusFilters.size > 0 || methodFilters.size > 0
-                ? AppColors_1.AppColors.purple
-                : AppColors_1.AppColors.grayTextStrong} size={16}/>
+            ? AppColors_1.AppColors.purple
+            : AppColors_1.AppColors.grayTextStrong} size={16}/>
                   {(statusFilters.size > 0 ||
-                methodFilters.size > 0) && (<react_native_1.View style={styles_1.default.activeFilterDot}/>)}
+            methodFilters.size > 0) && (<react_native_1.View style={styles_1.default.activeFilterDot}/>)}
                 </TouchableScale_1.default>
               </react_native_1.View>
             </react_native_1.View>
 
             
-            <react_native_1.View style={{ marginBottom: 8 }}>
-              <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
-                paddingHorizontal: 12,
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 6,
-            }}>
+            <react_native_1.View style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            marginBottom: 8,
+            paddingHorizontal: 12,
+            gap: 6,
+        }}>
+              <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ flex: 1 }} contentContainerStyle={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 6,
+            paddingRight: 6,
+        }}>
                 {QUICK_CHIPS.map(chip => {
-                const isActive = quickFilter === chip.id;
-                const chipColor = chip.color || AppColors_1.AppColors.purple;
-                const iconColor = isActive ? AppColors_1.AppColors.white : chipColor;
-                return (<TouchableScale_1.default key={chip.id} onPress={() => {
-                        setQuickFilter(isActive ? 'all' : chip.id);
-                    }}>
+            const isActive = quickFilter === chip.id;
+            const chipColor = chip.color || AppColors_1.AppColors.purple;
+            const iconColor = isActive ? AppColors_1.AppColors.white : chipColor;
+            return (<TouchableScale_1.default key={chip.id} onPress={() => {
+                    setQuickFilter(isActive ? 'all' : chip.id);
+                }}>
                       <react_native_1.View style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        paddingHorizontal: 9,
-                        paddingVertical: 4.5,
-                        borderRadius: 8,
-                        backgroundColor: isActive
-                            ? chipColor
-                            : `${chipColor}12`,
-                        borderWidth: 1,
-                        borderColor: isActive
-                            ? chipColor
-                            : `${chipColor}30`,
-                        gap: 5,
-                    }}>
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    paddingHorizontal: 9,
+                    paddingVertical: 4.5,
+                    borderRadius: 8,
+                    backgroundColor: isActive
+                        ? chipColor
+                        : `${chipColor}12`,
+                    borderWidth: 1,
+                    borderColor: isActive
+                        ? chipColor
+                        : `${chipColor}30`,
+                    gap: 5,
+                }}>
                         {chip.id === 'all' && <NetworkIcons_1.LayersIcon size={11} color={iconColor}/>}
                         {chip.id === 'errors' && <NetworkIcons_1.CircleXIcon size={11} color={iconColor}/>}
                         {chip.id === 'success' && <NetworkIcons_1.CircleCheckIcon size={11} color={iconColor}/>}
@@ -431,122 +436,129 @@ const NetworkTab = react_1.default.memo(() => {
                         {chip.id === 'GET' && <NetworkIcons_1.ResponseIcon size={11} color={iconColor}/>}
                         {chip.id === 'graphql' && <NetworkIcons_1.AtomIcon size={11} color={iconColor}/>}
                         <react_native_1.Text style={{
-                        fontFamily: AppFonts_1.AppFonts.interBold,
-                        fontSize: 10.5,
-                        color: isActive
-                            ? AppColors_1.AppColors.white
-                            : AppColors_1.AppColors.primaryBlack,
-                    }}>
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 10.5,
+                    color: isActive
+                        ? AppColors_1.AppColors.white
+                        : AppColors_1.AppColors.primaryBlack,
+                }}>
                           {chip.label}
                         </react_native_1.Text>
                         <react_native_1.View style={{
-                        backgroundColor: isActive
-                            ? 'rgba(255,255,255,0.25)'
-                            : `${chipColor}20`,
-                        paddingHorizontal: 5,
-                        paddingVertical: 1,
-                        borderRadius: 8,
-                    }}>
+                    backgroundColor: isActive
+                        ? 'rgba(255,255,255,0.25)'
+                        : `${chipColor}20`,
+                    paddingHorizontal: 5,
+                    paddingVertical: 1,
+                    borderRadius: 8,
+                }}>
                           <react_native_1.Text style={{
-                        fontFamily: AppFonts_1.AppFonts.interBold,
-                        fontSize: 9,
-                        color: isActive ? AppColors_1.AppColors.white : chipColor,
-                    }}>
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 9,
+                    color: isActive ? AppColors_1.AppColors.white : chipColor,
+                }}>
                             {chip.count}
                           </react_native_1.Text>
                         </react_native_1.View>
                       </react_native_1.View>
                     </TouchableScale_1.default>);
-            })}
+        })}
+              </react_native_1.ScrollView>
 
-                <TouchableScale_1.default onPress={() => setIsFilterModalOpen(true)}>
-                  <react_native_1.View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                paddingHorizontal: 10,
-                paddingVertical: 4.5,
-                borderRadius: 8,
-                backgroundColor: statusFilters.size > 0 || methodFilters.size > 0
-                    ? `${AppColors_1.AppColors.purple}20`
-                    : AppColors_1.AppColors.grayBackground,
-                borderWidth: 1,
-                borderColor: statusFilters.size > 0 || methodFilters.size > 0
-                    ? AppColors_1.AppColors.purple
-                    : AppColors_1.AppColors.grayBorderSecondary,
-                gap: 5,
-            }}>
-                    <NetworkIcons_1.FilterIcon size={11} color={statusFilters.size > 0 || methodFilters.size > 0
+              <TouchableScale_1.default onPress={() => setIsFilterModalOpen(true)} style={{ flexShrink: 0 }}>
+                <react_native_1.View style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingHorizontal: 10,
+            paddingVertical: 4.5,
+            borderRadius: 8,
+            backgroundColor: statusFilters.size > 0 || methodFilters.size > 0
+                ? `${AppColors_1.AppColors.purple}20`
+                : AppColors_1.AppColors.grayBackground,
+            borderWidth: 1,
+            borderColor: statusFilters.size > 0 || methodFilters.size > 0
                 ? AppColors_1.AppColors.purple
-                : AppColors_1.AppColors.grayText}/>
-                    <react_native_1.Text style={{
+                : AppColors_1.AppColors.grayBorderSecondary,
+            gap: 5,
+            shadowColor: AppColors_1.AppColors.black,
+            shadowOpacity: 0.04,
+            shadowRadius: 2,
+            shadowOffset: { width: 0, height: 1 },
+            elevation: 1,
+        }}>
+                  <NetworkIcons_1.FilterIcon size={11} color={statusFilters.size > 0 || methodFilters.size > 0
+            ? AppColors_1.AppColors.purple
+            : AppColors_1.AppColors.grayText}/>
+                  <react_native_1.Text style={{
+            fontFamily: AppFonts_1.AppFonts.interBold,
+            fontSize: 10.5,
+            color: statusFilters.size > 0 || methodFilters.size > 0
+                ? AppColors_1.AppColors.purple
+                : AppColors_1.AppColors.grayText,
+        }}>
+                    More Filters
+                  </react_native_1.Text>
+                  {(statusFilters.size > 0 || methodFilters.size > 0) && (<react_native_1.View style={{
+                backgroundColor: AppColors_1.AppColors.purple,
+                paddingHorizontal: 4.5,
+                paddingVertical: 1,
+                borderRadius: 6,
+            }}>
+                      <react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interBold,
-                fontSize: 10.5,
-                color: statusFilters.size > 0 || methodFilters.size > 0
-                    ? AppColors_1.AppColors.purple
-                    : AppColors_1.AppColors.grayText,
+                fontSize: 8.5,
+                color: AppColors_1.AppColors.white,
             }}>
-                      More Filters
-                    </react_native_1.Text>
-                    {(statusFilters.size > 0 || methodFilters.size > 0) && (<react_native_1.View style={{
-                    backgroundColor: AppColors_1.AppColors.purple,
-                    paddingHorizontal: 4.5,
-                    paddingVertical: 1,
-                    borderRadius: 6,
-                }}>
-                        <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 8.5,
-                    color: AppColors_1.AppColors.white,
-                }}>
-                          {statusFilters.size + methodFilters.size}
-                        </react_native_1.Text>
-                      </react_native_1.View>)}
-                  </react_native_1.View>
-                </TouchableScale_1.default>
-              </react_native_1.ScrollView>
+                        {statusFilters.size + methodFilters.size}
+                      </react_native_1.Text>
+                    </react_native_1.View>)}
+                </react_native_1.View>
+              </TouchableScale_1.default>
             </react_native_1.View>
 
             
             {(quickFilter !== 'all' ||
-                search.trim().length > 0 ||
-                statusFilters.size > 0 ||
-                methodFilters.size > 0 ||
-                filteredLogs.length !== logs.length) && (<react_native_1.View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                    marginHorizontal: 12,
-                    marginBottom: 8,
-                    paddingHorizontal: 10,
-                    paddingVertical: 5.5,
-                    backgroundColor: `${AppColors_1.AppColors.purple}10`,
-                    borderRadius: 8,
-                    borderWidth: 1,
-                    borderColor: `${AppColors_1.AppColors.purple}25`,
-                }}>
+            search.trim().length > 0 ||
+            statusFilters.size > 0 ||
+            methodFilters.size > 0 ||
+            filteredLogs.length !== logs.length) && (<react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                marginHorizontal: 12,
+                marginBottom: 8,
+                paddingHorizontal: 10,
+                paddingVertical: 5.5,
+                backgroundColor: `${AppColors_1.AppColors.purple}10`,
+                borderRadius: 8,
+                borderWidth: 1,
+                borderColor: `${AppColors_1.AppColors.purple}25`,
+            }}>
                 <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interMedium,
-                    fontSize: 10.5,
-                    color: AppColors_1.AppColors.purple,
-                }}>
+                fontFamily: AppFonts_1.AppFonts.interMedium,
+                fontSize: 10.5,
+                color: AppColors_1.AppColors.purple,
+            }}>
                   Showing {filteredLogs.length} of {logs.length} requests
                 </react_native_1.Text>
                 <TouchableScale_1.default onPress={() => {
-                    setSearch('');
-                    setQuickFilter('all');
-                    setStatusFilters(new Set());
-                    setMethodFilters(new Set());
-                }}>
+                setSearch('');
+                setQuickFilter('all');
+                setStatusFilters(new Set());
+                setMethodFilters(new Set());
+            }}>
                   <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 10.5,
-                    color: AppColors_1.AppColors.errorColor,
-                }}>
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 10.5,
+                color: AppColors_1.AppColors.errorColor,
+            }}>
                     Clear All Filters
                   </react_native_1.Text>
                 </TouchableScale_1.default>
               </react_native_1.View>)}
-          </react_native_1.View>} ListEmptyComponent={<EmptyState_1.default isSearch={search.length > 0 ||
+          </react_native_1.View>
+
+        <react_native_1.FlatList ref={apisListRef} data={groupedData} keyExtractor={item => item?.id?.toString()} renderItem={renderItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={react_native_1.Platform.OS === 'android'} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState_1.default isSearch={search.length > 0 ||
                 statusFilters.size > 0 ||
                 methodFilters.size > 0 ||
                 quickFilter !== 'all'} searchQuery={search} customTitle={search.length > 0
@@ -561,28 +573,6 @@ const NetworkTab = react_1.default.memo(() => {
             styles_1.default.listContent,
             filteredLogs.length === 0 && { flexGrow: 1 },
         ]} keyboardShouldPersistTaps="handled"/>
-      
-      <TouchableScale_1.default onPress={() => {
-            try {
-                apisListRef.current?.scrollToOffset({
-                    offset: 0,
-                    animated: true,
-                });
-            }
-            catch {
-                try {
-                    apisListRef.current?.scrollToIndex({
-                        index: 0,
-                        animated: true,
-                    });
-                }
-                catch { }
-            }
-        }} hitSlop={12} style={styles_1.default.scrollTopBtn}>
-        <react_native_1.View style={{ transform: [{ rotate: '180deg' }] }}>
-          <NetworkIcons_1.ChevronIcon color={AppColors_1.AppColors.white} size={18}/>
-        </react_native_1.View>
-      </TouchableScale_1.default>
 
       
       <NetworkFilterModal_1.default visible={isFilterModalOpen} onClose={() => setIsFilterModalOpen(false)} filters={modalFilterState} onApply={handleApplyNetworkFilters} searchQuery={search}/>

package/dist/commonjs/components/Inspector/NpmStarPrompt.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const NpmStarPrompt: React.FC;
+export default NpmStarPrompt;