react-native-inapp-inspector 2.3.15 → 2.3.16

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

@@ -12,9 +12,9 @@ import { LIB_VERSION } from '../../constants';
 import { getStatusColor, getAppName, formatTime, getSize, getAppVersionAndBuild, } from '../../helpers';
 import { getNativeDeviceMetrics } from '../../native/NativeInspector';
 import { UpdateAvailableModal } from './UpdateAvailableModal';
-import { WhiteBackNavigation, TrashIcon, SettingsIcon, CloseWhite, ClockIcon, SizeIcon, AppleIcon, AndroidIcon, NpmIcon, ResetIcon, BoltIcon, } from '../NetworkIcons';
+import { WhiteBackNavigation, TrashIcon, SettingsIcon, CloseWhite, ClockIcon, SizeIcon, AppleIcon, AndroidIcon, NpmIcon, ResetIcon, BoltIcon, InfoCircleIcon, } 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, visible, 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, setSettingsActiveSubTab, isFeedbackOpen, setIsFeedbackOpen, resetToDefaults, closeModal, detailTitle, activeTab, environment, visible, selectedCrash, setSelectedCrash, } = useInspector();
     const { width: windowWidth } = useWindowDimensions();
     const isNarrow = windowWidth < 360;
     const isCompact = windowWidth < 400;
