react-native-inapp-inspector 2.3.16 → 2.3.18

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';
@@ -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,57 +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={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                marginBottom: 8,
-                paddingHorizontal: 12,
-                gap: 6,
-            }}>
+            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,
-            }}>
+            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}/>}
@@ -399,79 +398,79 @@ 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)} 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.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
+            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}/>
+                : 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,
-            }}>
+            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,
-                }}>
+                backgroundColor: AppColors.purple,
+                paddingHorizontal: 4.5,
+                paddingVertical: 1,
+                borderRadius: 6,
+            }}>
                       <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 8.5,
-                    color: AppColors.white,
-                }}>
+                fontFamily: AppFonts.interBold,
+                fontSize: 8.5,
+                color: AppColors.white,
+            }}>
                         {statusFilters.size + methodFilters.size}
                       </Text>
                     </View>)}
@@ -481,45 +480,47 @@ const NetworkTab = React.memo(() => {
 
             
             {(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

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

@@ -1,11 +1,12 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { Animated, Linking, Platform, StyleSheet, Text, TouchableOpacity, View, } from 'react-native';
+import { Animated, Linking, StyleSheet, Text, TouchableOpacity, View, } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import { useInspector } from './InspectorContext';
 import { LIB_VERSION } from '../../constants';
 import { NpmIcon } from '../NetworkIcons';
 import { copyToClipboard } from '../../helpers';
 import { showToast } from '../../helpers/toast';
+import { AppFonts } from '../../styles/AppFonts';
 const CloseSvg = ({ size = 13, color = '#94A3B8' }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
     <Path d="M18 6L6 18M6 6l12 12" stroke={color} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
   </Svg>);
@@ -150,15 +151,9 @@ export const NpmUpdateToast = () => {
       </View>
     </Animated.View>);
 };
-const fontStack = Platform.select({
-    ios: {
-        fontFamily: 'System',
-    },
-    android: {
-        fontFamily: 'sans-serif',
-    },
-    default: {},
-});
+const fontStack = {
+    fontFamily: AppFonts.interRegular,
+};
 const styles = StyleSheet.create({
     container: {
         position: 'absolute',

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo, useRef, useState } from 'react';
-import { FlatList, Pressable, StyleSheet, Text, TextInput, TouchableOpacity, View, } from 'react-native';
+import { FlatList, Platform, Pressable, StyleSheet, Text, TextInput, TouchableOpacity, View, } from 'react-native';
 import { useTranslation } from '../../i18n';
 import { useInspector } from './InspectorContext';
 import TouchableScale from '../TouchableScale';
@@ -208,7 +208,9 @@ const ReduxTab = React.memo(() => {
     const renderSliceItem = useCallback(({ item, index }) => {
         const isRecentlyUpdated = item.updatedAt > 0 && Date.now() - item.updatedAt < 5000;
         return (<AnimatedEntrance index={index} distance={8}>
-          <TouchableScale onPress={() => setSelectedReduxSlice(item.name)} style={[
+          <TouchableScale onPress={() => {
+                setSelectedReduxSlice(item.name);
+            }} style={[
                 reduxTabStyles.card,
                 isRecentlyUpdated && reduxTabStyles.cardRecentlyUpdated,
             ]}>
@@ -454,7 +456,7 @@ const ReduxTab = React.memo(() => {
       </View>
 
       
-      <FlatList ref={listRef} data={filteredSlices} keyExtractor={item => item.id} renderItem={renderSliceItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState isSearch={reduxSearch.trim().length > 0} searchQuery={reduxSearch} onClearSearch={() => setReduxSearch('')} customTitle={reduxSearch.trim().length > 0 ? 'No Matching Slices' : 'No Redux State Detected'} customSub={reduxSearch.trim().length > 0
+      <FlatList ref={listRef} data={filteredSlices} keyExtractor={item => item.id} renderItem={renderSliceItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={Platform.OS === 'android'} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState isSearch={reduxSearch.trim().length > 0} searchQuery={reduxSearch} onClearSearch={() => setReduxSearch('')} customTitle={reduxSearch.trim().length > 0 ? 'No Matching Slices' : 'No Redux State Detected'} customSub={reduxSearch.trim().length > 0
                 ? `No Redux slices match "${reduxSearch}"`
                 : 'Attach the Redux store or dispatch actions to see state slices.'}/>} ListFooterComponent={filteredSlices.length > 0 ? (<EndOfListFooter count={filteredSlices.length} label="slices"/>) : null} contentContainerStyle={[
             reduxTabStyles.listContent,