react-native-inapp-inspector 2.0.0 → 2.0.2

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import { ActivityIndicator, Modal, Platform, Pressable, StatusBar, Text, View, } from 'react-native';
+import React, { useEffect, useRef } from 'react';
+import { ActivityIndicator, Animated, Modal, Platform, Pressable, StatusBar, StyleSheet, Text, View, } from 'react-native';
 import { useInspector } from './InspectorContext';
 import ErrorBoundary from '../ErrorBoundary';
 import FabLauncher from './FabLauncher';
@@ -18,6 +18,7 @@ import PerformanceTab from './PerformanceTab';
 import CrashTab from './CrashTab';
 import CrashDetail from './CrashDetail';
 import SettingsPanel from './SettingsPanel';
+import TelemetryConsentModal from './TelemetryConsentModal';
 import Toast from '../Toast';
 import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
@@ -29,6 +30,40 @@ const MainScreen = () => {
         (activeTab === 'logs' && selectedLog != null) ||
         (activeTab === 'redux' && (selectedReduxSlice != null || selectedReduxAction != null)) ||
         (activeTab === 'crash' && selectedCrash != null);
+    // ─── 60 FPS Transition Animations ──────────────────────────────────────────
+    const detailAnim = useRef(new Animated.Value(0)).current;
+    useEffect(() => {
+        if (isDetailActive) {
+            detailAnim.setValue(0);
+            Animated.spring(detailAnim, {
+                toValue: 1,
+                friction: 8,
+                tension: 65,
+                useNativeDriver: true,
+            }).start();
+        }
+    }, [isDetailActive]);
+    const settingsAnim = useRef(new Animated.Value(0)).current;
+    useEffect(() => {
+        if (settingsPage !== null) {
+            settingsAnim.setValue(0);
+            Animated.spring(settingsAnim, {
+                toValue: 1,
+                friction: 8,
+                tension: 65,
+                useNativeDriver: true,
+            }).start();
+        }
+    }, [settingsPage !== null]);
+    const tabAnim = useRef(new Animated.Value(1)).current;
+    useEffect(() => {
+        tabAnim.setValue(0);
+        Animated.timing(tabAnim, {
+            toValue: 1,
+            duration: 150,
+            useNativeDriver: true,
+        }).start();
+    }, [activeTab]);
     return (<>
       {(Platform.OS === 'ios' || Platform.OS === 'android') &&
             isEnabled &&
@@ -49,26 +84,92 @@ const MainScreen = () => {
 
               <InspectorHeader />
 
-              {/* ─── Horizontal Scrollable Tab Bar inside Content ─── */}
-              {!isDetailActive && settingsPage === null ? (<TabBar />) : null}
+              <View style={{ flex: 1 }}>
+                {isReady ? (<View style={{ flex: 1 }}>
+                    {/* ─── Horizontal Scrollable Tab Bar inside Content ─── */}
+                    {!isDetailActive && <TabBar />}
 
-              {settingsPage !== null ? (<SettingsPanel />) : isReady ? (isDetailActive ? (activeTab === 'apis' && selected != null ? (<NetworkDetail />) : activeTab === 'analytics' && selectedEvent != null ? (<AnalyticsDetail event={selectedEvent}/>) : activeTab === 'logs' && selectedLog != null ? (<LogDetail />) : activeTab === 'redux' ? (<ReduxDetail />) : activeTab === 'crash' && selectedCrash != null ? (<CrashDetail />) : null) : (<View style={{ flex: 1 }}>
-                    {activeTab === 'apis' && <NetworkTab />}
-                    {activeTab === 'logs' && <ConsoleTab />}
-                    {activeTab === 'analytics' && <AnalyticsTab />}
-                    {activeTab === 'redux' && <ReduxTab />}
-                    {activeTab === 'bundle' && <BundleTab />}
-                    {activeTab === 'performance' && <PerformanceTab />}
-                    {activeTab === 'crash' && <CrashTab />}
-                  </View>)) : (<View style={styles.empty}>
-                  <ActivityIndicator size="large" color={AppColors.purple}/>
-                  <Text style={[styles.emptySub, { marginTop: 12 }]}>
-                    Loading logs...
-                  </Text>
-                </View>)}
+                    {/* Persistent List Layer - Never unmounted, preserves 100% native scroll with smooth tab transition */}
+                    <Animated.View style={[
+                    {
+                        flex: 1,
+                        opacity: tabAnim,
+                        transform: [
+                            {
+                                translateY: tabAnim.interpolate({
+                                    inputRange: [0, 1],
+                                    outputRange: [6, 0],
+                                }),
+                            },
+                        ],
+                    },
+                    (isDetailActive || settingsPage !== null) && {
+                        pointerEvents: 'none',
+                    },
+                ]}>
+                      {activeTab === 'apis' && <NetworkTab />}
+                      {activeTab === 'logs' && <ConsoleTab />}
+                      {activeTab === 'analytics' && <AnalyticsTab />}
+                      {activeTab === 'redux' && <ReduxTab />}
+                      {activeTab === 'bundle' && <BundleTab />}
+                      {activeTab === 'performance' && <PerformanceTab />}
+                      {activeTab === 'crash' && <CrashTab />}
+                    </Animated.View>
+
+                    {/* Detail View Layer - Rendered on top with smooth slide & spring transition */}
+                    {isDetailActive && (<Animated.View style={[
+                        StyleSheet.absoluteFill,
+                        {
+                            backgroundColor: AppColors.contentBg,
+                            opacity: detailAnim,
+                            transform: [
+                                {
+                                    translateX: detailAnim.interpolate({
+                                        inputRange: [0, 1],
+                                        outputRange: [32, 0],
+                                    }),
+                                },
+                            ],
+                        },
+                    ]}>
+                        {activeTab === 'apis' && selected != null && (<NetworkDetail />)}
+                        {activeTab === 'analytics' && selectedEvent != null && (<AnalyticsDetail event={selectedEvent}/>)}
+                        {activeTab === 'logs' && selectedLog != null && (<LogDetail />)}
+                        {activeTab === 'redux' && <ReduxDetail />}
+                        {activeTab === 'crash' && selectedCrash != null && (<CrashDetail />)}
+                      </Animated.View>)}
+                  </View>) : (<View style={styles.empty}>
+                    <ActivityIndicator size="large" color={AppColors.purple}/>
+                    <Text style={[styles.emptySub, { marginTop: 12 }]}>
+                      Loading logs...
+                    </Text>
+                  </View>)}
+
+                {/* Settings Panel Layer - Rendered on top with smooth slide & spring transition */}
+                {settingsPage !== null && (<Animated.View style={[
+                    StyleSheet.absoluteFill,
+                    {
+                        backgroundColor: AppColors.grayBackground,
+                        opacity: settingsAnim,
+                        transform: [
+                            {
+                                translateY: settingsAnim.interpolate({
+                                    inputRange: [0, 1],
+                                    outputRange: [24, 0],
+                                }),
+                            },
+                        ],
+                    },
+                ]}>
+                    <SettingsPanel />
+                  </Animated.View>)}
+              </View>
 
               {/* Bottom floating toast notification */}
               <Toast />
+
+              {/* Anonymous Telemetry Consent Dialog */}
+              <TelemetryConsentModal />
             </View>
           </View>
         </ErrorBoundary>)}

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

@@ -13,7 +13,7 @@ import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import { STATUS_FILTERS, METHOD_COLORS } from '../../constants';
 import { useTranslation } from '../../i18n';
-import { SearchIcon, ClearIcon, TrashIcon, SortArrowIcon, FilterIcon, ChevronIcon, CheckIcon, CircleCheckIcon, CircleXIcon, CircleAlertIcon, LayersIcon, HeaderPauseIcon, ClockIcon, } from '../NetworkIcons';
+import { SearchIcon, ClearIcon, TrashIcon, SortArrowIcon, FilterIcon, ChevronIcon, CircleCheckIcon, CircleXIcon, CircleAlertIcon, LayersIcon, HeaderPauseIcon, ClockIcon, } from '../NetworkIcons';
 const STATUS_META = {
     ALL: { color: AppColors.grayText, Icon: LayersIcon },
     '2xx': { color: AppColors.greenColor, Icon: CircleCheckIcon },
@@ -56,29 +56,31 @@ const FilterChip = React.memo(({ label, color, Icon, badge, active, onPress, })
     return (<TouchableScale style={styles.statusFilterWrap} onPress={onPress} hitSlop={10}>
       <View style={[
             styles.statusFilterChip,
+            {
+                paddingHorizontal: 9,
+                paddingVertical: 5,
+                borderRadius: 7,
+                borderWidth: 1,
+                borderColor: active ? color : `${AppColors.grayBorderSecondary}`,
+                backgroundColor: active ? `${color}14` : AppColors.grayBackground,
+            },
             active && {
-                borderColor: color,
-                backgroundColor: `${color}12`,
+                shadowColor: color,
+                shadowOffset: { width: 0, height: 1 },
+                shadowOpacity: 0.2,
+                shadowRadius: 2,
+                elevation: 1.5,
             },
         ]}>
-        <View style={[
-            styles.filterCheckbox,
-            active && [
-                styles.filterCheckboxActive,
-                { backgroundColor: color },
-            ],
-        ]}>
-          {active && (<CheckIcon color={AppColors.white} size={10}/>)}
-        </View>
         {badge != null ? (<View style={[
                 styles.methodBadgeMini,
                 { backgroundColor: badge },
             ]}/>) : (Icon && (<Icon color={iconColor} size={13}/>))}
         <Text numberOfLines={1} style={[
             styles.statusFilterText,
-            active && {
-                color,
-                fontFamily: AppFonts.interBold,
+            {
+                color: active ? color : AppColors.grayText,
+                fontFamily: active ? AppFonts.interBold : AppFonts.interMedium,
             },
         ]}>
           {label}
@@ -91,6 +93,19 @@ const NetworkTab = React.memo(() => {
     const { t } = useTranslation();
     const filtersAccordion = useAccordion(false, 300, 260);
     const apisListRef = useRef(null);
+    const [isSearchFocused, setIsSearchFocused] = React.useState(false);
+    const QUICK_API_QUERY_TAGS = useMemo(() => [
+        { label: '⚠️ Failed', query: 'is:error' },
+        { label: '🐢 Slow >1s', query: 'slow:>1s' },
+        { label: 'POST', query: 'm:POST' },
+        { label: 'GET', query: 'm:GET' },
+        { label: 'GraphQL', query: 'is:graphql' },
+        { label: 'Axios', query: 'client:axios' },
+        { label: '200 OK', query: 'status:200' },
+        { label: '404', query: 'status:404' },
+        { label: '500', query: 'status:500' },
+        { label: '🔒 HTTPS', query: 'is:https' },
+    ], []);
     const networkMetrics = useMemo(() => {
         if (!logs || logs.length === 0)
             return null;
@@ -225,12 +240,38 @@ const NetworkTab = React.memo(() => {
               </View>)}
 
             <View style={styles.toolbarRow}>
-              <View style={styles.searchContainer}>
-                <SearchIcon color={AppColors.grayTextWeak} size={16}/>
-                <TextInput placeholder="Search endpoints..." placeholderTextColor={AppColors.grayTextWeak} value={search} onChangeText={setSearch} style={styles.searchInput} autoCorrect={false} autoCapitalize="none"/>
-                {search.length > 0 && (<Pressable onPress={() => setSearch('')} hitSlop={10} style={styles.clearBtn}>
-                    <ClearIcon color={AppColors.grayTextWeak} size={14}/>
-                  </Pressable>)}
+              <View style={[
+                styles.searchContainer,
+                isSearchFocused && {
+                    borderColor: AppColors.purple,
+                    borderWidth: 1.5,
+                },
+            ]}>
+                <SearchIcon color={isSearchFocused ? AppColors.purple : AppColors.grayTextWeak} size={16}/>
+                <TextInput placeholder="Search url, body, is:error, slow:>1s..." 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,
+                }}>
+                    <View style={{
+                    backgroundColor: `${AppColors.purple}20`,
+                    borderRadius: 10,
+                    paddingHorizontal: 6,
+                    paddingVertical: 2,
+                }}>
+                      <Text style={{
+                    color: AppColors.purple,
+                    fontSize: 10,
+                    fontFamily: AppFonts.interBold,
+                }}>
+                        {filteredLogs.length}
+                      </Text>
+                    </View>
+                    <Pressable onPress={() => setSearch('')} hitSlop={10} style={styles.clearBtn}>
+                      <ClearIcon color={AppColors.grayTextWeak} size={14}/>
+                    </Pressable>
+                  </View>)}
               </View>
 
               <View style={styles.toolbarRight}>
@@ -277,6 +318,49 @@ const NetworkTab = React.memo(() => {
               </View>
             </View>
 
+            {/* Advanced Search Quick Query Suggestions Bar */}
+            {(isSearchFocused || search.length > 0) && (<ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ marginBottom: 6, maxHeight: 30 }} contentContainerStyle={{
+                    paddingHorizontal: 12,
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 6,
+                }}>
+                {QUICK_API_QUERY_TAGS.map(item => {
+                    const isSelected = search.includes(item.query);
+                    return (<TouchableScale key={item.query} onPress={() => {
+                            if (isSelected) {
+                                setSearch(prev => prev.replace(item.query, '').trim());
+                            }
+                            else {
+                                setSearch(prev => prev ? `${prev} ${item.query}`.trim() : item.query);
+                            }
+                        }}>
+                      <View style={{
+                            paddingHorizontal: 8,
+                            paddingVertical: 3.5,
+                            borderRadius: 6,
+                            backgroundColor: isSelected
+                                ? AppColors.purple
+                                : `${AppColors.purple}14`,
+                            borderWidth: 1,
+                            borderColor: isSelected
+                                ? AppColors.purple
+                                : `${AppColors.purple}30`,
+                        }}>
+                        <Text style={{
+                            fontFamily: AppFonts.interBold,
+                            fontSize: 10,
+                            color: isSelected
+                                ? AppColors.white
+                                : AppColors.purple,
+                        }}>
+                          {item.label}
+                        </Text>
+                      </View>
+                    </TouchableScale>);
+                })}
+              </ScrollView>)}
+
             <Animated.View style={[
                 filtersAccordion.bodyStyle,
                 { overflow: 'hidden' },