react-native-inapp-inspector 1.1.13 → 1.1.15

package/dist/esm/components/MetaAccordion.js

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { View, Pressable, Text, Animated } from 'react-native';
 // Constants
 import { DURATION_FAST_MS, DURATION_SLOW_MS } from '../constants';
@@ -15,8 +16,9 @@ import { AppColors } from '../styles/AppColors';
 import { AppFonts } from '../styles/AppFonts';
 import styles from '../styles';
 const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, method, contentType, url, }) => {
+    const { t } = useTranslation();
     const [urlExpanded, setUrlExpanded] = useState(false);
-    const { toggleOpen, chevronStyle, bodyStyle } = useAccordion(true, 400, 390);
+    const { toggleOpen, chevronStyle, bodyStyle } = useAccordion(true, 800, 390);
     const isFailed = status === 0 || status == null;
     const renderFormattedUrl = (rawUrl) => {
         if (!rawUrl)
@@ -44,10 +46,10 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
                 search = pathAndSearch.substring(queryIndex);
             }
             return (<Text style={{ lineHeight: 16 }}>
-          {protocol ? (<Text style={{ color: '#94A3B8', fontFamily: AppFonts.interRegular }}>{protocol}</Text>) : null}
+          {protocol ? (<Text style={{ color: AppColors.slate400, fontFamily: AppFonts.interRegular }}>{protocol}</Text>) : null}
           <Text style={{ color: AppColors.purple, fontFamily: AppFonts.interBold }}>{host}</Text>
-          <Text style={{ color: '#334155', fontFamily: AppFonts.interMedium }}>{pathname}</Text>
-          {search ? (<Text style={{ color: '#0D9488', fontFamily: AppFonts.interRegular }}>{search}</Text>) : null}
+          <Text style={{ color: AppColors.slate700, fontFamily: AppFonts.interMedium }}>{pathname}</Text>
+          {search ? (<Text style={{ color: AppColors.teal600, fontFamily: AppFonts.interRegular }}>{search}</Text>) : null}
         </Text>);
         }
         catch {
@@ -69,7 +71,7 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
           <View style={styles.metaRow}>
             <View style={styles.metaLabelRow}>
               <CalendarIcon color={AppColors.grayTextWeak} size={14}/>
-              <Text style={styles.metaLabel}>Triggered At</Text>
+              <Text style={styles.metaLabel}>{t('network.triggeredAt')}</Text>
             </View>
             <Text style={[
             styles.metaValue,
@@ -83,13 +85,13 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
           <View style={styles.metaRow}>
             <View style={styles.metaLabelRow}>
               <TerminalIcon color={AppColors.grayTextWeak} size={14}/>
-              <Text style={styles.metaLabel}>Method</Text>
+              <Text style={styles.metaLabel}>{t('network.methodHeader')}</Text>
             </View>
             <View style={[
             styles.statusChip,
             {
-                borderColor: 'rgba(107, 78, 255, 0.25)',
-                backgroundColor: 'rgba(107, 78, 255, 0.08)',
+                borderColor: `${AppColors.brandPurple}40`,
+                backgroundColor: `${AppColors.brandPurple}14`,
             },
         ]}>
               <Text style={[
@@ -105,7 +107,7 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
           <View style={styles.metaRow}>
             <View style={styles.metaLabelRow}>
               <StatusIcon color={AppColors.grayTextWeak}/>
-              <Text style={styles.metaLabel}>Status</Text>
+              <Text style={styles.metaLabel}>{t('network.statusHeader')}</Text>
             </View>
             <View style={[
             styles.statusChip,
@@ -122,7 +124,7 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
             styles.statusText,
             { color: isFailed ? AppColors.errorColor : statusColor },
         ]}>
-                {isFailed ? 'Failed (Network Error)' : String(status)}
+                {isFailed ? t('network.failedNetworkError') : String(status)}
               </Text>
             </View>
           </View>
@@ -131,7 +133,7 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
           <View style={styles.metaRow}>
             <View style={styles.metaLabelRow}>
               <GlobeIcon color={AppColors.grayTextWeak} size={14}/>
-              <Text style={styles.metaLabel}>Content Type</Text>
+              <Text style={styles.metaLabel}>{t('network.contentType')}</Text>
             </View>
             <Text style={styles.metaValue}>
               {contentType || 'application/json'}
@@ -142,7 +144,7 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
           <View style={styles.metaRow}>
             <View style={styles.metaLabelRow}>
               <ClockIcon color={AppColors.grayTextWeak} size={14}/>
-              <Text style={styles.metaLabel}>Duration</Text>
+              <Text style={styles.metaLabel}>{t('network.durationHeader')}</Text>
             </View>
             <View style={styles.metaValueRow}>
               {duration != null && !isFailed && (<View style={[
@@ -157,10 +159,10 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
                 { color: getDurationColor(duration) },
             ]}>
                     {duration < DURATION_FAST_MS
-                ? 'Fast'
+                ? t('network.perf.fast')
                 : duration < DURATION_SLOW_MS
-                    ? 'Moderate'
-                    : 'Slow'}
+                    ? t('network.perf.moderate')
+                    : t('network.perf.slow')}
                   </Text>
                 </View>)}
               <Text style={styles.metaValue}>
@@ -173,7 +175,7 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
           <View style={styles.metaRow}>
             <View style={styles.metaLabelRow}>
               <SizeIcon color={AppColors.grayTextWeak}/>
-              <Text style={styles.metaLabel}>Size</Text>
+              <Text style={styles.metaLabel}>{t('network.sizeHeader')}</Text>
             </View>
             <Text style={styles.metaValue}>{size}</Text>
           </View>
@@ -183,7 +185,7 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
             <View style={{ flexDirection: 'row', justifyContent: 'space-between', width: '100%', alignItems: 'center' }}>
               <View style={styles.metaLabelRow}>
                 <GlobeIcon color={AppColors.grayTextWeak} size={14}/>
-                <Text style={styles.metaLabel}>Full URL</Text>
+                <Text style={styles.metaLabel}>{t('network.fullUrl')}</Text>
               </View>
               
               <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
@@ -193,7 +195,7 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
                 fontSize: 10.5,
                 color: AppColors.purple,
             }}>
-                      {urlExpanded ? 'Show Less' : 'Show More'}
+                      {urlExpanded ? t('network.showLess') : t('network.showMore')}
                     </Text>
                   </TouchableScale>)}
                 
