react-native-inapp-inspector 1.1.35 → 2.0.1

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

@@ -50,7 +50,7 @@ const constants_2 = require("../../constants");
 const helpers_1 = require("../../helpers");
 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, setSettingsPage, closeModal, detailTitle, activeTab, environment, selectedCrash, setSelectedCrash, } = (0, InspectorContext_1.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, resetToDefaults, closeModal, detailTitle, activeTab, environment, selectedCrash, setSelectedCrash, } = (0, InspectorContext_1.useInspector)();
     const envConfig = (0, react_1.useMemo)(() => {
         const rawEnv = (environment || (__DEV__ ? 'DEV' : 'PROD')).trim();
         const clean = rawEnv.toUpperCase();
@@ -91,9 +91,30 @@ const InspectorHeader = react_1.default.memo(() => {
         (activeTab === 'logs' && selectedLog != null) ||
         (activeTab === 'redux' && (selectedReduxSlice != null || selectedReduxAction != null)) ||
         (activeTab === 'crash' && selectedCrash != null);
-    const isAnySelected = isDetailView;
+    const isSettingsView = settingsPage !== null;
+    const isAnySelected = isDetailView || isSettingsView;
+    const settingsModuleTitle = (0, react_1.useMemo)(() => {
+        switch (settingsPage) {
+            case 'apis':
+                return 'APIs (Network)';
+            case 'logs':
+                return 'Console Logs';
+            case 'performance':
+                return 'Performance Tracker';
+            case 'bundle':
+                return 'Bundle Analyzer';
+            case 'crash':
+                return 'Crash Protection';
+            case 'analytics':
+                return 'Analytics Logger';
+            case 'redux':
+                return 'Redux Inspector';
+            default:
+                return 'Settings & Modules';
+        }
+    }, [settingsPage]);
     const headerTopPadding = react_native_1.Platform.OS === 'ios' && modalHeightPercent >= 95 ? 44 : 0;
-    return (<react_native_linear_gradient_1.default colors={[AppColors_1.AppColors.purple, AppColors_1.AppColors.brandPurple]} 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={[
@@ -101,12 +122,21 @@ const InspectorHeader = react_1.default.memo(() => {
             {
                 flexDirection: 'row',
                 alignItems: 'center',
-                gap: 12,
+                gap: 8,
                 flex: !isDetailView ? 1 : 0,
                 minWidth: 0,
             },
         ]}>
             <TouchableScale_1.default onPress={() => {
+            if (isSettingsView) {
+                if (settingsPage === 'main') {
+                    setSettingsPage(null);
+                }
+                else {
+                    setSettingsPage('main');
+                }
+                return;
+            }
             requestAnimationFrame(() => {
                 setSelected(null);
                 setSelectedEvent(null);
@@ -139,7 +169,43 @@ const InspectorHeader = react_1.default.memo(() => {
               <NetworkIcons_1.WhiteBackNavigation />
             </TouchableScale_1.default>
 
-            {!isAnySelected ? (<react_native_1.View style={{
+            {isSettingsView ? (<react_native_1.View style={{ gap: 2, flex: 1, minWidth: 0 }}>
+                <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                  <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 16,
+                color: AppColors_1.AppColors.white,
+                letterSpacing: -0.2,
+            }} numberOfLines={1}>
+                    {settingsModuleTitle}
+                  </react_native_1.Text>
+                  {settingsPage === 'main' && (<react_native_1.View style={{
+                    backgroundColor: `${AppColors_1.AppColors.white}26`,
+                    paddingHorizontal: 6,
+                    paddingVertical: 1.5,
+                    borderRadius: 10,
+                    borderWidth: 1,
+                    borderColor: `${AppColors_1.AppColors.white}20`,
+                }}>
+                      <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 9,
+                    color: AppColors_1.AppColors.white,
+                }}>
+                        v{constants_2.LIB_VERSION}
+                      </react_native_1.Text>
+                    </react_native_1.View>)}
+                </react_native_1.View>
+                <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: 10.5,
+                color: `${AppColors_1.AppColors.white}CC`,
+            }} numberOfLines={1}>
+                  {settingsPage === 'main'
+                ? 'Manage modules and preferences'
+                : 'Configure module parameters'}
+                </react_native_1.Text>
+              </react_native_1.View>) : !isAnySelected ? (<react_native_1.View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
                 gap: 8,
@@ -147,7 +213,7 @@ const InspectorHeader = react_1.default.memo(() => {
                 minWidth: 0,
                 marginRight: 6,
             }}>
-                <AppHeaderLogo_1.default size={38} customIcon={appIcon}/>
+                <AppHeaderLogo_1.default size={30} 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.Text style={[styles_1.default.headerTitle, { flexShrink: 1 }]} numberOfLines={1} ellipsizeMode="tail">
@@ -226,23 +292,31 @@ const InspectorHeader = react_1.default.memo(() => {
                       </react_native_1.Text>
                     </react_native_1.View>
 
-                    <react_native_1.View style={{
-                backgroundColor: `${AppColors_1.AppColors.white}14`,
-                borderRadius: 4,
-                paddingHorizontal: 4.5,
-                paddingVertical: 1.5,
-                borderWidth: 1,
-                borderColor: `${AppColors_1.AppColors.white}20`,
+                    <react_native_1.Pressable onPress={() => react_native_1.Linking.openURL('https://www.npmjs.com/package/react-native-inapp-inspector').catch(() => { })} style={{
+                backgroundColor: '#FFFFFF',
+                borderRadius: 5,
+                paddingHorizontal: 6,
+                paddingVertical: 2,
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 4,
                 flexShrink: 0,
+                shadowColor: '#000000',
+                shadowOffset: { width: 0, height: 1 },
+                shadowOpacity: 0.15,
+                shadowRadius: 2,
+                elevation: 2,
             }}>
+                      <NetworkIcons_1.NpmIcon size={11} color="#CB3837"/>
                       <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interMedium,
-                fontSize: 8.5,
-                color: `${AppColors_1.AppColors.white}B3`,
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 9.5,
+                color: '#CB3837',
+                letterSpacing: 0.2,
             }} numberOfLines={1}>
                         v{constants_2.LIB_VERSION}
                       </react_native_1.Text>
-                    </react_native_1.View>
+                    </react_native_1.Pressable>
                   </react_native_1.View>
                 </react_native_1.View>
               </react_native_1.View>) : null}
@@ -528,6 +602,19 @@ const InspectorHeader = react_1.default.memo(() => {
                 gap: 8,
             },
         ]}>
+            {isSettingsView && (<TouchableScale_1.default onPress={() => {
+                react_native_1.Alert.alert('Reset All Settings', 'This restores all module visibility and UI preferences to defaults. Continue?', [
+                    { text: 'Cancel', style: 'cancel' },
+                    {
+                        text: 'Reset',
+                        style: 'destructive',
+                        onPress: resetToDefaults,
+                    },
+                ]);
+            }} hitSlop={15} style={styles_1.default.closeButtonSquare}>
+                <NetworkIcons_1.ResetIcon color={AppColors_1.AppColors.white} size={14}/>
+              </TouchableScale_1.default>)}
+
             {!isAnySelected && (<TouchableScale_1.default onPress={() => {
                 react_native_1.Alert.alert('Clear Everything', 'This clears all tabs — APIs, Logs, Analytics, Redux timeline and Crash history. Continue?', [
                     { text: 'Cancel', style: 'cancel' },
@@ -554,16 +641,16 @@ const InspectorHeader = react_1.default.memo(() => {
                     },
                 ],
             }}>
-                  <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.white} size={16}/>
+                  <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.white} size={14}/>
                 </react_native_1.Animated.View>
               </TouchableScale_1.default>)}
 
             {!isAnySelected && (<TouchableScale_1.default onPress={() => setSettingsPage('main')} hitSlop={15} style={styles_1.default.closeButtonSquare}>
-                <NetworkIcons_1.SettingsIcon color={AppColors_1.AppColors.white} size={16}/>
+                <NetworkIcons_1.SettingsIcon color={AppColors_1.AppColors.white} size={14}/>
               </TouchableScale_1.default>)}
 
             <TouchableScale_1.default onPress={closeModal} hitSlop={15} style={styles_1.default.closeButtonSquare}>
-              <NetworkIcons_1.CloseWhite size={16}/>
+              <NetworkIcons_1.CloseWhite size={14}/>
             </TouchableScale_1.default>
           </react_native_1.View>
         </react_native_1.View>

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

@@ -61,25 +61,50 @@ const styles_1 = __importDefault(require("../../styles"));
 const AppColors_1 = require("../../styles/AppColors");
 const NavigationTracker_1 = __importDefault(require("./NavigationTracker"));
 const MainScreen = () => {
-    const { visible, modalAnimationType, closeModal, modalHeightPercent, selected, selectedEvent, selectedLog, selectedReduxSlice, selectedReduxAction, selectedCrash, settingsPage, activeTab, isReady, isEnabled, hasNavigationContext, setNavState, } = (0, InspectorContext_1.useInspector)();
-    // Lazy-mount each tab on first visit and cache it in memory for 0ms instantaneous switching
-    const [mountedTabs, setMountedTabs] = (0, react_1.useState)({
-        [activeTab]: true,
-    });
-    (0, react_1.useEffect)(() => {
-        setMountedTabs(prev => {
-            if (prev[activeTab])
-                return prev;
-            return { ...prev, [activeTab]: true };
-        });
-    }, [activeTab]);
+    const { visible, modalAnimationType, closeModal, modalHeightPercent, selected, selectedEvent, selectedLog, selectedReduxSlice, selectedReduxAction, selectedCrash, settingsPage, activeTab, isReady, isEnabled, useNativeFab, hasNavigationContext, setNavState, } = (0, InspectorContext_1.useInspector)();
     const isDetailActive = (activeTab === 'apis' && selected != null) ||
         (activeTab === 'analytics' && selectedEvent != null) ||
         (activeTab === 'logs' && selectedLog != null) ||
         (activeTab === 'redux' && (selectedReduxSlice != null || selectedReduxAction != null)) ||
         (activeTab === 'crash' && selectedCrash != null);
+    // ─── 60 FPS Transition Animations ──────────────────────────────────────────
+    const detailAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    (0, react_1.useEffect)(() => {
+        if (isDetailActive) {
+            detailAnim.setValue(0);
+            react_native_1.Animated.spring(detailAnim, {
+                toValue: 1,
+                friction: 8,
+                tension: 65,
+                useNativeDriver: true,
+            }).start();
+        }
+    }, [isDetailActive]);
+    const settingsAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    (0, react_1.useEffect)(() => {
+        if (settingsPage !== null) {
+            settingsAnim.setValue(0);
+            react_native_1.Animated.spring(settingsAnim, {
+                toValue: 1,
+                friction: 8,
+                tension: 65,
+                useNativeDriver: true,
+            }).start();
+        }
+    }, [settingsPage !== null]);
+    const tabAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
+    (0, react_1.useEffect)(() => {
+        tabAnim.setValue(0);
+        react_native_1.Animated.timing(tabAnim, {
+            toValue: 1,
+            duration: 150,
+            useNativeDriver: true,
+        }).start();
+    }, [activeTab]);
     return (<>
-      {(react_native_1.Platform.OS === 'ios' || react_native_1.Platform.OS === 'android') && isEnabled && <FabLauncher_1.default />}
+      {(react_native_1.Platform.OS === 'ios' || react_native_1.Platform.OS === 'android') &&
+            isEnabled &&
+            !useNativeFab && <FabLauncher_1.default />}
       <react_native_1.Modal visible={visible} animationType={modalAnimationType} transparent statusBarTranslucent={true}>
       {visible && (<ErrorBoundary_1.default onClose={closeModal}>
           <react_native_1.View style={styles_1.default.modalBackdrop}>
@@ -96,68 +121,86 @@ const MainScreen = () => {
 
               <InspectorHeader_1.default />
 
-              {/* ─── Horizontal Scrollable Tab Bar inside Content ─── */}
-              {!isDetailActive && settingsPage === null ? (<TabBar_1.default />) : null}
+              <react_native_1.View style={{ flex: 1 }}>
+                {isReady ? (<react_native_1.View style={{ flex: 1 }}>
+                    {/* ─── Horizontal Scrollable Tab Bar inside Content ─── */}
+                    {!isDetailActive && <TabBar_1.default />}
+
+                    {/* Persistent List Layer - Never unmounted, preserves 100% native scroll with smooth tab transition */}
+                    <react_native_1.Animated.View style={[
+                    {
+                        flex: 1,
+                        opacity: tabAnim,
+                        transform: [
+                            {
+                                translateY: tabAnim.interpolate({
+                                    inputRange: [0, 1],
+                                    outputRange: [6, 0],
+                                }),
+                            },
+                        ],
+                    },
+                    (isDetailActive || settingsPage !== null) && {
+                        pointerEvents: 'none',
+                    },
+                ]}>
+                      {activeTab === 'apis' && <NetworkTab_1.default />}
+                      {activeTab === 'logs' && <ConsoleTab_1.default />}
+                      {activeTab === 'analytics' && <AnalyticsTab_1.default />}
+                      {activeTab === 'redux' && <ReduxTab_1.default />}
+                      {activeTab === 'bundle' && <BundleTab_1.default />}
+                      {activeTab === 'performance' && <PerformanceTab_1.default />}
+                      {activeTab === 'crash' && <CrashTab_1.default />}
+                    </react_native_1.Animated.View>
 
-              {isReady ? (isDetailActive ? (activeTab === 'apis' && selected != null ? (<NetworkDetail_1.default />) : activeTab === 'analytics' && selectedEvent != null ? (<AnalyticsDetail_1.default event={selectedEvent}/>) : activeTab === 'logs' && selectedLog != null ? (<LogDetail_1.default />) : activeTab === 'redux' ? (<ReduxDetail_1.default />) : activeTab === 'crash' && selectedCrash != null ? (<CrashDetail_1.default />) : null) : (<>
-                    <react_native_1.View style={{
-                    flex: 1,
-                    display: activeTab === 'apis' ? 'flex' : 'none',
-                }}>
-                      {mountedTabs.apis && <NetworkTab_1.default />}
-                    </react_native_1.View>
-                    <react_native_1.View style={{
-                    flex: 1,
-                    display: activeTab === 'logs' ? 'flex' : 'none',
-                }}>
-                      {mountedTabs.logs && <ConsoleTab_1.default />}
-                    </react_native_1.View>
-                    <react_native_1.View style={{
-                    flex: 1,
-                    display: activeTab === 'analytics' ? 'flex' : 'none',
-                }}>
-                      {mountedTabs.analytics && <AnalyticsTab_1.default />}
-                    </react_native_1.View>
-                    <react_native_1.View style={{
-                    flex: 1,
-                    display: activeTab === 'redux' ? 'flex' : 'none',
-                }}>
-                      {mountedTabs.redux && <ReduxTab_1.default />}
-                    </react_native_1.View>
-                    <react_native_1.View style={{
-                    flex: 1,
-                    display: activeTab === 'bundle' ? 'flex' : 'none',
-                }}>
-                      {mountedTabs.bundle && <BundleTab_1.default />}
-                    </react_native_1.View>
-                    <react_native_1.View style={{
-                    flex: 1,
-                    display: activeTab === 'performance' ? 'flex' : 'none',
-                }}>
-                      {mountedTabs.performance && <PerformanceTab_1.default />}
-                    </react_native_1.View>
-                    <react_native_1.View style={{
-                    flex: 1,
-                    display: activeTab === 'crash' ? 'flex' : 'none',
-                }}>
-                      {mountedTabs.crash && <CrashTab_1.default />}
-                    </react_native_1.View>
-                  </>)) : (<react_native_1.View style={styles_1.default.empty}>
-                  <react_native_1.ActivityIndicator size="large" color={AppColors_1.AppColors.purple}/>
-                  <react_native_1.Text style={[styles_1.default.emptySub, { marginTop: 12 }]}>
-                    Loading logs...
-                  </react_native_1.Text>
-                </react_native_1.View>)}
+                    {/* Detail View Layer - Rendered on top with smooth slide & spring transition */}
+                    {isDetailActive && (<react_native_1.Animated.View style={[
+                        react_native_1.StyleSheet.absoluteFill,
+                        {
+                            backgroundColor: AppColors_1.AppColors.contentBg,
+                            opacity: detailAnim,
+                            transform: [
+                                {
+                                    translateX: detailAnim.interpolate({
+                                        inputRange: [0, 1],
+                                        outputRange: [32, 0],
+                                    }),
+                                },
+                            ],
+                        },
+                    ]}>
+                        {activeTab === 'apis' && selected != null && (<NetworkDetail_1.default />)}
+                        {activeTab === 'analytics' && selectedEvent != null && (<AnalyticsDetail_1.default event={selectedEvent}/>)}
+                        {activeTab === 'logs' && selectedLog != null && (<LogDetail_1.default />)}
+                        {activeTab === 'redux' && <ReduxDetail_1.default />}
+                        {activeTab === 'crash' && selectedCrash != null && (<CrashDetail_1.default />)}
+                      </react_native_1.Animated.View>)}
+                  </react_native_1.View>) : (<react_native_1.View style={styles_1.default.empty}>
+                    <react_native_1.ActivityIndicator size="large" color={AppColors_1.AppColors.purple}/>
+                    <react_native_1.Text style={[styles_1.default.emptySub, { marginTop: 12 }]}>
+                      Loading logs...
+                    </react_native_1.Text>
+                  </react_native_1.View>)}
 
-              {settingsPage !== null && (<react_native_1.View style={[
+                {/* Settings Panel Layer - Rendered on top with smooth slide & spring transition */}
+                {settingsPage !== null && (<react_native_1.Animated.View style={[
                     react_native_1.StyleSheet.absoluteFill,
                     {
                         backgroundColor: AppColors_1.AppColors.grayBackground,
-                        zIndex: 99999,
+                        opacity: settingsAnim,
+                        transform: [
+                            {
+                                translateY: settingsAnim.interpolate({
+                                    inputRange: [0, 1],
+                                    outputRange: [24, 0],
+                                }),
+                            },
+                        ],
                     },
                 ]}>
-                  <SettingsPanel_1.default />
-                </react_native_1.View>)}
+                    <SettingsPanel_1.default />
+                  </react_native_1.Animated.View>)}
+              </react_native_1.View>
 
               {/* Bottom floating toast notification */}
               <Toast_1.default />