react-native-inapp-inspector 1.0.15 → 1.0.16

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react';
-import { Alert, Animated, StyleSheet, FlatList, Modal, Platform, Pressable, ScrollView, Text, TextInput, View, Linking, Image, InteractionManager, ActivityIndicator, StatusBar, TouchableOpacity, LogBox, } from 'react-native';
+import { Alert, Animated, StyleSheet, FlatList, LayoutAnimation, Modal, Platform, Pressable, ScrollView, Text, TextInput, View, Linking, Image, InteractionManager, ActivityIndicator, StatusBar, TouchableOpacity, UIManager, LogBox, } from 'react-native';
 import Svg, { Circle, Path } from 'react-native-svg';
 import LinearGradient from 'react-native-linear-gradient';
 import { useNavigationState, NavigationContext } from '@react-navigation/native';
@@ -20,6 +20,7 @@ import SourcePageCard from './components/SourcePageCard';
 import { ConsoleLogCard } from './components/ConsoleLogCard';
 import HighlightText from './components/HighlightText';
 import CodeSnippet from './components/CodeSnippet';
+import AnimatedEntrance from './components/AnimatedEntrance';
 // Helpers
 import { formatDateTime, getStatusColor, getNavigationInfo, deduplicateLogs, getDomainColor, formatDisplayUrl, getFetchCommand, getCurlCommand, getSize, } from './helpers';
 // Assets
@@ -107,6 +108,9 @@ const NavigationTracker = ({ onStateChange }) => {
     }, [navState, onStateChange]);
     return null;
 };
+const animateNextLayout = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+};
 const NetworkInspector = ({ enabled = true, }) => {
     const [isDark, setIsDark] = useState(false);
     const [reduxState, setReduxState] = useState(null);
@@ -235,12 +239,18 @@ const NetworkInspector = ({ enabled = true, }) => {
             const nextVal = !prev[key];
             const newVisibility = { ...prev, [key]: nextVal };
             if (!nextVal && activeTab === key) {
+                animateNextLayout();
                 setActiveTab('apis');
             }
             return newVisibility;
         });
     };
+    const switchActiveTab = useCallback((key) => {
+        animateNextLayout();
+        setActiveTab(key);
+    }, []);
     const navigateFromDashboard = (key) => {
+        animateNextLayout();
         setTabVisibility(prev => ({ ...prev, [key]: true }));
         setActiveTab(key);
     };
