react-native-inapp-inspector 2.0.2 → 2.0.3

package/dist/commonjs/components/AppHeaderLogo.js

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

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

@@ -48,9 +48,35 @@ const AppFonts_1 = require("../../styles/AppFonts");
 const constants_1 = require("../../constants");
 const constants_2 = require("../../constants");
 const helpers_1 = require("../../helpers");
+const telemetry_1 = require("../../helpers/telemetry");
 const NetworkIcons_1 = require("../NetworkIcons");
 const InspectorHeader = react_1.default.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, } = (0, InspectorContext_1.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, } = (0, InspectorContext_1.useInspector)();
+    const [isTelemetryActive, setIsTelemetryActive] = react_1.default.useState(false);
+    const telemetryPulseAnim = react_1.default.useRef(new react_native_1.Animated.Value(1)).current;
+    react_1.default.useEffect(() => {
+        (0, telemetry_1.getTelemetryConsentStatus)().then(status => {
+            setIsTelemetryActive(status === 'granted');
+        });
+    }, [visible]);
+    react_1.default.useEffect(() => {
+        if (!isTelemetryActive)
+            return;
+        const pulse = react_native_1.Animated.loop(react_native_1.Animated.sequence([
+            react_native_1.Animated.timing(telemetryPulseAnim, {
+                toValue: 2.2,
+                duration: 1500,
+                useNativeDriver: true,
+            }),
+            react_native_1.Animated.timing(telemetryPulseAnim, {
+                toValue: 1,
+                duration: 0,
+                useNativeDriver: true,
+            }),
+        ]));
+        pulse.start();
+        return () => pulse.stop();
+    }, [isTelemetryActive, telemetryPulseAnim]);
     const envConfig = (0, react_1.useMemo)(() => {
         const rawEnv = (environment || (__DEV__ ? 'DEV' : 'PROD')).trim();
         const clean = rawEnv.toUpperCase();
@@ -213,7 +239,7 @@ const InspectorHeader = react_1.default.memo(() => {
                 minWidth: 0,
                 marginRight: 6,
             }}>
-                <AppHeaderLogo_1.default size={30} customIcon={appIcon}/>
+                <AppHeaderLogo_1.default size={46} customIcon={appIcon}/>
                 <react_native_1.View style={{ gap: 2.5, flex: 1, minWidth: 0 }}>
                   <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, minWidth: 0 }}>
                     <react_native_1.Text style={[styles_1.default.headerTitle, { flexShrink: 1 }]} numberOfLines={1} ellipsizeMode="tail">
@@ -260,11 +286,11 @@ const InspectorHeader = react_1.default.memo(() => {
                       </react_native_1.Pressable>)}
                   </react_native_1.View>
 
-                  {/* Clean Bundle Identifier & Version Representation */}
+                  {/* OS & NPM Version Representation */}
                   <react_native_1.View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
-                gap: 4.5,
+                gap: 5,
                 minWidth: 0,
             }}>
                     <react_native_1.View style={{
@@ -274,21 +300,21 @@ const InspectorHeader = react_1.default.memo(() => {
                 borderRadius: 5,
                 paddingHorizontal: 6,
                 paddingVertical: 2,
-                gap: 3.5,
+                gap: 4,
                 borderWidth: 1,
                 borderColor: `${AppColors_1.AppColors.white}2E`,
-                flexShrink: 1,
-                minWidth: 0,
+                flexShrink: 0,
             }}>
-                      {react_native_1.Platform.OS === 'ios' ? (<NetworkIcons_1.AppleIcon color={`${AppColors_1.AppColors.white}D9`} size={9}/>) : (<NetworkIcons_1.AndroidIcon color={`${AppColors_1.AppColors.white}D9`} size={9}/>)}
+                      {react_native_1.Platform.OS === 'ios' ? (<NetworkIcons_1.AppleIcon color={`${AppColors_1.AppColors.white}E6`} size={10}/>) : (<NetworkIcons_1.AndroidIcon color={`${AppColors_1.AppColors.white}E6`} size={10}/>)}
                       <react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interMedium,
                 fontSize: 9.5,
                 color: `${AppColors_1.AppColors.white}EB`,
                 letterSpacing: 0.1,
-                flexShrink: 1,
-            }} numberOfLines={1} ellipsizeMode="middle">
-                        {(0, helpers_1.getBundleIdentifier)()}
+            }} numberOfLines={1}>
+                        {react_native_1.Platform.OS === 'ios'
+                ? `iOS ${react_native_1.Platform.Version}`
+                : `Android ${react_native_1.Platform.Version}`}
                       </react_native_1.Text>
                     </react_native_1.View>
 
