react-native-inapp-inspector 2.0.4 → 2.0.5

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

@@ -49,9 +49,11 @@ const constants_1 = require("../../constants");
 const constants_2 = require("../../constants");
 const helpers_1 = require("../../helpers");
 const telemetry_1 = require("../../helpers/telemetry");
+const UpdateAvailableModal_1 = require("./UpdateAvailableModal");
 const NetworkIcons_1 = require("../NetworkIcons");
 const InspectorHeader = react_1.default.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, } = (0, InspectorContext_1.useInspector)();
+    const [showUpdateModal, setShowUpdateModal] = react_1.default.useState(false);
     const [isTelemetryActive, setIsTelemetryActive] = react_1.default.useState(false);
     const telemetryPulseAnim = react_1.default.useRef(new react_native_1.Animated.Value(1)).current;
     react_1.default.useEffect(() => {
@@ -115,7 +117,8 @@ const InspectorHeader = react_1.default.memo(() => {
     const isDetailView = (activeTab === 'apis' && selected != null) ||
         (activeTab === 'analytics' && selectedEvent != null) ||
         (activeTab === 'logs' && selectedLog != null) ||
-        (activeTab === 'redux' && (selectedReduxSlice != null || selectedReduxAction != null)) ||
+        (activeTab === 'redux' &&
+            (selectedReduxSlice != null || selectedReduxAction != null)) ||
         (activeTab === 'crash' && selectedCrash != null);
     const isSettingsView = settingsPage !== null;
     const isAnySelected = isDetailView || isSettingsView;
@@ -140,7 +143,8 @@ const InspectorHeader = react_1.default.memo(() => {
         }
     }, [settingsPage]);
     const headerTopPadding = react_native_1.Platform.OS === 'ios' && modalHeightPercent >= 95 ? 44 : 0;
-    return (<react_native_linear_gradient_1.default colors={['#4F46E5', '#7C3AED']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }} style={styles_1.default.headerGradient}>
+    return (<>
+      <react_native_linear_gradient_1.default colors={['#4F46E5', '#7C3AED']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }} style={styles_1.default.headerGradient}>
       <react_native_1.View style={{ paddingTop: headerTopPadding, width: '100%' }}>
         <react_native_1.View style={styles_1.default.header}>
           <react_native_1.View style={[
@@ -241,7 +245,12 @@ const InspectorHeader = react_1.default.memo(() => {
             }}>
                 <AppHeaderLogo_1.default size={46} customIcon={appIcon}/>
                 <react_native_1.View style={{ gap: 2.5, flex: 1, minWidth: 0 }}>
-                  <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, minWidth: 0 }}>
+                  <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 6,
+                minWidth: 0,
+            }}>
                     <react_native_1.Text style={[styles_1.default.headerTitle, { flexShrink: 1 }]} numberOfLines={1} ellipsizeMode="tail">
                       {(0, helpers_1.getAppName)()}
                     </react_native_1.Text>
@@ -255,34 +264,41 @@ const InspectorHeader = react_1.default.memo(() => {
                     marginBottom: 0,
                 },
             ]}>
-                      <react_native_1.Text style={[
-                styles_1.default.envBadgeText,
-                { color: envConfig.text },
-            ]}>
+                      <react_native_1.Text style={[styles_1.default.envBadgeText, { color: envConfig.text }]}>
                         {envConfig.label}
                       </react_native_1.Text>
                     </react_native_1.View>
