react-native-inapp-inspector 2.3.16 → 2.3.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-inapp-inspector",
-  "version": "2.3.16",
+  "version": "2.3.18",
   "description": "The zero-config, all-in-one in-app debugger for React Native & Expo. Inspect Network (fetch/axios), Console logs, Stack Traces, Redux State, Firebase Analytics, and JS Bundle size directly on device.",
   "repository": {
     "type": "git",
@@ -80,6 +80,13 @@
       "require": "./dist/commonjs/storage.js",
       "default": "./dist/commonjs/storage.js"
     },
+    "./capture": {
+      "react-native": "./dist/commonjs/capture.js",
+      "types": "./dist/commonjs/capture.d.ts",
+      "import": "./dist/esm/capture.js",
+      "require": "./dist/commonjs/capture.js",
+      "default": "./dist/commonjs/capture.js"
+    },
     "./metro": {
       "types": "./dist/commonjs/metro.d.ts",
       "import": "./dist/esm/metro.js",
@@ -110,7 +117,8 @@
   "scripts": {
     "clean": "rm -rf dist",
     "prebuild": "node scripts/gen-version.js && node scripts/gen-telemetry.js",
-    "build": "npm run clean && tsc && tsc -p tsconfig.esm.json",
+    "build": "tsc && tsc -p tsconfig.esm.json",
+    "clean-build": "npm run clean && npm run build",
     "prepare": "npm run build",
     "watch": "tsc -w",
     "prepack": "npm run build",

package/react-native-inapp-inspector.podspec

@@ -13,6 +13,7 @@ Pod::Spec.new do |s|
   s.source       = { :git => "https://github.com/vengatmacuser/react-native-inapp-inspector.git", :tag => "v#{s.version}" }
   s.source_files = "ios/**/*.{h,m,mm,swift}"
   s.requires_arc = true
+  s.frameworks   = "AVFoundation", "ReplayKit", "CoreMedia", "CoreVideo", "ImageIO", "MobileCoreServices", "QuartzCore"
 
   # React Native New Architecture (TurboModules & Codegen) support
   if respond_to?(:install_modules_dependencies, true)

package/src/capture.ts

@@ -0,0 +1,101 @@
+import {
+  takeNativeScreenshot,
+  startNativeVideoRecording,
+  stopNativeVideoRecording,
+  isNativeRecordingActive,
+  convertNativeVideoToGif,
+  fetchCapturedMediaList,
+  deleteCapturedMediaFile,
+  clearAllCapturedMediaFiles,
+  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';
+
+/**
+ * ScreenCapture & Video Recording API for React Native In-App Inspector.
+ * 100% native, zero-dependency screen capture, audio-enabled video recording,
+ * and animated GIF conversion.
+ */
+export const ScreenCapture = {
+  /**
+   * Captures a high-resolution screenshot of the full application window.
+   */
+  takeScreenshot: async (
+    options?: ScreenshotOptions,
+  ): Promise<ScreenshotResult | null> => {
+    return takeNativeScreenshot(options);
+  },
+
+  /**
+   * Starts native video or animated GIF recording with optional audio/mic narration.
+   */
+  startRecording: async (options?: RecordingOptions): Promise<boolean> => {
+    return startNativeVideoRecording(options);
+  },
+
+  /**
+   * Stops active video/GIF recording and returns the final file metadata.
+   */
+  stopRecording: async (): Promise<RecordingResult | null> => {
+    return stopNativeVideoRecording();
+  },
+
+  /**
+   * Checks if video/GIF recording is currently in progress.
+   */
+  isRecording: async (): Promise<boolean> => {
+    return isNativeRecordingActive();
+  },
+
+  /**
+   * Converts a recorded MP4 video to an animated GIF.
+   */
+  convertToGif: async (
+    videoUri: string,
+    options?: GifConversionOptions,
+  ): Promise<RecordingResult | null> => {
+    return convertNativeVideoToGif(videoUri, options);
+  },
+
+  /**
+   * Retrieves the list of all captured screenshots, videos, and GIFs from local cache.
+   */
+  getMediaList: async (): Promise<CapturedMediaItem[]> => {
+    return fetchCapturedMediaList();
+  },
+
+  /**
+   * Deletes a specific captured media file from disk.
+   */
+  deleteMedia: async (uri: string): Promise<boolean> => {
+    return deleteCapturedMediaFile(uri);
+  },
+
+  /**
+   * Purges all captured screenshots, videos, and GIFs from local storage cache.
+   */
+  clearAllMedia: async (): Promise<boolean> => {
+    return clearAllCapturedMediaFiles();
+  },
+};
+
+export const ScreenRecorder = ScreenCapture;
+
+export default ScreenCapture;

package/src/components/AnalyticsEventCard.tsx

@@ -49,7 +49,7 @@ const AnalyticsEventCard = React.memo(function AnalyticsEventCard({
       Animated.timing(flashOpacity, {
         toValue: 0,
         duration: 1200,
-        useNativeDriver: true,
+        useNativeDriver: false,
       }).start();
     }
   }, [isNew]);
@@ -88,18 +88,20 @@ const AnalyticsEventCard = React.memo(function AnalyticsEventCard({
             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],
+                }),
+              },
+            ]}
+          />
+        )}
 
         {/* Top Row: Icon Badge, Event Name, Category Badge & Timestamp */}
         <View style={cardStyles.cardHeader}>

package/src/components/AnimatedEntrance.tsx

