react-native-inapp-inspector 2.0.2 → 2.0.3

package/dist/commonjs/index.js

@@ -68,7 +68,7 @@ const NativeInspector_2 = require("./native/NativeInspector");
 const constants_1 = require("./constants");
 // Stylesheet
 const styles_1 = require("./styles");
-const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigationRef, appIcon, environment, }) => {
+const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigationRef, appIcon, environment, initialVisible, visible: controlledVisible, }) => {
     // Set custom storage synchronously during render phase
     (0, settingsStore_1.setCustomStorage)(storage || null);
     const [isDark, setIsDark] = (0, react_1.useState)(false);
@@ -80,7 +80,12 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
     const [modalHeightPercent, setModalHeightPercent] = (0, react_1.useState)(90);
     const [modalAnimationType, setModalAnimationType] = (0, react_1.useState)('slide');
     const [logs, setLogs] = (0, react_1.useState)([]);
-    const [visible, setVisible] = (0, react_1.useState)(false);
+    const [visible, setVisible] = (0, react_1.useState)(initialVisible ?? controlledVisible ?? false);
+    (0, react_1.useEffect)(() => {
+        if (controlledVisible !== undefined) {
+            setVisible(controlledVisible);
+        }
+    }, [controlledVisible]);
     const [isReady, setIsReady] = (0, react_1.useState)(false);
     const [selected, setSelected] = (0, react_1.useState)(null);
     const [selectedLogs, setSelectedLogs] = (0, react_1.useState)(new Set());
@@ -225,6 +230,7 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
     // #6 — tab the inspector opens on. Shown with a DEFAULT badge in Settings.
     const [defaultTab, setDefaultTab] = (0, react_1.useState)('apis');
     const [showDuplicateLogs, setShowDuplicateLogs] = (0, react_1.useState)(false);
+    const [showUpdateToast, setShowUpdateToast] = (0, react_1.useState)(true);
     // Synchronize runtime background listeners with active settings
     (0, react_1.useEffect)(() => {
         (0, networkLogger_1.setNetworkModuleEnabled)(!!tabVisibility.apis);
@@ -284,6 +290,7 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
         setReduxAutoRefreshState(true);
         setReduxExpandDepth(1);
         setShowDuplicateLogs(false);
+        setShowUpdateToast(true);
         react_native_1.Alert.alert('Settings Reset', 'All settings have been reset to default values.');
     };
     // #5 — hydrate persisted settings once, then auto-save on any change.
@@ -327,6 +334,8 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
                 setReduxExpandDepth(saved.reduxExpandDepth);
             if (saved.showDuplicateLogs != null)
                 setShowDuplicateLogs(saved.showDuplicateLogs);
+            if (saved.showUpdateToast != null)
+                setShowUpdateToast(saved.showUpdateToast);
             if (saved.defaultTab) {
                 const dt = saved.defaultTab;
                 const vis = {
@@ -368,6 +377,7 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
             reduxAutoRefresh,
             reduxExpandDepth,
             showDuplicateLogs,
+            showUpdateToast,
         });
     }, [
         isDark,
@@ -1743,6 +1753,8 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
         setIsDark,
         showDuplicateLogs,
         setShowDuplicateLogs,
+        showUpdateToast,
+        setShowUpdateToast,
         showConsoleLevels,
         setShowConsoleLevels,
         resetToDefaults,

package/dist/commonjs/types/interfaces.d.ts

@@ -151,6 +151,7 @@ export interface PersistedSettings {
     reduxAutoRefresh?: boolean;
     reduxExpandDepth?: number;
     showDuplicateLogs?: boolean;
+    showUpdateToast?: boolean;
 }
 export interface NetworkInspectorProps {
     enabled?: boolean;
@@ -160,6 +161,8 @@ export interface NetworkInspectorProps {
     navigationRef?: any;
     appIcon?: any;
     environment?: 'DEV' | 'UAT' | 'PrePROD' | 'PROD' | 'QA' | 'Staging' | string;
+    initialVisible?: boolean;
+    visible?: boolean;
 }
 export interface NavigationTrackerProps {
     onStateChange: (state: any) => void;
@@ -301,6 +304,8 @@ export interface InspectorContextValue {
     setIsDark: React.Dispatch<React.SetStateAction<boolean>>;
     showDuplicateLogs: boolean;
     setShowDuplicateLogs: React.Dispatch<React.SetStateAction<boolean>>;
+    showUpdateToast: boolean;
+    setShowUpdateToast: React.Dispatch<React.SetStateAction<boolean>>;
     showConsoleLevels: {
         info: boolean;
         warn: boolean;

package/dist/esm/components/AppHeaderLogo.js

@@ -5,7 +5,23 @@ export const AppHeaderLogo = ({ size = 46, customIcon, }) => {
     const [loadError, setLoadError] = useState(false);
     // 1. If customIcon is explicitly provided, render it directly edge-to-edge
     if (customIcon) {
-        return (<View style={[logoStyles.container, { width: size, height: size }]}>
+        if (React.isValidElement(customIcon)) {
+            const clonedIcon = React.cloneElement(customIcon, {
+                size,
+                width: size,
+                height: size,
+            });
+            return (<View style={[
+                    logoStyles.container,
+                    { width: size, height: size, padding: 0, borderRadius: Math.round(size * 0.28) },
+                ]}>
+          {clonedIcon}
+        </View>);
+        }
+        return (<View style={[
+                logoStyles.container,
+                { width: size, height: size, borderRadius: Math.round(size * 0.28) },
+            ]}>
         <Image source={customIcon} style={logoStyles.image} resizeMode="cover"/>
       </View>);
     }
@@ -21,7 +37,10 @@ export const AppHeaderLogo = ({ size = 46, customIcon, }) => {
       </View>);
     }
     // 3. Fallback: Inspector's Signature Owl Brand Logo
-    return (<View style={[logoStyles.container, { width: size, height: size }]}>
+    return (<View style={[
+            logoStyles.container,
+            { width: size, height: size, padding: 0, borderRadius: Math.round(size * 0.28) },
+        ]}>
       <BrandSquareIcon size={size}/>
     </View>);
 };

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

@@ -9,10 +9,36 @@ import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import { METHOD_COLORS } from '../../constants';
 import { LIB_VERSION } from '../../constants';
-import { getStatusColor, getAppName, getBundleIdentifier, formatTime, getSize } from '../../helpers';
+import { getStatusColor, getAppName, formatTime, getSize } from '../../helpers';
+import { getTelemetryConsentStatus } from '../../helpers/telemetry';
 import { WhiteBackNavigation, TrashIcon, SettingsIcon, CloseWhite, ClockIcon, SizeIcon, AppleIcon, AndroidIcon, NpmIcon, ResetIcon, } from '../NetworkIcons';
 const InspectorHeader = React.memo(() => {
-    const { modalHeightPercent, appIcon, selected, setSelected, selectedEvent, setSelectedEvent, selectedLog, setSelectedLog, selectedReduxSlice, setSelectedReduxSlice, selectedReduxAction, setSelectedReduxAction, reduxState, reduxLastActionMap, showHeaderInfo, setShowHeaderInfo, updateAvailable, latestNpmVersion, clearAnim, activePulseAnim, unreadPulseAnim, runClearAllWithAnimation, settingsPage, setSettingsPage, resetToDefaults, closeModal, detailTitle, activeTab, environment, selectedCrash, setSelectedCrash, } = useInspector();
+    const { modalHeightPercent, appIcon, selected, setSelected, selectedEvent, setSelectedEvent, selectedLog, setSelectedLog, selectedReduxSlice, setSelectedReduxSlice, selectedReduxAction, setSelectedReduxAction, reduxState, reduxLastActionMap, showHeaderInfo, setShowHeaderInfo, updateAvailable, latestNpmVersion, clearAnim, activePulseAnim, unreadPulseAnim, runClearAllWithAnimation, settingsPage, setSettingsPage, resetToDefaults, closeModal, detailTitle, activeTab, environment, visible, selectedCrash, setSelectedCrash, } = useInspector();
+    const [isTelemetryActive, setIsTelemetryActive] = React.useState(false);
+    const telemetryPulseAnim = React.useRef(new Animated.Value(1)).current;
+    React.useEffect(() => {
+        getTelemetryConsentStatus().then(status => {
+            setIsTelemetryActive(status === 'granted');
+        });
+    }, [visible]);
+    React.useEffect(() => {
+        if (!isTelemetryActive)
+            return;
+        const pulse = Animated.loop(Animated.sequence([
+            Animated.timing(telemetryPulseAnim, {
+                toValue: 2.2,
+                duration: 1500,
+                useNativeDriver: true,
+            }),
+            Animated.timing(telemetryPulseAnim, {
+                toValue: 1,
+                duration: 0,
+                useNativeDriver: true,
+            }),
+        ]));
+        pulse.start();
+        return () => pulse.stop();
+    }, [isTelemetryActive, telemetryPulseAnim]);
     const envConfig = useMemo(() => {
         const rawEnv = (environment || (__DEV__ ? 'DEV' : 'PROD')).trim();
         const clean = rawEnv.toUpperCase();
@@ -175,7 +201,7 @@ const InspectorHeader = React.memo(() => {
                 minWidth: 0,
                 marginRight: 6,
             }}>
-                <AppHeaderLogo size={30} customIcon={appIcon}/>
+                <AppHeaderLogo size={46} customIcon={appIcon}/>
                 <View style={{ gap: 2.5, flex: 1, minWidth: 0 }}>
                   <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, minWidth: 0 }}>
                     <Text style={[styles.headerTitle, { flexShrink: 1 }]} numberOfLines={1} ellipsizeMode="tail">
@@ -222,11 +248,11 @@ const InspectorHeader = React.memo(() => {
                       </Pressable>)}
                   </View>
 
-                  {/* Clean Bundle Identifier & Version Representation */}
+                  {/* OS & NPM Version Representation */}
                   <View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
-                gap: 4.5,
+                gap: 5,
                 minWidth: 0,
             }}>
                     <View style={{
@@ -236,21 +262,21 @@ const InspectorHeader = React.memo(() => {
                 borderRadius: 5,
                 paddingHorizontal: 6,
                 paddingVertical: 2,
-                gap: 3.5,
+                gap: 4,
                 borderWidth: 1,
                 borderColor: `${AppColors.white}2E`,
-                flexShrink: 1,
-                minWidth: 0,
+                flexShrink: 0,
             }}>
-                      {Platform.OS === 'ios' ? (<AppleIcon color={`${AppColors.white}D9`} size={9}/>) : (<AndroidIcon color={`${AppColors.white}D9`} size={9}/>)}
+                      {Platform.OS === 'ios' ? (<AppleIcon color={`${AppColors.white}E6`} size={10}/>) : (<AndroidIcon color={`${AppColors.white}E6`} size={10}/>)}
                       <Text style={{
                 fontFamily: AppFonts.interMedium,
                 fontSize: 9.5,
                 color: `${AppColors.white}EB`,
                 letterSpacing: 0.1,
-                flexShrink: 1,
-            }} numberOfLines={1} ellipsizeMode="middle">
-                        {getBundleIdentifier()}
+            }} numberOfLines={1}>
+                        {Platform.OS === 'ios'
+                ? `iOS ${Platform.Version}`
+                : `Android ${Platform.Version}`}
                       </Text>
                     </View>
 
@@ -279,6 +305,53 @@ const InspectorHeader = React.memo(() => {
                         v{LIB_VERSION}
                       </Text>
                     </Pressable>
+
+                    {isTelemetryActive && (<Pressable onPress={() => Alert.alert('Anonymous Telemetry Active', 'Anonymous diagnostics (such as React Native version, JavaScript engine, and device model) are currently enabled to help improve library tooling.\n\nNo user data or network payloads are captured. You can toggle this anytime in Settings.', [{ text: 'Got it' }])} style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    backgroundColor: 'rgba(16, 185, 129, 0.22)',
+                    borderRadius: 5,
+                    paddingHorizontal: 5.5,
+                    paddingVertical: 2,
+                    gap: 4.5,
+                    borderWidth: 1,
+                    borderColor: 'rgba(52, 211, 153, 0.45)',
+                    flexShrink: 0,
+                }}>
+                        <View style={{
+                    width: 6,
+                    height: 6,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                          <Animated.View style={{
+                    position: 'absolute',
+                    width: 6,
+                    height: 6,
+                    borderRadius: 3,
+                    backgroundColor: '#34D399',
+                    opacity: telemetryPulseAnim.interpolate({
+                        inputRange: [1, 2.2],
+                        outputRange: [0.8, 0],
+                    }),
+                    transform: [{ scale: telemetryPulseAnim }],
+                }}/>
+                          <View style={{
+                    width: 4,
+                    height: 4,
+                    borderRadius: 2,
+                    backgroundColor: '#10B981',
+                }}/>
+                        </View>
+                        <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 9,
+                    color: '#6EE7B7',
+                    letterSpacing: 0.2,
+                }}>
+                          LIVE
+                        </Text>
+                      </Pressable>)}
                   </View>
                 </View>
               </View>) : null}

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

@@ -19,6 +19,7 @@ import CrashTab from './CrashTab';
 import CrashDetail from './CrashDetail';
 import SettingsPanel from './SettingsPanel';
 import TelemetryConsentModal from './TelemetryConsentModal';
+import NpmUpdateToast from './NpmUpdateToast';
 import Toast from '../Toast';
 import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
@@ -168,13 +169,16 @@ const MainScreen = () => {
               {/* Bottom floating toast notification */}
               <Toast />
 
-              {/* Anonymous Telemetry Consent Dialog */}
-              <TelemetryConsentModal />
+              {/* NPM Version Update Toast with timeout progress bar */}
+              <NpmUpdateToast />
             </View>
           </View>
         </ErrorBoundary>)}
       {hasNavigationContext && (<NavigationTracker onStateChange={setNavState}/>)}
     </Modal>
+
+    {/* Anonymous Telemetry Consent Dialog at root viewport */}
+    <TelemetryConsentModal />
     </>);
 };
 export default MainScreen;

package/dist/esm/components/Inspector/NpmUpdateToast.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const NpmUpdateToast: () => React.JSX.Element;
+export default NpmUpdateToast;

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

@@ -0,0 +1,251 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Animated, Linking, Platform, StyleSheet, Text, TouchableOpacity, View, } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import { useInspector } from './InspectorContext';
+import { LIB_VERSION } from '../../constants';
+import { NpmIcon } from '../NetworkIcons';
+const CloseSvg = ({ size = 13, color = '#94A3B8' }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path d="M18 6L6 18M6 6l12 12" stroke={color} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
+  </Svg>);
+const ExternalLinkSvg = ({ size = 12, color = '#FFFFFF' }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <Path d="M15 3h6v6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <Path d="M10 14L21 3" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </Svg>);
+const TOAST_TIMEOUT_MS = 6500;
+export const NpmUpdateToast = () => {
+    const { updateAvailable, latestNpmVersion, showUpdateToast } = useInspector();
+    const [dismissed, setDismissed] = useState(false);
+    const [visible, setVisible] = useState(false);
+    const translateYAnim = useRef(new Animated.Value(50)).current;
+    const opacityAnim = useRef(new Animated.Value(0)).current;
+    const progressAnim = useRef(new Animated.Value(1)).current;
+    const timerRef = useRef(null);
+    useEffect(() => {
+        if (showUpdateToast && updateAvailable && latestNpmVersion && !dismissed) {
+            setVisible(true);
+            // Slide and fade in
+            Animated.parallel([
+                Animated.spring(translateYAnim, {
+                    toValue: 0,
+                    friction: 8,
+                    tension: 40,
+                    useNativeDriver: true,
+                }),
+                Animated.timing(opacityAnim, {
+                    toValue: 1,
+                    duration: 250,
+                    useNativeDriver: true,
+                }),
+            ]).start();
+            // Progress bar countdown from 1 to 0
+            progressAnim.setValue(1);
+            Animated.timing(progressAnim, {
+                toValue: 0,
+                duration: TOAST_TIMEOUT_MS,
+                useNativeDriver: false,
+            }).start();
+            // Auto-hide after timeout
+            timerRef.current = setTimeout(() => {
+                handleDismiss();
+            }, TOAST_TIMEOUT_MS);
+        }
+        return () => {
+            if (timerRef.current) {
+                clearTimeout(timerRef.current);
+            }
+        };
+    }, [showUpdateToast, updateAvailable, latestNpmVersion, dismissed]);
+    const handleDismiss = () => {
+        Animated.parallel([
+            Animated.timing(opacityAnim, {
+                toValue: 0,
+                duration: 200,
+                useNativeDriver: true,
+            }),
+            Animated.timing(translateYAnim, {
+                toValue: 50,
+                duration: 200,
+                useNativeDriver: true,
+            }),
+        ]).start(() => {
+            setVisible(false);
+            setDismissed(true);
+        });
+    };
+    const handleOpenNpm = () => {
+        Linking.openURL('https://www.npmjs.com/package/react-native-inapp-inspector').catch(() => { });
+        handleDismiss();
+    };
+    if (!showUpdateToast || !visible || !updateAvailable || !latestNpmVersion)
+        return null;
+    const progressWidth = progressAnim.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['0%', '100%'],
+    });
+    return (<Animated.View style={[
+            styles.container,
+            {
+                opacity: opacityAnim,
+                transform: [{ translateY: translateYAnim }],
+            },
+        ]}>
+      <View style={styles.contentRow}>
+        {/* Left NPM Badge Icon */}
+        <View style={styles.npmIconContainer}>
+          <NpmIcon size={14} color="#CB3837"/>
+        </View>
+
+        {/* Text Details */}
+        <View style={styles.textContainer}>
+          <View style={styles.titleRow}>
+            <Text style={styles.titleText}>Update Available</Text>
+            <View style={styles.versionPill}>
+              <Text style={styles.versionPillText}>v{latestNpmVersion}</Text>
+            </View>
+          </View>
+          <Text style={styles.subtitleText} numberOfLines={1}>
+            Installed: v{LIB_VERSION} • New version is ready
+          </Text>
+        </View>
+
+        {/* Action Button: View */}
+        <TouchableOpacity style={styles.actionButton} onPress={handleOpenNpm} activeOpacity={0.8}>
+          <Text style={styles.actionButtonText}>View</Text>
+          <ExternalLinkSvg size={10} color="#FFFFFF"/>
+        </TouchableOpacity>
+
+        {/* Close Button */}
+        <TouchableOpacity style={styles.closeButton} onPress={handleDismiss} hitSlop={8} activeOpacity={0.7}>
+          <CloseSvg size={12} color="#94A3B8"/>
+        </TouchableOpacity>
+      </View>
+
+      {/* Animated Linear Timeout Progress Bar */}
+      <View style={styles.progressBarTrack}>
+        <Animated.View style={[styles.progressBarFill, { width: progressWidth }]}/>
+      </View>
+    </Animated.View>);
+};
+const fontStack = Platform.select({
+    ios: {
+        fontFamily: 'System',
+    },
+    android: {
+        fontFamily: 'sans-serif',
+    },
+    default: {},
+});
+const styles = StyleSheet.create({
+    container: {
+        position: 'absolute',
+        bottom: 24,
+        left: 16,
+        right: 16,
+        backgroundColor: '#0F172A',
+        borderRadius: 16,
+        borderWidth: 1,
+        borderColor: '#334155',
+        shadowColor: '#000000',
+        shadowOffset: { width: 0, height: 10 },
+        shadowOpacity: 0.35,
+        shadowRadius: 20,
+        elevation: 20,
+        overflow: 'hidden',
+        zIndex: 99999,
+    },
+    contentRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 12,
+        paddingHorizontal: 14,
+        gap: 10,
+    },
+    npmIconContainer: {
+        width: 32,
+        height: 32,
+        borderRadius: 10,
+        backgroundColor: '#FFFFFF',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderWidth: 1,
+        borderColor: '#CBD5E1',
+        flexShrink: 0,
+    },
+    textContainer: {
+        flex: 1,
+        minWidth: 0,
+    },
+    titleRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+    },
+    titleText: {
+        fontSize: 13,
+        fontWeight: '700',
+        color: '#F8FAFC',
+        letterSpacing: -0.2,
+        ...fontStack,
+    },
+    versionPill: {
+        backgroundColor: '#7C3AED26',
+        paddingHorizontal: 6,
+        paddingVertical: 1.5,
+        borderRadius: 6,
+        borderWidth: 1,
+        borderColor: '#7C3AED59',
+    },
+    versionPillText: {
+        fontSize: 10.5,
+        fontWeight: '700',
+        color: '#A78BFA',
+        ...fontStack,
+    },
+    subtitleText: {
+        fontSize: 11,
+        color: '#94A3B8',
+        marginTop: 1.5,
+        ...fontStack,
+    },
+    actionButton: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        backgroundColor: '#7C3AED',
+        paddingVertical: 6,
+        paddingHorizontal: 10,
+        borderRadius: 8,
+        flexShrink: 0,
+        shadowColor: '#7C3AED',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.3,
+        shadowRadius: 4,
+        elevation: 3,
+    },
+    actionButtonText: {
+        fontSize: 11.5,
+        fontWeight: '700',
+        color: '#FFFFFF',
+        ...fontStack,
+    },
+    closeButton: {
+        width: 24,
+        height: 24,
+        borderRadius: 12,
+        backgroundColor: '#1E293B',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexShrink: 0,
+    },
+    progressBarTrack: {
+        height: 3,
+        width: '100%',
+        backgroundColor: '#1E293B',
+    },
+    progressBarFill: {
+        height: '100%',
+        backgroundColor: '#7C3AED',
+    },
+});
+export default NpmUpdateToast;