react-native-inapp-inspector 2.3.15 → 2.3.17

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

@@ -0,0 +1,494 @@
+"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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NpmStarPrompt = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const AppColors_1 = require("../../styles/AppColors");
+const AppFonts_1 = require("../../styles/AppFonts");
+const TouchableScale_1 = __importDefault(require("../TouchableScale"));
+const settingsStore_1 = require("../../helpers/settingsStore");
+const telemetry_1 = require("../../helpers/telemetry");
+const NetworkIcons_1 = require("../NetworkIcons");
+const FIVE_DAYS_MS = 5 * 24 * 60 * 60 * 1000;
+const GITHUB_REPO_URL = 'https://github.com/vengatmacuser/react-native-inapp-inspector';
+const NPM_PACKAGE_URL = 'https://www.npmjs.com/package/react-native-inapp-inspector';
+const NpmStarPrompt = () => {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const slideAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(200)).current;
+    const fadeAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    const pulseAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
+    (0, react_1.useEffect)(() => {
+        let isMounted = true;
+        async function checkEligibility() {
+            try {
+                const settings = await (0, settingsStore_1.loadSettings)();
+                if (settings.starPromptActioned) {
+                    return;
+                }
+                const now = Date.now();
+                const firstSeen = settings.starPromptFirstSeen || now;
+                if (!settings.starPromptFirstSeen) {
+                    await (0, settingsStore_1.saveSettings)({
+                        ...settings,
+                        starPromptFirstSeen: now,
+                    });
+                }
+                const lastShown = settings.starPromptLastShown || firstSeen;
+                const timeElapsed = now - lastShown;
+                if (timeElapsed >= FIVE_DAYS_MS) {
+                    const shouldShow = Math.random() < 0.65;
+                    if (shouldShow && isMounted) {
+                        setTimeout(() => {
+                            if (isMounted) {
+                                openPrompt();
+                            }
+                        }, 1800);
+                    }
+                }
+            }
+            catch {
+            }
+        }
+        checkEligibility();
+        return () => {
+            isMounted = false;
+        };
+    }, []);
+    const openPrompt = async () => {
+        setIsOpen(true);
+        try {
+            const settings = await (0, settingsStore_1.loadSettings)();
+            await (0, settingsStore_1.saveSettings)({
+                ...settings,
+                starPromptLastShown: Date.now(),
+            });
+            (0, telemetry_1.trackTelemetryEvent)('npm_star_prompt_shown', {
+                trigger: '5_day_interval',
+                platform: react_native_1.Platform.OS,
+            });
+        }
+        catch { }
+        react_native_1.Animated.parallel([
+            react_native_1.Animated.spring(slideAnim, {
+                toValue: 0,
+                friction: 8,
+                tension: 50,
+                useNativeDriver: true,
+            }),
+            react_native_1.Animated.timing(fadeAnim, {
+                toValue: 1,
+                duration: 250,
+                useNativeDriver: true,
+            }),
+        ]).start();
+        react_native_1.Animated.loop(react_native_1.Animated.sequence([
+            react_native_1.Animated.timing(pulseAnim, {
+                toValue: 1.15,
+                duration: 900,
+                useNativeDriver: true,
+            }),
+            react_native_1.Animated.timing(pulseAnim, {
+                toValue: 1,
+                duration: 900,
+                useNativeDriver: true,
+            }),
+        ])).start();
+    };
+    const closePrompt = (callback) => {
+        react_native_1.Animated.parallel([
+            react_native_1.Animated.timing(fadeAnim, {
+                toValue: 0,
+                duration: 180,
+                useNativeDriver: true,
+            }),
+            react_native_1.Animated.timing(slideAnim, {
+                toValue: 200,
+                duration: 180,
+                useNativeDriver: true,
+            }),
+        ]).start(() => {
+            setIsOpen(false);
+            if (callback)
+                callback();
+        });
+    };
+    const handleStarNow = async () => {
+        try {
+            const settings = await (0, settingsStore_1.loadSettings)();
+            await (0, settingsStore_1.saveSettings)({
+                ...settings,
+                starPromptActioned: true,
+            });
+            (0, telemetry_1.trackTelemetryEvent)('npm_star_prompt_action', {
+                action: 'starred',
+                platform: react_native_1.Platform.OS,
+            });
+        }
+        catch { }
+        closePrompt(() => {
+            react_native_1.Linking.openURL(GITHUB_REPO_URL).catch(() => {
+                react_native_1.Linking.openURL(NPM_PACKAGE_URL).catch(() => { });
+            });
+        });
+    };
+    const handleAlreadyStarred = async () => {
+        try {
+            const settings = await (0, settingsStore_1.loadSettings)();
+            await (0, settingsStore_1.saveSettings)({
+                ...settings,
+                starPromptActioned: true,
+            });
+            (0, telemetry_1.trackTelemetryEvent)('npm_star_prompt_action', {
+                action: 'already_starred',
+                platform: react_native_1.Platform.OS,
+            });
+        }
+        catch { }
+        closePrompt();
+    };
+    const handleRemindLater = async () => {
+        try {
+            const settings = await (0, settingsStore_1.loadSettings)();
+            await (0, settingsStore_1.saveSettings)({
+                ...settings,
+                starPromptLastShown: Date.now(),
+            });
+            (0, telemetry_1.trackTelemetryEvent)('npm_star_prompt_action', {
+                action: 'remind_later',
+                platform: react_native_1.Platform.OS,
+            });
+        }
+        catch { }
+        closePrompt();
+    };
+    const handleDontAskAgain = async () => {
+        try {
+            const settings = await (0, settingsStore_1.loadSettings)();
+            await (0, settingsStore_1.saveSettings)({
+                ...settings,
+                starPromptActioned: true,
+            });
+            (0, telemetry_1.trackTelemetryEvent)('npm_star_prompt_action', {
+                action: 'dont_ask_again',
+                platform: react_native_1.Platform.OS,
+            });
+        }
+        catch { }
+        closePrompt();
+    };
+    if (!isOpen)
+        return null;
+    return (<react_native_1.Modal transparent visible={isOpen} animationType="none" onRequestClose={handleRemindLater}>
+      <react_native_1.Animated.View style={[
+            styles.backdrop,
+            {
+                opacity: fadeAnim,
+            },
+        ]}>
+        <react_native_1.TouchableOpacity style={react_native_1.StyleSheet.absoluteFill} activeOpacity={1} onPress={handleRemindLater}/>
+
+        <react_native_1.Animated.View style={[
+            styles.cardContainer,
+            {
+                transform: [{ translateY: slideAnim }],
+            },
+        ]}>
+          
+          <react_native_1.View style={styles.headerIconWrapper}>
+            <react_native_1.Animated.View style={[
+            styles.iconGlow,
+            {
+                transform: [{ scale: pulseAnim }],
+            },
+        ]}/>
+            <react_native_1.View style={styles.iconCircle}>
+              <NetworkIcons_1.StarIcon size={26} color="#F59E0B"/>
+            </react_native_1.View>
+          </react_native_1.View>
+
+          
+          <react_native_1.TouchableOpacity onPress={handleRemindLater} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }} style={styles.closeBtn}>
+            <NetworkIcons_1.CloseWhite size={12} color={AppColors_1.AppColors.grayText}/>
+          </react_native_1.TouchableOpacity>
+
+          
+          <react_native_1.View style={styles.pillBadge}>
+            <react_native_1.Text style={styles.pillBadgeText}>SUPPORT OPEN SOURCE</react_native_1.Text>
+          </react_native_1.View>
+
+          
+          <react_native_1.Text style={styles.title}>Enjoying In-App Inspector?</react_native_1.Text>
+          <react_native_1.Text style={styles.description}>
+            If this debugging tool saves you time, please consider giving us a
+            star on GitHub & npm. Your support helps us build more features!
+          </react_native_1.Text>
+
+          
+          <react_native_1.View style={styles.metricsBar}>
+            <react_native_1.View style={styles.metricItem}>
+              <NetworkIcons_1.GitHubIcon size={13} color={AppColors_1.AppColors.grayText}/>
+              <react_native_1.Text style={styles.metricText}>GitHub Star</react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.View style={styles.metricDot}/>
+            <react_native_1.View style={styles.metricItem}>
+              <NetworkIcons_1.NpmIcon size={13} color="#CB3837"/>
+              <react_native_1.Text style={styles.metricText}>npm Package</react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.View style={styles.metricDot}/>
+            <react_native_1.View style={styles.metricItem}>
+              <react_native_1.Text style={styles.metricText}>100% Free</react_native_1.Text>
+            </react_native_1.View>
+          </react_native_1.View>
+
+          
+          <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel="Star on GitHub" onPress={handleStarNow} style={styles.primaryButton}>
+            <react_native_1.View style={styles.primaryButtonContent}>
+              <NetworkIcons_1.StarIcon size={16} color={AppColors_1.AppColors.white}/>
+              <react_native_1.Text style={styles.primaryButtonText}>⭐ Star on GitHub & npm</react_native_1.Text>
+            </react_native_1.View>
+          </TouchableScale_1.default>
+
+          
+          <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel="I already starred" onPress={handleAlreadyStarred} style={styles.secondaryButton}>
+            <react_native_1.View style={styles.secondaryButtonContent}>
+              <NetworkIcons_1.CheckIcon size={13} color={AppColors_1.AppColors.purple}/>
+              <react_native_1.Text style={styles.secondaryButtonText}>I Already Starred</react_native_1.Text>
+            </react_native_1.View>
+          </TouchableScale_1.default>
+
+          
+          <react_native_1.View style={styles.footerRow}>
+            <react_native_1.TouchableOpacity onPress={handleRemindLater} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
+              <react_native_1.Text style={styles.footerLinkText}>Remind Me Later</react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+
+            <react_native_1.View style={styles.footerSeparator}/>
+
+            <react_native_1.TouchableOpacity onPress={handleDontAskAgain} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
+              <react_native_1.Text style={styles.footerLinkTextMuted}>Don't Ask Again</react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+          </react_native_1.View>
+        </react_native_1.Animated.View>
+      </react_native_1.Animated.View>
+    </react_native_1.Modal>);
+};
+exports.NpmStarPrompt = NpmStarPrompt;
+const styles = react_native_1.StyleSheet.create({
+    backdrop: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+        backgroundColor: 'rgba(15, 23, 42, 0.65)',
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingHorizontal: 20,
+        zIndex: 99999,
+    },
+    cardContainer: {
+        width: '100%',
+        maxWidth: 380,
+        backgroundColor: AppColors_1.AppColors.white,
+        borderRadius: 22,
+        padding: 22,
+        alignItems: 'center',
+        shadowColor: AppColors_1.AppColors.black,
+        shadowOffset: { width: 0, height: 8 },
+        shadowOpacity: 0.22,
+        shadowRadius: 20,
+        elevation: 12,
+        borderWidth: 1.5,
+        borderColor: `${AppColors_1.AppColors.purple}25`,
+    },
+    headerIconWrapper: {
+        position: 'relative',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginBottom: 12,
+    },
+    iconGlow: {
+        position: 'absolute',
+        width: 68,
+        height: 68,
+        borderRadius: 34,
+        backgroundColor: '#F59E0B22',
+    },
+    iconCircle: {
+        width: 54,
+        height: 54,
+        borderRadius: 27,
+        backgroundColor: '#FEF3C7',
+        borderWidth: 2,
+        borderColor: '#FDE68A',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    closeBtn: {
+        position: 'absolute',
+        top: 14,
+        right: 14,
+        width: 28,
+        height: 28,
+        borderRadius: 14,
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    pillBadge: {
+        backgroundColor: `${AppColors_1.AppColors.purple}14`,
+        paddingHorizontal: 9,
+        paddingVertical: 3,
+        borderRadius: 10,
+        marginBottom: 8,
+    },
+    pillBadgeText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9.5,
+        color: AppColors_1.AppColors.purple,
+        letterSpacing: 0.6,
+    },
+    title: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 18,
+        lineHeight: 23,
+        color: AppColors_1.AppColors.primaryBlack,
+        textAlign: 'center',
+        marginBottom: 6,
+    },
+    description: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 12.5,
+        lineHeight: 18,
+        color: AppColors_1.AppColors.grayText,
+        textAlign: 'center',
+        marginBottom: 14,
+        paddingHorizontal: 8,
+    },
+    metricsBar: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        paddingVertical: 7,
+        paddingHorizontal: 14,
+        borderRadius: 10,
+        marginBottom: 16,
+        gap: 8,
+    },
+    metricItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+    },
+    metricText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 11,
+        color: AppColors_1.AppColors.primaryBlack,
+    },
+    metricDot: {
+        width: 3.5,
+        height: 3.5,
+        borderRadius: 2,
+        backgroundColor: AppColors_1.AppColors.dividerColor,
+    },
+    primaryButton: {
+        width: '100%',
+        backgroundColor: AppColors_1.AppColors.purple,
+        borderRadius: 12,
+        paddingVertical: 12,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginBottom: 8,
+        shadowColor: AppColors_1.AppColors.purple,
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.3,
+        shadowRadius: 8,
+        elevation: 4,
+    },
+    primaryButtonContent: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 7,
+    },
+    primaryButtonText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 14,
+        color: AppColors_1.AppColors.white,
+    },
+    secondaryButton: {
+        width: '100%',
+        backgroundColor: `${AppColors_1.AppColors.purple}10`,
+        borderWidth: 1,
+        borderColor: `${AppColors_1.AppColors.purple}30`,
+        borderRadius: 12,
+        paddingVertical: 10,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginBottom: 14,
+    },
+    secondaryButtonContent: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+    },
+    secondaryButtonText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 13,
+        color: AppColors_1.AppColors.purple,
+    },
+    footerRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 12,
+    },
+    footerLinkText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 11.5,
+        color: AppColors_1.AppColors.grayText,
+    },
+    footerSeparator: {
+        width: 1,
+        height: 12,
+        backgroundColor: AppColors_1.AppColors.dividerColor,
+    },
+    footerLinkTextMuted: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 11.5,
+        color: AppColors_1.AppColors.grayTextWeak,
+    },
+});
+exports.default = exports.NpmStarPrompt;

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