@@ -1,5 +1,5 @@
-import React, {useEffect, useRef} from 'react';
-import {Animated, Platform, View, ViewStyle} from 'react-native';
+import React from 'react';
+import {View, ViewStyle} from 'react-native';
 
 interface AnimatedEntranceProps {
   children: React.ReactNode;
@@ -12,53 +12,9 @@ interface AnimatedEntranceProps {
 
 const AnimatedEntrance = React.memo(function AnimatedEntrance({
   children,
-  delay = 0,
-  distance = 10,
-  duration = 220,
-  index = 0,
   style,
 }: AnimatedEntranceProps) {
-  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>
-  );
+  return <View style={style}>{children}</View>;
 });
 
 export default AnimatedEntrance;

package/src/components/DomainHeader.tsx

@@ -1,5 +1,5 @@
-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';
 
 // Stylesheet
 import {AppColors} from '../styles/AppColors';
@@ -44,19 +44,6 @@ const DomainHeader = ({
   isFirst: boolean;
   timestamp: number;
 }) => {
-  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'];
 
@@ -77,9 +64,9 @@ const DomainHeader = ({
       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/src/components/EmptyState.tsx

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

package/src/components/HeadersSection.tsx

@@ -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';
 
 // Components
 import CopyButton from './CopyButton';
@@ -36,32 +36,9 @@ const HeaderRow = React.memo(function HeaderRow({
   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]}>
+    <View
+      style={[styles.htRow, !isLast && styles.htRowBorder]}>
       <View style={styles.htKeyCell}>
         <Text style={styles.htKey} numberOfLines={2}>
           {headerKey}
@@ -97,7 +74,7 @@ const HeaderRow = React.memo(function HeaderRow({
         style={styles.htCopyBtn}>
         <CopyIcon color={AppColors.grayTextWeak} size={14} />
       </TouchableScale>
-    </Animated.View>
+    </View>
   );
 });
 
@@ -108,11 +85,7 @@ const HeadersSection = ({
   resetKey,
 }: HeadersSectionProps) => {
   const {t} = useTranslation();
-  const {toggleOpen, forceOpen, chevronStyle, bodyStyle} = useAccordion(
-    false,
-    2400,
-    300,
-  );
+  const {isOpen, toggleOpen, forceOpen, chevronStyle} = useAccordion(false);
 
   useEffect(() => {
     forceOpen(false);
@@ -161,35 +134,37 @@ const HeadersSection = ({
           <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>
-
-        {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>
+      {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>
-        )}
-      </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>
   );
 };

package/src/components/Inspector/AnalyticsTab.tsx

@@ -1,6 +1,7 @@
 import React, {useCallback, useState, useMemo, useEffect, useRef} from 'react';
 import {
   FlatList,
+  Platform,
   Pressable,
   Text,
   TextInput,
@@ -1116,7 +1117,6 @@ const AnalyticsTab = React.memo(() => {
         <AnalyticsEventCard
           event={item}
           onPress={() => {
-            animateNextLayout();
             setSelectedEvent(item);
           }}
           isNew={newEventIds.has(item.id)}
@@ -1317,7 +1317,7 @@ const AnalyticsTab = React.memo(() => {
               initialNumToRender={12}
               maxToRenderPerBatch={8}
               windowSize={5}
-              removeClippedSubviews={true}
+              removeClippedSubviews={Platform.OS === 'android'}
               renderToHardwareTextureAndroid={true}
               ListEmptyComponent={
                 <EmptyState

package/src/components/Inspector/ConsoleTab.tsx

@@ -1,6 +1,7 @@
 import React, {useCallback, useMemo, useRef} from 'react';
 import {
   FlatList,
+  Platform,
   Pressable,
   ScrollView,
   Text,
@@ -688,7 +689,7 @@ const ConsoleTab = React.memo(() => {
         initialNumToRender={12}
         maxToRenderPerBatch={8}
         windowSize={5}
-        removeClippedSubviews={true}
+        removeClippedSubviews={Platform.OS === 'android'}
         renderToHardwareTextureAndroid={true}
         ListEmptyComponent={
           <EmptyState

package/src/components/Inspector/CrashTab.tsx

@@ -239,7 +239,9 @@ const CrashTab = React.memo(() => {
       return (
         <AnimatedEntrance index={index} distance={8}>
           <TouchableScale
-            onPress={() => setSelectedCrash(item)}
+            onPress={() => {
+              setSelectedCrash(item);
+            }}
             style={[
               localStyles.cardContainer,
               isFatal && localStyles.fatalCardBorder,
@@ -607,7 +609,7 @@ const CrashTab = React.memo(() => {
             initialNumToRender={12}
             maxToRenderPerBatch={8}
             windowSize={5}
-            removeClippedSubviews={true}
+            removeClippedSubviews={Platform.OS === 'android'}
             renderToHardwareTextureAndroid={true}
             contentContainerStyle={localStyles.listContent}
             showsVerticalScrollIndicator={false}

package/src/components/Inspector/DebuggingTab.tsx

@@ -1008,12 +1008,12 @@ const styles = StyleSheet.create({
     gap: 3,
   },
   consoleLogLine: {
-    fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+    fontFamily: AppFonts.interRegular,
     fontSize: 10,
     lineHeight: 14,
   },
   consoleLogPlaceholder: {
-    fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+    fontFamily: AppFonts.interRegular,
     fontSize: 10,
     color: '#64748B',
     fontStyle: 'italic',