@@ -75,7 +75,7 @@ const InspectorHeader = React.memo(() => {
             (selectedReduxSlice != null || selectedReduxAction != null)) ||
         (activeTab === 'crash' && selectedCrash != null);
     const isSettingsView = settingsPage !== null;
-    const isAnySelected = isDetailView || isSettingsView;
+    const isAnySelected = isDetailView || isSettingsView || isFeedbackOpen;
     const settingsModuleTitle = useMemo(() => {
         switch (settingsPage) {
             case 'apis':
@@ -121,6 +121,10 @@ const InspectorHeader = React.memo(() => {
             },
         ]}>
             <TouchableScale onPress={() => {
+            if (isFeedbackOpen) {
+                setIsFeedbackOpen(false);
+                return;
+            }
             if (isSettingsView) {
                 if (settingsPage === 'main') {
                     setSettingsPage(null);
@@ -161,7 +165,41 @@ const InspectorHeader = React.memo(() => {
               <WhiteBackNavigation />
             </TouchableScale>
 
-            {isSettingsView ? (<View style={{ gap: 2, flex: 1, minWidth: 0 }}>
+            {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 }}>
                   <Text style={{
                 fontFamily: AppFonts.interBold,
@@ -753,7 +791,7 @@ const InspectorHeader = React.memo(() => {
                 </Animated.View>
               </TouchableScale>)}
 
-            {!isAnySelected && (<TouchableScale onPress={() => setSettingsPage('main')} hitSlop={15} style={[
+            {!isAnySelected && (<TouchableScale accessible={true} accessibilityRole="button" accessibilityLabel="Settings" onPress={() => setSettingsPage('main')} hitSlop={15} style={[
                 styles.closeButtonSquare,
                 {
                     width: buttonSize,
@@ -764,6 +802,20 @@ const InspectorHeader = React.memo(() => {
                 <SettingsIcon color={AppColors.white} size={isNarrow ? 12 : 14}/>
               </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={{ top: 12, bottom: 12, left: 12, right: 12 }} activeOpacity={0.6} style={[
             styles.closeButtonSquare,
             {

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react';
-import { Animated, Modal, Platform, Pressable, StatusBar, StyleSheet, View, } from 'react-native';
+import { Animated, Modal, Platform, Pressable, StatusBar, StyleSheet, TouchableOpacity, View, } from 'react-native';
 import { useInspector } from './InspectorContext';
 import ErrorBoundary from '../ErrorBoundary';
 import FabLauncher from './FabLauncher';
@@ -22,13 +22,16 @@ 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 { HeadphonesIcon } from '../NetworkIcons';
 import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
 import NavigationTracker from './NavigationTracker';
 import { isLocalDebugEnvironment } from '../../helpers';
 const MainScreen = () => {
-    const { visible, modalAnimationType, closeModal, modalHeightPercent, selected, selectedEvent, selectedLog, selectedReduxSlice, selectedReduxAction, selectedCrash, settingsPage, activeTab, isReady, enabled, useNativeFab, hasNavigationContext, setNavState, } = useInspector();
+    const { visible, modalAnimationType, closeModal, modalHeightPercent, selected, selectedEvent, selectedLog, selectedReduxSlice, selectedReduxAction, selectedCrash, settingsPage, isFeedbackOpen, setIsFeedbackOpen, activeTab, isReady, enabled, useNativeFab, hasNavigationContext, setNavState, } = useInspector();
     const isDetailActive = (activeTab === 'apis' && selected != null) ||
         (activeTab === 'analytics' && selectedEvent != null) ||
         (activeTab === 'logs' && selectedLog != null) ||
@@ -58,6 +61,18 @@ const MainScreen = () => {
             }).start();
         }
     }, [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);
@@ -90,7 +105,7 @@ const MainScreen = () => {
 
               <View style={{ flex: 1 }}>
                 
-                {!isDetailActive && <TabBar />}
+                {!isDetailActive && settingsPage === null && !isFeedbackOpen && <TabBar />}
 
                 {isReady ? (<View style={{ flex: 1 }}>
                     
@@ -107,7 +122,7 @@ const MainScreen = () => {
                         },
                     ],
                 },
-                (isDetailActive || settingsPage !== null) && {
+                (isDetailActive || settingsPage !== null || isFeedbackOpen) && {
                     pointerEvents: 'none',
                 },
             ]}>
@@ -167,6 +182,30 @@ const MainScreen = () => {
             ]}>
                     <SettingsPanel />
                   </Animated.View>)}
+
+                
+                {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>)}
+
+                
+                {!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>
 
               
@@ -174,6 +213,9 @@ const MainScreen = () => {
 
               
               <NpmUpdateToast />
+
+              
+              <NpmStarPrompt />
             </View>
           </View>
         </ErrorBoundary>

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

@@ -13,7 +13,7 @@ import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import { METHOD_COLORS } from '../../constants';
 import { useTranslation } from '../../i18n';
-import { SearchIcon, ClearIcon, TrashIcon, SortArrowIcon, FilterIcon, ChevronIcon, CircleCheckIcon, CircleXIcon, LayersIcon, HeaderPauseIcon, ClockIcon, RequestIcon, ResponseIcon, AtomIcon, } from '../NetworkIcons';
+import { SearchIcon, ClearIcon, TrashIcon, SortArrowIcon, FilterIcon, CircleCheckIcon, CircleXIcon, LayersIcon, HeaderPauseIcon, ClockIcon, RequestIcon, ResponseIcon, AtomIcon, } from '../NetworkIcons';
 const NetworkTab = React.memo(() => {
     const { groupedData, search, setSearch, searchScope, setSearchScope, isRegexSearch, setIsRegexSearch, isCaseSensitive, setIsCaseSensitive, quickFilter, setQuickFilter, handleDelete, selectedLogs, sortOrder, setSortOrder, statusFilters, setStatusFilters, methodFilters, setMethodFilters, availableMethods, filteredLogs, logs, toggleSectionFilter, toggleSectionCollapse, minStart, totalRange, newLogIds, toggleSelect, setSelected, isNetworkPaused, setIsNetworkPaused, } = useInspector();
     const { t } = useTranslation();
@@ -356,12 +356,18 @@ const NetworkTab = React.memo(() => {
             </View>
 
             
-            <View style={{ marginBottom: 8 }}>
-              <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
+            <View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                marginBottom: 8,
                 paddingHorizontal: 12,
+                gap: 6,
+            }}>
+              <ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ flex: 1 }} contentContainerStyle={{
                 flexDirection: 'row',
                 alignItems: 'center',
                 gap: 6,
+                paddingRight: 6,
             }}>
                 {QUICK_CHIPS.map(chip => {
                 const isActive = quickFilter === chip.id;
@@ -420,9 +426,10 @@ const NetworkTab = React.memo(() => {
                       </View>
                     </TouchableScale>);
             })}
+              </ScrollView>
 
-                <TouchableScale onPress={() => setIsFilterModalOpen(true)}>
-                  <View style={{
+              <TouchableScale onPress={() => setIsFilterModalOpen(true)} style={{ flexShrink: 0 }}>
+                <View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
                 paddingHorizontal: 10,
@@ -436,36 +443,40 @@ const NetworkTab = React.memo(() => {
                     ? AppColors.purple
                     : AppColors.grayBorderSecondary,
                 gap: 5,
+                shadowColor: AppColors.black,
+                shadowOpacity: 0.04,
+                shadowRadius: 2,
+                shadowOffset: { width: 0, height: 1 },
+                elevation: 1,
             }}>
-                    <FilterIcon size={11} color={statusFilters.size > 0 || methodFilters.size > 0
+                  <FilterIcon size={11} color={statusFilters.size > 0 || methodFilters.size > 0
                 ? AppColors.purple
                 : AppColors.grayText}/>
-                    <Text style={{
+                  <Text style={{
                 fontFamily: AppFonts.interBold,
                 fontSize: 10.5,
                 color: statusFilters.size > 0 || methodFilters.size > 0
                     ? AppColors.purple
                     : AppColors.grayText,
             }}>
-                      More Filters
-                    </Text>
-                    {(statusFilters.size > 0 || methodFilters.size > 0) && (<View style={{
+                    More Filters
+                  </Text>
+                  {(statusFilters.size > 0 || methodFilters.size > 0) && (<View style={{
                     backgroundColor: AppColors.purple,
                     paddingHorizontal: 4.5,
                     paddingVertical: 1,
                     borderRadius: 6,
                 }}>
-                        <Text style={{
+                      <Text style={{
                     fontFamily: AppFonts.interBold,
                     fontSize: 8.5,
                     color: AppColors.white,
                 }}>
-                          {statusFilters.size + methodFilters.size}
-                        </Text>
-                      </View>)}
-                  </View>
-                </TouchableScale>
-              </ScrollView>
+                        {statusFilters.size + methodFilters.size}
+                      </Text>
+                    </View>)}
+                </View>
+              </TouchableScale>
             </View>
 
             
@@ -523,28 +534,6 @@ const NetworkTab = React.memo(() => {
             styles.listContent,
             filteredLogs.length === 0 && { flexGrow: 1 },
         ]} keyboardShouldPersistTaps="handled"/>
-      
-      <TouchableScale onPress={() => {
-            try {
-                apisListRef.current?.scrollToOffset({
-                    offset: 0,
-                    animated: true,
-                });
-            }
-            catch {
-                try {
-                    apisListRef.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>
 
       
       <NetworkFilterModal visible={isFilterModalOpen} onClose={() => setIsFilterModalOpen(false)} filters={modalFilterState} onApply={handleApplyNetworkFilters} searchQuery={search}/>

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

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const NpmStarPrompt: React.FC;
+export default NpmStarPrompt;