react-native-inapp-inspector 2.3.16 → 2.3.18

package/dist/commonjs/native/NativeInspector.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.fetchNativeCachedPage = exports.pushNativeLogRecord = exports.getNativeSystemMetrics = exports.triggerNativeHaptic = exports.setNativeStorageItem = exports.getNativeStorageItem = exports.subscribeNativeDeviceShake = exports.getNativeFpsMetrics = exports.stopNativeFpsMonitoring = exports.startNativeFpsMonitoring = exports.subscribeNativeFloatingButtonPress = exports.setNativeFloatingButtonBadge = exports.hideNativeFloatingButton = exports.showNativeFloatingButton = exports.subscribeNativeCrashes = exports.enableNativeCrashProtection = exports.getNativeDeviceMetrics = exports.isNativeModuleAvailable = void 0;
+exports.clearAllCapturedMediaFiles = exports.deleteCapturedMediaFile = exports.fetchCapturedMediaList = exports.convertNativeVideoToGif = exports.isNativeRecordingActive = exports.stopNativeVideoRecording = exports.startNativeVideoRecording = exports.takeNativeScreenshot = exports.fetchNativeCachedPage = exports.pushNativeLogRecord = exports.getNativeSystemMetrics = exports.triggerNativeHaptic = exports.setNativeStorageItem = exports.getNativeStorageItem = exports.subscribeNativeDeviceShake = exports.getNativeFpsMetrics = exports.stopNativeFpsMonitoring = exports.startNativeFpsMonitoring = exports.subscribeNativeFloatingButtonPress = exports.setNativeFloatingButtonBadge = exports.hideNativeFloatingButton = exports.showNativeFloatingButton = exports.subscribeNativeCrashes = exports.enableNativeCrashProtection = exports.getNativeDeviceMetrics = exports.isNativeModuleAvailable = void 0;
 const react_native_1 = require("react-native");
 const NativeNetworkInspector_1 = __importDefault(require("./NativeNetworkInspector"));
 const NativeModule = NativeNetworkInspector_1.default || react_native_1.NativeModules.NetworkInspectorModule;
