react-native-inapp-inspector 2.3.16 → 2.3.18

package/src/helpers/index.ts

@@ -99,7 +99,16 @@ export const getSize = (data: unknown): string => {
   }
 };
 
-export const copyToClipboard = (value: unknown, label: string): void => {
+export const formatBytes = (bytes: number): string => {
+  if (bytes === 0 || !bytes || isNaN(bytes)) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i] || 'B'}`;
+};
+
+export const copyToClipboard = (value: unknown, label?: string): void => {
+
   const resolved = typeof value === 'function' ? (value as Function)() : value;
   let textToCopy = '';
   if (typeof resolved === 'string') {

package/src/i18n/locales/en.json

@@ -24,7 +24,19 @@
     "updateAvailableTitle": "Update Available",
     "updateAvailableMessage": "react-native-inapp-inspector v{{version}} is available on NPM (installed: v{{installed}}).",
     "clearEverythingTitle": "Clear Everything",
-    "clearEverythingMessage": "This clears all tabs — APIs, Logs, Analytics and Redux timeline. Continue?",
+    "clearEverythingMessage": "This clears all tabs — APIs, Logs, Analytics, Redux timeline and Crash history. Continue?",
+    "photo": "Photo",
+    "record": "Record",
+    "rec": "REC",
+    "clear": "Clear",
+    "about": "About",
+    "screenshotCaptured": "📸 Screenshot captured & saved",
+    "screenshotFailed": "Failed to capture screenshot",
+    "screenshotError": "Error taking screenshot",
+    "recordingStarted": "🔴 Video recording started",
+    "recordingSaved": "🎥 Recording saved ({{duration}}s)",
+    "recordingError": "Recording error",
+    "recordingStartFailed": "Failed to start recording",
     "paramCount": "{{count}} param",
     "paramCount_plural": "{{count}} params",
     "sourceFirebase": "FB",
@@ -41,8 +53,10 @@
     "performance": "Performance",
     "crash": "Crash",
     "device": "Device",
-    "storage": "Storage"
+    "storage": "Storage",
+    "media": "Media"
   },
+
   "settings": {
     "mainTitle": "Settings & Modules",
     "mainSubtitle": "Manage modules and preferences",
@@ -58,6 +72,7 @@
     "modulesAndTools": "Modules & Tools",
     "uiPreferences": "UI & Display",
     "ramLimits": "RAM & Limits",
+    "screenVideoCapture": "Screen & Video Capture",
     "zeroOverheadTitle": "Zero Background Overhead",
     "zeroOverheadDesc": "Check the modules you wish to activate. Disabled modules consume 0% CPU & memory until saved.",
     "unsavedPending": "● Unsaved selections pending",
@@ -161,7 +176,34 @@
       "clearHistoryDesc": "{{count}} crash logs stored",
       "historyCleared": "Crash logs cleared."
     },
+    "media": {
+      "title": "Screen & Video Capture",
+      "badge": "Native H.264 / GIF",
+      "desc": "Configure screenshot formats, quality, video FPS, audio narration, GIF recording & storage",
+      "screenshotCardTitle": "Screenshot Formats & Quality",
+      "screenshotCardDesc": "High-resolution full-window snapshot configuration",
+      "imageFormat": "Image Format",
+      "imageFormatDesc": "PNG (lossless), JPEG (compact), or WEBP",
+      "autoHide": "Auto-Hide Inspector Overlay",
+      "autoHideDesc": "Excludes inspector UI from screenshots",
+      "enabled": "ENABLED",
+      "videoCardTitle": "Video & GIF Recording",
+      "videoCardDesc": "H.264 MP4 recording & animated GIF export",
+      "audioMode": "Audio Narration Mode",
+      "audioModeDesc": "Muted, App Audio, or Voice Narration",
+      "frameRate": "Frame Rate",
+      "frameRateDesc": "Higher FPS yields smoother recordings",
+      "gifAutoOpt": "GIF Auto-Optimization",
+      "gifAutoOptDesc": "Converts video recordings for GitHub PRs & Slack",
+      "purgeAll": "Purge All Captured Media",
+      "purgeAllDesc": "Deletes all stored screenshots, videos, and GIFs",
+      "purgeCacheBtn": "Purge Cache",
+      "purgeConfirmTitle": "Purge Media Storage",
+      "purgeConfirmMessage": "This deletes all captured media files from local cache. Continue?",
+      "purgedSuccess": "Media storage purged"
+    },
     "general": {
+
       "darkMode": "Dark Mode Theme",
       "darkModeDescription": "Toggle sleek dark aesthetic or light contrast",
       "modalHeight": "Inspector Window Height",
@@ -1054,5 +1096,30 @@
     "frameCopy": "Copy",
     "frameCopied": "Copied",
     "componentHierarchy": "Component Hierarchy"
+  },
+  "mediaGallery": {
+    "all": "All ({{count}})",
+    "photos": "Photos",
+    "videos": "Videos",
+    "gifs": "GIFs",
+    "purge": "Purge ({{size}})",
+    "purgeTitle": "Purge All Media",
+    "purgeMessage": "This will permanently delete all {{count}} captured screenshots, videos, and GIFs ({{size}}). Continue?",
+    "noMediaTitle": "No Captured Media",
+    "noMediaDesc": "Use the Photo or Video Record button in the toolbar to capture whole-app screenshots, screen recordings, or GIFs.",
+    "deleted": "Deleted media item",
+    "allPurged": "All captured media purged",
+    "converting": "Converting...",
+    "convertToGif": "Convert to GIF",
+    "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",
+    "deleteTitle": "Delete Media",
+    "deleteMessage": "Are you sure you want to delete {{filename}}?",
+    "shareUnavailable": "Sharing not available on this device"
   }
 }
+

package/src/index.tsx

@@ -439,6 +439,7 @@ const NetworkInspector = ({
       storage: false,
       debugging: false,
     });
+
     setDefaultTab('apis');
     setIsAutoRamLimitEnabled(true);
     const profile = calculateRamBasedLimits(deviceFreeRamMb);
@@ -885,12 +886,12 @@ const NetworkInspector = ({
       Animated.timing(clearAnim, {
         toValue: 1,
         duration: 320,
-        useNativeDriver: true,
+        useNativeDriver: false,
       }),
       Animated.timing(clearAnim, {
         toValue: 0,
         duration: 0,
-        useNativeDriver: true,
+        useNativeDriver: false,
       }),
     ]).start();
     handleClearAll();
@@ -903,44 +904,46 @@ const NetworkInspector = ({
   }, []);
 
   useEffect(() => {
+    if (visible) return;
     const loop = Animated.loop(
       Animated.sequence([
         Animated.timing(pulseAnim, {
           toValue: 1.2,
           duration: 800,
-          useNativeDriver: true,
+          useNativeDriver: false,
         }),
         Animated.timing(pulseAnim, {
           toValue: 1,
           duration: 800,
-          useNativeDriver: true,
+          useNativeDriver: false,
         }),
       ]),
     );
     loop.start();
     return () => loop.stop();
-  }, [pulseAnim]);
+  }, [pulseAnim, visible]);
 
   // #4 — sweep the shine streak across the launcher, pause, repeat.
   useEffect(() => {
+    if (visible) return;
     const loop = Animated.loop(
       Animated.sequence([
         Animated.timing(fabShineAnim, {
           toValue: 1,
           duration: 1100,
-          useNativeDriver: true,
+          useNativeDriver: false,
         }),
         Animated.delay(1600),
         Animated.timing(fabShineAnim, {
           toValue: 0,
           duration: 0,
-          useNativeDriver: true,
+          useNativeDriver: false,
         }),
       ]),
     );
     loop.start();
     return () => loop.stop();
-  }, [fabShineAnim]);
+  }, [fabShineAnim, visible]);
 
   useEffect(() => {
     const loop = Animated.loop(
@@ -948,12 +951,12 @@ const NetworkInspector = ({
         Animated.timing(activePulseAnim, {
           toValue: 1,
           duration: 1200,
-          useNativeDriver: true,
+          useNativeDriver: false,
         }),
         Animated.timing(activePulseAnim, {
           toValue: 0.4,
           duration: 1200,
-          useNativeDriver: true,
+          useNativeDriver: false,
         }),
       ]),
     );
@@ -967,12 +970,12 @@ const NetworkInspector = ({
         Animated.timing(unreadPulseAnim, {
           toValue: 1.3,
           duration: 800,
-          useNativeDriver: true,
+          useNativeDriver: false,
         }),
         Animated.timing(unreadPulseAnim, {
           toValue: 0.8,
           duration: 800,
-          useNativeDriver: true,
+          useNativeDriver: false,
         }),
       ]),
     );
@@ -1021,6 +1024,7 @@ const NetworkInspector = ({
   useEffect(() => {
     if (!useNativeFab) return;
     const unsubscribe = subscribeNativeFloatingButtonPress(() => {
+      hideNativeFloatingButton().catch(() => {});
       setVisible(true);
     });
     return () => {
@@ -1032,7 +1036,13 @@ const NetworkInspector = ({
   useEffect(() => {
     if (!useNativeFab) return;
     const unsubscribe = subscribeNativeDeviceShake(() => {
-      setVisible(prev => !prev);
+      setVisible(prev => {
+        const next = !prev;
+        if (next) {
+          hideNativeFloatingButton().catch(() => {});
+        }
+        return next;
+      });
     });
     return () => {
       unsubscribe();
@@ -1453,7 +1463,10 @@ const NetworkInspector = ({
 
   const groupedData = useMemo(() => {
     const result: GroupedListItem[] = [];
-    const groups: {pageName: string; color: string; logs: NetworkLog[]}[] = [];
+    const groupMap = new Map<
+      string,
+      {pageName: string; color: string; logs: NetworkLog[]}
+    >();
 
     for (let i = 0; i < filteredLogs.length; i++) {
       const log = filteredLogs[i];
@@ -1461,16 +1474,16 @@ const NetworkInspector = ({
         logRouteMapRef.current.get(log.id) || (log as any)?.routeInfo;
       const pageName = getLogPageName(log, routeInfo);
 
-      if (
-        groups.length === 0 ||
-        groups[groups.length - 1].pageName !== pageName
-      ) {
-        groups.push({pageName, color: getDomainColor(pageName), logs: []});
+      let group = groupMap.get(pageName);
+      if (!group) {
+        group = {pageName, color: getDomainColor(pageName), logs: []};
+        groupMap.set(pageName, group);
       }
-      groups[groups.length - 1].logs.push(log);
+      group.logs.push(log);
     }
 
-    groups.forEach((g, idx) => {
+    let idx = 0;
+    groupMap.forEach(g => {
       let success = 0;
       let failed = 0;
       let loading = 0;
@@ -1489,7 +1502,7 @@ const NetworkInspector = ({
 
       result.push({
         type: 'header',
-        id: `hdr-${g.logs[0]?.id || 'empty'}-${g.pageName}`,
+        id: `hdr-${g.pageName}`,
         pageName: g.pageName,
         color: g.color,
         stats: {success, failed, loading},
@@ -1498,6 +1511,7 @@ const NetworkInspector = ({
         isCollapsed,
         isFirst: idx === 0,
       });
+      idx++;
 
       if (!isCollapsed) {
         const displayLogs = g.logs.filter(l => {
@@ -1510,7 +1524,7 @@ const NetworkInspector = ({
         displayLogs.forEach((log, index) => {
           result.push({
             type: 'log',
-            id: log.id,
+            id: `log-${log.id}`,
             log,
             isLast: index === displayLogs.length - 1,
             color: g.color,
@@ -2604,4 +2618,18 @@ export {
   isFirebaseRemoteConfigAvailable,
 } from './helpers/remoteConfig';
 
+export {
+  ScreenCapture,
+  ScreenRecorder,
+  type ScreenshotOptions,
+  type ScreenshotResult,
+  type RecordingOptions,
+  type RecordingResult,
+  type GifConversionOptions,
+  type CapturedMediaItem,
+  type ImageFormat,
+  type AudioSource,
+  type RecordingFormat,
+} from './capture';
+
 export { LIB_VERSION } from './constants/version';

package/src/native/NativeInspector.ts

@@ -87,7 +87,7 @@ export const enableNativeCrashProtection = async (options?: {
   }
   try {
     const result = await NativeModule.enableNativeCrashProtection();
-    if (options?.showFloatingButton !== false) {
+    if (options?.showFloatingButton === true) {
       await showNativeFloatingButton();
     }
     return !!result;
@@ -439,4 +439,189 @@ export const fetchNativeCachedPage = async <T = any>(
   }
 };
 
+export interface ScreenshotOptions {
+  format?: 'png' | 'jpeg' | 'webp';
+  quality?: number; // 0.1 to 1.0
+  scale?: number; // 0.5, 0.75, 1.0
+  hideInspector?: boolean;
+  includeBase64?: boolean;
+}
+
+export interface ScreenshotResult {
+  uri: string;
+  format: 'png' | 'jpeg' | 'webp';
+  width: number;
+  height: number;
+  sizeBytes: number;
+  timestamp: number;
+  base64?: string;
+}
+
+export interface RecordingOptions {
+  format?: 'mp4' | 'gif';
+  audioSource?: 'none' | 'app' | 'mic' | 'mixed';
+  fps?: number;
+  bitrate?: number;
+  maxDurationSeconds?: number;
+  hideInspector?: boolean;
+}
+
+export interface RecordingResult {
+  uri: string;
+  format: 'mp4' | 'gif';
+  durationMs: number;
+  hasAudio: boolean;
+  width: number;
+  height: number;
+  sizeBytes: number;
+  timestamp: number;
+}
+
+export interface GifConversionOptions {
+  fps?: number;
+  width?: number;
+  maxDurationSeconds?: number;
+}
+
+export interface CapturedMediaItem {
+  id: string;
+  type: 'image' | 'video' | 'gif';
+  format: string;
+  uri: string;
+  filename: string;
+  sizeBytes: number;
+  timestamp: number;
+  durationMs?: number;
+  hasAudio?: boolean;
+  width?: number;
+  height?: number;
+}
+
+/**
+ * Captures a high-resolution native screenshot of the application window.
+ */
+export const takeNativeScreenshot = async (
+  options?: ScreenshotOptions,
+): Promise<ScreenshotResult | null> => {
+  if (!NativeModule || !NativeModule.takeScreenshot) {
+    return null;
+  }
+  try {
+    const result = await NativeModule.takeScreenshot(options || {});
+    return result as ScreenshotResult;
+  } catch {
+    return null;
+  }
+};
+
+/**
+ * Starts native video or GIF recording of the application.
+ */
+export const startNativeVideoRecording = async (
+  options?: RecordingOptions,
+): Promise<boolean> => {
+  if (!NativeModule || !NativeModule.startVideoRecording) {
+    return false;
+  }
+  try {
+    const result = await NativeModule.startVideoRecording(options || {});
+    return !!result;
+  } catch {
+    return false;
+  }
+};
+
+/**
+ * Stops active video or GIF recording and returns the final file metadata.
+ */
+export const stopNativeVideoRecording = async (): Promise<RecordingResult | null> => {
+  if (!NativeModule || !NativeModule.stopVideoRecording) {
+    return null;
+  }
+  try {
+    const result = await NativeModule.stopVideoRecording();
+    return result as RecordingResult;
+  } catch {
+    return null;
+  }
+};
+
+/**
+ * Checks if a recording session is currently active.
+ */
+export const isNativeRecordingActive = async (): Promise<boolean> => {
+  if (!NativeModule || !NativeModule.isRecording) {
+    return false;
+  }
+  try {
+    const result = await NativeModule.isRecording();
+    return !!result;
+  } catch {
+    return false;
+  }
+};
+
+/**
+ * Converts a recorded MP4 video to an animated GIF.
+ */
+export const convertNativeVideoToGif = async (
+  videoUri: string,
+  options?: GifConversionOptions,
+): Promise<RecordingResult | null> => {
+  if (!NativeModule || !NativeModule.convertToGif) {
+    return null;
+  }
+  try {
+    const result = await NativeModule.convertToGif(videoUri, options || {});
+    return result as RecordingResult;
+  } catch {
+    return null;
+  }
+};
+
+/**
+ * Fetches all captured screenshots, recordings, and GIFs from disk.
+ */
+export const fetchCapturedMediaList = async (): Promise<CapturedMediaItem[]> => {
+  if (!NativeModule || !NativeModule.getCapturedMedia) {
+    return [];
+  }
+  try {
+    const jsonStr: string = await NativeModule.getCapturedMedia();
+    if (!jsonStr) return [];
+    const parsed = JSON.parse(jsonStr);
+    return Array.isArray(parsed) ? parsed : [];
+  } catch {
+    return [];
+  }
+};
+
+/**
+ * Deletes a specific media file from disk.
+ */
+export const deleteCapturedMediaFile = async (uri: string): Promise<boolean> => {
+  if (!NativeModule || !NativeModule.deleteCapturedMedia) {
+    return false;
+  }
+  try {
+    const result = await NativeModule.deleteCapturedMedia(uri);
+    return !!result;
+  } catch {
+    return false;
+  }
+};
 
+/**
+ * Purges all captured media files from disk.
+ */
+export const clearAllCapturedMediaFiles = async (): Promise<boolean> => {
+  if (!NativeModule || !NativeModule.clearAllCapturedMedia) {
+    return false;
+  }
+  try {
+    const result = await NativeModule.clearAllCapturedMedia();
+    return !!result;
+  } catch {
+    return false;
+  }
+};

package/src/native/NativeNetworkInspector.ts

@@ -17,8 +17,17 @@ 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;
 }
 
 export default TurboModuleRegistry.get<Spec>('NetworkInspectorModule');
+

package/src/styles/AppColors.ts

@@ -184,6 +184,25 @@ const LightColors = {
   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)',
+
   // ─── Domain Colors (Thai Airways Themed) ───
   domainColors: [
     '#5C2D91',
@@ -280,6 +299,25 @@ 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/src/styles/index.ts

@@ -62,7 +62,8 @@ export const getRawStyles = (colors: typeof AppColors) => ({
   headerDetailCenter: {
     alignItems: 'center',
     justifyContent: 'center',
-    width: '100%',
+    flex: 1,
+    minWidth: 0,
   },
   headerDetailRow: {
     flexDirection: 'row',
@@ -1403,6 +1404,7 @@ export const getRawStyles = (colors: typeof AppColors) => ({
     borderTopLeftRadius: 20,
     borderTopRightRadius: 20,
     overflow: 'hidden',
+    flexShrink: 0,
   },
 
   // Status chip used in MetaAccordion

package/src/types/enums.ts

@@ -16,6 +16,7 @@ export const ActiveTab = {
 } as const;
 export type ActiveTab = (typeof ActiveTab)[keyof typeof ActiveTab];
 
+
 export const Method = {
   All: 'ALL',
   Get: 'GET',
@@ -77,10 +78,12 @@ export type SettingsPage =
   | (typeof SettingsPage)[keyof typeof SettingsPage]
   | null;
 
+
 export const SettingsSubTab = {
   Module: 'module',
   Ui: 'ui',
   Limits: 'limits',
+  Capture: 'capture',
   About: 'about',
 } as const;
 export type SettingsSubTab =

package/src/types/index.ts

@@ -9,7 +9,7 @@ export * from './enums';
 export type GroupedListItem =
   | {
       type: 'header';
-      id: string;
+      id: string | number;
       pageName: string;
       color: string;
       stats: {success: number; failed: number; loading: number};
@@ -20,7 +20,7 @@ export type GroupedListItem =
     }
   | {
       type: 'log';
-      id: number;
+      id: string | number;
       log: NetworkLog;
       isLast: boolean;
       color: string;