@@ -204,18 +206,18 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
                 color: AppColors.purple,
                 textDecorationLine: 'underline',
             }}>
-                      Open
+                      {t('network.open')}
                     </Text>
                   </TouchableScale>)}
               </View>
             </View>
             
             <View style={{
-            backgroundColor: '#F8FAFC',
+            backgroundColor: AppColors.slate50,
             borderRadius: 8,
             padding: 8,
             borderWidth: 1.5,
-            borderColor: '#E2E8F0',
+            borderColor: AppColors.slate200,
             width: '100%',
             marginTop: 2,
         }}>

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

@@ -0,0 +1,7 @@
+import React from 'react';
+interface NavigationTrackerProps {
+    onStateChange: (state: any) => void;
+    navigationRef?: any;
+}
+export declare const NavigationTracker: ({ onStateChange, navigationRef, }: NavigationTrackerProps) => React.ReactElement | null;
+export default NavigationTracker;

package/dist/esm/components/NavigationTracker.js

@@ -0,0 +1,39 @@
+import React, { useContext, useEffect } from 'react';
+import { NavigationContext, useNavigationState } from '@react-navigation/native';
+const ContextNavigationTracker = ({ onStateChange, }) => {
+    const navState = useNavigationState(state => state);
+    useEffect(() => {
+        onStateChange(navState);
+    }, [navState, onStateChange]);
+    return null;
+};
+export const NavigationTracker = ({ onStateChange, navigationRef, }) => {
+    const navContext = useContext(NavigationContext);
+    useEffect(() => {
+        if (!navigationRef)
+            return;
+        const getRef = () => navigationRef?.current || navigationRef;
+        const handleStateChange = () => {
+            const ref = getRef();
+            if (!ref)
+                return;
+            if (typeof ref.getRootState === 'function') {
+                onStateChange(ref.getRootState());
+            }
+            else if (typeof ref.getState === 'function') {
+                onStateChange(ref.getState());
+            }
+        };
+        const ref = getRef();
+        if (ref && typeof ref.addListener === 'function') {
+            const unsubscribe = ref.addListener('state', handleStateChange);
+            handleStateChange();
+            return unsubscribe;
+        }
+    }, [navigationRef, onStateChange]);
+    if (navContext) {
+        return <ContextNavigationTracker onStateChange={onStateChange}/>;
+    }
+    return null;
+};
+export default NavigationTracker;

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

