react-native-inapp-inspector 2.3.15 → 2.3.17

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

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useRef } from 'react';
-import { FlatList, Pressable, ScrollView, Text, TextInput, View, } from 'react-native';
-import { animateNextLayout, useInspector } from './InspectorContext';
+import { FlatList, Platform, Pressable, ScrollView, Text, TextInput, View, } from 'react-native';
+import { useInspector } from './InspectorContext';
 import TouchableScale from '../TouchableScale';
 import AnimatedEntrance from '../AnimatedEntrance';
 import DomainHeader from '../DomainHeader';
@@ -13,7 +13,7 @@ import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import { METHOD_COLORS } from '../../constants';
 import { useTranslation } from '../../i18n';
-import { SearchIcon, ClearIcon, TrashIcon, SortArrowIcon, FilterIcon, ChevronIcon, CircleCheckIcon, CircleXIcon, LayersIcon, HeaderPauseIcon, ClockIcon, RequestIcon, ResponseIcon, AtomIcon, } from '../NetworkIcons';
+import { SearchIcon, ClearIcon, TrashIcon, SortArrowIcon, FilterIcon, CircleCheckIcon, CircleXIcon, LayersIcon, HeaderPauseIcon, ClockIcon, RequestIcon, ResponseIcon, AtomIcon, } from '../NetworkIcons';
 const NetworkTab = React.memo(() => {
     const { groupedData, search, setSearch, searchScope, setSearchScope, isRegexSearch, setIsRegexSearch, isCaseSensitive, setIsCaseSensitive, quickFilter, setQuickFilter, handleDelete, selectedLogs, sortOrder, setSortOrder, statusFilters, setStatusFilters, methodFilters, setMethodFilters, availableMethods, filteredLogs, logs, toggleSectionFilter, toggleSectionCollapse, minStart, totalRange, newLogIds, toggleSelect, setSelected, isNetworkPaused, setIsNetworkPaused, } = useInspector();
     const { t } = useTranslation();
@@ -190,7 +190,6 @@ const NetworkTab = React.memo(() => {
           </View>
           <View style={styles.treeCardWrapper}>
             <LogCard item={log} isSelected={selectedLogs.has(log.id)} onToggleSelect={toggleSelect} onPress={() => {
-                animateNextLayout();
                 setSelected(log);
             }} timelineMinStart={minStart} timelineTotalRange={totalRange} isNew={newLogIds.has(log.id)} searchStr={search}/>
           </View>
@@ -207,33 +206,33 @@ const NetworkTab = React.memo(() => {
         setSelected,
     ]);
     return (<View style={{ flex: 1 }}>
-      <FlatList ref={apisListRef} data={groupedData} keyExtractor={item => item?.id?.toString()} renderItem={renderItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListHeaderComponent={<View style={{ marginTop: 6 }}>
+      <View style={{ marginTop: 6 }}>
             
             {networkMetrics != null && networkMetrics.totalCount > 0 && (<View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                    backgroundColor: AppColors.grayBackground,
-                    borderRadius: 8,
-                    paddingHorizontal: 10,
-                    paddingVertical: 5.5,
-                    marginHorizontal: 12,
-                    marginBottom: 6,
-                    borderWidth: 1,
-                    borderColor: AppColors.dividerColor,
-                }}>
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                backgroundColor: AppColors.grayBackground,
+                borderRadius: 8,
+                paddingHorizontal: 10,
+                paddingVertical: 5.5,
+                marginHorizontal: 12,
+                marginBottom: 6,
+                borderWidth: 1,
+                borderColor: AppColors.dividerColor,
+            }}>
                 
                 <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4.5 }}>
                   <View style={{
-                    width: 6,
-                    height: 6,
-                    borderRadius: 3,
-                    backgroundColor: networkMetrics.successRate >= 95
-                        ? AppColors.greenColor
-                        : networkMetrics.successRate >= 80
-                            ? AppColors.amber500
-                            : AppColors.errorColor,
-                }}/>
+                width: 6,
+                height: 6,
+                borderRadius: 3,
+                backgroundColor: networkMetrics.successRate >= 95
+                    ? AppColors.greenColor
+                    : networkMetrics.successRate >= 80
+                        ? AppColors.amber500
+                        : AppColors.errorColor,
+            }}/>
                   <Text style={{ fontFamily: AppFonts.interBold, fontSize: 10.5, color: AppColors.primaryBlack }}>
                     {networkMetrics.successRate}%
                   </Text>
@@ -271,33 +270,33 @@ const NetworkTab = React.memo(() => {
             
             <View style={styles.toolbarRow}>
               <View style={[
-                styles.searchContainer,
-                isSearchFocused && {
-                    borderColor: AppColors.purple,
-                    borderWidth: 1.5,
-                },
-            ]}>
+            styles.searchContainer,
+            isSearchFocused && {
+                borderColor: AppColors.purple,
+                borderWidth: 1.5,
+            },
+        ]}>
                 <SearchIcon color={isSearchFocused
-                ? AppColors.purple
-                : AppColors.grayTextWeak} size={15}/>
+            ? AppColors.purple
+            : AppColors.grayTextWeak} size={15}/>
                 <TextInput placeholder="Search URL, status, method, headers, body..." placeholderTextColor={AppColors.grayTextWeak} value={search} onChangeText={setSearch} onFocus={() => setIsSearchFocused(true)} onBlur={() => setIsSearchFocused(false)} style={styles.searchInput} autoCorrect={false} autoCapitalize="none"/>
 
                 {search.length > 0 && (<View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 4,
-                }}>
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 4,
+            }}>
                     <View style={{
-                    backgroundColor: `${AppColors.purple}20`,
-                    borderRadius: 10,
-                    paddingHorizontal: 6,
-                    paddingVertical: 1.5,
-                }}>
+                backgroundColor: `${AppColors.purple}20`,
+                borderRadius: 10,
+                paddingHorizontal: 6,
+                paddingVertical: 1.5,
+            }}>
                       <Text style={{
-                    color: AppColors.purple,
-                    fontSize: 9.5,
-                    fontFamily: AppFonts.interBold,
-                }}>
+                color: AppColors.purple,
+                fontSize: 9.5,
+                fontFamily: AppFonts.interBold,
+            }}>
                         {filteredLogs.length}
                       </Text>
                     </View>
