react-native-inapp-inspector 2.3.0 → 2.3.2

package/src/components/SkeletonPlaceholder.tsx

@@ -0,0 +1,206 @@
+import React, {useEffect, useRef} from 'react';
+import {Animated, StyleSheet, View} from 'react-native';
+import {AppColors} from '../styles/AppColors';
+
+interface SkeletonPlaceholderProps {
+  cardCount?: number;
+}
+
+const SkeletonPlaceholder = React.memo(function SkeletonPlaceholder({
+  cardCount = 4,
+}: SkeletonPlaceholderProps) {
+  const shimmerAnim = useRef(new Animated.Value(0.35)).current;
+
+  useEffect(() => {
+    const animation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(shimmerAnim, {
+          toValue: 0.85,
+          duration: 750,
+          useNativeDriver: true,
+        }),
+        Animated.timing(shimmerAnim, {
+          toValue: 0.35,
+          duration: 750,
+          useNativeDriver: true,
+        }),
+      ]),
+    );
+    animation.start();
+    return () => animation.stop();
+  }, [shimmerAnim]);
+
+  return (
+    <View style={skeletonStyles.container}>
+      {/* ─── Search & Scope Toolbar Skeleton ─── */}
+      <View style={skeletonStyles.toolbarSkeleton}>
+        <Animated.View
+          style={[
+            skeletonStyles.searchBarSkeleton,
+            {opacity: shimmerAnim},
+          ]}
+        />
+        <View style={skeletonStyles.actionButtonsRow}>
+          <Animated.View
+            style={[skeletonStyles.iconButtonSkeleton, {opacity: shimmerAnim}]}
+          />
+          <Animated.View
+            style={[skeletonStyles.iconButtonSkeleton, {opacity: shimmerAnim}]}
+          />
+        </View>
+      </View>
+
+      {/* ─── Quick Filter Chips Skeleton Strip ─── */}
+      <View style={skeletonStyles.chipStripSkeleton}>
+        <Animated.View
+          style={[skeletonStyles.chipSkeleton, {width: 48, opacity: shimmerAnim}]}
+        />
+        <Animated.View
+          style={[skeletonStyles.chipSkeleton, {width: 68, opacity: shimmerAnim}]}
+        />
+        <Animated.View
+          style={[skeletonStyles.chipSkeleton, {width: 76, opacity: shimmerAnim}]}
+        />
+        <Animated.View
+          style={[skeletonStyles.chipSkeleton, {width: 58, opacity: shimmerAnim}]}
+        />
+      </View>
+
+      {/* ─── List Cards Skeleton ─── */}
+      {Array.from({length: cardCount}).map((_, i) => (
+        <Animated.View
+          key={`skeleton_card_${i}`}
+          style={[skeletonStyles.cardSkeleton, {opacity: shimmerAnim}]}>
+          {/* Top row: Status pill + Method + Time */}
+          <View style={skeletonStyles.cardTopRow}>
+            <View style={skeletonStyles.badgeGroup}>
+              <View style={skeletonStyles.statusBadgeSkeleton} />
+              <View style={skeletonStyles.methodBadgeSkeleton} />
+            </View>
+            <View style={skeletonStyles.timeSkeleton} />
+          </View>
+
+          {/* Middle row: URL lines */}
+          <View style={skeletonStyles.urlLineLong} />
+          <View style={skeletonStyles.urlLineShort} />
+
+          {/* Bottom row: Latency & Size */}
+          <View style={skeletonStyles.cardBottomRow}>
+            <View style={skeletonStyles.metaPillSkeleton} />
+            <View style={skeletonStyles.metaPillSkeleton} />
+          </View>
+        </Animated.View>
+      ))}
+    </View>
+  );
+});
+
+const skeletonStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 12,
+    paddingTop: 8,
+  },
+  toolbarSkeleton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    marginBottom: 8,
+  },
+  searchBarSkeleton: {
+    flex: 1,
+    height: 36,
+    borderRadius: 8,
+    backgroundColor: AppColors.graySurface,
+    borderWidth: 1,
+    borderColor: AppColors.dividerColor,
+  },
+  actionButtonsRow: {
+    flexDirection: 'row',
+    gap: 6,
+  },
+  iconButtonSkeleton: {
+    width: 36,
+    height: 36,
+    borderRadius: 8,
+    backgroundColor: AppColors.graySurface,
+    borderWidth: 1,
+    borderColor: AppColors.dividerColor,
+  },
+  chipStripSkeleton: {
+    flexDirection: 'row',
+    gap: 6,
+    marginBottom: 10,
+  },
+  chipSkeleton: {
+    height: 24,
+    borderRadius: 6,
+    backgroundColor: AppColors.graySurface,
+    borderWidth: 1,
+    borderColor: AppColors.dividerColor,
+  },
+  cardSkeleton: {
+    backgroundColor: AppColors.primaryLight,
+    borderRadius: 10,
+    padding: 12,
+    marginBottom: 8,
+    borderWidth: 1,
+    borderColor: AppColors.dividerColor,
+  },
+  cardTopRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 8,
+  },
+  badgeGroup: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+  },
+  statusBadgeSkeleton: {
+    width: 38,
+    height: 18,
+    borderRadius: 4,
+    backgroundColor: AppColors.graySurface,
+  },
+  methodBadgeSkeleton: {
+    width: 44,
+    height: 18,
+    borderRadius: 4,
+    backgroundColor: AppColors.graySurface,
+  },
+  timeSkeleton: {
+    width: 48,
+    height: 12,
+    borderRadius: 4,
+    backgroundColor: AppColors.graySurface,
+  },
+  urlLineLong: {
+    height: 13,
+    borderRadius: 4,
+    backgroundColor: AppColors.graySurface,
+    marginBottom: 5,
+    width: '90%',
+  },
+  urlLineShort: {
+    height: 11,
+    borderRadius: 4,
+    backgroundColor: AppColors.graySurface,
+    marginBottom: 8,
+    width: '55%',
+  },
+  cardBottomRow: {
+    flexDirection: 'row',
+    gap: 8,
+    marginTop: 2,
+  },
+  metaPillSkeleton: {
+    width: 52,
+    height: 14,
+    borderRadius: 4,
+    backgroundColor: AppColors.graySurface,
+  },
+});
+
+export default SkeletonPlaceholder;

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.0';
+export const LIB_VERSION = '2.3.2';