@@ -16,6 +16,9 @@ export declare const CopyIcon: ({ color, size }: any) => React.JSX.Element;
 export declare const FetchIcon: ({ color, size }: any) => React.JSX.Element;
 export declare const TerminalIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const CheckIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const CircleCheckIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const CircleXIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const CircleAlertIcon: ({ color, size }: any) => React.JSX.Element;
 export declare const FailIcon: ({ color, size }: any) => React.JSX.Element;
 export declare const TrashIcon: ({ color, size }: any) => React.JSX.Element;
 export declare const HeaderPauseIcon: ({ isPaused, color, size, }: any) => React.JSX.Element;
@@ -51,3 +54,6 @@ export declare const ErrorCircleIcon: ({ color, size, }: any) => React.JSX.Eleme
 export declare const TrendingUpIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const MotionIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const SortIcon: ({ ascending, color, size, }: any) => React.JSX.Element;
+export declare const PrettyIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const RawIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const TableIcon: ({ color, size, }: any) => React.JSX.Element;

package/dist/esm/components/NetworkIcons.js

@@ -101,6 +101,25 @@ export const CheckIcon = ({ color = AppColors.greenColor, size = 14 }) => {
       <Path d="M20 6L9 17l-5-5" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
     </Svg>);
 };
+export const CircleCheckIcon = ({ color = AppColors.greenColor, size = 14 }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Circle cx="12" cy="12" r="9" stroke={color} strokeWidth="2"/>
+      <Path d="M8.5 12.5l2.5 2.5 5-5.5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </Svg>);
+};
+export const CircleXIcon = ({ color = AppColors.errorColor, size = 14 }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Circle cx="12" cy="12" r="9" stroke={color} strokeWidth="2"/>
+      <Path d="M9.5 9.5l5 5M14.5 9.5l-5 5" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+    </Svg>);
+};
+export const CircleAlertIcon = ({ color = AppColors.warningIconGold, size = 14 }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Circle cx="12" cy="12" r="9" stroke={color} strokeWidth="2"/>
+      <Path d="M12 7.5v5.5" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+      <Circle cx="12" cy="16.5" r="1.1" fill={color}/>
+    </Svg>);
+};
 export const FailIcon = ({ color = AppColors.errorColor, size = 10 }) => {
     return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
       <Path d="M18 6L6 18M6 6l12 12" stroke={color} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
@@ -164,12 +183,12 @@ export const DownloadIcon = ({ color = AppColors.primaryLight, size = 18, }) =>
       <Path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
     </Svg>);
 };
-export const CloseWhite = ({ color = '#FFFFFF', size = 20 }) => {
+export const CloseWhite = ({ color = AppColors.white, size = 20 }) => {
     return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
       <Path d="M18 6L6 18M6 6l12 12" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
     </Svg>);
 };
-export const WhiteBackNavigation = ({ color = '#FFFFFF', size = 20 }) => {
+export const WhiteBackNavigation = ({ color = AppColors.white, size = 20 }) => {
     return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
       <Path d="M19 12H5M12 19l-7-7 7-7" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
     </Svg>);
@@ -184,7 +203,7 @@ export const InsightsIcon = ({ color = AppColors.grayTextWeak, size = 14, }) =>
       <Path d="M2 17l6-6 4 4 10-10M22 12V7h-5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
     </Svg>);
 };
-export const DebugIcon = ({ color = '#FFFFFF', size = 18 }) => {
+export const DebugIcon = ({ color = AppColors.white, size = 18 }) => {
     return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
       {/* Hammer: diagonal from bottom-left to top-right */}
       {/* Handle */}
@@ -202,13 +221,13 @@ export const DebugIcon = ({ color = '#FFFFFF', size = 18 }) => {
       <Path d="M9 9L5 5M4.5 6.5l2-2" stroke={color} strokeWidth="2" strokeLinecap="round"/>
     </Svg>);
 };
-export const SunIcon = ({ color = '#FFFFFF', size = 16 }) => {
+export const SunIcon = ({ color = AppColors.white, size = 16 }) => {
     return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
       <Circle cx="12" cy="12" r="5" stroke={color} strokeWidth="2"/>
       <Path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" stroke={color} strokeWidth="2" strokeLinecap="round"/>
     </Svg>);
 };
-export const MoonIcon = ({ color = '#FFFFFF', size = 16 }) => {
+export const MoonIcon = ({ color = AppColors.white, size = 16 }) => {
     return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
       <Path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" fill={color} stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
     </Svg>);
@@ -249,7 +268,7 @@ export const FolderIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
     </Svg>);
 };
 // #3 — Broom/sweep "wipe" icon used by the header Clear-Everything button.