@@ -309,24 +308,24 @@ const NetworkTab = React.memo(() => {
 
               <View style={styles.toolbarRight}>
                 <TouchableScale style={[
-                styles.toolbarBtn,
-                isNetworkPaused && {
-                    borderColor: `${AppColors.darkOrange}50`,
-                    backgroundColor: `${AppColors.darkOrange}18`,
-                },
-            ]} onPress={() => setIsNetworkPaused(p => !p)} hitSlop={6}>
+            styles.toolbarBtn,
+            isNetworkPaused && {
+                borderColor: `${AppColors.darkOrange}50`,
+                backgroundColor: `${AppColors.darkOrange}18`,
+            },
+        ]} onPress={() => setIsNetworkPaused(p => !p)} hitSlop={6}>
                   <HeaderPauseIcon isPaused={isNetworkPaused} color={isNetworkPaused
-                ? AppColors.darkOrange
-                : AppColors.grayTextStrong} size={16}/>
+            ? AppColors.darkOrange
+            : AppColors.grayTextStrong} size={16}/>
                 </TouchableScale>
 
                 <TouchableScale style={[
-                styles.toolbarBtn,
-                {
-                    borderColor: `${AppColors.errorColor}38`,
-                    backgroundColor: `${AppColors.errorColor}0F`,
-                },
-            ]} onPress={handleDelete} hitSlop={6}>
+            styles.toolbarBtn,
+            {
+                borderColor: `${AppColors.errorColor}38`,
+                backgroundColor: `${AppColors.errorColor}0F`,
+            },
+        ]} onPress={handleDelete} hitSlop={6}>
                   <TrashIcon color={AppColors.errorColor} size={15}/>
                   {selectedLogs.size > 0 && (<View style={styles.trashBadge}>
                       <Text style={styles.trashBadgeText}>
@@ -340,51 +339,57 @@ const NetworkTab = React.memo(() => {
                 </TouchableScale>
 
                 <TouchableScale style={[
-                styles.toolbarBtn,
-                (statusFilters.size > 0 || methodFilters.size > 0) && {
-                    borderColor: AppColors.purple,
-                    backgroundColor: `${AppColors.purple}15`,
-                },
-            ]} onPress={() => setIsFilterModalOpen(true)} hitSlop={6}>
+            styles.toolbarBtn,
+            (statusFilters.size > 0 || methodFilters.size > 0) && {
+                borderColor: AppColors.purple,
+                backgroundColor: `${AppColors.purple}15`,
+            },
+        ]} onPress={() => setIsFilterModalOpen(true)} hitSlop={6}>
                   <FilterIcon color={statusFilters.size > 0 || methodFilters.size > 0
-                ? AppColors.purple
-                : AppColors.grayTextStrong} size={16}/>
+            ? AppColors.purple
+            : AppColors.grayTextStrong} size={16}/>
                   {(statusFilters.size > 0 ||
-                methodFilters.size > 0) && (<View style={styles.activeFilterDot}/>)}
+            methodFilters.size > 0) && (<View style={styles.activeFilterDot}/>)}
                 </TouchableScale>
               </View>
             </View>
 
             
