react-native-inapp-inspector 2.3.15 → 2.3.17

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

@@ -0,0 +1,454 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Animated, Linking, Modal, Platform, StyleSheet, Text, TouchableOpacity, View, } from 'react-native';
+import { AppColors } from '../../styles/AppColors';
+import { AppFonts } from '../../styles/AppFonts';
+import TouchableScale from '../TouchableScale';
+import { loadSettings, saveSettings } from '../../helpers/settingsStore';
+import { trackTelemetryEvent } from '../../helpers/telemetry';
+import { StarIcon, CloseWhite, CheckIcon, GitHubIcon, NpmIcon, } from '../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';
+export const NpmStarPrompt = () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const slideAnim = useRef(new Animated.Value(200)).current;
+    const fadeAnim = useRef(new Animated.Value(0)).current;
+    const pulseAnim = useRef(new Animated.Value(1)).current;
+    useEffect(() => {
+        let isMounted = true;
+        async function checkEligibility() {
+            try {
+                const settings = await loadSettings();
+                if (settings.starPromptActioned) {
+                    return;
+                }
+                const now = Date.now();
+                const firstSeen = settings.starPromptFirstSeen || now;
+                if (!settings.starPromptFirstSeen) {
+                    await 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 loadSettings();
+            await saveSettings({
+                ...settings,
+                starPromptLastShown: Date.now(),
+            });
+            trackTelemetryEvent('npm_star_prompt_shown', {
+                trigger: '5_day_interval',
+                platform: Platform.OS,
+            });
+        }
+        catch { }
+        Animated.parallel([
+            Animated.spring(slideAnim, {
+                toValue: 0,
+                friction: 8,
+                tension: 50,
+                useNativeDriver: true,
+            }),
+            Animated.timing(fadeAnim, {
+                toValue: 1,
+                duration: 250,
+                useNativeDriver: true,
+            }),
+        ]).start();
+        Animated.loop(Animated.sequence([
+            Animated.timing(pulseAnim, {
+                toValue: 1.15,
+                duration: 900,
+                useNativeDriver: true,
+            }),
+            Animated.timing(pulseAnim, {
+                toValue: 1,
+                duration: 900,
+                useNativeDriver: true,
+            }),
+        ])).start();
+    };
+    const closePrompt = (callback) => {
+        Animated.parallel([
+            Animated.timing(fadeAnim, {
+                toValue: 0,
+                duration: 180,
+                useNativeDriver: true,
+            }),
+            Animated.timing(slideAnim, {
+                toValue: 200,
+                duration: 180,
+                useNativeDriver: true,
+            }),
+        ]).start(() => {
+            setIsOpen(false);
+            if (callback)
+                callback();
+        });
+    };
+    const handleStarNow = async () => {
+        try {
+            const settings = await loadSettings();
+            await saveSettings({
+                ...settings,
+                starPromptActioned: true,
+            });
+            trackTelemetryEvent('npm_star_prompt_action', {
+                action: 'starred',
+                platform: Platform.OS,
+            });
+        }
+        catch { }
+        closePrompt(() => {
+            Linking.openURL(GITHUB_REPO_URL).catch(() => {
+                Linking.openURL(NPM_PACKAGE_URL).catch(() => { });
+            });
+        });
+    };
+    const handleAlreadyStarred = async () => {
+        try {
+            const settings = await loadSettings();
+            await saveSettings({
+                ...settings,
+                starPromptActioned: true,
+            });
+            trackTelemetryEvent('npm_star_prompt_action', {
+                action: 'already_starred',
+                platform: Platform.OS,
+            });
+        }
+        catch { }
+        closePrompt();
+    };
+    const handleRemindLater = async () => {
+        try {
+            const settings = await loadSettings();
+            await saveSettings({
+                ...settings,
+                starPromptLastShown: Date.now(),
+            });
+            trackTelemetryEvent('npm_star_prompt_action', {
+                action: 'remind_later',
+                platform: Platform.OS,
+            });
+        }
+        catch { }
+        closePrompt();
+    };
+    const handleDontAskAgain = async () => {
+        try {
+            const settings = await loadSettings();
+            await saveSettings({
+                ...settings,
+                starPromptActioned: true,
+            });
+            trackTelemetryEvent('npm_star_prompt_action', {
+                action: 'dont_ask_again',
+                platform: Platform.OS,
+            });
+        }
+        catch { }
+        closePrompt();
+    };
+    if (!isOpen)
+        return null;
+    return (<Modal transparent visible={isOpen} animationType="none" onRequestClose={handleRemindLater}>
+      <Animated.View style={[
+            styles.backdrop,
+            {
+                opacity: fadeAnim,
+            },
+        ]}>
+        <TouchableOpacity style={StyleSheet.absoluteFill} activeOpacity={1} onPress={handleRemindLater}/>
+
+        <Animated.View style={[
+            styles.cardContainer,
+            {
+                transform: [{ translateY: slideAnim }],
+            },
+        ]}>
+          
+          <View style={styles.headerIconWrapper}>
+            <Animated.View style={[
+            styles.iconGlow,
+            {
+                transform: [{ scale: pulseAnim }],
+            },
+        ]}/>
+            <View style={styles.iconCircle}>
+              <StarIcon size={26} color="#F59E0B"/>
+            </View>
+          </View>
+
+          
+          <TouchableOpacity onPress={handleRemindLater} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }} style={styles.closeBtn}>
+            <CloseWhite size={12} color={AppColors.grayText}/>
+          </TouchableOpacity>
+
+          
+          <View style={styles.pillBadge}>
+            <Text style={styles.pillBadgeText}>SUPPORT OPEN SOURCE</Text>
+          </View>
+
+          
+          <Text style={styles.title}>Enjoying In-App Inspector?</Text>
+          <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!
+          </Text>
+
+          
+          <View style={styles.metricsBar}>
+            <View style={styles.metricItem}>
+              <GitHubIcon size={13} color={AppColors.grayText}/>
+              <Text style={styles.metricText}>GitHub Star</Text>
+            </View>
+            <View style={styles.metricDot}/>
+            <View style={styles.metricItem}>
+              <NpmIcon size={13} color="#CB3837"/>
+              <Text style={styles.metricText}>npm Package</Text>
+            </View>
+            <View style={styles.metricDot}/>
+            <View style={styles.metricItem}>
+              <Text style={styles.metricText}>100% Free</Text>
+            </View>
+          </View>
+
+          
+          <TouchableScale accessible={true} accessibilityRole="button" accessibilityLabel="Star on GitHub" onPress={handleStarNow} style={styles.primaryButton}>
+            <View style={styles.primaryButtonContent}>
+              <StarIcon size={16} color={AppColors.white}/>
+              <Text style={styles.primaryButtonText}>⭐ Star on GitHub & npm</Text>
+            </View>
+          </TouchableScale>
+
+          
+          <TouchableScale accessible={true} accessibilityRole="button" accessibilityLabel="I already starred" onPress={handleAlreadyStarred} style={styles.secondaryButton}>
+            <View style={styles.secondaryButtonContent}>
+              <CheckIcon size={13} color={AppColors.purple}/>
+              <Text style={styles.secondaryButtonText}>I Already Starred</Text>
+            </View>
+          </TouchableScale>
+
+          
+          <View style={styles.footerRow}>
+            <TouchableOpacity onPress={handleRemindLater} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
+              <Text style={styles.footerLinkText}>Remind Me Later</Text>
+            </TouchableOpacity>
+
+            <View style={styles.footerSeparator}/>
+
+            <TouchableOpacity onPress={handleDontAskAgain} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
+              <Text style={styles.footerLinkTextMuted}>Don't Ask Again</Text>
+            </TouchableOpacity>
+          </View>
+        </Animated.View>
+      </Animated.View>
+    </Modal>);
+};
+const styles = StyleSheet.create({
+    backdrop: {
+        ...StyleSheet.absoluteFillObject,
+        backgroundColor: 'rgba(15, 23, 42, 0.65)',
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingHorizontal: 20,
+        zIndex: 99999,
+    },
+    cardContainer: {
+        width: '100%',
+        maxWidth: 380,
+        backgroundColor: AppColors.white,
+        borderRadius: 22,
+        padding: 22,
+        alignItems: 'center',
+        shadowColor: AppColors.black,
+        shadowOffset: { width: 0, height: 8 },
+        shadowOpacity: 0.22,
+        shadowRadius: 20,
+        elevation: 12,
+        borderWidth: 1.5,
+        borderColor: `${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.grayBackground,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    pillBadge: {
+        backgroundColor: `${AppColors.purple}14`,
+        paddingHorizontal: 9,
+        paddingVertical: 3,
+        borderRadius: 10,
+        marginBottom: 8,
+    },
+    pillBadgeText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 9.5,
+        color: AppColors.purple,
+        letterSpacing: 0.6,
+    },
+    title: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 18,
+        lineHeight: 23,
+        color: AppColors.primaryBlack,
+        textAlign: 'center',
+        marginBottom: 6,
+    },
+    description: {
+        fontFamily: AppFonts.interRegular,
+        fontSize: 12.5,
+        lineHeight: 18,
+        color: AppColors.grayText,
+        textAlign: 'center',
+        marginBottom: 14,
+        paddingHorizontal: 8,
+    },
+    metricsBar: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: AppColors.grayBackground,
+        paddingVertical: 7,
+        paddingHorizontal: 14,
+        borderRadius: 10,
+        marginBottom: 16,
+        gap: 8,
+    },
+    metricItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+    },
+    metricText: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 11,
+        color: AppColors.primaryBlack,
+    },
+    metricDot: {
+        width: 3.5,
+        height: 3.5,
+        borderRadius: 2,
+        backgroundColor: AppColors.dividerColor,
+    },
+    primaryButton: {
+        width: '100%',
+        backgroundColor: AppColors.purple,
+        borderRadius: 12,
+        paddingVertical: 12,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginBottom: 8,
+        shadowColor: AppColors.purple,
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.3,
+        shadowRadius: 8,
+        elevation: 4,
+    },
+    primaryButtonContent: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 7,
+    },
+    primaryButtonText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 14,
+        color: AppColors.white,
+    },
+    secondaryButton: {
+        width: '100%',
+        backgroundColor: `${AppColors.purple}10`,
+        borderWidth: 1,
+        borderColor: `${AppColors.purple}30`,
+        borderRadius: 12,
+        paddingVertical: 10,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginBottom: 14,
+    },
+    secondaryButtonContent: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+    },
+    secondaryButtonText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 13,
+        color: AppColors.purple,
+    },
+    footerRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 12,
+    },
+    footerLinkText: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 11.5,
+        color: AppColors.grayText,
+    },
+    footerSeparator: {
+        width: 1,
+        height: 12,
+        backgroundColor: AppColors.dividerColor,
+    },
+    footerLinkTextMuted: {
+        fontFamily: AppFonts.interRegular,
+        fontSize: 11.5,
+        color: AppColors.grayTextWeak,
+    },
+});
+export default NpmStarPrompt;

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

@@ -1,11 +1,12 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { Animated, Linking, Platform, StyleSheet, Text, TouchableOpacity, View, } from 'react-native';
+import { Animated, Linking, 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';
 import { copyToClipboard } from '../../helpers';
 import { showToast } from '../../helpers/toast';
+import { AppFonts } from '../../styles/AppFonts';
 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>);
@@ -150,15 +151,9 @@ export const NpmUpdateToast = () => {
       </View>
     </Animated.View>);
 };
-const fontStack = Platform.select({
-    ios: {
-        fontFamily: 'System',
-    },
-    android: {
-        fontFamily: 'sans-serif',
-    },
-    default: {},
-});
+const fontStack = {
+    fontFamily: AppFonts.interRegular,
+};
 const styles = StyleSheet.create({
     container: {
         position: 'absolute',

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

@@ -13,6 +13,7 @@ import { getRuntimeDiagnostics } from '../../helpers';
 import { SearchIcon, CircleXIcon, CircleAlertIcon, PerformanceIcon, BoltIcon, LightbulbIcon, MapIcon, AtomIcon, BrainIcon, GlobeIcon, ChevronIcon, } from '../NetworkIcons';
 import { getPerformanceEvents, subscribePerformanceEvents, logPerformanceEvent, clearPerformanceEvents, } from '../../customHooks/performanceTracker';
 import { startNativeFpsMonitoring, stopNativeFpsMonitoring, getNativeFpsMetrics, getNativeSystemMetrics, isNativeModuleAvailable, } from '../../native/NativeInspector';
+import { trackInspectorScreenRecord } from '../../helpers/telemetry';
 const PerformanceTab = React.memo(() => {
     const { t } = useTranslation();
     const [isRecording, setIsRecording] = useState(true);
@@ -337,7 +338,13 @@ const PerformanceTab = React.memo(() => {
         </View>
 
         
-        <TouchableScale onPress={() => setIsRecording(prev => !prev)} style={[
+        <TouchableScale onPress={() => {
+            setIsRecording(prev => {
+                const next = !prev;
+                trackInspectorScreenRecord(next ? 'start' : 'stop', 'performance_fps');
+                return next;
+            });
+        }} style={[
             perfStyles.recordToggleBtn,
             isRecording
                 ? perfStyles.recordToggleActive

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo, useRef, useState } from 'react';
-import { FlatList, Pressable, StyleSheet, Text, TextInput, TouchableOpacity, View, } from 'react-native';
+import { FlatList, Platform, Pressable, StyleSheet, Text, TextInput, TouchableOpacity, View, } from 'react-native';
 import { useTranslation } from '../../i18n';
 import { useInspector } from './InspectorContext';
 import TouchableScale from '../TouchableScale';
@@ -12,7 +12,7 @@ import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import { getActionHistory, getReduxAutoRefresh, setReduxAutoRefresh, } from '../../customHooks/reduxLogger';
-import { TerminalIcon, SearchIcon, ClearIcon, LayersIcon, ClockIcon, ForwardChevronIcon, SortArrowIcon, BoltIcon, AtomIcon, ScreenIcon, ListenerIcon, DocIcon, LoadingSpinnerIcon, CircleAlertIcon, TextAaIcon, HeaderPauseIcon, ChevronIcon, } from '../NetworkIcons';
+import { TerminalIcon, SearchIcon, ClearIcon, LayersIcon, ClockIcon, ForwardChevronIcon, SortArrowIcon, BoltIcon, AtomIcon, ScreenIcon, ListenerIcon, DocIcon, LoadingSpinnerIcon, CircleAlertIcon, TextAaIcon, HeaderPauseIcon, } from '../NetworkIcons';
 const getOriginBadge = (originType) => {
     switch (originType) {
         case 'saga':
@@ -208,7 +208,9 @@ const ReduxTab = React.memo(() => {
     const renderSliceItem = useCallback(({ item, index }) => {
         const isRecentlyUpdated = item.updatedAt > 0 && Date.now() - item.updatedAt < 5000;
         return (<AnimatedEntrance index={index} distance={8}>
-          <TouchableScale onPress={() => setSelectedReduxSlice(item.name)} style={[
+          <TouchableScale onPress={() => {
+                setSelectedReduxSlice(item.name);
+            }} style={[
                 reduxTabStyles.card,
                 isRecentlyUpdated && reduxTabStyles.cardRecentlyUpdated,
             ]}>
@@ -454,34 +456,12 @@ const ReduxTab = React.memo(() => {
       </View>
 
       
-      <FlatList ref={listRef} data={filteredSlices} keyExtractor={item => item.id} renderItem={renderSliceItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState 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
+      <FlatList ref={listRef} data={filteredSlices} keyExtractor={item => item.id} renderItem={renderSliceItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={Platform.OS === 'android'} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState 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 count={filteredSlices.length} label="slices"/>) : null} contentContainerStyle={[
             reduxTabStyles.listContent,
             filteredSlices.length === 0 && { flexGrow: 1 },
         ]} keyboardShouldPersistTaps="handled"/>
-
-      <TouchableScale onPress={() => {
-            try {
-                listRef.current?.scrollToOffset({
-                    offset: 0,
-                    animated: true,
-                });
-            }
-            catch {
-                try {
-                    listRef.current?.scrollToIndex({
-                        index: 0,
-                        animated: true,
-                    });
-                }
-                catch { }
-            }
-        }} hitSlop={12} style={styles.scrollTopBtn}>
-        <View style={{ transform: [{ rotate: '180deg' }] }}>
-          <ChevronIcon color={AppColors.white} size={18}/>
-        </View>
-      </TouchableScale>
     </View>);
 });
 const reduxTabStyles = StyleSheet.create({