-export const WipeIcon = ({ color = '#FFFFFF', size = 16 }) => {
+export const WipeIcon = ({ color = AppColors.white, size = 16 }) => {
     return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
       {/* Handle */}
       <Path d="M19.5 3.5L12.7 10.3" stroke={color} strokeWidth="2" strokeLinecap="round"/>
@@ -308,3 +327,24 @@ export const SortIcon = ({ ascending, color = AppColors.purple, size = 14, }) =>
       <Path d="M12 20l6-6H6z" fill={!ascending ? color : AppColors.grayTextWeak}/>
     </Svg>);
 };
+export const PrettyIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <Path d="M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </Svg>);
+};
+export const RawIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Line x1="21" y1="6" x2="3" y2="6" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+      <Line x1="21" y1="12" x2="3" y2="12" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+      <Line x1="17" y1="18" x2="3" y2="18" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+    </Svg>);
+};
+export const TableIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Rect x="3" y="3" width="7" height="7" rx="1.5" stroke={color} strokeWidth="2"/>
+      <Rect x="14" y="3" width="7" height="7" rx="1.5" stroke={color} strokeWidth="2"/>
+      <Rect x="14" y="14" width="7" height="7" rx="1.5" stroke={color} strokeWidth="2"/>
+      <Rect x="3" y="14" width="7" height="7" rx="1.5" stroke={color} strokeWidth="2"/>
+    </Svg>);
+};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+interface ReduxTabViewProps {
+    reduxState: any;
+    reduxSearch: string;
+    onSetReduxSearch: (val: string) => void;
+    reduxLastActionMap: Record<string, string>;
+}
+export declare const ReduxTabView: React.FC<ReduxTabViewProps>;
+export default ReduxTabView;

package/dist/esm/components/ReduxTabView.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Pressable, Text, TextInput, View, } from 'react-native';
+import { useTranslation } from 'react-i18next';
+import { ReduxTreeView } from './ReduxTreeView';
+import { TerminalIcon, ClearIcon, } from './NetworkIcons';
+import { AppColors } from '../styles/AppColors';
+import styles from '../styles';
+export const ReduxTabView = React.memo(({ reduxState, reduxSearch, onSetReduxSearch, reduxLastActionMap, }) => {
+    const { t } = useTranslation();
+    if (!reduxState) {
+        return (<View style={styles.emptyContainer}>
+        <View style={styles.emptyIconWrap}>
+          <TerminalIcon color={AppColors.purple} size={32}/>
+        </View>
+        <Text style={styles.emptyTitle}>{t('redux.no_store_title')}</Text>
+        <Text style={styles.emptySub}>
+          {t('redux.no_store_sub')}
+        </Text>
+      </View>);
+    }
+    const reducerKeys = Object.keys(reduxState ?? {});
+    if (reducerKeys.length === 0) {
+        return (<View style={styles.emptyContainer}>
+        <Text style={styles.emptyTitle}>{t('redux.empty_store_title')}</Text>
+        <Text style={styles.emptySub}>{t('redux.empty_store_sub')}</Text>
+      </View>);
+    }
+    return (<View style={styles.flex1}>
+      {/* Search Bar */}
+      <View style={styles.searchBarWrap}>
+        <TextInput placeholder={t('search.redux_placeholder')} placeholderTextColor={AppColors.grayTextWeak} value={reduxSearch} onChangeText={onSetReduxSearch} style={styles.searchBarInput} autoCorrect={false} autoCapitalize="none"/>
+        {reduxSearch.length > 0 && (<Pressable onPress={() => onSetReduxSearch('')} hitSlop={10}>
+            <ClearIcon color={AppColors.grayTextWeak} size={14}/>
+          </Pressable>)}
+      </View>
+
+      {/* Main Content Card */}
+      <View style={styles.contentCard}>
+        <View style={styles.cardHeaderRow}>
+          <Text style={styles.sectionHeaderTitle}>{t('redux.root_reducers')}</Text>
+          <Text style={styles.subTextWeak}>
+            {reducerKeys.length} {t('redux.slices')}
+          </Text>
+        </View>
+
+        <ReduxTreeView state={reduxState} search={reduxSearch} lastActionMap={reduxLastActionMap}/>
+      </View>
+    </View>);
+});
+export default ReduxTabView;