react-native-inapp-inspector 2.3.15 → 2.3.17

package/src/index.tsx

@@ -87,6 +87,8 @@ import {
 import {
   trackActiveTelemetryHeartbeat,
   setTelemetryEnabled,
+  trackInspectorTabView,
+  trackInspectorScreenView,
 } from './helpers/telemetry';
 
 import {
@@ -124,6 +126,11 @@ import {
   isNativeModuleAvailable,
 } from './native/NativeInspector';
 
+import {
+  fetchRemoteConfigModuleStatus,
+  isFirebaseRemoteConfigAvailable,
+} from './helpers/remoteConfig';
+
 // Constants
 import {
   StatusFilter,
@@ -157,6 +164,7 @@ const NetworkInspector = ({
   environment,
   initialVisible = false,
   visible: controlledVisible,
+  remoteConfig,
 }: NetworkInspectorProps): React.JSX.Element | null => {
   // Set custom storage synchronously during render phase
   setCustomStorage(storage || null);
@@ -352,6 +360,7 @@ const NetworkInspector = ({
     | 'redux'
     | null
   >(null);
+  const [isFeedbackOpen, setIsFeedbackOpen] = useState<boolean>(false);
   const [settingsActiveSubTab, setSettingsActiveSubTab] = useState<SettingsSubTab>('module');
   const [tabVisibility, setTabVisibility] = useState<
     Record<ActiveTab, boolean>
@@ -430,6 +439,7 @@ const NetworkInspector = ({
       storage: false,
       debugging: false,
     });
+
     setDefaultTab('apis');
     setIsAutoRamLimitEnabled(true);
     const profile = calculateRamBasedLimits(deviceFreeRamMb);
@@ -513,6 +523,28 @@ const NetworkInspector = ({
     };
   }, []);
 
+  // Fetch and apply module enable/disable statuses from Firebase Remote Config if configured or available
+  useEffect(() => {
+    let isMounted = true;
+    if (remoteConfig === false) return;
+
+    fetchRemoteConfigModuleStatus(typeof remoteConfig === 'object' ? remoteConfig : undefined)
+      .then(remoteModules => {
+        if (isMounted && remoteModules) {
+          setTabVisibility(prev => ({
+            ...prev,
+            ...remoteModules,
+            apis: remoteModules.apis ?? true,
+          }));
+        }
+      })
+      .catch(() => {});
+
+    return () => {
+      isMounted = false;
+    };
+  }, [remoteConfig]);
+
   useEffect(() => {
     if (!settingsHydratedRef.current) return;
     saveSettings({
@@ -655,6 +687,7 @@ const NetworkInspector = ({
       setActiveTab(key);
       loadNativePage(key);
     }
+    trackInspectorTabView(key);
   }, [loadNativePage]);
 
   const [selectedEvent, setSelectedEvent] = useState<AnalyticsEvent | null>(
@@ -853,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();
@@ -871,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(
@@ -916,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,
         }),
       ]),
     );
@@ -935,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,
         }),
       ]),
     );
@@ -989,6 +1024,7 @@ const NetworkInspector = ({
   useEffect(() => {
     if (!useNativeFab) return;
     const unsubscribe = subscribeNativeFloatingButtonPress(() => {
+      hideNativeFloatingButton().catch(() => {});
       setVisible(true);
     });
     return () => {
@@ -1000,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();
@@ -1013,11 +1055,13 @@ const NetworkInspector = ({
   useEffect(() => {
     isVisibleRefObj.current = visible;
     if (visible) {
+      trackInspectorScreenView('InspectorModal');
       const target =
         defaultTab === 'apis' || tabVisibility?.[defaultTab]
           ? defaultTab
           : 'apis';
       setActiveTab(target);
+      trackInspectorTabView(target);
 
 
 
@@ -1419,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];
@@ -1427,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;
@@ -1455,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},
@@ -1464,6 +1511,7 @@ const NetworkInspector = ({
         isCollapsed,
         isFirst: idx === 0,
       });
+      idx++;
 
       if (!isCollapsed) {
         const displayLogs = g.logs.filter(l => {
@@ -1476,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,
@@ -2032,6 +2080,8 @@ const NetworkInspector = ({
       setShowHeaderInfo,
       settingsPage,
       setSettingsPage,
+      isFeedbackOpen,
+      setIsFeedbackOpen,
       updateAvailable,
       latestNpmVersion,
       clearAnim,
@@ -2207,6 +2257,7 @@ const NetworkInspector = ({
       selectedLog,
       showHeaderInfo,
       settingsPage,
+      isFeedbackOpen,
       updateAvailable,
       latestNpmVersion,
       clearAnim,
@@ -2562,4 +2613,23 @@ export {
   I18nextProvider,
 } from './i18n';
 
+export {
+  fetchRemoteConfigModuleStatus,
+  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/AppFonts.ts

@@ -1,6 +1,7 @@
 export interface AppFontConfig {
   interRegular?: string;
   interMedium?: string;
+  interSemiBold?: string;
   interBold?: string;
   Sfprotext?: string;
 }
@@ -8,6 +9,7 @@ export interface AppFontConfig {
 export const AppFonts = {
   interRegular: 'Inter-Regular',
   interMedium: 'Inter-Medium',
+  interSemiBold: 'Inter-SemiBold',
   interBold: 'Inter-Bold',
   Sfprotext: 'Inter-Regular',
 };

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',
@@ -140,7 +141,26 @@ export const getRawStyles = (colors: typeof AppColors) => ({
   },
 
   listContent: {paddingBottom: Platform.OS === 'ios' ? 44 : 32},
-  // #2 — scroll-to-top button, always shown at the bottom right.
+  // Floating Support & Feedback FAB, in place of scroll-to-top button
+  supportFab: {
+    position: 'absolute',
+    bottom: 22,
+    right: 16,
+    width: 42,
+    height: 42,
+    borderRadius: 21,
+    backgroundColor: colors.purple,
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: colors.purple,
+    shadowOffset: {width: 0, height: 4},
+    shadowOpacity: 0.45,
+    shadowRadius: 8,
+    elevation: 14,
+    zIndex: 999,
+    borderWidth: 1.5,
+    borderColor: 'rgba(255, 255, 255, 0.25)',
+  },
   scrollTopBtn: {
     position: 'absolute',
     bottom: 22,
@@ -1384,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,13 @@ 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 =
   (typeof SettingsSubTab)[keyof typeof 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;