@@ -40,7 +40,7 @@ const enableNativeCrashProtection = async (options) => {
     }
     try {
         const result = await NativeModule.enableNativeCrashProtection();
-        if (options?.showFloatingButton !== false) {
+        if (options?.showFloatingButton === true) {
             await (0, exports.showNativeFloatingButton)();
         }
         return !!result;
@@ -293,3 +293,110 @@ const fetchNativeCachedPage = async (pageKey, offset = 0, limit = 50, query = ''
     }
 };
 exports.fetchNativeCachedPage = fetchNativeCachedPage;
+const takeNativeScreenshot = async (options) => {
+    if (!NativeModule || !NativeModule.takeScreenshot) {
+        return null;
+    }
+    try {
+        const result = await NativeModule.takeScreenshot(options || {});
+        return result;
+    }
+    catch {
+        return null;
+    }
+};
+exports.takeNativeScreenshot = takeNativeScreenshot;
+const startNativeVideoRecording = async (options) => {
+    if (!NativeModule || !NativeModule.startVideoRecording) {
+        return false;
+    }
+    try {
+        const result = await NativeModule.startVideoRecording(options || {});
+        return !!result;
+    }
+    catch {
+        return false;
+    }
+};
+exports.startNativeVideoRecording = startNativeVideoRecording;
+const stopNativeVideoRecording = async () => {
+    if (!NativeModule || !NativeModule.stopVideoRecording) {
+        return null;
+    }
+    try {
+        const result = await NativeModule.stopVideoRecording();
+        return result;
+    }
+    catch {
+        return null;
+    }
+};
+exports.stopNativeVideoRecording = stopNativeVideoRecording;
+const isNativeRecordingActive = async () => {
+    if (!NativeModule || !NativeModule.isRecording) {
+        return false;
+    }
+    try {
+        const result = await NativeModule.isRecording();
+        return !!result;
+    }
+    catch {
+        return false;
+    }
+};
+exports.isNativeRecordingActive = isNativeRecordingActive;
+const convertNativeVideoToGif = async (videoUri, options) => {
+    if (!NativeModule || !NativeModule.convertToGif) {
+        return null;
+    }
+    try {
+        const result = await NativeModule.convertToGif(videoUri, options || {});
+        return result;
+    }
+    catch {
+        return null;
+    }
+};
+exports.convertNativeVideoToGif = convertNativeVideoToGif;
+const fetchCapturedMediaList = async () => {
+    if (!NativeModule || !NativeModule.getCapturedMedia) {
+        return [];
+    }
+    try {
+        const jsonStr = await NativeModule.getCapturedMedia();
+        if (!jsonStr)
+            return [];
+        const parsed = JSON.parse(jsonStr);
+        return Array.isArray(parsed) ? parsed : [];
+    }
+    catch {
+        return [];
+    }
+};
+exports.fetchCapturedMediaList = fetchCapturedMediaList;
+const deleteCapturedMediaFile = async (uri) => {
+    if (!NativeModule || !NativeModule.deleteCapturedMedia) {
+        return false;
+    }
+    try {
+        const result = await NativeModule.deleteCapturedMedia(uri);
+        return !!result;
+    }
+    catch {
+        return false;
+    }
+};
+exports.deleteCapturedMediaFile = deleteCapturedMediaFile;
+const clearAllCapturedMediaFiles = async () => {
+    if (!NativeModule || !NativeModule.clearAllCapturedMedia) {
+        return false;
+    }
+    try {
+        const result = await NativeModule.clearAllCapturedMedia();
+        return !!result;
+    }
+    catch {
+        return false;
+    }
+};
+exports.clearAllCapturedMediaFiles = clearAllCapturedMediaFiles;

package/dist/commonjs/native/NativeNetworkInspector.d.ts

@@ -15,6 +15,14 @@ export interface Spec extends TurboModule {
     getNativeSystemMetrics(): Promise<Object>;
     pushNativeLogRecord(pageKey: string, jsonPayload: string): Promise<boolean>;
     checkFloatingButtonPress(): Promise<boolean>;
+    takeScreenshot(options: Object): Promise<Object>;
+    startVideoRecording(options: Object): Promise<boolean>;
+    stopVideoRecording(): Promise<Object>;
+    isRecording(): Promise<boolean>;
+    convertToGif(videoUri: string, options: Object): Promise<Object>;
+    getCapturedMedia(): Promise<string>;
+    deleteCapturedMedia(uri: string): Promise<boolean>;
+    clearAllCapturedMedia(): Promise<boolean>;
     addListener(eventName: string): void;
     removeListeners(count: number): void;
 }

package/dist/commonjs/styles/AppColors.d.ts

@@ -168,6 +168,24 @@ declare const LightColors: {
     skySoftBg: string;
     skySoftBorder: string;
     skySoftText: string;
+    warningAmber: string;
+    npmRedLight: string;
+    red300: string;
+    overlayDark: string;
+    headerGlassDark: string;
+    badgeGlassDark: string;
+    borderGlassLight: string;
+    borderGlassMedium: string;
+    whiteAlpha06: string;
+    whiteAlpha08: string;
+    whiteAlpha10: string;
+    whiteAlpha12: string;
+    whiteAlpha15: string;
+    whiteAlpha20: string;
+    whiteAlpha24: string;
+    whiteAlpha30: string;
+    whiteAlpha33: string;
+    whiteAlpha60: string;
     domainColors: string[];
 };
 export declare const getThemeColors: (isDark: boolean) => {
@@ -340,6 +358,24 @@ export declare const getThemeColors: (isDark: boolean) => {
     skySoftBg: string;
     skySoftBorder: string;
     skySoftText: string;
+    warningAmber: string;
+    npmRedLight: string;
+    red300: string;
+    overlayDark: string;
+    headerGlassDark: string;
+    badgeGlassDark: string;
+    borderGlassLight: string;
+    borderGlassMedium: string;
+    whiteAlpha06: string;
+    whiteAlpha08: string;
+    whiteAlpha10: string;
+    whiteAlpha12: string;
+    whiteAlpha15: string;
+    whiteAlpha20: string;
+    whiteAlpha24: string;
+    whiteAlpha30: string;
+    whiteAlpha33: string;
+    whiteAlpha60: string;
     domainColors: string[];
 };
 export declare const AppColors: typeof LightColors;

package/dist/commonjs/styles/AppColors.js

@@ -171,6 +171,24 @@ const LightColors = {
     skySoftBg: '#E0F2FE',
     skySoftBorder: '#BAE6FD',
     skySoftText: '#0284C7',
+    warningAmber: '#F59E0B',
+    npmRedLight: '#FF6B6B',
+    red300: '#FCA5A5',
+    overlayDark: 'rgba(8, 12, 22, 0.95)',
+    headerGlassDark: 'rgba(15, 23, 42, 0.9)',
+    badgeGlassDark: 'rgba(15, 23, 42, 0.85)',
+    borderGlassLight: 'rgba(255, 255, 255, 0.08)',
+    borderGlassMedium: 'rgba(255, 255, 255, 0.15)',
+    whiteAlpha06: 'rgba(255, 255, 255, 0.06)',
+    whiteAlpha08: 'rgba(255, 255, 255, 0.08)',
+    whiteAlpha10: 'rgba(255, 255, 255, 0.1)',
+    whiteAlpha12: 'rgba(255, 255, 255, 0.12)',
+    whiteAlpha15: 'rgba(255, 255, 255, 0.15)',
+    whiteAlpha20: 'rgba(255, 255, 255, 0.2)',
+    whiteAlpha24: 'rgba(255, 255, 255, 0.24)',
+    whiteAlpha30: 'rgba(255, 255, 255, 0.3)',
+    whiteAlpha33: 'rgba(255, 255, 255, 0.33)',
+    whiteAlpha60: 'rgba(255, 255, 255, 0.6)',
     domainColors: [
         '#5C2D91',
         '#9B2677',
@@ -260,6 +278,24 @@ const DarkColors = {
     skySoftBg: '#082F4966',
     skySoftBorder: '#0284C788',
     skySoftText: '#38BDF8',
+    warningAmber: '#F59E0B',
+    npmRedLight: '#FF6B6B',
+    red300: '#FCA5A5',
+    overlayDark: 'rgba(8, 12, 22, 0.95)',
+    headerGlassDark: 'rgba(15, 23, 42, 0.9)',
+    badgeGlassDark: 'rgba(15, 23, 42, 0.85)',
+    borderGlassLight: 'rgba(255, 255, 255, 0.08)',
+    borderGlassMedium: 'rgba(255, 255, 255, 0.15)',
+    whiteAlpha06: 'rgba(255, 255, 255, 0.06)',
+    whiteAlpha08: 'rgba(255, 255, 255, 0.08)',
+    whiteAlpha10: 'rgba(255, 255, 255, 0.1)',
+    whiteAlpha12: 'rgba(255, 255, 255, 0.12)',
+    whiteAlpha15: 'rgba(255, 255, 255, 0.15)',
+    whiteAlpha20: 'rgba(255, 255, 255, 0.2)',
+    whiteAlpha24: 'rgba(255, 255, 255, 0.24)',
+    whiteAlpha30: 'rgba(255, 255, 255, 0.3)',
+    whiteAlpha33: 'rgba(255, 255, 255, 0.33)',
+    whiteAlpha60: 'rgba(255, 255, 255, 0.6)',
     green600: '#16A34A',
     green700: '#15803D',
     green800: '#166534',

package/dist/commonjs/styles/index.d.ts

@@ -61,7 +61,8 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
     headerDetailCenter: {
         alignItems: string;
         justifyContent: string;
-        width: string;
+        flex: number;
+        minWidth: number;
     };
     headerDetailRow: {
         flexDirection: string;
@@ -1464,6 +1465,7 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         borderTopLeftRadius: number;
         borderTopRightRadius: number;
         overflow: string;
+        flexShrink: number;
     };
     statusChip: {
         paddingHorizontal: number;

package/dist/commonjs/styles/index.js

@@ -96,7 +96,8 @@ const getRawStyles = (colors) => ({
     headerDetailCenter: {
         alignItems: 'center',
         justifyContent: 'center',
-        width: '100%',
+        flex: 1,
+        minWidth: 0,
     },
     headerDetailRow: {
         flexDirection: 'row',
@@ -1398,6 +1399,7 @@ const getRawStyles = (colors) => ({
         borderTopLeftRadius: 20,
         borderTopRightRadius: 20,
         overflow: 'hidden',
+        flexShrink: 0,
     },
     statusChip: {
         paddingHorizontal: 10,

package/dist/commonjs/types/enums.d.ts

@@ -67,6 +67,7 @@ export declare const SettingsSubTab: {
     readonly Module: "module";
     readonly Ui: "ui";
     readonly Limits: "limits";
+    readonly Capture: "capture";
     readonly About: "about";
 };
 export type SettingsSubTab = (typeof SettingsSubTab)[keyof typeof SettingsSubTab];

package/dist/commonjs/types/enums.js

@@ -63,6 +63,7 @@ exports.SettingsSubTab = {
     Module: 'module',
     Ui: 'ui',
     Limits: 'limits',
+    Capture: 'capture',
     About: 'about',
 };
 exports.LogFilter = {

package/dist/commonjs/types/index.d.ts

@@ -4,7 +4,7 @@ export * from './interfaces';
 export * from './enums';
 export type GroupedListItem = {
     type: 'header';
-    id: string;
+    id: string | number;
     pageName: string;
     color: string;
     stats: {
@@ -18,7 +18,7 @@ export type GroupedListItem = {
     isFirst: boolean;
 } | {
     type: 'log';
-    id: number;
+    id: string | number;
     log: NetworkLog;
     isLast: boolean;
     color: string;

package/dist/esm/capture.d.ts

@@ -0,0 +1,26 @@
+import { ScreenshotOptions, ScreenshotResult, RecordingOptions, RecordingResult, GifConversionOptions, CapturedMediaItem } from './native/NativeInspector';
+export type { ScreenshotOptions, ScreenshotResult, RecordingOptions, RecordingResult, GifConversionOptions, CapturedMediaItem, };
+export type ImageFormat = 'png' | 'jpeg' | 'webp';
+export type AudioSource = 'none' | 'app' | 'mic' | 'mixed';
+export type RecordingFormat = 'mp4' | 'gif';
+export declare const ScreenCapture: {
+    takeScreenshot: (options?: ScreenshotOptions) => Promise<ScreenshotResult | null>;
+    startRecording: (options?: RecordingOptions) => Promise<boolean>;
+    stopRecording: () => Promise<RecordingResult | null>;
+    isRecording: () => Promise<boolean>;
+    convertToGif: (videoUri: string, options?: GifConversionOptions) => Promise<RecordingResult | null>;
+    getMediaList: () => Promise<CapturedMediaItem[]>;
+    deleteMedia: (uri: string) => Promise<boolean>;
+    clearAllMedia: () => Promise<boolean>;
+};
+export declare const ScreenRecorder: {
+    takeScreenshot: (options?: ScreenshotOptions) => Promise<ScreenshotResult | null>;
+    startRecording: (options?: RecordingOptions) => Promise<boolean>;
+    stopRecording: () => Promise<RecordingResult | null>;
+    isRecording: () => Promise<boolean>;
+    convertToGif: (videoUri: string, options?: GifConversionOptions) => Promise<RecordingResult | null>;
+    getMediaList: () => Promise<CapturedMediaItem[]>;
+    deleteMedia: (uri: string) => Promise<boolean>;
+    clearAllMedia: () => Promise<boolean>;
+};
+export default ScreenCapture;

package/dist/esm/capture.js

@@ -0,0 +1,29 @@
+import { takeNativeScreenshot, startNativeVideoRecording, stopNativeVideoRecording, isNativeRecordingActive, convertNativeVideoToGif, fetchCapturedMediaList, deleteCapturedMediaFile, clearAllCapturedMediaFiles, } from './native/NativeInspector';
+export const ScreenCapture = {
+    takeScreenshot: async (options) => {
+        return takeNativeScreenshot(options);
+    },
+    startRecording: async (options) => {
+        return startNativeVideoRecording(options);
+    },
+    stopRecording: async () => {
+        return stopNativeVideoRecording();
+    },
+    isRecording: async () => {
+        return isNativeRecordingActive();
+    },
+    convertToGif: async (videoUri, options) => {
+        return convertNativeVideoToGif(videoUri, options);
+    },
+    getMediaList: async () => {
+        return fetchCapturedMediaList();
+    },
+    deleteMedia: async (uri) => {
+        return deleteCapturedMediaFile(uri);
+    },
+    clearAllMedia: async () => {
+        return clearAllCapturedMediaFiles();
+    },
+};
+export const ScreenRecorder = ScreenCapture;
+export default ScreenCapture;

package/dist/esm/components/AnalyticsEventCard.js

@@ -22,7 +22,7 @@ const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPre
             Animated.timing(flashOpacity, {
                 toValue: 0,
                 duration: 1200,
-                useNativeDriver: true,
+                useNativeDriver: false,
             }).start();
         }
     }, [isNew]);
@@ -52,16 +52,16 @@ const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPre
                 borderLeftColor: tagColors.text,
             },
         ]}>
-        <Animated.View style={[
-            StyleSheet.absoluteFill,
-            {
-                backgroundColor: color,
-                opacity: flashOpacity.interpolate({
-                    inputRange: [0, 1],
-                    outputRange: [0, 0.08],
-                }),
-            },
-        ]}/>
+        {isNew && (<Animated.View style={[
+                StyleSheet.absoluteFill,
+                {
+                    backgroundColor: color,
+                    opacity: flashOpacity.interpolate({
+                        inputRange: [0, 1],
+                        outputRange: [0, 0.08],
+                    }),
+                },
+            ]}/>)}
 
         
         <View style={cardStyles.cardHeader}>

package/dist/esm/components/AnimatedEntrance.js

@@ -1,40 +1,6 @@
-import React, { useEffect, useRef } from 'react';
-import { Animated, Platform, View } from 'react-native';
-const AnimatedEntrance = React.memo(function AnimatedEntrance({ children, delay = 0, distance = 10, duration = 220, index = 0, style, }) {
-    if (Platform.OS === 'android') {
-        return <View style={style}>{children}</View>;
-    }
-    const progress = useRef(new Animated.Value(0)).current;
-    const initialIndex = useRef(index).current;
-    useEffect(() => {
-        Animated.timing(progress, {
-            toValue: 1,
-            duration,
-            delay: delay + Math.min(initialIndex, 8) * 12,
-            useNativeDriver: true,
-        }).start();
-    }, []);
-    return (<Animated.View style={[
-            style,
-            {
-                opacity: progress,
-                transform: [
-                    {
-                        translateY: progress.interpolate({
-                            inputRange: [0, 1],
-                            outputRange: [distance, 0],
-                        }),
-                    },
-                    {
-                        scale: progress.interpolate({
-                            inputRange: [0, 1],
-                            outputRange: [0.985, 1],
-                        }),
-                    },
-                ],
-            },
-        ]}>
-      {children}
-    </Animated.View>);
+import React from 'react';
+import { View } from 'react-native';
+const AnimatedEntrance = React.memo(function AnimatedEntrance({ children, style, }) {
+    return <View style={style}>{children}</View>;
 });
 export default AnimatedEntrance;

package/dist/esm/components/DomainHeader.js

@@ -1,23 +1,11 @@
-import React, { useEffect, useRef } from 'react';
-import { Animated, Pressable, View, Text } from 'react-native';
+import React from 'react';
+import { Pressable, View, Text } from 'react-native';
 import { AppColors } from '../styles/AppColors';
 import { AppFonts } from '../styles/AppFonts';
 import { formatDateTime } from '../helpers';
 import { ChevronIcon, ScreenIcon, CheckIcon, FailIcon, ClockIcon, } from './NetworkIcons';
 import styles from '../styles';
 const DomainHeader = ({ pageName, color, stats, activeFilters, onToggleFilter, isCollapsed, onToggleCollapse, isFirst, timestamp, }) => {
-    const chevronAnim = useRef(new Animated.Value(isCollapsed ? 0 : 1)).current;
-    useEffect(() => {
-        Animated.timing(chevronAnim, {
-            toValue: isCollapsed ? 0 : 1,
-            duration: 220,
-            useNativeDriver: true,
-        }).start();
-    }, [isCollapsed]);
-    const chevronRotate = chevronAnim.interpolate({
-        inputRange: [0, 1],
-        outputRange: ['-90deg', '0deg'],
-    });
     const visibleStats = ['success', 'failed', 'loading'];
     const total = stats.success + stats.failed + stats.loading;
     const pctSuccess = total > 0 ? Math.round((stats.success / total) * 100) : 0;
@@ -29,9 +17,9 @@ const DomainHeader = ({ pageName, color, stats, activeFilters, onToggleFilter, i
         ]} onPress={() => onToggleCollapse(pageName)}>
       <View style={styles.domainHeaderTopRow}>
         <View style={styles.domainHeaderLeft}>
-          <Animated.View style={{ transform: [{ rotate: chevronRotate }], flexShrink: 0 }}>
+          <View style={{ transform: [{ rotate: isCollapsed ? '-90deg' : '0deg' }], flexShrink: 0 }}>
             <ChevronIcon color={AppColors.grayTextWeak} size={13}/>
-          </Animated.View>
+          </View>
           <View style={[styles.domainIconWrap, { backgroundColor: `${color}18`, flexShrink: 0 }]}>
             <ScreenIcon color={color} size={14}/>
           </View>

package/dist/esm/components/EmptyState.js

@@ -12,12 +12,12 @@ const EmptyState = React.memo(function EmptyState({ isSearch, searchQuery, custo
             Animated.timing(iconPulse, {
                 toValue: 1.06,
                 duration: 900,
-                useNativeDriver: true,
+                useNativeDriver: false,
             }),
             Animated.timing(iconPulse, {
                 toValue: 1,
                 duration: 900,
-                useNativeDriver: true,
+                useNativeDriver: false,
             }),
         ]));
         loop.start();

package/dist/esm/components/HeadersSection.js

@@ -1,6 +1,6 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from '../i18n';
-import { View, Pressable, Text, Animated } from 'react-native';
+import { View, Pressable, Text } from 'react-native';
 import CopyButton from './CopyButton';
 import TouchableScale from './TouchableScale';
 import { copyToClipboard } from '../helpers';
@@ -11,27 +11,7 @@ import styles from '../styles';
 const HeaderRow = React.memo(function HeaderRow({ headerKey, value, isLast, index, }) {
     const [expanded, setExpanded] = useState(false);
     const isLong = value.length > 35;
-    const entryAnim = useRef(new Animated.Value(0)).current;
-    useEffect(() => {
-        Animated.timing(entryAnim, {
-            toValue: 1,
-            duration: 220,
-            delay: index * 30,
-            useNativeDriver: true,
-        }).start();
-    }, []);
-    const rowAnimStyle = {
-        opacity: entryAnim,
-        transform: [
-            {
-                translateY: entryAnim.interpolate({
-                    inputRange: [0, 1],
-                    outputRange: [8, 0],
-                }),
-            },
-        ],
-    };
-    return (<Animated.View style={[styles.htRow, !isLast && styles.htRowBorder, rowAnimStyle]}>
+    return (<View style={[styles.htRow, !isLast && styles.htRowBorder]}>
       <View style={styles.htKeyCell}>
         <Text style={styles.htKey} numberOfLines={2}>
           {headerKey}
@@ -52,11 +32,11 @@ const HeaderRow = React.memo(function HeaderRow({ headerKey, value, isLast, inde
       <TouchableScale onPress={() => copyToClipboard(value, headerKey)} hitSlop={8} style={styles.htCopyBtn}>
         <CopyIcon color={AppColors.grayTextWeak} size={14}/>
       </TouchableScale>
-    </Animated.View>);
+    </View>);
 });
 const HeadersSection = ({ title, headers, search, resetKey, }) => {
     const { t } = useTranslation();
-    const { toggleOpen, forceOpen, chevronStyle, bodyStyle } = useAccordion(false, 2400, 300);
+    const { isOpen, toggleOpen, forceOpen, chevronStyle } = useAccordion(false);
     useEffect(() => {
         forceOpen(false);
     }, [resetKey]);
@@ -93,23 +73,23 @@ const HeadersSection = ({ title, headers, search, resetKey, }) => {
           <View style={styles.htHeaderSpacer}/>
           <CopyButton value={headers} label={title}/>
           <View style={styles.htChevronBtn}>
-            <Animated.View style={chevronStyle}>
+            <View style={chevronStyle}>
               <ChevronIcon color={AppColors.grayTextStrong} size={14}/>
-            </Animated.View>
+            </View>
           </View>
         </View>
       </Pressable>
 
-      <Animated.View style={bodyStyle}>
-        <View style={styles.htColHeadRow}>
-          <Text style={[styles.htColHead, { width: '30%' }]}>{t('network.jsonViewer.key')}</Text>
-          <Text style={[styles.htColHead, { flex: 1 }]}>{t('network.jsonViewer.value')}</Text>
-        </View>
+      {isOpen && (<View>
+          <View style={styles.htColHeadRow}>
+            <Text style={[styles.htColHead, { width: '30%' }]}>{t('network.jsonViewer.key')}</Text>
+            <Text style={[styles.htColHead, { flex: 1 }]}>{t('network.jsonViewer.value')}</Text>
+          </View>
 
-        {filtered.length > 0 ? (filtered.map(([k, v], i) => (<HeaderRow key={k} headerKey={k} value={v} isLast={i === filtered.length - 1} index={i}/>))) : (<View style={styles.htEmpty}>
-            <Text style={styles.htEmptyText}>{t('network.noMatchingHeaders')}</Text>
-          </View>)}
-      </Animated.View>
+          {filtered.length > 0 ? (filtered.map(([k, v], i) => (<HeaderRow key={k} headerKey={k} value={v} isLast={i === filtered.length - 1} index={i}/>))) : (<View style={styles.htEmpty}>
+              <Text style={styles.htEmptyText}>{t('network.noMatchingHeaders')}</Text>
+            </View>)}
+        </View>)}
     </View>);
 };
 export default HeadersSection;

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useState, useMemo, useEffect, useRef } from 'react';
-import { FlatList, Pressable, Text, TextInput, TouchableOpacity, View, } from 'react-native';
+import { FlatList, Platform, Pressable, Text, TextInput, TouchableOpacity, View, } from 'react-native';
 import { animateNextLayout, useInspector } from './InspectorContext';
 import AnalyticsEventCard from '../AnalyticsEventCard';
 import AnalyticsFilterModal from './AnalyticsFilterModal';
@@ -810,7 +810,6 @@ const AnalyticsTab = React.memo(() => {
             : -1;
         const showTimestamp = index === 0 || thisMin !== nextMin;
         return (<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={(() => {
                 if (!item)
@@ -924,7 +923,7 @@ const AnalyticsTab = React.memo(() => {
 
       <View style={{ flex: 1 }} onLayout={() => setIsAnalyticsLayoutReady(true)}>
         {isAnalyticsLayoutReady ? (<>
-            <FlatList ref={listRef} data={filteredAnalyticsEvents} keyExtractor={keyExtractor} ListHeaderComponent={AnalyticsHeader} renderItem={renderItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState isSearch={analyticsSearch.length > 0} searchQuery={analyticsSearch} customTitle={analyticsSearch.length > 0
+            <FlatList ref={listRef} data={filteredAnalyticsEvents} keyExtractor={keyExtractor} ListHeaderComponent={AnalyticsHeader} renderItem={renderItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={Platform.OS === 'android'} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState isSearch={analyticsSearch.length > 0} searchQuery={analyticsSearch} customTitle={analyticsSearch.length > 0
                     ? 'No matching analytics events'
                     : 'No analytics events yet'} customSub={analyticsSearch.length > 0
                     ? `No events matched "${analyticsSearch}"`

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo, useRef } from 'react';
-import { FlatList, Pressable, ScrollView, Text, TextInput, View, } from 'react-native';
+import { FlatList, Platform, Pressable, ScrollView, Text, TextInput, View, } from 'react-native';
 import { useInspector } from './InspectorContext';
 import { useTranslation } from '../../i18n';
 import TouchableScale from '../TouchableScale';
@@ -490,7 +490,7 @@ const ConsoleTab = React.memo(() => {
         </ScrollView>
       </View>
 
-      <FlatList ref={listRef} data={filteredConsoleLogs} keyExtractor={keyExtractor} ListHeaderComponent={listHeader} renderItem={renderItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState isSearch={logSearch.length > 0 || !logFilters.has('all')} searchQuery={logSearch} customTitle={logSearch.length > 0
+      <FlatList ref={listRef} data={filteredConsoleLogs} keyExtractor={keyExtractor} ListHeaderComponent={listHeader} renderItem={renderItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={Platform.OS === 'android'} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState isSearch={logSearch.length > 0 || !logFilters.has('all')} searchQuery={logSearch} customTitle={logSearch.length > 0
                 ? 'No matching console logs'
                 : 'No console logs'} onClearSearch={() => {
                 setLogSearch('');