react-native-inapp-inspector 2.3.14 → 2.3.16

package/src/components/Inspector/InspectorHeader.tsx

@@ -7,6 +7,7 @@ import {
   Pressable,
   ScrollView,
   Text,
+  TouchableOpacity,
   useWindowDimensions,
   View,
 } from 'react-native';
@@ -41,6 +42,7 @@ import {
   NpmIcon,
   ResetIcon,
   BoltIcon,
+  InfoCircleIcon,
 } from '../NetworkIcons';
 
 const InspectorHeader = React.memo(() => {
@@ -69,6 +71,9 @@ const InspectorHeader = React.memo(() => {
     runClearAllWithAnimation,
     settingsPage,
     setSettingsPage,
+    setSettingsActiveSubTab,
+    isFeedbackOpen,
+    setIsFeedbackOpen,
     resetToDefaults,
     closeModal,
     detailTitle,
@@ -146,7 +151,7 @@ const InspectorHeader = React.memo(() => {
     (activeTab === 'crash' && selectedCrash != null);
 
   const isSettingsView = settingsPage !== null;
-  const isAnySelected = isDetailView || isSettingsView;
+  const isAnySelected = isDetailView || isSettingsView || isFeedbackOpen;
 
   const settingsModuleTitle = useMemo(() => {
     switch (settingsPage) {
@@ -205,6 +210,10 @@ const InspectorHeader = React.memo(() => {
             ]}>
             <TouchableScale
               onPress={() => {
+                if (isFeedbackOpen) {
+                  setIsFeedbackOpen(false);
+                  return;
+                }
                 if (isSettingsView) {
                   if (settingsPage === 'main') {
                     setSettingsPage(null);
@@ -248,7 +257,50 @@ const InspectorHeader = React.memo(() => {
               <WhiteBackNavigation />
             </TouchableScale>
 
-            {isSettingsView ? (
+            {isFeedbackOpen ? (
+              <View style={{gap: 2, flex: 1, minWidth: 0}}>
+                <View
+                  style={{flexDirection: 'row', alignItems: 'center', gap: 6}}>
+                  <Text
+                    style={{
+                      fontFamily: AppFonts.interBold,
+                      fontSize: isNarrow ? 14 : 16,
+                      color: AppColors.white,
+                      letterSpacing: -0.2,
+                    }}
+                    numberOfLines={1}>
+                    Support & Feedback
+                  </Text>
+                  <View
+                    style={{
+                      backgroundColor: `${AppColors.white}26`,
+                      paddingHorizontal: isNarrow ? 4 : 6,
+                      paddingVertical: 1.5,
+                      borderRadius: 10,
+                      borderWidth: 1,
+                      borderColor: `${AppColors.white}20`,
+                    }}>
+                    <Text
+                      style={{
+                        fontFamily: AppFonts.interBold,
+                        fontSize: isNarrow ? 8 : 9,
+                        color: AppColors.white,
+                      }}>
+                      v{LIB_VERSION}
+                    </Text>
+                  </View>
+                </View>
+                <Text
+                  style={{
+                    fontFamily: AppFonts.interRegular,
+                    fontSize: isNarrow ? 9.5 : 10.5,
+                    color: `${AppColors.white}CC`,
+                  }}
+                  numberOfLines={1}>
+                  Direct line to maintainers & developers
+                </Text>
+              </View>
+            ) : isSettingsView ? (
               <View style={{gap: 2, flex: 1, minWidth: 0}}>
                 <View
                   style={{flexDirection: 'row', alignItems: 'center', gap: 6}}>
@@ -996,6 +1048,9 @@ const InspectorHeader = React.memo(() => {
 
             {!isAnySelected && (
               <TouchableScale
+                accessible={true}
+                accessibilityRole="button"
+                accessibilityLabel="Settings"
                 onPress={() => setSettingsPage('main')}
                 hitSlop={15}
                 style={[
@@ -1010,9 +1065,32 @@ const InspectorHeader = React.memo(() => {
               </TouchableScale>
             )}
 
-            <TouchableScale
+            {!isAnySelected && (
+              <TouchableScale
+                accessible={true}
+                accessibilityRole="button"
+                accessibilityLabel="About and System Specifications"
+                onPress={() => {
+                  setSettingsActiveSubTab('about');
+                  setSettingsPage('main');
+                }}
+                hitSlop={15}
+                style={[
+                  styles.closeButtonSquare,
+                  {
+                    width: buttonSize,
+                    height: buttonSize,
+                    borderRadius: isNarrow ? 6 : 7,
+                  },
+                ]}>
+                <InfoCircleIcon color={AppColors.white} size={isNarrow ? 12 : 14} />
+              </TouchableScale>
+            )}
+
+            <TouchableOpacity
               onPress={closeModal}
-              hitSlop={15}
+              hitSlop={{top: 12, bottom: 12, left: 12, right: 12}}
+              activeOpacity={0.6}
               style={[
                 styles.closeButtonSquare,
                 {
@@ -1022,7 +1100,7 @@ const InspectorHeader = React.memo(() => {
                 },
               ]}>
               <CloseWhite size={isNarrow ? 12 : 14} />
-            </TouchableScale>
+            </TouchableOpacity>
           </View>
         </View>
       </View>

package/src/components/Inspector/MainScreen.tsx

@@ -8,6 +8,7 @@ import {
   StatusBar,
   StyleSheet,
   Text,
+  TouchableOpacity,
   View,
 } from 'react-native';
 import {useInspector} from './InspectorContext';
@@ -32,7 +33,11 @@ import StorageTab from './StorageTab';
 import DebuggingTab from './DebuggingTab';
 import SettingsPanel from './SettingsPanel';
 import NpmUpdateToast from './NpmUpdateToast';
+import NpmStarPrompt from './NpmStarPrompt';
+import FeedbackModal from './FeedbackModal';
 import Toast from '../Toast';
+import TouchableScale from '../TouchableScale';
+import {HeadphonesIcon} from '../NetworkIcons';
 import styles from '../../styles';
 import {AppColors} from '../../styles/AppColors';
 import NavigationTracker from './NavigationTracker';
@@ -51,6 +56,8 @@ const MainScreen = () => {
     selectedReduxAction,
     selectedCrash,
     settingsPage,
+    isFeedbackOpen,
+    setIsFeedbackOpen,
     activeTab,
     isReady,
     enabled,
@@ -93,6 +100,19 @@ const MainScreen = () => {
     }
   }, [settingsPage !== null]);
 
+  const feedbackAnim = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    if (isFeedbackOpen) {
+      feedbackAnim.setValue(0);
+      Animated.spring(feedbackAnim, {
+        toValue: 1,
+        friction: 8,
+        tension: 65,
+        useNativeDriver: true,
+      }).start();
+    }
+  }, [isFeedbackOpen]);
+
   const tabAnim = useRef(new Animated.Value(1)).current;
   useEffect(() => {
     tabAnim.setValue(0);
@@ -113,8 +133,8 @@ const MainScreen = () => {
         visible={visible}
         animationType={modalAnimationType}
         transparent
-        statusBarTranslucent={true}>
-      {visible && (
+        statusBarTranslucent={true}
+        onRequestClose={closeModal}>
         <ErrorBoundary onClose={closeModal}>
           <View style={styles.modalBackdrop}>
             <Pressable
@@ -139,8 +159,8 @@ const MainScreen = () => {
               <InspectorHeader />
 
               <View style={{flex: 1}}>
-                {/* ─── Horizontal Scrollable Tab Bar inside Content (Always visible) ─── */}
-                {!isDetailActive && <TabBar />}
+                {/* ─── Horizontal Scrollable Tab Bar inside Content (Always visible unless in detail/settings/feedback) ─── */}
+                {!isDetailActive && settingsPage === null && !isFeedbackOpen && <TabBar />}
 
                 {isReady ? (
                   <View style={{flex: 1}}>
@@ -159,7 +179,7 @@ const MainScreen = () => {
                             },
                           ],
                         },
-                        (isDetailActive || settingsPage !== null) && {
+                        (isDetailActive || settingsPage !== null || isFeedbackOpen) && {
                           pointerEvents: 'none',
                         },
                       ]}>
@@ -236,6 +256,39 @@ const MainScreen = () => {
                     <SettingsPanel />
                   </Animated.View>
                 )}
+
+                {/* Support & Feedback Layer - Rendered inside in-app inspector covering full content card */}
+                {isFeedbackOpen && (
+                  <Animated.View
+                    style={[
+                      StyleSheet.absoluteFill,
+                      {
+                        backgroundColor: AppColors.primaryLight,
+                        opacity: feedbackAnim,
+                        transform: [
+                          {
+                            translateY: feedbackAnim.interpolate({
+                              inputRange: [0, 1],
+                              outputRange: [24, 0],
+                            }),
+                          },
+                        ],
+                      },
+                    ]}>
+                    <FeedbackModal onClose={() => setIsFeedbackOpen(false)} />
+                  </Animated.View>
+                )}
+
+                {/* Floating Support & Feedback Button (in place of scroll-to-top) */}
+                {!isDetailActive && settingsPage === null && !isFeedbackOpen && (
+                  <TouchableOpacity
+                    activeOpacity={0.8}
+                    onPress={() => setIsFeedbackOpen(true)}
+                    hitSlop={{top: 10, bottom: 10, left: 10, right: 10}}
+                    style={styles.supportFab}>
+                    <HeadphonesIcon color={AppColors.white} size={20} />
+                  </TouchableOpacity>
+                )}
               </View>
 
               {/* Bottom floating toast notification */}
@@ -243,10 +296,12 @@ const MainScreen = () => {
 
               {/* NPM Version Update Toast with timeout progress bar */}
               <NpmUpdateToast />
+
+              {/* 5-Day Periodic Star & Support Prompt */}
+              <NpmStarPrompt />
             </View>
           </View>
         </ErrorBoundary>
-      )}
       {hasNavigationContext && (
         <NavigationTracker onStateChange={setNavState} />
       )}