@@ -313,6 +323,11 @@ const NetworkInspector = ({ enabled = true, }) => {
     const badgeAnim = useRef(new Animated.Value(1)).current;
     const activePulseAnim = useRef(new Animated.Value(0.4)).current;
     const unreadPulseAnim = useRef(new Animated.Value(1)).current;
+    useEffect(() => {
+        if (Platform.OS === 'android') {
+            UIManager.setLayoutAnimationEnabledExperimental?.(true);
+        }
+    }, []);
     useEffect(() => {
         const loop = Animated.loop(Animated.sequence([
             Animated.timing(pulseAnim, {
@@ -772,6 +787,7 @@ const NetworkInspector = ({ enabled = true, }) => {
         return Object.entries(freq).sort((a, b) => b[1] - a[1]);
     }, [filteredAnalyticsEvents]);
     function closeModal() {
+        animateNextLayout();
         setVisible(false);
         setSelected(null);
         setSelectedEvent(null);
@@ -889,12 +905,14 @@ const NetworkInspector = ({ enabled = true, }) => {
             return next;
         });
     }, []);
-    const renderItem = useCallback(({ item }) => {
+    const renderItem = useCallback(({ item, index }) => {
         if (item.type === 'header') {
-            return (<DomainHeader pageName={item.pageName} color={item.color} stats={item.stats} activeFilters={item.activeFilters} onToggleFilter={toggleSectionFilter} isCollapsed={item.isCollapsed} onToggleCollapse={toggleSectionCollapse} isFirst={item.isFirst} timestamp={item.timestamp}/>);
+            return (<AnimatedEntrance index={index} distance={8}>
+            <DomainHeader pageName={item.pageName} color={item.color} stats={item.stats} activeFilters={item.activeFilters} onToggleFilter={toggleSectionFilter} isCollapsed={item.isCollapsed} onToggleCollapse={toggleSectionCollapse} isFirst={item.isFirst} timestamp={item.timestamp}/>
+          </AnimatedEntrance>);
         }
         const { log, isLast, color } = item;
-        return (<View style={styles.treeNodeRow}>
+        return (<AnimatedEntrance index={index} distance={8} style={styles.treeNodeRow}>
           <View style={styles.treeLines}>
             <View style={[
                 styles.modernTreeLine,
@@ -904,9 +922,12 @@ const NetworkInspector = ({ enabled = true, }) => {
             {!isLast && (<View style={[styles.modernTreeBranch, { borderColor: color }]}/>)}
           </View>
           <View style={styles.treeCardWrapper}>
-            <LogCard item={log} isSelected={selectedLogs.has(log.id)} onToggleSelect={toggleSelect} onPress={() => setSelected(log)} timelineMinStart={minStart} timelineTotalRange={totalRange} isNew={newLogIds.has(log.id)} searchStr={search}/>
+            <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>
-        </View>);
+        </AnimatedEntrance>);
     }, [
         minStart,
         totalRange,
@@ -932,8 +953,9 @@ const NetworkInspector = ({ enabled = true, }) => {
           <LinearGradient colors={[AppColors.purple, '#6B4EFF']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles.headerGradient}>
             <View style={[styles.header, { paddingHorizontal: 16, gap: 12 }]}>
               <TouchableScale onPress={() => {
+                    animateNextLayout();
                     setSettingsPage(null);
-                    setActiveTab('apis');
+                    switchActiveTab('apis');
                 }} hitSlop={12} style={{
                     padding: 8,
                     borderRadius: 10,
@@ -1114,7 +1136,10 @@ const NetworkInspector = ({ enabled = true, }) => {
                         </View>)}
 
                       {/* Settings gear icon next to label */}
-                      <TouchableScale onPress={() => setSettingsPage(tab.key)} hitSlop={8} style={{
+                      <TouchableScale onPress={() => {
+                            animateNextLayout();
+                            setSettingsPage(tab.key);
+                        }} hitSlop={8} style={{
                             marginLeft: 4,
                             padding: 4,
                             borderRadius: 6,
@@ -1249,7 +1274,10 @@ const NetworkInspector = ({ enabled = true, }) => {
           </ScrollView>
         </View>);
         }
-        const goBackToMain = () => setSettingsPage('main');
+        const goBackToMain = () => {
+            animateNextLayout();
+            setSettingsPage('main');
+        };
         const renderSubHeader = (title, icon, rightInfo) => (<View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
@@ -1846,7 +1874,7 @@ const NetworkInspector = ({ enabled = true, }) => {
         const webviewTotal = webViewNavHistory.length;
         return (<View style={styles.dashboardContainer}>
         {/* Module 1: APIs */}
-        {tabVisibility.apis && (<TouchableScale style={styles.dashboardModuleCard} onPress={() => setActiveTab('apis')}>
+        {tabVisibility.apis && (<TouchableScale style={styles.dashboardModuleCard} onPress={() => switchActiveTab('apis')}>
             <View style={styles.dashboardModuleHeader}>
               <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                 <SignalIcon color={AppColors.purple} size={18}/>
@@ -1887,7 +1915,7 @@ const NetworkInspector = ({ enabled = true, }) => {
           </TouchableScale>)}
 
         {/* Module 2: Logs */}
-        {tabVisibility.logs && (<TouchableScale style={styles.dashboardModuleCard} onPress={() => setActiveTab('logs')}>
+        {tabVisibility.logs && (<TouchableScale style={styles.dashboardModuleCard} onPress={() => switchActiveTab('logs')}>
             <View style={styles.dashboardModuleHeader}>
               <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                 <TerminalIcon color="#0D9488" size={18}/>
@@ -1928,7 +1956,7 @@ const NetworkInspector = ({ enabled = true, }) => {
           </TouchableScale>)}
 
         {/* Module 3: Analytics */}
-        {tabVisibility.analytics && (<TouchableScale style={styles.dashboardModuleCard} onPress={() => setActiveTab('analytics')}>
+        {tabVisibility.analytics && (<TouchableScale style={styles.dashboardModuleCard} onPress={() => switchActiveTab('analytics')}>
             <View style={styles.dashboardModuleHeader}>
               <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                 <AnalyticsIcon color="#EA580C" size={18}/>
@@ -1965,7 +1993,7 @@ const NetworkInspector = ({ enabled = true, }) => {
           </TouchableScale>)}
 
         {/* Module 4: WebView */}
-        {tabVisibility.webview && (<TouchableScale style={styles.dashboardModuleCard} onPress={() => setActiveTab('webview')}>
+        {tabVisibility.webview && (<TouchableScale style={styles.dashboardModuleCard} onPress={() => switchActiveTab('webview')}>
             <View style={styles.dashboardModuleHeader}>
               <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                 <GlobeIcon color="#2563EB" size={18}/>
@@ -1998,7 +2026,7 @@ const NetworkInspector = ({ enabled = true, }) => {
           </TouchableScale>)}
 
         {/* Module 5: Redux Store */}
-        {tabVisibility.redux && (<TouchableScale style={styles.dashboardModuleCard} onPress={() => setActiveTab('redux')}>
+        {tabVisibility.redux && (<TouchableScale style={styles.dashboardModuleCard} onPress={() => switchActiveTab('redux')}>
             <View style={styles.dashboardModuleHeader}>
               <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                 <TerminalIcon color={AppColors.purple} size={18}/>
@@ -2149,7 +2177,10 @@ const NetworkInspector = ({ enabled = true, }) => {
                 borderWidth: 1,
                 borderColor: AppColors.dividerColor,
             }}>
-          <TouchableOpacity onPress={() => setReduxActiveSubTab('timeline')} style={{
+          <TouchableOpacity onPress={() => {
+                animateNextLayout();
+                setReduxActiveSubTab('timeline');
+            }} style={{
                 flex: 1,
                 paddingVertical: 6,
                 alignItems: 'center',
@@ -2169,7 +2200,10 @@ const NetworkInspector = ({ enabled = true, }) => {
               ⚡ Action Timeline
             </Text>
           </TouchableOpacity>
-          <TouchableOpacity onPress={() => setReduxActiveSubTab('tree')} style={{
+          <TouchableOpacity onPress={() => {
+                animateNextLayout();
+                setReduxActiveSubTab('tree');
+            }} style={{
                 flex: 1,
                 paddingVertical: 6,
                 alignItems: 'center',
@@ -2265,6 +2299,7 @@ const NetworkInspector = ({ enabled = true, }) => {
             ]}>
                       <TouchableScale onPress={() => {
                 requestAnimationFrame(() => {
+                    animateNextLayout();
                     setSelected(null);
                     setSelectedEvent(null);
                 });
@@ -2482,7 +2517,7 @@ const NetworkInspector = ({ enabled = true, }) => {
                         consoleLogs.length > lastReadLogsCount;
                     return (<TouchableScale key={tab.key} onPress={() => {
                             requestAnimationFrame(() => {
-                                setActiveTab(tab.key);
+                                switchActiveTab(tab.key);
                             });
                         }} style={[
                             styles.contentTabButton,
@@ -2581,7 +2616,10 @@ const NetworkInspector = ({ enabled = true, }) => {
                         shadowOffset: { width: 0, height: 1 },
                         elevation: 2,
                     },
-                ]} onPress={() => setAnalyticsSubTab('ga_events')}>
+                ]} onPress={() => {
+                    animateNextLayout();
+                    setAnalyticsSubTab('ga_events');
+                }}>
                           <Text style={[
                     {
                         fontFamily: AppFonts.interMedium,
@@ -2615,7 +2653,10 @@ const NetworkInspector = ({ enabled = true, }) => {
                         shadowOffset: { width: 0, height: 1 },
                         elevation: 2,
                     },
-                ]} onPress={() => setAnalyticsSubTab('top_events')}>
+                ]} onPress={() => {
+                    animateNextLayout();
+                    setAnalyticsSubTab('top_events');
+                }}>
                           <Text style={[
                     {
                         fontFamily: AppFonts.interMedium,
@@ -2638,10 +2679,10 @@ const NetworkInspector = ({ enabled = true, }) => {
                     </ScrollView>) : activeTab === 'analytics' ? (selectedEvent != null ? (<AnalyticsDetail event={selectedEvent}/>) : analyticsSubTab === 'top_events' ? (<FlatList data={topEventsArray} keyExtractor={item => item[0]} contentContainerStyle={[
                     styles.listContent,
                     { paddingHorizontal: 16, paddingTop: 16 },
-                ]} renderItem={({ item: [name, count] }) => {
+                ]} renderItem={({ item: [name, count], index }) => {
                     const maxCount = topEventsArray[0]?.[1] || 1;
                     const color = getEventColor(name);
-                    return (<View style={[
+                    return (<AnimatedEntrance index={index} distance={8} style={[
                             styles.analyticsTopEventsCard,
                             { marginBottom: 12, paddingVertical: 16 },
                         ]}>
@@ -2677,7 +2718,7 @@ const NetworkInspector = ({ enabled = true, }) => {
                                   {count}
                                 </Text>
                               </View>
-                            </View>);
+                            </AnimatedEntrance>);
                 }} ListEmptyComponent={<View style={styles.emptyContainer}>
                             <View style={styles.emptyIconWrap}>
                               <EmptyRadarIcon color={AppColors.purple} size={32}/>
@@ -2694,7 +2735,11 @@ const NetworkInspector = ({ enabled = true, }) => {
                         ? Math.floor(next.timestamp / 60000)
                         : -1;
                     const showTimestamp = index === 0 || thisMin !== nextMin;
-                    return (<AnalyticsEventCard event={item} onPress={() => setSelectedEvent(item)} isNew={newEventIds.has(item.id)} searchStr={analyticsSearch} isFirst={index === 0} isLast={index === filteredAnalyticsEvents.length - 1} msSincePrev={msSincePrev} showTimestamp={showTimestamp} computedScreenName={(() => {
+                    return (<AnimatedEntrance index={index} distance={8}>
+                              <AnalyticsEventCard event={item} onPress={() => {
+                            animateNextLayout();
+                            setSelectedEvent(item);
+                        }} isNew={newEventIds.has(item.id)} searchStr={analyticsSearch} isFirst={index === 0} isLast={index === filteredAnalyticsEvents.length - 1} msSincePrev={msSincePrev} showTimestamp={showTimestamp} computedScreenName={(() => {
                             let screenName = item.screenName ||
                                 item.screenClass ||
                                 item.pageTitle ||
@@ -2712,7 +2757,8 @@ const NetworkInspector = ({ enabled = true, }) => {
                                 }
                             }
                             return screenName;
-                        })()}/>);
+                        })()}/>
+                            </AnimatedEntrance>);
                 }} initialNumToRender={20} maxToRenderPerBatch={20} windowSize={5} removeClippedSubviews ListEmptyComponent={<View style={styles.emptyContainer}>
                             <View style={styles.emptyIconWrap}>
                               <EmptyRadarIcon color={AppColors.purple} size={32}/>
@@ -3143,7 +3189,9 @@ const NetworkInspector = ({ enabled = true, }) => {
                                 {filtered}/{total}) logs is showing
                               </Text>);
                     }
-                })()} renderItem={({ item }) => (<ConsoleLogCard item={item} searchStr={logSearch}/>)} initialNumToRender={15} maxToRenderPerBatch={15} windowSize={7} removeClippedSubviews={true} ListEmptyComponent={<EmptyState isSearch={logSearch.length > 0 || logFilters.size > 0}/>} contentContainerStyle={[
+                })()} renderItem={({ item, index }) => (<AnimatedEntrance index={index} distance={8}>
+                            <ConsoleLogCard item={item} searchStr={logSearch}/>
+                          </AnimatedEntrance>)} initialNumToRender={15} maxToRenderPerBatch={15} windowSize={7} removeClippedSubviews={true} ListEmptyComponent={<EmptyState isSearch={logSearch.length > 0 || logFilters.size > 0}/>} contentContainerStyle={[
                     styles.listContent,
                     filteredConsoleLogs.length === 0 && { flexGrow: 1 },
                 ]} keyboardShouldPersistTaps="handled"/>
@@ -3263,7 +3311,10 @@ const NetworkInspector = ({ enabled = true, }) => {
                         backgroundColor: AppColors.purple,
                         borderColor: AppColors.purple,
                     },
-                ]} onPress={() => setWebViewSubTab('preview')}>
+                ]} onPress={() => {
+                    animateNextLayout();
+                    setWebViewSubTab('preview');
+                }}>
                               <EyeIcon color={webViewSubTab === 'preview'
                     ? '#FFFFFF'
                     : AppColors.grayTextWeak} size={13}/>
@@ -3297,7 +3348,10 @@ const NetworkInspector = ({ enabled = true, }) => {
                         backgroundColor: AppColors.purple,
                         borderColor: AppColors.purple,
                     },
-                ]} onPress={() => setWebViewSubTab('html')}>
+                ]} onPress={() => {
+                    animateNextLayout();
+                    setWebViewSubTab('html');
+                }}>
                               <HtmlIcon color={webViewSubTab === 'html'
                     ? '#FFFFFF'
                     : AppColors.grayTextWeak} size={13}/>
@@ -3331,7 +3385,10 @@ const NetworkInspector = ({ enabled = true, }) => {
                         backgroundColor: AppColors.purple,
                         borderColor: AppColors.purple,
                     },
-                ]} onPress={() => setWebViewSubTab('navigation')}>
+                ]} onPress={() => {
+                    animateNextLayout();
+                    setWebViewSubTab('navigation');
+                }}>
                               <ClockIcon color={webViewSubTab === 'navigation'
                     ? '#FFFFFF'
                     : AppColors.grayTextWeak} size={13}/>
@@ -3365,7 +3422,10 @@ const NetworkInspector = ({ enabled = true, }) => {
                         backgroundColor: AppColors.purple,
                         borderColor: AppColors.purple,
                     },
-                ]} onPress={() => setWebViewSubTab('console')}>
+                ]} onPress={() => {
+                    animateNextLayout();
+                    setWebViewSubTab('console');
+                }}>
                               <TerminalIcon color={webViewSubTab === 'console'
                     ? '#FFFFFF'
                     : AppColors.grayTextWeak} size={13}/>
@@ -3454,7 +3514,10 @@ const NetworkInspector = ({ enabled = true, }) => {
                                 : tab === 'css'
                                     ? '#2563EB' // Blue
                                     : '#D97706'; // Dark Yellow/Amber
-                            return (<Pressable key={tab} onPress={() => setHtmlSubTab(tab)} style={{
+                            return (<Pressable key={tab} onPress={() => {
+                                    animateNextLayout();
+                                    setHtmlSubTab(tab);
+                                }} style={{
                                     paddingVertical: 8,
                                     paddingHorizontal: 4,
                                     borderBottomWidth: 2,
@@ -3549,7 +3612,7 @@ const NetworkInspector = ({ enabled = true, }) => {
                             const d = new Date(ts);
                             return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`;
                         };
-                        return (<View style={{
+                        return (<AnimatedEntrance index={index} distance={8} style={{
                                 marginHorizontal: 16,
                                 marginVertical: 6,
                                 borderRadius: 12,
@@ -3642,7 +3705,7 @@ const NetworkInspector = ({ enabled = true, }) => {
                                     </View>
                                   </View>
                                   <CopyButton value={item.url} label="URL"/>
-                                </View>);
+                                </AnimatedEntrance>);
                     }} initialNumToRender={15} maxToRenderPerBatch={15} windowSize={7} removeClippedSubviews={true} ListEmptyComponent={<EmptyState isSearch={webViewSearch.length > 0}/>} contentContainerStyle={[
                         styles.listContent,
                         filteredNavHistory.length === 0 && {
@@ -3687,7 +3750,7 @@ const NetworkInspector = ({ enabled = true, }) => {
                                     : AppColors.primaryLight;
                             const d = new Date(item.timestamp);
                             const timeStr = `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`;
-                            return (<View style={{
+                            return (<AnimatedEntrance index={item.id} distance={8} style={{
                                     marginHorizontal: 12,
                                     marginVertical: 3,
                                     borderRadius: 8,
@@ -3736,7 +3799,7 @@ const NetworkInspector = ({ enabled = true, }) => {
                                           {item.message}
                                         </Text>
                                       </View>
-                                    </View>);
+                                    </AnimatedEntrance>);
                         }} initialNumToRender={20} maxToRenderPerBatch={20} windowSize={7} contentContainerStyle={[
                             styles.listContent,
                             webViewLogs.length === 0 && { flexGrow: 1 },
@@ -4011,7 +4074,10 @@ const NetworkInspector = ({ enabled = true, }) => {
                             return <RequestIcon color={iconColor}/>;
                         return <ResponseIcon color={iconColor}/>;
                     };
-                    return (<TouchableOpacity key={tab} onPress={() => setApiDetailActiveTab(tab)} style={{
+                    return (<TouchableOpacity key={tab} onPress={() => {
+                            animateNextLayout();
+                            setApiDetailActiveTab(tab);
+                        }} style={{
                             flex: 1,
                             paddingVertical: 6,
                             flexDirection: 'row',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-inapp-inspector",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "description": "A self-contained network, console, analytics, and webview inspector for React Native applications.",
   "repository": {
     "type": "git",
@@ -30,7 +30,8 @@
   "scripts": {
     "build": "tsc && tsc -p tsconfig.esm.json",
     "watch": "tsc -w",
-    "prepack": "npm run build"
+    "prepack": "npm run build",
+    "publish": "node scripts/publish.js"
   },
   "keywords": [
     "react-native",