react-native-inapp-inspector 2.0.1 → 2.0.3

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

@@ -18,6 +18,8 @@ import PerformanceTab from './PerformanceTab';
 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';
@@ -166,11 +168,17 @@ const MainScreen = () => {
 
               {/* Bottom floating toast notification */}
               <Toast />
+
+              {/* 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;

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

@@ -17,11 +17,26 @@ import { clearPerformanceEvents } from '../../customHooks/performanceTracker';
 import { isReduxConnected } from '../../customHooks/reduxLogger';
 import { isAnalyticsConnected } from '../../customHooks/analyticsLogger';
 import { useTranslation } from '../../i18n';
+import { getTelemetryConsentStatus, setTelemetryConsent, sendSessionTelemetryPing, } from '../../helpers/telemetry';
 import { SignalIcon, TerminalIcon, AnalyticsIcon, SettingsIcon, SunIcon, MoonIcon, ScreenIcon, MotionIcon, LayersIcon, EyeIcon, CheckIcon, TrashIcon, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, ShieldAlertIcon, ForwardChevronIcon, ChevronDownIcon, } from '../NetworkIcons';
 const SettingsPanel = () => {
     const { t } = useTranslation();
-    const { settingsPage, setSettingsPage, settingsActiveSubTab, setSettingsActiveSubTab, tabVisibility, toggleTabVisibility, defaultTab, setDefaultTab, isDark, setIsDark, modalHeightPercent, setModalHeightPercent, modalAnimationType, setModalAnimationType, showDuplicateLogs, setShowDuplicateLogs, showConsoleLevels, setShowConsoleLevels, resetToDefaults, storage, logs, consoleLogs, analyticsEvents, reduxState, maxNetworkLogs, setMaxNetworkLogs, maxConsoleLogs, setMaxConsoleLogs, maxAnalyticsEventsLimit, setMaxAnalyticsEventsLimit, isAutoRamLimitEnabled, setIsAutoRamLimitEnabled, deviceFreeRamMb, reduxAutoRefresh, setReduxAutoRefreshState, reduxExpandDepth, setReduxExpandDepth, switchActiveTab, setSelected, setSelectedEvent, setReduxState, crashRecords, maxCrashLogs, setMaxCrashLogs, } = useInspector();
+    const { settingsPage, setSettingsPage, settingsActiveSubTab, setSettingsActiveSubTab, tabVisibility, toggleTabVisibility, defaultTab, setDefaultTab, isDark, setIsDark, modalHeightPercent, setModalHeightPercent, modalAnimationType, setModalAnimationType, showDuplicateLogs, setShowDuplicateLogs, showUpdateToast, setShowUpdateToast, showConsoleLevels, setShowConsoleLevels, resetToDefaults, storage, logs, consoleLogs, analyticsEvents, reduxState, maxNetworkLogs, setMaxNetworkLogs, maxConsoleLogs, setMaxConsoleLogs, maxAnalyticsEventsLimit, setMaxAnalyticsEventsLimit, isAutoRamLimitEnabled, setIsAutoRamLimitEnabled, deviceFreeRamMb, reduxAutoRefresh, setReduxAutoRefreshState, reduxExpandDepth, setReduxExpandDepth, switchActiveTab, setSelected, setSelectedEvent, setReduxState, crashRecords, maxCrashLogs, setMaxCrashLogs, } = useInspector();
     const [stagedHeight, setStagedHeight] = useState(modalHeightPercent);
+    const [telemetryConsent, setTelemetryConsentState] = useState(true);
+    useEffect(() => {
+        getTelemetryConsentStatus().then(status => {
+            setTelemetryConsentState(status === 'granted');
+        });
+    }, []);
+    const handleToggleTelemetry = async () => {
+        const nextVal = !telemetryConsent;
+        setTelemetryConsentState(nextVal);
+        await setTelemetryConsent(nextVal);
+        if (nextVal) {
+            sendSessionTelemetryPing({ force: true });
+        }
+    };
     useEffect(() => {
         setStagedHeight(modalHeightPercent);
     }, [modalHeightPercent]);
@@ -1315,6 +1330,182 @@ const SettingsPanel = () => {
                     </View>)}
                 </View>
               </View>
+
+              {/* Section 4: Privacy & Diagnostics */}
+              <View style={{
+                backgroundColor: AppColors.primaryLight,
+                borderRadius: 14,
+                borderWidth: 1,
+                borderColor: AppColors.grayBorderSecondary,
+                overflow: 'hidden',
+                padding: 14,
+                gap: 12,
+            }}>
+                <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 11,
+                lineHeight: 14,
+                color: AppColors.grayTextWeak,
+                letterSpacing: 0.8,
+            }}>
+                  PRIVACY & ANONYMOUS DIAGNOSTICS
+                </Text>
+
+                <View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+            }}>
+                  <View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 10,
+                flex: 1,
+                marginRight: 10,
+            }}>
+                    <View style={{
+                width: 32,
+                height: 32,
+                borderRadius: 8,
+                backgroundColor: AppColors.purpleShade50,
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}>
+                      <ShieldAlertIcon color={AppColors.purple} size={15}/>
+                    </View>
+                    <View style={{ flex: 1 }}>
+                      <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 13.5,
+                lineHeight: 18,
+                color: AppColors.primaryBlack,
+            }}>
+                        Help Improve In-App Inspector
+                      </Text>
+                      <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 11,
+                lineHeight: 15,
+                color: AppColors.grayText,
+                marginTop: 1,
+            }}>
+                        Share non-identifiable technical metrics (RN version, JS engine, device model). No user data or network payloads are captured.
+                      </Text>
+                    </View>
+                  </View>
+
+                  <TouchableScale accessible={true} accessibilityRole="switch" accessibilityLabel="Toggle Anonymous Telemetry" accessibilityState={{ checked: telemetryConsent }} onPress={handleToggleTelemetry} style={{
+                width: 42,
+                height: 24,
+                borderRadius: 12,
+                backgroundColor: telemetryConsent
+                    ? AppColors.purple
+                    : AppColors.grayBorderSecondary,
+                padding: 2,
+                justifyContent: 'center',
+                alignItems: telemetryConsent ? 'flex-end' : 'flex-start',
+            }}>
+                    <View style={{
+                width: 20,
+                height: 20,
+                borderRadius: 10,
+                backgroundColor: AppColors.white,
+                shadowColor: AppColors.black,
+                shadowOpacity: 0.18,
+                shadowRadius: 2,
+                shadowOffset: { width: 0, height: 1 },
+            }}/>
+                  </TouchableScale>
+                </View>
+              </View>
+
+              {/* Section 5: Notifications & Toasts */}
+              <View style={{
+                backgroundColor: AppColors.primaryLight,
+                borderRadius: 14,
+                borderWidth: 1,
+                borderColor: AppColors.grayBorderSecondary,
+                overflow: 'hidden',
+                padding: 14,
+                gap: 12,
+            }}>
+                <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 11,
+                lineHeight: 14,
+                color: AppColors.grayTextWeak,
+                letterSpacing: 0.8,
+            }}>
+                  NOTIFICATIONS & TOASTS
+                </Text>
+
+                <View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+            }}>
+                  <View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 10,
+                flex: 1,
+                marginRight: 10,
+            }}>
+                    <View style={{
+                width: 32,
+                height: 32,
+                borderRadius: 8,
+                backgroundColor: AppColors.purpleShade50,
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}>
+                      <PackageIcon color={AppColors.purple} size={15}/>
+                    </View>
+                    <View style={{ flex: 1 }}>
+                      <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 13.5,
+                lineHeight: 18,
+                color: AppColors.primaryBlack,
+            }}>
+                        NPM Update Toast
+                      </Text>
+                      <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 11,
+                lineHeight: 15,
+                color: AppColors.grayText,
+                marginTop: 1,
+            }}>
+                        Show a floating toast banner with countdown progress when a newer release is published on npm.
+                      </Text>
+                    </View>
+                  </View>
+
+                  <TouchableScale accessible={true} accessibilityRole="switch" accessibilityLabel="Toggle NPM Update Toast" accessibilityState={{ checked: showUpdateToast }} onPress={() => setShowUpdateToast(prev => !prev)} style={{
+                width: 42,
+                height: 24,
+                borderRadius: 12,
+                backgroundColor: showUpdateToast
+                    ? AppColors.purple
+                    : AppColors.grayBorderSecondary,
+                padding: 2,
+                justifyContent: 'center',
+                alignItems: showUpdateToast ? 'flex-end' : 'flex-start',
+            }}>
+                    <View style={{
+                width: 20,
+                height: 20,
+                borderRadius: 10,
+                backgroundColor: AppColors.white,
+                shadowColor: AppColors.black,
+                shadowOpacity: 0.18,
+                shadowRadius: 2,
+                shadowOffset: { width: 0, height: 1 },
+            }}/>
+                  </TouchableScale>
+                </View>
+              </View>
             </View>)}
           <View style={{ height: 48 }}/>
         </ScrollView>

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

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