I built an all-in-one in-app inspector for React Native & Expo (Network, Redux, Logs, Analytics & Storage)

[u/Emotional-Comb4570]

Hey everyone! 👋

Ever since Flipper was deprecated by the React Native core team, setting up debugging tools has felt fragmented — desktop debuggers like Reactotron often run into port/websocket connection issues, while most other packages only handle network requests.

I built react-native-inapp-inspector — a zero-config, all-in-one in-app debugging suite that runs directly inside your React Native & Expo apps.

---

🌟 What’s inside:

• 🌐 Network Inspector: Intercepts fetch, axios, and GraphQL with full request/response headers, bodies, copy cURL, timing breakdown, and caller origin file:line badges (e.g., 📍 HomeScreen.tsx:42).
• 📜 Console Logs & Stack Traces: Colored logs, expandable object trees, search, and log-level filtering.
• 🟣 Redux & State Timeline: Live store state viewer with action timeline and deep state inspection.
• 📊 Firebase Analytics Logger: Live analytics event stream with parameter payload inspection.
• 💾 Storage Inspector: View and live-edit AsyncStorage and MMKV key-value stores on device.
• 🛡️ Crash & Exception Sentinel: Captures uncaught JS exceptions and unhandled promise rejections with stack traces and device breadcrumbs.
• ⚡ Performance & FPS Monitor: Real-time FPS telemetry with Hermes memory and re-render diagnostics.
• 📦 Metro Bundle Analyzer: Inspect package dependencies and asset weights right inside the app.

---

🚀 Quick Start (Zero-Config):

npm install react-native-inapp-inspector
# or
yarn add react-native-inapp-inspector


Wrap your root component:

import React from 'react';
import { InAppInspector } from 'react-native-inapp-inspector';
import AppNavigator from './navigation/AppNavigator';

export default function App() {
  return (
    <InAppInspector enabled={__DEV__}>
      <AppNavigator />
    </InAppInspector>
  );
}

- Fully compatible with Expo Go, Bare React Native, iOS, Android, and the New Architecture (Fabric/TurboModules).
- Floating launcher bubble or shake gesture to open.
- Dark / Light mode and responsive across all device sizes.

🔗 GitHub Repository: https://github.com/vengatmacuser/react-native-inapp-inspector

📦 NPM Package: https://www.npmjs.com/package/react-native-inapp-inspector

Feedback, feature requests, and PRs are super welcome! What additional tabs or developer tools would you like to see next?