-            <View style={{ marginBottom: 8 }}>
-              <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
-                paddingHorizontal: 12,
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 6,
-            }}>
+            <View style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            marginBottom: 8,
+            paddingHorizontal: 12,
+            gap: 6,
+        }}>
+              <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.purple;
-                const iconColor = isActive ? AppColors.white : chipColor;
-                return (<TouchableScale key={chip.id} onPress={() => {
-                        setQuickFilter(isActive ? 'all' : chip.id);
-                    }}>
+            const isActive = quickFilter === chip.id;
+            const chipColor = chip.color || AppColors.purple;
+            const iconColor = isActive ? AppColors.white : chipColor;
+            return (<TouchableScale key={chip.id} onPress={() => {
+                    setQuickFilter(isActive ? 'all' : chip.id);
+                }}>
                       <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' && <LayersIcon size={11} color={iconColor}/>}
                         {chip.id === 'errors' && <CircleXIcon size={11} color={iconColor}/>}
                         {chip.id === 'success' && <CircleCheckIcon size={11} color={iconColor}/>}
@@ -393,122 +398,129 @@ const NetworkTab = React.memo(() => {
                         {chip.id === 'GET' && <ResponseIcon size={11} color={iconColor}/>}
                         {chip.id === 'graphql' && <AtomIcon size={11} color={iconColor}/>}
                         <Text style={{
-                        fontFamily: AppFonts.interBold,
-                        fontSize: 10.5,
-                        color: isActive
-                            ? AppColors.white
-                            : AppColors.primaryBlack,
-                    }}>
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 10.5,
+                    color: isActive
+                        ? AppColors.white
+                        : AppColors.primaryBlack,
+                }}>
                           {chip.label}
                         </Text>
                         <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,
+                }}>
                           <Text style={{
-                        fontFamily: AppFonts.interBold,
-                        fontSize: 9,
-                        color: isActive ? AppColors.white : chipColor,
-                    }}>
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 9,
+                    color: isActive ? AppColors.white : chipColor,
+                }}>
                             {chip.count}
                           </Text>
                         </View>
                       </View>
                     </TouchableScale>);
-            })}
+        })}
+              </ScrollView>
 
