react-native-inapp-inspector 2.3.15 → 2.3.17

package/src/components/Inspector/NpmStarPrompt.tsx

@@ -0,0 +1,532 @@
+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,
+  ClockIcon,
+} from '../NetworkIcons';
+
+// 5-day interval in milliseconds
+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: React.FC = () => {
+  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();
+
+        // 1. If user already actioned the prompt, never show again permanently
+        if (settings.starPromptActioned) {
+          return;
+        }
+
+        const now = Date.now();
+        const firstSeen = settings.starPromptFirstSeen || now;
+
+        // If first seen is not set, initialize it
+        if (!settings.starPromptFirstSeen) {
+          await saveSettings({
+            ...settings,
+            starPromptFirstSeen: now,
+          });
+        }
+
+        const lastShown = settings.starPromptLastShown || firstSeen;
+        const timeElapsed = now - lastShown;
+
+        // 2. Check if at least 5 days have passed since last prompt / first install
+        if (timeElapsed >= FIVE_DAYS_MS) {
+          // Random probability factor to make it feel natural across sessions
+          const shouldShow = Math.random() < 0.65;
+          if (shouldShow && isMounted) {
+            // Delay slightly after modal open so it does not interfere with startup
+            setTimeout(() => {
+              if (isMounted) {
+                openPrompt();
+              }
+            }, 1800);
+          }
+        }
+      } catch {
+        // silent fallback
+      }
+    }
+
+    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();
+
+    // Subtle star pulse animation
+    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?: () => void) => {
+    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}],
+            },
+          ]}>
+          {/* Glowing Star Icon Header */}
+          <View style={styles.headerIconWrapper}>
+            <Animated.View
+              style={[
+                styles.iconGlow,
+                {
+                  transform: [{scale: pulseAnim}],
+                },
+              ]}
+            />
+            <View style={styles.iconCircle}>
+              <StarIcon size={26} color="#F59E0B" />
+            </View>
+          </View>
+
+          {/* Close X */}
+          <TouchableOpacity
+            onPress={handleRemindLater}
+            hitSlop={{top: 10, bottom: 10, left: 10, right: 10}}
+            style={styles.closeBtn}>
+            <CloseWhite size={12} color={AppColors.grayText} />
+          </TouchableOpacity>
+
+          {/* Pill Badge */}
+          <View style={styles.pillBadge}>
+            <Text style={styles.pillBadgeText}>SUPPORT OPEN SOURCE</Text>
+          </View>
+
+          {/* Title & Description */}
+          <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>
+
+          {/* Quick Metrics Bar */}
+          <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>
+
+          {/* Primary Button: Star on GitHub */}
+          <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>
+
+          {/* Secondary Action: Already Starred */}
+          <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>
+
+          {/* Bottom Link Row: Remind Later & Don't Ask Again */}
+          <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/src/components/Inspector/NpmUpdateToast.tsx

@@ -14,6 +14,7 @@ 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'}: {size?: number; color?: string}) => (
   <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
@@ -243,15 +244,9 @@ export const NpmUpdateToast = () => {
   );
 };
 
-const fontStack = Platform.select({
-  ios: {
-    fontFamily: 'System',
-  },
-  android: {
-    fontFamily: 'sans-serif',
-  },
-  default: {},
-});
+const fontStack = {
+  fontFamily: AppFonts.interRegular,
+};
 
 const styles = StyleSheet.create({
   container: {

package/src/components/Inspector/PerformanceTab.tsx

@@ -55,6 +55,7 @@ import {
   NativeSystemMetrics,
   isNativeModuleAvailable,
 } from '../../native/NativeInspector';
+import {trackInspectorScreenRecord} from '../../helpers/telemetry';
 
 export interface PerformanceEvent {
   id: string;
@@ -476,7 +477,13 @@ const PerformanceTab = React.memo(() => {
 
         {/* Live FPS Telemetry Recorder Toggle */}
         <TouchableScale
-          onPress={() => setIsRecording(prev => !prev)}
+          onPress={() => {
+            setIsRecording(prev => {
+              const next = !prev;
+              trackInspectorScreenRecord(next ? 'start' : 'stop', 'performance_fps');
+              return next;
+            });
+          }}
           style={[
             perfStyles.recordToggleBtn,
             isRecording

package/src/components/Inspector/ReduxTab.tsx

@@ -1,6 +1,7 @@
 import React, {useCallback, useMemo, useRef, useState} from 'react';
 import {
   FlatList,
+  Platform,
   Pressable,
   StyleSheet,
   Text,
@@ -300,7 +301,9 @@ const ReduxTab = React.memo(() => {
       return (
         <AnimatedEntrance index={index} distance={8}>
           <TouchableScale
-            onPress={() => setSelectedReduxSlice(item.name)}
+            onPress={() => {
+              setSelectedReduxSlice(item.name);
+            }}
             style={[
               reduxTabStyles.card,
               isRecentlyUpdated && reduxTabStyles.cardRecentlyUpdated,
@@ -666,7 +669,7 @@ const ReduxTab = React.memo(() => {
         initialNumToRender={12}
         maxToRenderPerBatch={8}
         windowSize={5}
-        removeClippedSubviews={true}
+        removeClippedSubviews={Platform.OS === 'android'}
         renderToHardwareTextureAndroid={true}
         ListEmptyComponent={
           <EmptyState
@@ -695,29 +698,6 @@ const ReduxTab = React.memo(() => {
         ]}
         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>
   );
 });