react-native-inapp-inspector 2.3.18 → 2.3.19

package/src/components/Inspector/TabBar.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, {useRef, useState} from 'react';
 import {
-  Animated,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
   Platform,
   ScrollView,
   Text,
@@ -23,11 +24,12 @@ import {
   SmartphoneIcon,
   DatabaseIcon,
   QrCodeIcon,
+  ScreencastIcon,
+  ChevronIcon,
 } from '../NetworkIcons';
 
 import {isReduxConnected} from '../../customHooks/reduxLogger';
 import {isAnalyticsConnected} from '../../customHooks/analyticsLogger';
-import {triggerNativeHaptic} from '../../native/NativeInspector';
 import {isLocalDebugEnvironment} from '../../helpers';
 
 const TabBar = React.memo(() => {
@@ -42,18 +44,85 @@ const TabBar = React.memo(() => {
     lastReadApisCount,
     lastReadLogsCount,
     lastReadCrashesCount,
-    unreadPulseAnim,
+    mediaCount,
   } = useInspector();
 
   const isReduxAvail = isReduxConnected();
   const isAnalyticsAvail = isAnalyticsConnected();
 
+  const isMediaActive = activeTab === 'media';
+  const showMediaTab = (tabVisibility?.media ?? true) && mediaCount > 0;
+
+  const scrollViewRef = useRef<ScrollView>(null);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(true);
+  const scrollOffsetRef = useRef(0);
+
+  const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const {contentOffset, layoutMeasurement, contentSize} = event.nativeEvent;
+    const x = contentOffset.x;
+    scrollOffsetRef.current = x;
+    const hasLeft = x > 8;
+    const hasRight = x < contentSize.width - layoutMeasurement.width - 8;
+    if (canScrollLeft !== hasLeft) setCanScrollLeft(hasLeft);
+    if (canScrollRight !== hasRight) setCanScrollRight(hasRight);
+  };
+
+  const scrollTabs = (offset: number) => {
+    scrollViewRef.current?.scrollTo({
+      x: Math.max(0, scrollOffsetRef.current + offset),
+      animated: true,
+    });
+  };
+
   return (
-    <View style={styles.tabBarContainer}>
+    <View
+      style={[
+        styles.tabBarContainer,
+        {
+          flexDirection: 'row',
+          alignItems: 'center',
+          paddingHorizontal: 0,
+        },
+      ]}>
+      {/* Scroll Left Arrow Icon — Initially hidden until scrolled */}
+      {canScrollLeft && (
+        <TouchableOpacity
+          onPress={() => scrollTabs(-160)}
+          hitSlop={{top: 6, bottom: 6, left: 6, right: 6}}
+          activeOpacity={0.7}
+          style={{
+            paddingLeft: 6,
+            paddingRight: 2,
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}>
+          <View
+            style={{
+              width: 22,
+              height: 22,
+              borderRadius: 11,
+              backgroundColor: '#E5E7EB',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}>
+            <ChevronIcon direction="left" size={13} color={AppColors.purple} />
+          </View>
+        </TouchableOpacity>
+      )}
+
+      {/* Scrollable Main Tabs (#1 - #10) */}
       <ScrollView
+        ref={scrollViewRef}
         horizontal
         showsHorizontalScrollIndicator={false}
-        contentContainerStyle={{paddingRight: 16}}>
+        onScroll={handleScroll}
+        scrollEventThrottle={16}
+        style={{flex: 1}}
+        contentContainerStyle={{
+          paddingLeft: canScrollLeft ? 4 : 12,
+          paddingRight: showMediaTab ? 6 : 12,
+        }}>
         {(
           [
             {
@@ -256,6 +325,105 @@ const TabBar = React.memo(() => {
             );
           })}
       </ScrollView>
+
+      {/* Scroll Right Arrow Icon */}
+      {canScrollRight && (
+        <TouchableOpacity
+          onPress={() => scrollTabs(160)}
+          hitSlop={{top: 6, bottom: 6, left: 6, right: 6}}
+          activeOpacity={0.7}
+          style={{
+            paddingLeft: 2,
+            paddingRight: showMediaTab ? 4 : 8,
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}>
+          <View
+            style={{
+              width: 22,
+              height: 22,
+              borderRadius: 11,
+              backgroundColor: '#E5E7EB',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}>
+            <ChevronIcon direction="right" size={13} color={AppColors.purple} />
+          </View>
+        </TouchableOpacity>
+      )}
+
+      {/* Sticky Right Screencast Tab — Visible only when mediaCount > 0 */}
+      {showMediaTab && (
+        <View
+          style={{
+            paddingLeft: 6,
+            paddingRight: 10,
+            borderLeftWidth: 1,
+            borderLeftColor: '#E5E7EB',
+            backgroundColor: '#ffffff',
+            justifyContent: 'center',
+            shadowColor: '#000000',
+            shadowOffset: {width: -3, height: 0},
+            shadowOpacity: 0.12,
+            shadowRadius: 4,
+            elevation: 4,
+            zIndex: 10,
+          }}>
+          <TouchableScale
+            key="media"
+            onPress={() => {
+              switchActiveTab('media');
+            }}
+            accessibilityRole="button"
+            accessibilityLabel="Media Gallery"
+            style={[
+              styles.contentTabButton,
+              {
+                marginRight: 0,
+                borderRadius: 8,
+                backgroundColor: isMediaActive ? AppColors.purple : '#eeeeee',
+                borderColor: isMediaActive ? AppColors.purple : '#E5E7EB',
+                borderWidth: 1,
+                paddingHorizontal: 10,
+                paddingVertical: 7,
+                alignItems: 'center',
+                justifyContent: 'center',
+              },
+              isMediaActive && styles.contentTabButtonActive,
+            ]}>
+            <View
+              style={{
+                position: 'relative',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}>
+              <ScreencastIcon
+                color={isMediaActive ? AppColors.white : AppColors.grayText}
+                size={15}
+              />
+              {mediaCount > 0 && (
+                <View
+                  style={{
+                    position: 'absolute',
+                    top: -3,
+                    right: -4,
+                    width: 7,
+                    height: 7,
+                    borderRadius: 3.5,
+                    backgroundColor: isMediaActive
+                      ? AppColors.emerald400
+                      : AppColors.purple,
+                    borderWidth: 1.2,
+                    borderColor: isMediaActive
+                      ? AppColors.purple
+                      : AppColors.white,
+                  }}
+                />
+              )}
+            </View>
+          </TouchableScale>
+        </View>
+      )}
     </View>
   );
 });

package/src/components/JsonViewer.tsx

@@ -242,6 +242,7 @@ const JsonViewer = React.memo(({
       {!hideTabs && (
         <View style={localStyles.toolbar}>
           <SegmentedTabs
+            style={{flex: 1, minWidth: 0, marginRight: 8}}
             tabs={[
               {
                 key: 'pretty',
@@ -445,8 +446,9 @@ const localStyles = StyleSheet.create({
     backgroundColor: AppColors.slate50,
     borderBottomWidth: 1,
     borderBottomColor: AppColors.slate200,
-    paddingHorizontal: 12,
-    paddingVertical: 8,
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    gap: 8,
   },
   contentWrapper: {
     backgroundColor: AppColors.white,

package/src/components/NetworkIcons.tsx

@@ -2596,4 +2596,60 @@ export const FilmIcon = ({
   </Svg>
 );
 
+export const ScreencastIcon = ({
+  color = AppColors.white,
+  size = 18,
+}: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M2 16.1A5 5 0 0 1 5.9 20M2 12.05A9 9 0 0 1 9.95 20M2 20h.01"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M2 8V6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export const ListIcon = ({color = AppColors.white, size = 14}: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Line x1="8" y1="6" x2="21" y2="6" stroke={color} strokeWidth="2" strokeLinecap="round" />
+    <Line x1="8" y1="12" x2="21" y2="12" stroke={color} strokeWidth="2" strokeLinecap="round" />
+    <Line x1="8" y1="18" x2="21" y2="18" stroke={color} strokeWidth="2" strokeLinecap="round" />
+    <Circle cx="4" cy="6" r="1.5" fill={color} />
+    <Circle cx="4" cy="12" r="1.5" fill={color} />
+    <Circle cx="4" cy="18" r="1.5" fill={color} />
+  </Svg>
+);
+
+export const GridIcon = ({color = AppColors.white, size = 14}: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Rect x="3" y="3" width="7" height="7" rx="1.5" stroke={color} strokeWidth="2" />
+    <Rect x="14" y="3" width="7" height="7" rx="1.5" stroke={color} strokeWidth="2" />
+    <Rect x="14" y="14" width="7" height="7" rx="1.5" stroke={color} strokeWidth="2" />
+    <Rect x="3" y="14" width="7" height="7" rx="1.5" stroke={color} strokeWidth="2" />
+  </Svg>
+);
+
+export const MinimizeWindowIcon = ({color = AppColors.white, size = 14}: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M4 14h6v6M20 10h-6V4M14 10l7-7M10 14l-7 7"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+
+
 

package/src/components/SegmentedTabs.tsx

@@ -27,6 +27,7 @@ const SegmentedTabs = React.memo(({tabs, activeKey, onChange, style}: SegmentedT
         borderWidth: 1,
         borderColor: AppColors.dividerColor,
         gap: 3,
+        minWidth: 0,
       },
       style,
     ]}>

package/src/constants/version.ts

@@ -1,3 +1,3 @@
 // AUTO-GENERATED FILE — do not edit by hand.
 // Regenerated from package.json on every build by scripts/gen-version.js.
-export const LIB_VERSION = '2.3.18';
+export const LIB_VERSION = '2.3.19';

package/src/i18n/locales/en.json

@@ -16,6 +16,8 @@
     "viewOnNpm": "View on NPM",
     "later": "Later",
     "source": "SOURCE",
+    "minimize": "Minimize",
+    "tapToExpand": "Tap to expand",
     "open": "Open",
     "openInBrowser": "Open in Browser",
     "openInBrowserPrompt": "Are you sure you want to open this URL in your external browser?"
@@ -54,7 +56,7 @@
     "crash": "Crash",
     "device": "Device",
     "storage": "Storage",
-    "media": "Media"
+    "media": "Screencast"
   },
 
   "settings": {
@@ -203,7 +205,6 @@
       "purgedSuccess": "Media storage purged"
     },
     "general": {
-
       "darkMode": "Dark Mode Theme",
       "darkModeDescription": "Toggle sleek dark aesthetic or light contrast",
       "modalHeight": "Inspector Window Height",
@@ -1111,15 +1112,30 @@
     "allPurged": "All captured media purged",
     "converting": "Converting...",
     "convertToGif": "Convert to GIF",
+    "playVideo": "Play Video",
+    "playError": "Unable to play video",
     "convertedSuccess": "Converted to Animated GIF successfully!",
     "convertFailed": "Failed to convert to GIF",
     "share": "Share",
     "copyUri": "Copy URI",
     "uriCopied": "File URI copied to clipboard",
     "delete": "Delete",
+    "deleteSelected": "Delete ({{count}})",
+    "deleteSelectedTitle": "Delete Selected",
+    "deleteSelectedMessage": "Are you sure you want to delete {{count}} selected media items?",
+    "deletedCount": "Deleted {{count}} media items",
     "deleteTitle": "Delete Media",
     "deleteMessage": "Are you sure you want to delete {{filename}}?",
-    "shareUnavailable": "Sharing not available on this device"
+    "shareUnavailable": "Sharing not available on this device",
+    "showingResults": "Showing {{count}} results",
+    "showingFilteredResults": "Showing {{count}} of {{total}} results",
+    "selectedOfResults": "Selected {{selected}} of {{total}} results",
+    "minimize": "Minimize",
+    "expand": "Expand Fullscreen",
+    "collapse": "Exit Fullscreen",
+    "speed": "Speed",
+    "loop": "Loop",
+    "pause": "Pause",
+    "play": "Play"
   }
 }
-

package/src/index.tsx

@@ -2,6 +2,7 @@ import React, {useEffect, useMemo, useRef, useState, useCallback} from 'react';
 import {
   Alert,
   Animated,
+  Easing,
   PanResponder,
   Platform,
   UIManager,
@@ -130,6 +131,7 @@ import {
   fetchRemoteConfigModuleStatus,
   isFirebaseRemoteConfigAvailable,
 } from './helpers/remoteConfig';
+import {ScreenCapture} from './capture';
 
 // Constants
 import {
@@ -184,6 +186,12 @@ const NetworkInspector = ({
   const [visible, setVisible] = useState<boolean>(
     controlledVisible ?? initialVisible ?? false,
   );
+  const [isMinimized, setIsMinimized] = useState<boolean>(false);
+
+  const minimizeInspector = useCallback(() => {
+    setIsMinimized(true);
+    setVisible(false);
+  }, []);
 
   useEffect(() => {
     if (controlledVisible !== undefined) {
@@ -267,6 +275,25 @@ const NetworkInspector = ({
   const [lastReadLogsCount, setLastReadLogsCount] = useState(0);
   const [lastReadApisCount, setLastReadApisCount] = useState(0);
   const [lastReadCrashesCount, setLastReadCrashesCount] = useState(0);
+  const [mediaCount, setMediaCount] = useState(0);
+
+  const refreshMediaCount = useCallback(async () => {
+    try {
+      const items = await ScreenCapture.getMediaList();
+      const count = items ? items.length : 0;
+      setMediaCount(count);
+      return count;
+    } catch {
+      setMediaCount(0);
+      return 0;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (visible) {
+      refreshMediaCount();
+    }
+  }, [visible, refreshMediaCount]);
 
   // ─── Crash state ───────────────────────────────────────────────────────────
   const [crashRecords, setCrashRecords] = useState<CrashRecord[]>(() =>
@@ -375,6 +402,7 @@ const NetworkInspector = ({
     device: false,
     storage: false,
     debugging: false,
+    media: true,
   });
 
   const [maxNetworkLogs, setMaxNetworkLogs] = useState<number>(250);
@@ -438,6 +466,7 @@ const NetworkInspector = ({
       device: false,
       storage: false,
       debugging: false,
+      media: true,
     });
 
     setDefaultTab('apis');
@@ -930,10 +959,11 @@ const NetworkInspector = ({
       Animated.sequence([
         Animated.timing(fabShineAnim, {
           toValue: 1,
-          duration: 1100,
+          duration: 3200,
+          easing: Easing.inOut(Easing.ease),
           useNativeDriver: false,
         }),
-        Animated.delay(1600),
+        Animated.delay(3500),
         Animated.timing(fabShineAnim, {
           toValue: 0,
           duration: 0,
@@ -989,36 +1019,12 @@ const NetworkInspector = ({
 
 
 
-  // 100% Native Main-Thread Floating Button Lifecycle
+  // Always hide legacy native circular button in favor of the React Native music-player dock
   useEffect(() => {
-    if (!useNativeFab || !enabled) {
-      if (useNativeFab) {
-        hideNativeFloatingButton().catch(() => {});
-      }
-      return;
-    }
-
-    if (visible) {
+    if (useNativeFab) {
       hideNativeFloatingButton().catch(() => {});
-    } else {
-      showNativeFloatingButton().catch(() => {});
-      setNativeFloatingButtonBadge(
-        logs.length > 0 || analyticsEvents.length > 0,
-      ).catch(() => {});
     }
-
-    return () => {
-      if (useNativeFab) {
-        hideNativeFloatingButton().catch(() => {});
-      }
-    };
-  }, [
-    useNativeFab,
-    enabled,
-    visible,
-    logs.length,
-    analyticsEvents.length,
-  ]);
+  }, [useNativeFab, visible]);
 
   // Subscribe to native UI-thread floating button tap events
   useEffect(() => {
@@ -1874,8 +1880,9 @@ const NetworkInspector = ({
     };
   }, [visibleConsoleLogs, logSearch]);
 
-  function closeModal() {
+  const closeModal = useCallback(() => {
     setVisible(false);
+    setIsMinimized(false);
     setTimeout(() => {
       setSelected(null);
       setSelectedEvent(null);
@@ -1884,7 +1891,7 @@ const NetworkInspector = ({
       setSelectedReduxAction(null);
       setSelectedCrash(null);
     }, 300);
-  }
+  }, []);
 
   function handleClearAll() {
     clearNetworkLogs();
@@ -2049,6 +2056,9 @@ const NetworkInspector = ({
       visible,
       setVisible,
       closeModal,
+      isMinimized,
+      setIsMinimized,
+      minimizeInspector,
       isReady,
       enabled,
       isEnabled: enabled,
@@ -2068,6 +2078,8 @@ const NetworkInspector = ({
       toggleTabVisibility,
       lastReadApisCount,
       lastReadLogsCount,
+      mediaCount,
+      refreshMediaCount,
 
       // ─── Selection / header state ───────────────────────────────────────
       selected,
@@ -2252,6 +2264,8 @@ const NetworkInspector = ({
       toggleTabVisibility,
       lastReadApisCount,
       lastReadLogsCount,
+      mediaCount,
+      refreshMediaCount,
       selected,
       selectedEvent,
       selectedLog,
@@ -2342,6 +2356,7 @@ const NetworkInspector = ({
       deviceFreeRamMb,
       reduxAutoRefresh,
       reduxExpandDepth,
+      isMinimized,
     ],
   );
 

package/src/native/NativeInspector.ts

@@ -468,6 +468,7 @@ export interface RecordingOptions {
 
 export interface RecordingResult {
   uri: string;
+  thumbnailUri?: string;
   format: 'mp4' | 'gif';
   durationMs: number;
   hasAudio: boolean;
@@ -488,6 +489,7 @@ export interface CapturedMediaItem {
   type: 'image' | 'video' | 'gif';
   format: string;
   uri: string;
+  thumbnailUri?: string;
   filename: string;
   sizeBytes: number;
   timestamp: number;
@@ -561,6 +563,21 @@ export const isNativeRecordingActive = async (): Promise<boolean> => {
   }
 };
 
+/**
+ * Plays a recorded video file using the native system media player.
+ */
+export const playNativeVideo = async (videoUri: string): Promise<boolean> => {
+  if (!NativeModule || !NativeModule.playVideo) {
+    return false;
+  }
+  try {
+    const result = await NativeModule.playVideo(videoUri);
+    return !!result;
+  } catch {
+    return false;
+  }
+};
+
 /**
  * Converts a recorded MP4 video to an animated GIF.
  */

package/src/native/NativeNetworkInspector.ts

@@ -22,6 +22,7 @@ export interface Spec extends TurboModule {
   stopVideoRecording(): Promise<Object>;
   isRecording(): Promise<boolean>;
   convertToGif(videoUri: string, options: Object): Promise<Object>;
+  playVideo(videoUri: string): Promise<boolean>;
   getCapturedMedia(): Promise<string>;
   deleteCapturedMedia(uri: string): Promise<boolean>;
   clearAllCapturedMedia(): Promise<boolean>;