react-native-inapp-inspector 1.1.15 → 1.1.16

package/dist/esm/components/ReduxTreeView.js

@@ -40,7 +40,7 @@ const valueContainsTerm = (val, term) => {
     }
     return Object.keys(val).some(key => key.toLowerCase().includes(t) || valueContainsTerm(val[key], term));
 };
-export const ReduxTreeView = ({ state, actionHistory = [], lastActionMap = {}, search = '', onSearchChange, autoRefresh = true, onToggleAutoRefresh, onClearHistory, onDetailOpenChange, selectedSliceKey = null, onSelectSliceKey, selectedActionId = null, onSelectActionId, }) => {
+export const ReduxTreeView = React.memo(({ state, actionHistory = [], lastActionMap = {}, search = '', onSearchChange, autoRefresh = true, onToggleAutoRefresh, onClearHistory, onDetailOpenChange, selectedSliceKey = null, onSelectSliceKey, selectedActionId = null, onSelectActionId, }) => {
     const [activeTab, setActiveTab] = useState('state');
     const [actionSubTab, setActionSubTab] = useState('payload');
     // local fallbacks if props are not provided
@@ -708,7 +708,7 @@ export const ReduxTreeView = ({ state, actionHistory = [], lastActionMap = {}, s
             }))}
         </ScrollView>)}
     </View>);