@@ -317,6 +343,53 @@ const InspectorHeader = react_1.default.memo(() => {
                         v{constants_2.LIB_VERSION}
                       </react_native_1.Text>
                     </react_native_1.Pressable>
+
+                    {isTelemetryActive && (<react_native_1.Pressable onPress={() => react_native_1.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,
+                }}>
+                        <react_native_1.View style={{
+                    width: 6,
+                    height: 6,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                          <react_native_1.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 }],
+                }}/>
+                          <react_native_1.View style={{
+                    width: 4,
+                    height: 4,
+                    borderRadius: 2,
+                    backgroundColor: '#10B981',
+                }}/>
+                        </react_native_1.View>
+                        <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 9,
+                    color: '#6EE7B7',
+                    letterSpacing: 0.2,
+                }}>
+                          LIVE
+                        </react_native_1.Text>
+                      </react_native_1.Pressable>)}
                   </react_native_1.View>
                 </react_native_1.View>
               </react_native_1.View>) : null}

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

@@ -57,6 +57,7 @@ const CrashTab_1 = __importDefault(require("./CrashTab"));
 const CrashDetail_1 = __importDefault(require("./CrashDetail"));
 const SettingsPanel_1 = __importDefault(require("./SettingsPanel"));
 const TelemetryConsentModal_1 = __importDefault(require("./TelemetryConsentModal"));
+const NpmUpdateToast_1 = __importDefault(require("./NpmUpdateToast"));
 const Toast_1 = __importDefault(require("../Toast"));
 const styles_1 = __importDefault(require("../../styles"));
 const AppColors_1 = require("../../styles/AppColors");
@@ -206,13 +207,16 @@ const MainScreen = () => {
               {/* Bottom floating toast notification */}
               <Toast_1.default />
 
-              {/* Anonymous Telemetry Consent Dialog */}
-              <TelemetryConsentModal_1.default />
+              {/* NPM Version Update Toast with timeout progress bar */}
+              <NpmUpdateToast_1.default />
             </react_native_1.View>
           </react_native_1.View>
         </ErrorBoundary_1.default>)}
       {hasNavigationContext && (<NavigationTracker_1.default onStateChange={setNavState}/>)}
     </react_native_1.Modal>
+
+    {/* Anonymous Telemetry Consent Dialog at root viewport */}
+    <TelemetryConsentModal_1.default />
     </>);
 };
 exports.default = MainScreen;

package/dist/commonjs/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/commonjs/components/Inspector/NpmUpdateToast.js

