react-native-inapp-inspector 1.1.0 → 1.1.2

package/dist/commonjs/styles/index.d.ts

@@ -35,6 +35,7 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         color: string;
         fontSize: number;
         letterSpacing: number;
+        paddingBottom: number;
     };
     headerButtonGroup: {
         flexDirection: string;
@@ -174,6 +175,26 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
     listContent: {
         paddingBottom: number;
     };
+    scrollTopBtn: {
+        position: string;
+        top: number;
+        right: number;
+        width: number;
+        height: number;
+        borderRadius: number;
+        backgroundColor: string;
+        alignItems: string;
+        justifyContent: string;
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+        zIndex: number;
+    };
     detailScroll: {
         flex: number;
     };
@@ -1420,6 +1441,9 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
     };
     headerGradient: {
         width: string;
+        borderTopLeftRadius: number;
+        borderTopRightRadius: number;
+        overflow: string;
     };
     statusChip: {
         paddingHorizontal: number;

package/dist/commonjs/styles/index.js

@@ -62,8 +62,9 @@ const getRawStyles = (colors) => ({
     headerTitle: {
         fontFamily: AppFonts_1.AppFonts.interBold,
         color: colors.primaryLight,
-        fontSize: 18,
+        fontSize: 15,
         letterSpacing: 0.3,
+        paddingBottom: 4,
     },
     headerButtonGroup: {
         flexDirection: 'row',
@@ -187,6 +188,23 @@ const getRawStyles = (colors) => ({
         borderColor: 'rgba(255, 255, 255, 0.08)',
     },
     listContent: { paddingBottom: 12 },
+    scrollTopBtn: {
+        position: 'absolute',
+        top: 12,
+        right: 16,
+        width: 38,
+        height: 38,
+        borderRadius: 19,
+        backgroundColor: colors.purple,
+        alignItems: 'center',
+        justifyContent: 'center',
+        shadowColor: '#000000',
+        shadowOffset: { width: 0, height: 3 },
+        shadowOpacity: 0.25,
+        shadowRadius: 5,
+        elevation: 6,
+        zIndex: 50,
+    },
     detailScroll: { flex: 1 },
     detailContent: { paddingHorizontal: 6, paddingTop: 8, paddingBottom: 20 },
     fabWrapper: {
@@ -1321,6 +1339,9 @@ const getRawStyles = (colors) => ({
     },
     headerGradient: {
         width: '100%',
+        borderTopLeftRadius: 20,
+        borderTopRightRadius: 20,
+        overflow: 'hidden',
     },
     // Status chip used in MetaAccordion
     statusChip: {

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

@@ -1,8 +1,9 @@
 import React from 'react';
-declare const JsonViewer: ({ data, search, forceOpen, defaultExpandDepth, }: {
+declare const JsonViewer: ({ data, search, forceOpen, defaultExpandDepth, wrap, }: {
     data: unknown;
     search?: string;
     forceOpen?: boolean;
     defaultExpandDepth?: number;
+    wrap?: boolean;
 }) => React.JSX.Element;
 export default JsonViewer;

package/dist/esm/components/JsonViewer.js

@@ -4,11 +4,13 @@ import { ScrollView, View } from 'react-native';
 import TreeNode from './TreeNode';
 // Stylesheet
 import styles from '../styles';
-const JsonViewer = ({ data, search, forceOpen, defaultExpandDepth, }) => {
+const JsonViewer = ({ data, search, forceOpen, defaultExpandDepth, wrap, }) => {
+    const tree = (<TreeNode data={data} search={search} forceOpen={forceOpen} defaultExpandDepth={defaultExpandDepth}/>);
+    if (wrap) {
+        return <View style={[styles.codeBlock, { width: '100%' }]}>{tree}</View>;
+    }
     return (<ScrollView horizontal showsHorizontalScrollIndicator={true} style={styles.codeBlockScroll}>
-      <View style={styles.codeBlock}>
-        <TreeNode data={data} search={search} forceOpen={forceOpen} defaultExpandDepth={defaultExpandDepth}/>
-      </View>
+      <View style={styles.codeBlock}>{tree}</View>
     </ScrollView>);
 };
 export default JsonViewer;

package/dist/esm/components/MetaAccordion.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, Pressable, Text, Animated } from 'react-native';
+import { View, Pressable, Text, Animated, Linking } from 'react-native';
 // Constants
 import { DURATION_FAST_MS, DURATION_SLOW_MS } from '../constants';
 // Custom Hooks
@@ -40,7 +40,7 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
             </Text>
           </View>
           <View style={styles.metaDivider}/>
-          
+
           <View style={styles.metaRow}>
             <View style={styles.metaLabelRow}>
               <TerminalIcon color={AppColors.grayTextWeak} size={14}/>
@@ -51,9 +51,12 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
             {
                 borderColor: 'rgba(107, 78, 255, 0.25)',
                 backgroundColor: 'rgba(107, 78, 255, 0.08)',
-            }
+            },
+        ]}>
+              <Text style={[
+            styles.statusText,
+            { color: AppColors.purple, fontFamily: AppFonts.interBold },
         ]}>
-              <Text style={[styles.statusText, { color: AppColors.purple, fontFamily: AppFonts.interBold }]}>
                 {method || 'GET'}
               </Text>
             </View>
@@ -91,7 +94,9 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
               <GlobeIcon color={AppColors.grayTextWeak} size={14}/>
               <Text style={styles.metaLabel}>Content Type</Text>
             </View>
-            <Text style={styles.metaValue}>{contentType || 'application/json'}</Text>
+            <Text style={styles.metaValue}>
+              {contentType || 'application/json'}
+            </Text>
           </View>
           <View style={styles.metaDivider}/>
 
@@ -125,7 +130,7 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
             </View>
           </View>
           <View style={styles.metaDivider}/>
-          
+
           <View style={styles.metaRow}>
             <View style={styles.metaLabelRow}>
               <SizeIcon color={AppColors.grayTextWeak}/>
@@ -140,7 +145,22 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
               <GlobeIcon color={AppColors.grayTextWeak} size={14}/>
               <Text style={styles.metaLabel}>Full URL</Text>
             </View>
-            <Text selectable={true} numberOfLines={3} ellipsizeMode="tail" style={[styles.metaValue, { fontSize: 11.5, color: AppColors.grayTextWeak, flex: 1, textAlign: 'right', lineHeight: 16 }]}>
+            <Text selectable={true} numberOfLines={3} ellipsizeMode="tail" onPress={() => {
+            if (url) {
+                Linking.openURL(url).catch(() => { });
+            }
+        }} style={[
+            styles.metaValue,
+            {
+                fontSize: 11.5,
+                color: url ? AppColors.purple : AppColors.grayTextWeak,
+                textDecorationLine: url ? 'underline' : 'none',
+                fontFamily: AppFonts.interMedium,
+                flex: 1,
+                textAlign: 'right',
+                lineHeight: 16,
+            },
+        ]}>
               {url || '—'}
             </Text>
           </View>

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

@@ -1,4 +1,8 @@
 import React from 'react';
+export declare const ReduxStoreIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const ReduxBoltIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const ReduxTimelineIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const ReduxTreeIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const ReduxTreeView: ({ state, lastActionMap, search, }: {
     state: any;
     lastActionMap: Record<string, any>;

package/dist/esm/components/ReduxTreeView.js

@@ -2,9 +2,47 @@ import React, { useEffect, useRef, useState } from 'react';
 import { Animated, LayoutAnimation, Platform, Pressable, StyleSheet, Text, UIManager, View, } from 'react-native';
 import { AppColors } from '../styles/AppColors';
 import { AppFonts } from '../styles/AppFonts';
-import { ChevronIcon } from './NetworkIcons';
+import { ChevronIcon, CopyIcon, CheckIcon } from './NetworkIcons';
 import Svg, { Path } from 'react-native-svg';
 import AnimatedEntrance from './AnimatedEntrance';
+import { copyToClipboard } from '../helpers';
+// #15 — copy-to-clipboard control for a single dispatched action
+const ActionCopyButton = ({ value }) => {
+    const [copied, setCopied] = useState(false);
+    return (<Pressable hitSlop={10} onPress={() => {
+            copyToClipboard(value(), 'Action');
+            setCopied(true);
+            setTimeout(() => setCopied(false), 1200);
+        }} style={{
+            width: 26,
+            height: 26,
+            borderRadius: 7,
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: copied
+                ? `${AppColors.greenColor}1A`
+                : AppColors.grayBackground,
+            borderWidth: 1,
+            borderColor: AppColors.dividerColor,
+        }}>
+      {copied ? (<CheckIcon color={AppColors.greenColor} size={13}/>) : (<CopyIcon color={AppColors.grayTextWeak} size={13}/>)}
+    </Pressable>);
+};
+// #15 — derive the redux module / folder name from an action type.
+// Supports RTK slice convention ("booking/setDate" -> "Booking") and
+// falls back to the first affected slice.
+const getActionModule = (type, affectedSlices) => {
+    if (type && type.includes('/')) {
+        const prefix = type.split('/')[0];
+        if (prefix)
+            return prefix.charAt(0).toUpperCase() + prefix.slice(1);
+    }
+    if (affectedSlices && affectedSlices.length > 0) {
+        const s = affectedSlices[0];
+        return s.charAt(0).toUpperCase() + s.slice(1);
+    }
+    return null;
+};
 // Custom icons
 const DatabaseIcon = ({ color = AppColors.grayTextWeak, size = 12 }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
     <Path d="M12 2C6.5 2 2 4.2 2 7v10c0 2.8 4.5 5 10 5s10-2.2 10-5V7c0-2.8-4.5-5-10-5z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
@@ -17,6 +55,26 @@ const BoltIcon = ({ color = AppColors.grayTextWeak, size = 12 }) => (<Svg width=
 const FolderIcon = ({ color = AppColors.grayTextWeak, size = 12 }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
     <Path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
   </Svg>);
+// Exported icons so the Redux tab's section headers and sub-tab buttons can
+// render real vector icons instead of emoji (which fail to render on some
+// Android/font setups).
+export const ReduxStoreIcon = ({ color = AppColors.grayTextWeak, size = 12, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path d="M3 9l1.5-5h15L21 9M3 9v10a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V9M3 9h18M7 9v3a2 2 0 0 0 4 0V9m2 0v3a2 2 0 0 0 4 0V9" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+  </Svg>);
+export const ReduxBoltIcon = ({ color = AppColors.grayTextWeak, size = 12, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" fill={color} stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+  </Svg>);
+// Action Timeline — a history/clock icon reads as "sequence over time".
+export const ReduxTimelineIcon = ({ color = AppColors.grayTextWeak, size = 12, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path d="M3 3v5h5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <Path d="M3.05 13A9 9 0 1 0 6 5.3L3 8" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <Path d="M12 7v5l3 2" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </Svg>);
+// Store Tree — a node hierarchy icon reads as "nested tree structure".
+export const ReduxTreeIcon = ({ color = AppColors.grayTextWeak, size = 12, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path d="M9 4h6v4H9zM3 16h6v4H3zm12 0h6v4h-6z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <Path d="M12 8v4M6 16v-2h12v2" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </Svg>);
 const animateTreeLayout = () => {
     LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
 };
@@ -142,7 +200,10 @@ export const ReduxTreeView = ({ state, lastActionMap, search, }) => {
             setStoreExpanded(!storeExpanded);
         }} style={styles.storeHeader}>
         <AnimatedChevron color="#FFFFFF" expanded={storeExpanded} size={12} style={styles.chevronWrap}/>
-        <Text style={styles.storeTitle}>🏪 Redux Store</Text>
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+          <ReduxStoreIcon color="#FFFFFF" size={14}/>
+          <Text style={styles.storeTitle}>Redux Store</Text>
+        </View>
         <View style={styles.badge}>
           <Text style={styles.badgeText}>{reducers.length} Reducers</Text>
         </View>
@@ -246,9 +307,12 @@ export const ReduxActionTimeline = ({ history, onClear, search, }) => {
     });
     return (<View style={timelineStyles.container}>
       <View style={timelineStyles.headerRow}>
-        <Text style={timelineStyles.headerTitle}>
-          ⚡ Dispatched Actions ({filteredHistory.length})
-        </Text>
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+          <ReduxBoltIcon color={AppColors.purple} size={15}/>
+          <Text style={timelineStyles.headerTitle}>
+            Dispatched Actions ({filteredHistory.length})
+          </Text>
+        </View>
         {history.length > 0 && (<Pressable onPress={onClear} style={timelineStyles.clearBtn}>
             <Text style={timelineStyles.clearBtnText}>Clear Log</Text>
           </Pressable>)}
@@ -283,12 +347,49 @@ export const ReduxActionTimeline = ({ history, onClear, search, }) => {
                         },
                     ]}>
                   <View style={timelineStyles.cardHeader}>
-                    <View style={timelineStyles.typeBadge}>
-                      <Text style={timelineStyles.typeText}>{item.type}</Text>
+                    <View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 6,
+                        flex: 1,
+                    }}>
+                      {(() => {
+                        const moduleName = getActionModule(item.type, item.affectedSlices);
+                        return moduleName ? (<View style={{
+                                paddingHorizontal: 7,
+                                paddingVertical: 2,
+                                borderRadius: 6,
+                                backgroundColor: `${AppColors.purple}14`,
+                                borderWidth: 1,
+                                borderColor: `${AppColors.purple}33`,
+                            }}>
+                            <Text style={{
+                                fontFamily: AppFonts.interBold,
+                                fontSize: 9.5,
+                                color: AppColors.purple,
+                                letterSpacing: 0.2,
+                            }}>
+                              {moduleName}
+                            </Text>
+                          </View>) : null;
+                    })()}
+                      <View style={timelineStyles.typeBadge}>
+                        <Text style={timelineStyles.typeText}>{item.type}</Text>
+                      </View>
+                    </View>
+                    <View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 8,
+                    }}>
+                      <Text style={timelineStyles.timestamp}>
+                        {item.timestamp}
+                      </Text>
+                      <ActionCopyButton value={() => ({
+                        type: item.type,
+                        payload: item.payload,
+                    })}/>
                     </View>
-                    <Text style={timelineStyles.timestamp}>
-                      {item.timestamp}
-                    </Text>
                   </View>
 
                   {item.affectedSlices.length > 0 && (<View style={timelineStyles.slicesRow}>

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

@@ -5,3 +5,4 @@ export declare const METHOD_COLORS: Record<Method, string>;
 export declare const DOMAIN_COLORS: string[];
 export declare const DURATION_FAST_MS = 200;
 export declare const DURATION_SLOW_MS = 800;
+export { LIB_VERSION } from './version';

package/dist/esm/constants/index.js

@@ -30,3 +30,6 @@ export const DOMAIN_COLORS = [
 ];
 export const DURATION_FAST_MS = 200;
 export const DURATION_SLOW_MS = 800;
+// Package version — auto-generated from package.json at build time.
+// See scripts/gen-version.js (wired to the "prebuild" npm script).
+export { LIB_VERSION } from './version';

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

@@ -0,0 +1 @@
+export declare const LIB_VERSION = "1.1.2";

package/dist/esm/constants/version.js

@@ -0,0 +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.2';

package/dist/esm/customHooks/reduxLogger.js

@@ -29,7 +29,9 @@ export const subscribeReduxState = (cb) => {
     };
 };
 export const connectReduxStore = (store) => {
-    if (!store || typeof store.getState !== 'function' || typeof store.subscribe !== 'function') {
+    if (!store ||
+        typeof store.getState !== 'function' ||
+        typeof store.subscribe !== 'function') {
         console.warn('[NetworkInspector] Invalid Redux store passed to connectReduxStore.');
         return;
     }
@@ -72,8 +74,14 @@ export const connectReduxStore = (store) => {
             }
         }
         if (globalReduxAutoRefresh) {
+            // Refresh the displayed state tree snapshot.
             setReduxState(nextState);
         }
+        else {
+            // Tree is paused, but the action timeline / last-action map still changed,
+            // so notify subscribers to re-render those without moving the tree snapshot.
+            listeners.forEach(cb => cb());
+        }
         return result;
     };
     setReduxState(store.getState());