-                    {updateAvailable && (<react_native_1.Pressable hitSlop={10} onPress={() => react_native_1.Alert.alert('Update Available', `react-native-inapp-inspector v${latestNpmVersion} is available on NPM (installed: v${constants_2.LIB_VERSION}).`, [
-                    { text: 'Later', style: 'cancel' },
-                    {
-                        text: 'View on NPM',
-                        onPress: () => react_native_1.Linking.openURL('https://www.npmjs.com/package/react-native-inapp-inspector').catch(() => { }),
-                    },
-                ])} style={{
+                    {updateAvailable && (<react_native_1.Pressable hitSlop={10} onPress={() => setShowUpdateModal(true)} style={{
+                    flexDirection: 'row',
                     alignItems: 'center',
-                    justifyContent: 'center',
+                    backgroundColor: '#F59E0B',
+                    borderRadius: 5,
+                    paddingHorizontal: 5.5,
+                    paddingVertical: 1.5,
+                    gap: 3.5,
+                    shadowColor: '#F59E0B',
+                    shadowOffset: { width: 0, height: 1.5 },
+                    shadowOpacity: 0.35,
+                    shadowRadius: 3,
+                    elevation: 3,
                     flexShrink: 0,
                 }}>
                         <react_native_1.Animated.View style={{
-                    width: 8,
-                    height: 8,
-                    borderRadius: 4,
-                    backgroundColor: AppColors_1.AppColors.liveGreen,
-                    borderWidth: 1,
-                    borderColor: `${AppColors_1.AppColors.white}E6`,
+                    width: 5,
+                    height: 5,
+                    borderRadius: 2.5,
+                    backgroundColor: '#FFFFFF',
                     opacity: activePulseAnim,
                     transform: [{ scale: unreadPulseAnim }],
                 }}/>
+                        <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 9,
+                    color: '#FFFFFF',
+                    letterSpacing: 0.3,
+                }}>
+                          UPDATE ⚡
+                        </react_native_1.Text>
                       </react_native_1.Pressable>)}
                   </react_native_1.View>
 
@@ -318,7 +334,14 @@ const InspectorHeader = react_1.default.memo(() => {
                       </react_native_1.Text>
                     </react_native_1.View>
 
-                    <react_native_1.Pressable onPress={() => react_native_1.Linking.openURL('https://www.npmjs.com/package/react-native-inapp-inspector').catch(() => { })} style={{
+                    <react_native_1.Pressable onPress={() => {
+                if (updateAvailable) {
+                    setShowUpdateModal(true);
+                }
+                else {
+                    react_native_1.Linking.openURL('https://www.npmjs.com/package/react-native-inapp-inspector').catch(() => { });
+                }
+            }} style={{
                 backgroundColor: '#FFFFFF',
                 borderRadius: 5,
                 paddingHorizontal: 6,
@@ -342,6 +365,13 @@ const InspectorHeader = react_1.default.memo(() => {
             }} numberOfLines={1}>
                         v{constants_2.LIB_VERSION}
                       </react_native_1.Text>
+                      {updateAvailable && (<react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 9,
+                    color: '#F59E0B',
+                }}>
+                          ↑
+                        </react_native_1.Text>)}
                     </react_native_1.Pressable>
 
                     {isTelemetryActive && (<react_native_1.Pressable onPress={() => react_native_1.Alert.alert('Anonymous Telemetry Active', 'Anonymous diagnostics (such as React Native version, JavaScript engine, and device model) are currently enabled to help improve library tooling.\n\nNo user data or network payloads are captured. You can toggle this anytime in Settings.', [{ text: 'Got it' }])} style={{
@@ -482,9 +512,7 @@ const InspectorHeader = react_1.default.memo(() => {
                     },
                 ]}>
                       <react_native_1.Text style={styles_1.default.headerMethodText}>
-                        {selectedEvent.source === 'firebase'
-                    ? 'FB'
-                    : 'MAN'}
+                        {selectedEvent.source === 'firebase' ? 'FB' : 'MAN'}
                       </react_native_1.Text>
                     </react_native_1.View>
                     <react_native_1.Text style={styles_1.default.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
@@ -527,9 +555,7 @@ const InspectorHeader = react_1.default.memo(() => {
                     </react_native_1.View>
                     <react_native_1.Text style={styles_1.default.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
                       console.
-                      {(selectedLog.sourceMethod) ||
-                    selectedLog.type ||
-                    'log'}
+                      {selectedLog.sourceMethod || selectedLog.type || 'log'}
                     </react_native_1.Text>
                   </react_native_1.View>
                   <react_native_1.View style={styles_1.default.headerDetailSubRow}>
@@ -542,10 +568,10 @@ const InspectorHeader = react_1.default.memo(() => {
                     borderRadius: 20,
                     backgroundColor: `${AppColors_1.AppColors.white}29`,
                 }}>
-                        <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.white} size={11}/>
-                        <react_native_1.Text style={styles_1.default.headerSubTitle}>
-                          {(0, helpers_1.formatTime)(selectedLog.timestamp)}
-                        </react_native_1.Text>
+                      <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.white} size={11}/>
+                      <react_native_1.Text style={styles_1.default.headerSubTitle}>
+                        {(0, helpers_1.formatTime)(selectedLog.timestamp)}
+                      </react_native_1.Text>
                     </react_native_1.View>
                   </react_native_1.View>
                 </react_native_1.View>) : activeTab === 'redux' && selectedReduxSlice != null ? ((() => {
@@ -565,9 +591,7 @@ const InspectorHeader = react_1.default.memo(() => {
                             backgroundColor: `${AppColors_1.AppColors.purple}4D`,
                         },
                     ]}>
-                          <react_native_1.Text style={styles_1.default.headerMethodText}>
-                            SLICE
-                          </react_native_1.Text>
+                          <react_native_1.Text style={styles_1.default.headerMethodText}>SLICE</react_native_1.Text>
                         </react_native_1.View>
                         <react_native_1.Text style={styles_1.default.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
                           {selectedReduxSlice}
@@ -578,20 +602,26 @@ const InspectorHeader = react_1.default.memo(() => {
                         styles_1.default.headerStatusDot,
                         { backgroundColor: AppColors_1.AppColors.liveGreen },
                     ]}/>
-                        <react_native_1.Text style={styles_1.default.headerSubTitle}>
-                          Live
+                        <react_native_1.Text style={styles_1.default.headerSubTitle}>Live</react_native_1.Text>
+                        <react_native_1.Text style={[styles_1.default.headerSubTitle, { opacity: 0.6 }]}>
+                          •
                         </react_native_1.Text>
-                        <react_native_1.Text style={[styles_1.default.headerSubTitle, { opacity: 0.6 }]}>•</react_native_1.Text>
                         <react_native_1.Text style={styles_1.default.headerSubTitle}>
                           {keyCount} keys
                         </react_native_1.Text>
-                        <react_native_1.Text style={[styles_1.default.headerSubTitle, { opacity: 0.6 }]}>•</react_native_1.Text>
-                        <react_native_1.Text style={styles_1.default.headerSubTitle}>
-                          {sliceSize}
+                        <react_native_1.Text style={[styles_1.default.headerSubTitle, { opacity: 0.6 }]}>
+                          •
                         </react_native_1.Text>
+                        <react_native_1.Text style={styles_1.default.headerSubTitle}>{sliceSize}</react_native_1.Text>
                         {lastAction?.timestamp && (<>
-                            <react_native_1.Text style={[styles_1.default.headerSubTitle, { opacity: 0.6 }]}>•</react_native_1.Text>
-                            <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 3 }}>
+                            <react_native_1.Text style={[styles_1.default.headerSubTitle, { opacity: 0.6 }]}>
+                              •
+                            </react_native_1.Text>
+                            <react_native_1.View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 3,
+                        }}>
                               <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.white} size={10}/>
                               <react_native_1.Text style={styles_1.default.headerSubTitle}>
                                 {lastAction.timestamp}
@@ -608,9 +638,7 @@ const InspectorHeader = react_1.default.memo(() => {
                         backgroundColor: `${AppColors_1.AppColors.brandPurple}4D`,
                     },
                 ]}>
-                      <react_native_1.Text style={styles_1.default.headerMethodText}>
-                        ACTION
-                      </react_native_1.Text>
+                      <react_native_1.Text style={styles_1.default.headerMethodText}>ACTION</react_native_1.Text>
                     </react_native_1.View>
                     <react_native_1.Text style={styles_1.default.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
                       {selectedReduxAction.type}
@@ -636,7 +664,9 @@ const InspectorHeader = react_1.default.memo(() => {
                     },
                 ]}>
                       <react_native_1.Text style={styles_1.default.headerMethodText}>
-                        {selectedCrash.isFatal ? 'FATAL' : selectedCrash.type.toUpperCase()}
+                        {selectedCrash.isFatal
+                    ? 'FATAL'
+                    : selectedCrash.type.toUpperCase()}
                       </react_native_1.Text>
                     </react_native_1.View>
                     <react_native_1.Text style={styles_1.default.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
@@ -653,10 +683,13 @@ const InspectorHeader = react_1.default.memo(() => {
                     },
                 ]}/>
                     <react_native_1.Text style={styles_1.default.headerSubTitle}>
-                      {selectedCrash.timeStr || new Date(selectedCrash.timestamp).toLocaleTimeString()}
+                      {selectedCrash.timeStr ||
+                    new Date(selectedCrash.timestamp).toLocaleTimeString()}
                     </react_native_1.Text>
                     {selectedCrash.deviceInfo?.platform && (<>
-                        <react_native_1.Text style={[styles_1.default.headerSubTitle, { opacity: 0.6 }]}>•</react_native_1.Text>
+                        <react_native_1.Text style={[styles_1.default.headerSubTitle, { opacity: 0.6 }]}>
+                          •
+                        </react_native_1.Text>
                         <react_native_1.Text style={styles_1.default.headerSubTitle}>
                           {selectedCrash.deviceInfo.platform.toUpperCase()}
                         </react_native_1.Text>
@@ -728,6 +761,10 @@ const InspectorHeader = react_1.default.memo(() => {
           </react_native_1.View>
         </react_native_1.View>
       </react_native_1.View>
-    </react_native_linear_gradient_1.default>);
+    </react_native_linear_gradient_1.default>
+
+    {/* Dedicated Update Available Details Modal */}
+    <UpdateAvailableModal_1.UpdateAvailableModal visible={showUpdateModal} latestVersion={latestNpmVersion} onClose={() => setShowUpdateModal(false)}/>
+    </>);
 });
 exports.default = InspectorHeader;

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

@@ -106,6 +106,7 @@ const MainScreen = () => {
     return (<>
       {(react_native_1.Platform.OS === 'ios' || react_native_1.Platform.OS === 'android') &&
             isEnabled &&
+            !visible &&
             !useNativeFab && <FabLauncher_1.default />}
       <react_native_1.Modal visible={visible} animationType={modalAnimationType} transparent statusBarTranslucent={true}>
       {visible && (<ErrorBoundary_1.default onClose={closeModal}>