@@ -0,0 +1,288 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NpmUpdateToast = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_svg_1 = __importStar(require("react-native-svg"));
+const InspectorContext_1 = require("./InspectorContext");
+const constants_1 = require("../../constants");
+const NetworkIcons_1 = require("../NetworkIcons");
+const CloseSvg = ({ size = 13, color = '#94A3B8' }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Path d="M18 6L6 18M6 6l12 12" stroke={color} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
+  </react_native_svg_1.default>);
+const ExternalLinkSvg = ({ size = 12, color = '#FFFFFF' }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.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"/>
+    <react_native_svg_1.Path d="M15 3h6v6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <react_native_svg_1.Path d="M10 14L21 3" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </react_native_svg_1.default>);
+const TOAST_TIMEOUT_MS = 6500;
+const NpmUpdateToast = () => {
+    const { updateAvailable, latestNpmVersion, showUpdateToast } = (0, InspectorContext_1.useInspector)();
+    const [dismissed, setDismissed] = (0, react_1.useState)(false);
+    const [visible, setVisible] = (0, react_1.useState)(false);
+    const translateYAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(50)).current;
+    const opacityAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    const progressAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
+    const timerRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (showUpdateToast && updateAvailable && latestNpmVersion && !dismissed) {
+            setVisible(true);
+            // Slide and fade in
+            react_native_1.Animated.parallel([
+                react_native_1.Animated.spring(translateYAnim, {
+                    toValue: 0,
+                    friction: 8,
+                    tension: 40,
+                    useNativeDriver: true,
+                }),
+                react_native_1.Animated.timing(opacityAnim, {
+                    toValue: 1,
+                    duration: 250,
+                    useNativeDriver: true,
+                }),
+            ]).start();
+            // Progress bar countdown from 1 to 0
+            progressAnim.setValue(1);
+            react_native_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 = () => {
+        react_native_1.Animated.parallel([
+            react_native_1.Animated.timing(opacityAnim, {
+                toValue: 0,
+                duration: 200,
+                useNativeDriver: true,
+            }),
+            react_native_1.Animated.timing(translateYAnim, {
+                toValue: 50,
+                duration: 200,
+                useNativeDriver: true,
+            }),
+        ]).start(() => {
+            setVisible(false);
+            setDismissed(true);
+        });
+    };
+    const handleOpenNpm = () => {
+        react_native_1.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 (<react_native_1.Animated.View style={[
+            styles.container,
+            {
+                opacity: opacityAnim,
+                transform: [{ translateY: translateYAnim }],
+            },
+        ]}>
+      <react_native_1.View style={styles.contentRow}>
+        {/* Left NPM Badge Icon */}
+        <react_native_1.View style={styles.npmIconContainer}>
+          <NetworkIcons_1.NpmIcon size={14} color="#CB3837"/>
+        </react_native_1.View>
+
+        {/* Text Details */}
+        <react_native_1.View style={styles.textContainer}>
+          <react_native_1.View style={styles.titleRow}>
+            <react_native_1.Text style={styles.titleText}>Update Available</react_native_1.Text>
+            <react_native_1.View style={styles.versionPill}>
+              <react_native_1.Text style={styles.versionPillText}>v{latestNpmVersion}</react_native_1.Text>
+            </react_native_1.View>
+          </react_native_1.View>
+          <react_native_1.Text style={styles.subtitleText} numberOfLines={1}>
+            Installed: v{constants_1.LIB_VERSION} • New version is ready
+          </react_native_1.Text>
+        </react_native_1.View>
+
+        {/* Action Button: View */}
+        <react_native_1.TouchableOpacity style={styles.actionButton} onPress={handleOpenNpm} activeOpacity={0.8}>
+          <react_native_1.Text style={styles.actionButtonText}>View</react_native_1.Text>
+          <ExternalLinkSvg size={10} color="#FFFFFF"/>
+        </react_native_1.TouchableOpacity>
+
+        {/* Close Button */}
+        <react_native_1.TouchableOpacity style={styles.closeButton} onPress={handleDismiss} hitSlop={8} activeOpacity={0.7}>
+          <CloseSvg size={12} color="#94A3B8"/>
+        </react_native_1.TouchableOpacity>
+      </react_native_1.View>
+
+      {/* Animated Linear Timeout Progress Bar */}
+      <react_native_1.View style={styles.progressBarTrack}>
+        <react_native_1.Animated.View style={[styles.progressBarFill, { width: progressWidth }]}/>
+      </react_native_1.View>
+    </react_native_1.Animated.View>);
+};
+exports.NpmUpdateToast = NpmUpdateToast;
+const fontStack = react_native_1.Platform.select({
+    ios: {
+        fontFamily: 'System',
+    },
+    android: {
+        fontFamily: 'sans-serif',
+    },
+    default: {},
+});
+const styles = react_native_1.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',
+    },
+});
+exports.default = exports.NpmUpdateToast;