react-native-inapp-inspector 2.3.2 → 2.3.3

package/dist/esm/components/Inspector/SkeletonPlaceholder.js

@@ -0,0 +1,173 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, StyleSheet, View } from 'react-native';
+import { AppColors } from '../../styles/AppColors';
+export const SkeletonPlaceholder = React.memo(function SkeletonPlaceholder({ cardCount = 4, }) {
+    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/dist/esm/components/SkeletonPlaceholder.d.ts

@@ -1,6 +1,2 @@
-import React from 'react';
-interface SkeletonPlaceholderProps {
-    cardCount?: number;
-}
-declare const SkeletonPlaceholder: React.NamedExoticComponent<SkeletonPlaceholderProps>;
-export default SkeletonPlaceholder;
+export * from './Inspector/SkeletonPlaceholder';
+export { default } from './Inspector/SkeletonPlaceholder';

package/dist/esm/components/SkeletonPlaceholder.js

@@ -1,173 +1,2 @@
-import React, { useEffect, useRef } from 'react';
-import { Animated, StyleSheet, View } from 'react-native';
-import { AppColors } from '../styles/AppColors';
-const SkeletonPlaceholder = React.memo(function SkeletonPlaceholder({ cardCount = 4, }) {
-    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;
+export * from './Inspector/SkeletonPlaceholder';
+export { default } from './Inspector/SkeletonPlaceholder';

package/dist/esm/constants/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "2.3.2";
+export declare const LIB_VERSION = "2.3.3";

package/dist/esm/constants/version.js

@@ -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.2';
+export const LIB_VERSION = '2.3.3';

package/dist/esm/index.d.ts

@@ -8,6 +8,7 @@ export { setupAnalyticsLogger, logAnalyticsEvent, subscribeAnalyticsEvents, clea
 export { setupGlobalCrashHandler, subscribeCrashEvents, emitCrashEvent, getCrashRecords, clearCrashRecords, simulateTestCrash, exportCrashReport, parseCrashStackTrace, recordCustomCrash, addCrashBreadcrumb, recordNavigationBreadcrumb, recordNetworkBreadcrumb, recordReduxBreadcrumb, recordUserActionBreadcrumb, computeCrashFingerprint, type CrashEventPayload, } from './customHooks/crashHandler';
 export { default as CrashTab } from './components/Inspector/CrashTab';
 export { default as ErrorBoundary } from './components/ErrorBoundary';
+export { default as SkeletonPlaceholder } from './components/Inspector/SkeletonPlaceholder';
 export { connectReduxStore, inspectorReduxMiddleware, getReduxState, subscribeReduxState, getActionHistory, clearActionHistory, getLastActionForReducer, } from './customHooks/reduxLogger';
 export { getEventCategory, registerGAPlugin, type GAPlugin, } from './helpers/gaAnalyticsRegistry';
 export { usePerformanceTracker, useComponentProfiler, useNavigationProfiler, trackComponentRender, trackNavigationTransition, trackHeavyTask, measureAsync, getHermesMemoryStats, registerComponentProfile, subscribeRenderProfiles, getRenderProfiles, logPerformanceEvent, clearPerformanceEvents, subscribePerformanceEvents, getPerformanceEvents, getInitialRenderProfiles, getInitialPerformanceEvents, generateFixSnippet, } from './customHooks/performanceTracker';

package/dist/esm/index.js

@@ -1866,6 +1866,7 @@ export { setupAnalyticsLogger, logAnalyticsEvent, subscribeAnalyticsEvents, clea
 export { setupGlobalCrashHandler, subscribeCrashEvents, emitCrashEvent, getCrashRecords, clearCrashRecords, simulateTestCrash, exportCrashReport, parseCrashStackTrace, recordCustomCrash, addCrashBreadcrumb, recordNavigationBreadcrumb, recordNetworkBreadcrumb, recordReduxBreadcrumb, recordUserActionBreadcrumb, computeCrashFingerprint, } from './customHooks/crashHandler';
 export { default as CrashTab } from './components/Inspector/CrashTab';
 export { default as ErrorBoundary } from './components/ErrorBoundary';
+export { default as SkeletonPlaceholder } from './components/Inspector/SkeletonPlaceholder';
 export { connectReduxStore, inspectorReduxMiddleware, getReduxState, subscribeReduxState, getActionHistory, clearActionHistory, getLastActionForReducer, } from './customHooks/reduxLogger';
 export { getEventCategory, registerGAPlugin, } from './helpers/gaAnalyticsRegistry';
 export { usePerformanceTracker, useComponentProfiler, useNavigationProfiler, trackComponentRender, trackNavigationTransition, trackHeavyTask, measureAsync, getHermesMemoryStats, registerComponentProfile, subscribeRenderProfiles, getRenderProfiles, logPerformanceEvent, clearPerformanceEvents, subscribePerformanceEvents, getPerformanceEvents, getInitialRenderProfiles, getInitialPerformanceEvents, generateFixSnippet, } from './customHooks/performanceTracker';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-inapp-inspector",
-  "version": "2.3.2",
+  "version": "2.3.3",
   "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",

package/src/components/Inspector/MainScreen.tsx

@@ -21,7 +21,7 @@ import LogDetail from './LogDetail';
 import ConsoleTab from './ConsoleTab';
 import AnalyticsTab from './AnalyticsTab';
 import AnalyticsDetail from '../AnalyticsDetail';
-import SkeletonPlaceholder from '../SkeletonPlaceholder';
+import SkeletonPlaceholder from './SkeletonPlaceholder';
 import ReduxTab from './ReduxTab';
 import ReduxDetail from './ReduxDetail';
 import BundleTab from './BundleTab';

package/src/components/Inspector/SkeletonPlaceholder.tsx

@@ -0,0 +1,206 @@
+import React, {useEffect, useRef} from 'react';
+import {Animated, StyleSheet, View} from 'react-native';
+import {AppColors} from '../../styles/AppColors';
+
+export interface SkeletonPlaceholderProps {
+  cardCount?: number;
+}
+
+export 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;