-                <TouchableScale onPress={() => setIsFilterModalOpen(true)}>
-                  <View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                paddingHorizontal: 10,
-                paddingVertical: 4.5,
-                borderRadius: 8,
-                backgroundColor: statusFilters.size > 0 || methodFilters.size > 0
-                    ? `${AppColors.purple}20`
-                    : AppColors.grayBackground,
-                borderWidth: 1,
-                borderColor: statusFilters.size > 0 || methodFilters.size > 0
-                    ? AppColors.purple
-                    : AppColors.grayBorderSecondary,
-                gap: 5,
-            }}>
-                    <FilterIcon size={11} color={statusFilters.size > 0 || methodFilters.size > 0
+              <TouchableScale onPress={() => setIsFilterModalOpen(true)} style={{ flexShrink: 0 }}>
+                <View style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingHorizontal: 10,
+            paddingVertical: 4.5,
+            borderRadius: 8,
+            backgroundColor: statusFilters.size > 0 || methodFilters.size > 0
+                ? `${AppColors.purple}20`
+                : AppColors.grayBackground,
+            borderWidth: 1,
+            borderColor: statusFilters.size > 0 || methodFilters.size > 0
                 ? AppColors.purple
-                : AppColors.grayText}/>
-                    <Text style={{
+                : AppColors.grayBorderSecondary,
+            gap: 5,
+            shadowColor: AppColors.black,
+            shadowOpacity: 0.04,
+            shadowRadius: 2,
+            shadowOffset: { width: 0, height: 1 },
+            elevation: 1,
+        }}>
+                  <FilterIcon size={11} color={statusFilters.size > 0 || methodFilters.size > 0
+            ? AppColors.purple
+            : AppColors.grayText}/>
+                  <Text style={{
+            fontFamily: AppFonts.interBold,
+            fontSize: 10.5,
+            color: statusFilters.size > 0 || methodFilters.size > 0
+                ? AppColors.purple
+                : AppColors.grayText,
+        }}>
+                    More Filters
+                  </Text>
+                  {(statusFilters.size > 0 || methodFilters.size > 0) && (<View style={{
+                backgroundColor: AppColors.purple,
+                paddingHorizontal: 4.5,
+                paddingVertical: 1,
+                borderRadius: 6,
+            }}>
+                      <Text style={{
                 fontFamily: AppFonts.interBold,
-                fontSize: 10.5,
-                color: statusFilters.size > 0 || methodFilters.size > 0
-                    ? AppColors.purple
-                    : AppColors.grayText,
+                fontSize: 8.5,
+                color: AppColors.white,
             }}>
-                      More Filters
-                    </Text>
-                    {(statusFilters.size > 0 || methodFilters.size > 0) && (<View style={{
-                    backgroundColor: AppColors.purple,
-                    paddingHorizontal: 4.5,
-                    paddingVertical: 1,
-                    borderRadius: 6,
-                }}>
-                        <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 8.5,
-                    color: AppColors.white,
-                }}>
-                          {statusFilters.size + methodFilters.size}
-                        </Text>
-                      </View>)}
-                  </View>
-                </TouchableScale>
-              </ScrollView>
+                        {statusFilters.size + methodFilters.size}
+                      </Text>
+                    </View>)}
+                </View>
+              </TouchableScale>
             </View>
 
             
             {(quickFilter !== 'all' ||
-                search.trim().length > 0 ||
-                statusFilters.size > 0 ||
-                methodFilters.size > 0 ||
-                filteredLogs.length !== logs.length) && (<View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                    marginHorizontal: 12,
-                    marginBottom: 8,
-                    paddingHorizontal: 10,
-                    paddingVertical: 5.5,
-                    backgroundColor: `${AppColors.purple}10`,
-                    borderRadius: 8,
-                    borderWidth: 1,
-                    borderColor: `${AppColors.purple}25`,
-                }}>
+            search.trim().length > 0 ||
+            statusFilters.size > 0 ||
+            methodFilters.size > 0 ||
+            filteredLogs.length !== logs.length) && (<View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                marginHorizontal: 12,
+                marginBottom: 8,
+                paddingHorizontal: 10,
+                paddingVertical: 5.5,
+                backgroundColor: `${AppColors.purple}10`,
+                borderRadius: 8,
+                borderWidth: 1,
+                borderColor: `${AppColors.purple}25`,
+            }}>
                 <Text style={{
-                    fontFamily: AppFonts.interMedium,
-                    fontSize: 10.5,
-                    color: AppColors.purple,
-                }}>
+                fontFamily: AppFonts.interMedium,
+                fontSize: 10.5,
+                color: AppColors.purple,
+            }}>
                   Showing {filteredLogs.length} of {logs.length} requests
                 </Text>
                 <TouchableScale onPress={() => {
-                    setSearch('');
-                    setQuickFilter('all');
-                    setStatusFilters(new Set());
-                    setMethodFilters(new Set());
-                }}>
+                setSearch('');
+                setQuickFilter('all');
+                setStatusFilters(new Set());
+                setMethodFilters(new Set());
+            }}>
                   <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 10.5,
-                    color: AppColors.errorColor,
-                }}>
+                fontFamily: AppFonts.interBold,
+                fontSize: 10.5,
+                color: AppColors.errorColor,
+            }}>
                     Clear All Filters
                   </Text>
                 </TouchableScale>
               </View>)}
-          </View>} ListEmptyComponent={<EmptyState isSearch={search.length > 0 ||
+          </View>
+
+        <FlatList ref={apisListRef} data={groupedData} keyExtractor={item => item?.id?.toString()} renderItem={renderItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={Platform.OS === 'android'} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState isSearch={search.length > 0 ||
                 statusFilters.size > 0 ||
                 methodFilters.size > 0 ||
                 quickFilter !== 'all'} searchQuery={search} customTitle={search.length > 0
@@ -523,28 +535,6 @@ const NetworkTab = React.memo(() => {
             styles.listContent,
             filteredLogs.length === 0 && { flexGrow: 1 },
         ]} keyboardShouldPersistTaps="handled"/>
-      
-      <TouchableScale onPress={() => {
-            try {
-                apisListRef.current?.scrollToOffset({
-                    offset: 0,
-                    animated: true,
-                });
-            }
-            catch {
-                try {
-                    apisListRef.current?.scrollToIndex({
-                        index: 0,
-                        animated: true,
-                    });
-                }
-                catch { }
-            }
-        }} hitSlop={12} style={styles.scrollTopBtn}>
-        <View style={{ transform: [{ rotate: '180deg' }] }}>
-          <ChevronIcon color={AppColors.white} size={18}/>
-        </View>
-      </TouchableScale>
 
       
       <NetworkFilterModal visible={isFilterModalOpen} onClose={() => setIsFilterModalOpen(false)} filters={modalFilterState} onApply={handleApplyNetworkFilters} searchQuery={search}/>

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

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