package/src/customHooks/storageInspector.ts

@@ -273,13 +273,13 @@ export const calculateByteSize = (str: string): number => {
 };
 
 /**
- * Determine type and format value safely
+ * Determine type and format value safely without blocking JS thread
  */
 export const analyzeStorageValue = (
   rawVal: any,
 ): {
   strVal: string;
-  parsedVal?: any;
+  parsedValue?: any;
   type: 'json' | 'string' | 'number' | 'boolean' | 'null';
   byteSize: number;
 } => {
@@ -288,14 +288,14 @@ export const analyzeStorageValue = (
   }
 
   const strVal = typeof rawVal === 'string' ? rawVal : String(rawVal);
-  const byteSize = calculateByteSize(strVal);
+  const byteSize = strVal.length * 2;
 
   if (typeof rawVal === 'number') {
-    return {strVal, parsedVal: rawVal, type: 'number', byteSize};
+    return {strVal, parsedValue: rawVal, type: 'number', byteSize};
   }
 
   if (typeof rawVal === 'boolean') {
-    return {strVal, parsedVal: rawVal, type: 'boolean', byteSize};
+    return {strVal, parsedValue: rawVal, type: 'boolean', byteSize};
   }
 
   const trimmed = strVal.trim();
@@ -303,18 +303,22 @@ export const analyzeStorageValue = (
     (trimmed.startsWith('{') && trimmed.endsWith('}')) ||
     (trimmed.startsWith('[') && trimmed.endsWith(']'))
   ) {
-    try {
-      const parsed = JSON.parse(trimmed);
-      return {strVal, parsedVal: parsed, type: 'json', byteSize};
-    } catch {}
+    // For small/medium JSON, parse eagerly; for huge payloads (>10KB), parse lazily on expand
+    if (trimmed.length < 10000) {
+      try {
+        const parsed = JSON.parse(trimmed);
+        return {strVal, parsedValue: parsed, type: 'json', byteSize};
+      } catch {}
+    }
+    return {strVal, type: 'json', byteSize};
   }
 
   if (trimmed === 'true' || trimmed === 'false') {
-    return {strVal, parsedVal: trimmed === 'true', type: 'boolean', byteSize};
+    return {strVal, parsedValue: trimmed === 'true', type: 'boolean', byteSize};
   }
 
   if (!isNaN(Number(trimmed)) && trimmed !== '') {
-    return {strVal, parsedVal: Number(trimmed), type: 'number', byteSize};
+    return {strVal, parsedValue: Number(trimmed), type: 'number', byteSize};
   }
 
   return {strVal, type: 'string', byteSize};
@@ -346,7 +350,7 @@ export const fetchStorageEntries = async (
           entries.push({
             key: k,
             value: analysis.strVal,
-            parsedValue: analysis.parsedVal,
+            parsedValue: analysis.parsedValue,
             type: analysis.type,
             byteSize: analysis.byteSize,
           });
@@ -358,7 +362,7 @@ export const fetchStorageEntries = async (
           entries.push({
             key: k,
             value: analysis.strVal,
-            parsedValue: analysis.parsedVal,
+            parsedValue: analysis.parsedValue,
             type: analysis.type,
             byteSize: analysis.byteSize,
           });
@@ -397,7 +401,7 @@ export const fetchStorageEntries = async (
         entries.push({
           key: k,
           value: analysis.strVal,
-          parsedValue: analysis.parsedVal,
+          parsedValue: analysis.parsedValue,
           type: analysis.type,
           byteSize: analysis.byteSize,
         });

package/src/index.tsx

@@ -146,14 +146,13 @@ import {toggleGlobalTheme} from './styles';
 
 const NetworkInspector = ({
   enabled = true,
-  isEnabled = true,
   storage,
   navigationRef,
   appIcon,
   environment,
-  initialVisible,
+  initialVisible = false,
   visible: controlledVisible,
-}: NetworkInspectorProps): React.JSX.Element => {
+}: NetworkInspectorProps): React.JSX.Element | null => {
   // Set custom storage synchronously during render phase
   setCustomStorage(storage || null);
 
@@ -170,7 +169,7 @@ const NetworkInspector = ({
 
   const [logs, setLogs] = useState<NetworkLog[]>([]);
   const [visible, setVisible] = useState<boolean>(
-    initialVisible ?? controlledVisible ?? false,
+    controlledVisible ?? initialVisible ?? false,
   );
 
   useEffect(() => {
@@ -945,24 +944,29 @@ const NetworkInspector = ({
 
   // 100% Native Main-Thread Floating Button Lifecycle
   useEffect(() => {
-    if (!useNativeFab || !isEnabled || !enabled) {
+    if (!useNativeFab || !enabled) {
       if (useNativeFab) {
-        hideNativeFloatingButton();
+        hideNativeFloatingButton().catch(() => {});
       }
       return;
     }
 
     if (visible) {
-      hideNativeFloatingButton();
+      hideNativeFloatingButton().catch(() => {});
     } else {
-      showNativeFloatingButton();
+      showNativeFloatingButton().catch(() => {});
       setNativeFloatingButtonBadge(
         logs.length > 0 || analyticsEvents.length > 0,
-      );
+      ).catch(() => {});
     }
+
+    return () => {
+      if (useNativeFab) {
+        hideNativeFloatingButton().catch(() => {});
+      }
+    };
   }, [
     useNativeFab,
-    isEnabled,
     enabled,
     visible,
     logs.length,
@@ -1027,21 +1031,12 @@ const NetworkInspector = ({
       if (freshCrashes.length > 0) {
         setCrashRecords(freshCrashes);
       }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [visible]);
 
-  useEffect(() => {
-    if (visible) {
-      const task = InteractionManager.runAfterInteractions(() => {
+      const frame = requestAnimationFrame(() => {
         setIsReady(true);
       });
-      const fallbackTimer = setTimeout(() => {
-        setIsReady(true);
-      }, 350);
       return () => {
-        task.cancel();
-        clearTimeout(fallbackTimer);
+        cancelAnimationFrame(frame);
       };
     } else {
       setIsReady(false);
@@ -1982,7 +1977,8 @@ const NetworkInspector = ({
     setVisible,
     closeModal,
     isReady,
-    isEnabled,
+    enabled,
+    isEnabled: enabled,
     appIcon,
     environment,
     modalHeightPercent,
@@ -2173,16 +2169,29 @@ const NetworkInspector = ({
 };
 
 const NetworkInspectorWrapper = (props: NetworkInspectorProps) => {
-  // If running in production release build and not explicitly force-enabled (e.g. for QA builds),
-  // return null immediately for 0-overhead production stubbing.
-  if (typeof __DEV__ !== 'undefined' && !__DEV__ && !props?.forceEnable) {
+  const enabled = props?.enabled ?? true;
+
+  useEffect(() => {
+    if (!enabled) {
+      hideNativeFloatingButton().catch(() => {});
+    }
+    return () => {
+      hideNativeFloatingButton().catch(() => {});
+    };
+  }, [enabled]);
+
+  // If enabled is false, return null immediately with 0 overhead
+  if (!enabled) {
     return null;
   }
 
   return (
     <I18nextProvider i18n={i18n}>
       <ErrorBoundary fallbackType="inline">
-        <NetworkInspector {...props} />
+        <NetworkInspector
+          {...props}
+          enabled={enabled}
+        />
       </ErrorBoundary>
     </I18nextProvider>
   );

package/src/types/interfaces.ts

@@ -186,8 +186,6 @@ export interface PersistedSettings {
 
 export interface NetworkInspectorProps {
   enabled?: boolean;
-  isEnabled?: boolean;
-  forceEnable?: boolean;
   storage?: InspectorStorage;
   navigationRef?: any;
   appIcon?: any;
@@ -206,6 +204,7 @@ export interface InspectorContextValue {
   setVisible: React.Dispatch<React.SetStateAction<boolean>>;
   closeModal: () => void;
   isReady: boolean;
+  enabled: boolean;
   isEnabled: boolean;
   appIcon?: any;
   environment?: string;