@@ -42,6 +42,7 @@ const constants_1 = require("../../constants");
 const NetworkIcons_1 = require("../NetworkIcons");
 const helpers_1 = require("../../helpers");
 const toast_1 = require("../../helpers/toast");
+const AppFonts_1 = require("../../styles/AppFonts");
 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>);
@@ -187,15 +188,9 @@ const NpmUpdateToast = () => {
     </react_native_1.Animated.View>);
 };
 exports.NpmUpdateToast = NpmUpdateToast;
-const fontStack = react_native_1.Platform.select({
-    ios: {
-        fontFamily: 'System',
-    },
-    android: {
-        fontFamily: 'sans-serif',
-    },
-    default: {},
-});
+const fontStack = {
+    fontFamily: AppFonts_1.AppFonts.interRegular,
+};
 const styles = react_native_1.StyleSheet.create({
     container: {
         position: 'absolute',

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

@@ -51,6 +51,7 @@ const helpers_1 = require("../../helpers");
 const NetworkIcons_1 = require("../NetworkIcons");
 const performanceTracker_1 = require("../../customHooks/performanceTracker");
 const NativeInspector_1 = require("../../native/NativeInspector");
+const telemetry_1 = require("../../helpers/telemetry");
 const PerformanceTab = react_1.default.memo(() => {
     const { t } = (0, i18n_1.useTranslation)();
     const [isRecording, setIsRecording] = (0, react_1.useState)(true);
@@ -375,7 +376,13 @@ const PerformanceTab = react_1.default.memo(() => {
         </react_native_1.View>
 
         
-        <TouchableScale_1.default onPress={() => setIsRecording(prev => !prev)} style={[
+        <TouchableScale_1.default onPress={() => {
+            setIsRecording(prev => {
+                const next = !prev;
+                (0, telemetry_1.trackInspectorScreenRecord)(next ? 'start' : 'stop', 'performance_fps');
+                return next;
+            });
+        }} style={[
             perfStyles.recordToggleBtn,
             isRecording
                 ? perfStyles.recordToggleActive

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

@@ -246,7 +246,9 @@ const ReduxTab = react_1.default.memo(() => {
     const renderSliceItem = (0, react_1.useCallback)(({ item, index }) => {
         const isRecentlyUpdated = item.updatedAt > 0 && Date.now() - item.updatedAt < 5000;
         return (<AnimatedEntrance_1.default index={index} distance={8}>
-          <TouchableScale_1.default onPress={() => setSelectedReduxSlice(item.name)} style={[
+          <TouchableScale_1.default onPress={() => {
+                setSelectedReduxSlice(item.name);
+            }} style={[
                 reduxTabStyles.card,
                 isRecentlyUpdated && reduxTabStyles.cardRecentlyUpdated,
             ]}>
@@ -492,34 +494,12 @@ const ReduxTab = react_1.default.memo(() => {
       </react_native_1.View>
 
       
-      <react_native_1.FlatList ref={listRef} data={filteredSlices} keyExtractor={item => item.id} renderItem={renderSliceItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState_1.default isSearch={reduxSearch.trim().length > 0} searchQuery={reduxSearch} onClearSearch={() => setReduxSearch('')} customTitle={reduxSearch.trim().length > 0 ? 'No Matching Slices' : 'No Redux State Detected'} customSub={reduxSearch.trim().length > 0
+      <react_native_1.FlatList ref={listRef} data={filteredSlices} keyExtractor={item => item.id} renderItem={renderSliceItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={react_native_1.Platform.OS === 'android'} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState_1.default isSearch={reduxSearch.trim().length > 0} searchQuery={reduxSearch} onClearSearch={() => setReduxSearch('')} customTitle={reduxSearch.trim().length > 0 ? 'No Matching Slices' : 'No Redux State Detected'} customSub={reduxSearch.trim().length > 0
                 ? `No Redux slices match "${reduxSearch}"`
                 : 'Attach the Redux store or dispatch actions to see state slices.'}/>} ListFooterComponent={filteredSlices.length > 0 ? (<EndOfListFooter_1.default count={filteredSlices.length} label="slices"/>) : null} contentContainerStyle={[
             reduxTabStyles.listContent,
             filteredSlices.length === 0 && { flexGrow: 1 },
         ]} keyboardShouldPersistTaps="handled"/>
-
-      <TouchableScale_1.default onPress={() => {
-            try {
-                listRef.current?.scrollToOffset({
-                    offset: 0,
-                    animated: true,
-                });
-            }
-            catch {
-                try {
-                    listRef.current?.scrollToIndex({
-                        index: 0,
-                        animated: true,
-                    });
-                }
-                catch { }
-            }
-        }} hitSlop={12} style={styles_1.default.scrollTopBtn}>
-        <react_native_1.View style={{ transform: [{ rotate: '180deg' }] }}>
-          <NetworkIcons_1.ChevronIcon color={AppColors_1.AppColors.white} size={18}/>
-        </react_native_1.View>
-      </TouchableScale_1.default>
     </react_native_1.View>);
 });
 const reduxTabStyles = react_native_1.StyleSheet.create({