-};
+});
 const styles = StyleSheet.create({
     container: {
         flex: 1,

package/dist/esm/components/SegmentedTabs.d.ts

@@ -11,5 +11,5 @@ interface SegmentedTabsProps {
     onChange: (key: string) => void;
     style?: ViewStyle | ViewStyle[];
 }
-declare const SegmentedTabs: ({ tabs, activeKey, onChange, style }: SegmentedTabsProps) => React.JSX.Element;
+declare const SegmentedTabs: React.MemoExoticComponent<({ tabs, activeKey, onChange, style }: SegmentedTabsProps) => React.JSX.Element>;
 export default SegmentedTabs;

package/dist/esm/components/SegmentedTabs.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Pressable, Text, View } from 'react-native';
 import { AppColors } from '../styles/AppColors';
 import { AppFonts } from '../styles/AppFonts';
-const SegmentedTabs = ({ tabs, activeKey, onChange, style }) => (<View style={[
+const SegmentedTabs = React.memo(({ tabs, activeKey, onChange, style }) => (<View style={[
         {
             flexDirection: 'row',
             borderRadius: 8,
@@ -43,5 +43,5 @@ const SegmentedTabs = ({ tabs, activeKey, onChange, style }) => (<View style={[
           </Text>
         </Pressable>);
     })}
-  </View>);
+  </View>));
 export default SegmentedTabs;

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

@@ -1 +1 @@
-export declare const LIB_VERSION = "1.1.15";
+export declare const LIB_VERSION = "1.1.16";

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 = '1.1.15';
+export const LIB_VERSION = '1.1.16';

package/example/App.tsx

@@ -458,6 +458,39 @@ function HomeScreen({ navigation }: any) {
               Trigger Log, Warn & Error Logs
             </Text>
           </TouchableOpacity>
+
+          <View style={[styles.btnRow, {marginTop: 8}]}>
+            <TouchableOpacity
+              style={[styles.gridBtn, { borderColor: '#8B5CF6' }]}
+              onPress={() => {
+                console.log(
+                  'Multi-argument payload inspection:',
+                  { userId: 101, username: 'venkatesh', role: 'Lead Architect' },
+                  ['permissions.read', 'permissions.write', 'permissions.admin'],
+                  { device: 'iPhone 15 Pro', os: 'iOS 18.0', battery: '92%' },
+                );
+              }}
+            >
+              <Text style={[styles.btnText, { color: '#8B5CF6' }]}>
+                Multi-Arg Log
+              </Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              style={[styles.gridBtn, { borderColor: '#EF4444' }]}
+              onPress={() => {
+                try {
+                  throw new TypeError('Cannot read properties of undefined (reading "authToken")');
+                } catch (err) {
+                  console.error(err);
+                }
+              }}
+            >
+              <Text style={[styles.btnText, { color: '#EF4444' }]}>
+                Error Stack Log
+              </Text>
+            </TouchableOpacity>
+          </View>
         </View>
 
         <View style={styles.panelCard}>
@@ -517,8 +550,31 @@ function HomeScreen({ navigation }: any) {
 
         <View style={styles.panelCard}>
           <Text style={styles.panelHeader}>⚙️ REDUX & STATE ACTIONS</Text>
+          <View style={styles.btnRow}>
+            <TouchableOpacity
+              style={[styles.gridBtn, { borderColor: '#10B981' }]}
+              onPress={handleToggleSidebar}
+            >
+              <Text style={[styles.btnText, { color: '#10B981' }]}>
+                Toggle Sidebar
+              </Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={[styles.gridBtn, { borderColor: '#06B6D4' }]}
+              onPress={() => {
+                mockStore.dispatch({
+                  type: 'SET_THEME',
+                  payload: mockStore.getState().settings.theme === 'dark' ? 'light' : 'dark',
+                });
+              }}
+            >
+              <Text style={[styles.btnText, { color: '#06B6D4' }]}>
+                Toggle Theme
+              </Text>
+            </TouchableOpacity>
+          </View>
           <TouchableOpacity
-            style={[styles.fullWidthBtn, { backgroundColor: '#8B5CF6' }]}
+            style={[styles.fullWidthBtn, { backgroundColor: '#8B5CF6', marginTop: 8 }]}
             onPress={handleToggleSidebar}
           >
             <Text style={styles.fullWidthBtnText}>

package/example/README.md

@@ -1,97 +1,53 @@
-This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli).
+# React Native In-App Inspector Example App 🚀
 
-# Getting Started
+This directory contains a complete, interactive sample application demonstrating all the capabilities of **`react-native-inapp-inspector`**.
 
-> **Note**: Make sure you have completed the [Set Up Your Environment](https://reactnative.dev/docs/set-up-your-environment) guide before proceeding.
+---
 
-## Step 1: Start Metro
+## 📱 Features Demonstrated
 
-First, you will need to run **Metro**, the JavaScript build tool for React Native.
+- 🌐 **Network Interception**: Test Axios (`GET`, `POST`, `PUT`, `PATCH`, `DELETE`) and `fetch` requests with response inspector, headers, and cURL generation.
+- 🪵 **Console Logger & Call Stacks**: Test log levels (`log`, `warn`, `error`), multi-argument object logging, error exception stack traces, and Metro source map symbolication.
+- ⏸️ **Live Stream Pause / Resume**: Test pausing and resuming real-time traffic across API and console streams.
+- 🔄 **Redux State Inspection**: Test Redux state tree, live action dispatches, and diff tracking.
+- 📊 **Analytics Tracking**: Test custom analytics events and e-commerce purchase payloads.
+- 🛡️ **Error Boundary**: Test simulated JavaScript and native error catches.
 
-To start the Metro dev server, run the following command from the root of your React Native project:
+---
 
-```sh
-# Using npm
-npm start
+## 🏃 Quick Start
 
-# OR using Yarn
-yarn start
-```
-
-## Step 2: Build and run your app
-
-With Metro running, open a new terminal window/pane from the root of your React Native project, and use one of the following commands to build and run your Android or iOS app:
-
-### Android
+### 1. Install Dependencies
 
-```sh
-# Using npm
-npm run android
-
-# OR using Yarn
-yarn android
+```bash
+cd example
+npm install
 ```
 
-### iOS
-
-For iOS, remember to install CocoaPods dependencies (this only needs to be run on first clone or after updating native deps).
+### 2. iOS Setup
 
-The first time you create a new project, run the Ruby bundler to install CocoaPods itself:
-
-```sh
+```bash
+cd ios
 bundle install
-```
-
-Then, and every time you update your native dependencies, run:
-
-```sh
 bundle exec pod install
-```
-
-For more information, please visit [CocoaPods Getting Started guide](https://guides.cocoapods.org/using/getting-started.html).
-
-```sh
-# Using npm
+cd ..
 npm run ios
-
-# OR using Yarn
-yarn ios
 ```
 
-If everything is set up correctly, you should see your new app running in the Android Emulator, iOS Simulator, or your connected device.
-
-This is one way to run your app — you can also build it directly from Android Studio or Xcode.
-
-## Step 3: Modify your app
-
-Now that you have successfully run the app, let's make changes!
-
-Open `App.tsx` in your text editor of choice and make some changes. When you save, your app will automatically update and reflect these changes — this is powered by [Fast Refresh](https://reactnative.dev/docs/fast-refresh).
-
-When you want to forcefully reload, for example to reset the state of your app, you can perform a full reload:
-
-- **Android**: Press the <kbd>R</kbd> key twice or select **"Reload"** from the **Dev Menu**, accessed via <kbd>Ctrl</kbd> + <kbd>M</kbd> (Windows/Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (macOS).
-- **iOS**: Press <kbd>R</kbd> in iOS Simulator.
+### 3. Android Setup
 
-## Congratulations! :tada:
-
-You've successfully run and modified your React Native App. :partying_face:
-
-### Now what?
-
-- If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps).
-- If you're curious to learn more about React Native, check out the [docs](https://reactnative.dev/docs/getting-started).
-
-# Troubleshooting
-
-If you're having issues getting the above steps to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page.
+```bash
+npm run android
+```
 
-# Learn More
+---
 
-To learn more about React Native, take a look at the following resources:
+## 🧪 Interactive Test Controls
 
-- [React Native Website](https://reactnative.dev) - learn more about React Native.
-- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment.
-- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**.
-- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts.
-- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native.
+The example screen provides one-tap triggers for:
+- **Network Requests**: `Fetch User`, `Failing Request`, `Axios GET`, `Axios POST`, `Axios PUT`, `Axios PATCH`, `Axios DELETE`.
+- **Console Events**: `Trigger Log / Warn / Error`, `Multi-Arg Log`, `Error Stack Log`.
+- **Analytics Events**: `Log Custom Event`, `Log Purchase`.
+- **Redux Actions**: `Toggle Sidebar`, `Toggle Theme`.
+- **Simulate Batch (Flood)**: `Fire Sample All` triggers a simultaneous barrage of requests, logs, analytics events, and state dispatches.
+- **Error Boundary**: `Crash JS Component` triggers a safe Error Boundary catch.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-inapp-inspector",
-  "version": "1.1.15",
+  "version": "1.1.16",
   "description": "A self-contained network, console, analytics, and webview inspector for React Native applications.",
   "repository": {
     "type": "git",