react-native-inapp-inspector 2.3.18 → 2.3.19

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

@@ -17,7 +17,7 @@ import { clearPerformanceEvents } from '../../customHooks/performanceTracker';
 import { isReduxConnected } from '../../customHooks/reduxLogger';
 import { isAnalyticsConnected } from '../../customHooks/analyticsLogger';
 import { useTranslation } from '../../i18n';
-import { SignalIcon, TerminalIcon, AnalyticsIcon, SettingsIcon, SunIcon, MoonIcon, ScreenIcon, MotionIcon, LayersIcon, EyeIcon, CheckIcon, TrashIcon, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, ShieldAlertIcon, ForwardChevronIcon, ChevronDownIcon, NpmIcon, BoltIcon, BrainIcon, SmartphoneIcon, DatabaseIcon, QrCodeIcon, GitHubIcon, InfoCircleIcon, CopyIcon, FilmIcon, CameraIcon, VideoCameraIcon, MicrophoneIcon, GifIcon, ImageIcon, } from '../NetworkIcons';
+import { SignalIcon, TerminalIcon, AnalyticsIcon, SettingsIcon, SunIcon, MoonIcon, ScreenIcon, MotionIcon, LayersIcon, EyeIcon, CheckIcon, TrashIcon, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, ShieldAlertIcon, ForwardChevronIcon, ChevronDownIcon, NpmIcon, BoltIcon, BrainIcon, SmartphoneIcon, DatabaseIcon, QrCodeIcon, GitHubIcon, InfoCircleIcon, CopyIcon, FilmIcon, ScreencastIcon, CameraIcon, VideoCameraIcon, MicrophoneIcon, GifIcon, ImageIcon, } from '../NetworkIcons';
 import { ScreenCapture } from '../../capture';
 import { LIB_VERSION } from '../../constants';
 import { copyToClipboard, isLocalDebugEnvironment, getAppName, getBundleIdentifier, getAppVersionAndBuild, } from '../../helpers';
@@ -115,6 +115,14 @@ const SettingsPanel = () => {
             icon: 'debugging',
             desc: 'QR Code bridge for direct Debug APK download & Metro live-reload sync',
         },
+        {
+            id: 11,
+            key: 'media',
+            label: 'Screencast',
+            category: 'diagnostic',
+            icon: 'media',
+            desc: 'Screenshots, video recordings, audio narration & animated GIFs',
+        },
     ].filter(m => m.key === 'debugging'
         ? Platform.OS === 'android' && isLocalDebugEnvironment()
         : true), []);
@@ -129,6 +137,7 @@ const SettingsPanel = () => {
         bundle: Boolean(tabVisibility?.bundle),
         performance: Boolean(tabVisibility?.performance),
         debugging: Boolean(tabVisibility?.debugging),
+        media: Boolean(tabVisibility?.media ?? true),
     }));
     useEffect(() => {
         setStagedTabVisibility({
@@ -142,6 +151,7 @@ const SettingsPanel = () => {
             bundle: Boolean(tabVisibility?.bundle),
             performance: Boolean(tabVisibility?.performance),
             debugging: Boolean(tabVisibility?.debugging),
+            media: Boolean(tabVisibility?.media ?? true),
         });
     }, [tabVisibility]);
     const hasUnsavedChanges = useMemo(() => {
@@ -168,6 +178,7 @@ const SettingsPanel = () => {
                         bundle: Boolean(tabVisibility?.bundle),
                         performance: Boolean(tabVisibility?.performance),
                         debugging: Boolean(tabVisibility?.debugging),
+                        media: Boolean(tabVisibility?.media ?? true),
                     });
                 },
             },
@@ -354,7 +365,8 @@ const SettingsPanel = () => {
                 key: 'module',
                 label: t('settings.modulesAndTools', 'Modules & Tools'),
                 Icon: LayersIcon,
-                badge: `${allModules.filter(m => stagedTabVisibility?.[m.key] || m.key === 'apis').length}/${allModules.length}`,
+                badge: `${allModules.filter(m => stagedTabVisibility?.[m.key] ||
+                    m.key === 'apis').length}/${allModules.length}`,
             },
             {
                 key: 'ui',
@@ -399,9 +411,7 @@ const SettingsPanel = () => {
                     fontFamily: AppFonts.interBold,
                     fontSize: 12.5,
                     lineHeight: 16,
-                    color: isActive
-                        ? AppColors.white
-                        : AppColors.grayText,
+                    color: isActive ? AppColors.white : AppColors.grayText,
                 }}>
                     {tab.label}
                   </Text>
@@ -416,9 +426,7 @@ const SettingsPanel = () => {
                       <Text style={{
                         fontFamily: AppFonts.interBold,
                         fontSize: 9.5,
-                        color: isActive
-                            ? AppColors.white
-                            : AppColors.purple,
+                        color: isActive ? AppColors.white : AppColors.purple,
                     }}>
                         {tab.badge}
                       </Text>
@@ -575,6 +583,9 @@ const SettingsPanel = () => {
                           {moduleItem.icon === 'debugging' && (<QrCodeIcon color={isChecked
                             ? AppColors.purple
                             : AppColors.grayTextWeak} size={16}/>)}
+                          {moduleItem.icon === 'media' && (<ScreencastIcon color={isChecked
+                            ? AppColors.purple
+                            : AppColors.grayTextWeak} size={16}/>)}
                         </View>
 
                         
@@ -1407,7 +1418,8 @@ const SettingsPanel = () => {
                 color: AppColors.grayText,
                 marginTop: 1,
             }}>
-                      Dynamically sets log limits according to available device memory
+                      Dynamically sets log limits according to available device
+                      memory
                     </Text>
                   </View>
                 </View>
@@ -1543,7 +1555,12 @@ const SettingsPanel = () => {
                   </View>
                 </View>
 
-                <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8, marginTop: 4 }}>
+                <View style={{
+                flexDirection: 'row',
+                flexWrap: 'wrap',
+                gap: 8,
+                marginTop: 4,
+            }}>
                   {[
                 {
                     label: 'APIs',
@@ -1652,7 +1669,8 @@ const SettingsPanel = () => {
                 color: AppColors.grayText,
                 marginTop: 1,
             }}>
-                    Automatically prunes in-memory buffers by 50% when the OS signals low memory
+                    Automatically prunes in-memory buffers by 50% when the OS
+                    signals low memory
                   </Text>
                 </View>
                 <View style={{
@@ -1772,12 +1790,16 @@ const SettingsPanel = () => {
                             paddingHorizontal: 8,
                             paddingVertical: 4,
                             borderRadius: 6,
-                            backgroundColor: fmt === 'PNG' ? AppColors.purple : `${AppColors.purple}1A`,
+                            backgroundColor: fmt === 'PNG'
+                                ? AppColors.purple
+                                : `${AppColors.purple}1A`,
                         }}>
                         <Text style={{
                             fontFamily: AppFonts.interBold,
                             fontSize: 10,
-                            color: fmt === 'PNG' ? AppColors.white : AppColors.purple,
+                            color: fmt === 'PNG'
+                                ? AppColors.white
+                                : AppColors.purple,
                         }}>
                           {fmt}
                         </Text>
@@ -1857,7 +1879,9 @@ const SettingsPanel = () => {
                             paddingHorizontal: 7,
                             paddingVertical: 4,
                             borderRadius: 6,
-                            backgroundColor: i === 0 ? AppColors.purple : `${AppColors.purple}1A`,
+                            backgroundColor: i === 0
+                                ? AppColors.purple
+                                : `${AppColors.purple}1A`,
                         }}>
                         <Text style={{
                             fontFamily: AppFonts.interBold,
@@ -1879,7 +1903,9 @@ const SettingsPanel = () => {
                             paddingHorizontal: 6,
                             paddingVertical: 4,
                             borderRadius: 6,
-                            backgroundColor: fps === '24' ? AppColors.purple : `${AppColors.purple}1A`,
+                            backgroundColor: fps === '24'
+                                ? AppColors.purple
+                                : `${AppColors.purple}1A`,
                         }}>
                         <Text style={{
                             fontFamily: AppFonts.interBold,
@@ -2079,7 +2105,9 @@ const SettingsPanel = () => {
                 lineHeight: 16,
                 color: AppColors.grayText,
             }}>
-                High-performance in-app debugging, network logging, console inspection, performance profiling, storage viewer & telemetry diagnostics for React Native.
+                High-performance in-app debugging, network logging, console
+                inspection, performance profiling, storage viewer & telemetry
+                diagnostics for React Native.
               </Text>
 
               {updateAvailable && (<TouchableScale onPress={() => {
@@ -2290,7 +2318,9 @@ const SettingsPanel = () => {
                     package: {
                         name: 'react-native-inapp-inspector',
                         version: `v${LIB_VERSION}`,
-                        latestNpmVersion: latestNpmVersion ? `v${latestNpmVersion}` : 'Checking...',
+                        latestNpmVersion: latestNpmVersion
+                            ? `v${latestNpmVersion}`
+                            : 'Checking...',
                         license: 'MIT',
                         repository: 'https://github.com/vengatmacuser/react-native-inapp-inspector',
                     },
@@ -2298,15 +2328,24 @@ const SettingsPanel = () => {
                         name: getAppName(),
                         bundleId: getBundleIdentifier(),
                         versionAndBuild: getAppVersionAndBuild().formatted,
-                        buildVariant: __DEV__ ? 'Development (Debug)' : 'Production (Release)',
+                        buildVariant: __DEV__
+                            ? 'Development (Debug)'
+                            : 'Production (Release)',
                         metroConnected: isLocalDebugEnvironment(),
                     },
                     runtime: {
-                        reactNativeVersion: rnVer ? `${rnVer.major}.${rnVer.minor}.${rnVer.patch}` : '0.74+',
+                        reactNativeVersion: rnVer
+                            ? `${rnVer.major}.${rnVer.minor}.${rnVer.patch}`
+                            : '0.74+',
                         reactVersion: React.version,
-                        jsEngine: Boolean(global?.HermesInternal) ? 'Hermes' : 'JavaScriptCore (JSC)',
-                        architecture: Boolean(global?.nativeFabricUIManager) ? 'Fabric (New Architecture)' : 'Paper (Legacy Bridge)',
-                        turboModules: Boolean(global?.__turboModuleProxy || global?.TurboModuleRegistry),
+                        jsEngine: Boolean(global?.HermesInternal)
+                            ? 'Hermes'
+                            : 'JavaScriptCore (JSC)',
+                        architecture: Boolean(global?.nativeFabricUIManager)
+                            ? 'Fabric (New Architecture)'
+                            : 'Paper (Legacy Bridge)',
+                        turboModules: Boolean(global?.__turboModuleProxy ||
+                            global?.TurboModuleRegistry),
                     },
                     device: {
                         platform: Platform.OS,
@@ -2316,12 +2355,16 @@ const SettingsPanel = () => {
                         screenDimensions: `${Math.round(scr.width)}x${Math.round(scr.height)} pt`,
                         pixelRatio: PixelRatio.get(),
                         fontScale: PixelRatio.getFontScale(),
-                        timezone: Intl.DateTimeFormat().resolvedOptions().timeZone || 'Unknown',
+                        timezone: Intl.DateTimeFormat().resolvedOptions().timeZone ||
+                            'Unknown',
                         locale: Intl.DateTimeFormat().resolvedOptions().locale || 'en',
                     },
                     storageAndCapabilities: {
-                        storageEngine: isPersistentStorageAvailable() ? 'MMKV (Fast Native Storage)' : 'In-Memory State',
-                        hasNativeModule: Boolean(global?.NativeInspectorModule || global?.__IN_APP_INSPECTOR_NATIVE__),
+                        storageEngine: isPersistentStorageAvailable()
+                            ? 'MMKV (Fast Native Storage)'
+                            : 'In-Memory State',
+                        hasNativeModule: Boolean(global?.NativeInspectorModule ||
+                            global?.__IN_APP_INSPECTOR_NATIVE__),
                         reduxConnected: isReduxConnected(),
                         analyticsConnected: isAnalyticsConnected(),
                     },
@@ -2471,7 +2514,9 @@ const SettingsPanel = () => {
                 copyToClipboard('npm install react-native-inapp-inspector@latest', 'Install Command');
                 showToast('Copied npm install command!');
             }} style={{
-                backgroundColor: updateAvailable ? AppColors.purple : `${AppColors.purple}18`,
+                backgroundColor: updateAvailable
+                    ? AppColors.purple
+                    : `${AppColors.purple}18`,
                 paddingVertical: 7,
                 paddingHorizontal: 11,
                 borderRadius: 8,
@@ -2483,7 +2528,9 @@ const SettingsPanel = () => {
                   <Text style={{
                 fontFamily: AppFonts.interBold,
                 fontSize: 11,
-                color: updateAvailable ? AppColors.white : AppColors.purple,
+                color: updateAvailable
+                    ? AppColors.white
+                    : AppColors.purple,
             }}>
                     {updateAvailable ? 'Copy Upgrade' : 'Copy Install'}
                   </Text>
@@ -2511,65 +2558,127 @@ const SettingsPanel = () => {
               </Text>
 
               <View style={{ gap: 8 }}>
-                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
-                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                <View style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+            }}>
+                  <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 11.5,
+                color: AppColors.grayText,
+            }}>
                     Application Name
                   </Text>
-                  <Text style={{ fontFamily: AppFonts.interBold, fontSize: 11.5, color: AppColors.primaryBlack }}>
+                  <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 11.5,
+                color: AppColors.primaryBlack,
+            }}>
                     {getAppName()}
                   </Text>
                 </View>
 
-                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
-                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                <View style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+            }}>
+                  <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 11.5,
+                color: AppColors.grayText,
+            }}>
                     Bundle ID / Package
                   </Text>
-                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11, color: AppColors.primaryBlack }}>
+                  <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 11,
+                color: AppColors.primaryBlack,
+            }}>
                     {getBundleIdentifier()}
                   </Text>
                 </View>
 
-                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
-                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                <View style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+            }}>
+                  <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 11.5,
+                color: AppColors.grayText,
+            }}>
                     Version & Build Number
                   </Text>
-                  <Text style={{ fontFamily: AppFonts.interBold, fontSize: 11.5, color: AppColors.primaryBlack }}>
+                  <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 11.5,
+                color: AppColors.primaryBlack,
+            }}>
                     {getAppVersionAndBuild().formatted}
                   </Text>
                 </View>
 
-                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
-                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                <View style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+            }}>
+                  <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 11.5,
+                color: AppColors.grayText,
+            }}>
                     Build Variant
                   </Text>
                   <View style={{
-                backgroundColor: __DEV__ ? `${AppColors.amber500}20` : `${AppColors.emerald500}20`,
+                backgroundColor: __DEV__
+                    ? `${AppColors.amber500}20`
+                    : `${AppColors.emerald500}20`,
                 paddingHorizontal: 6,
                 paddingVertical: 1.5,
                 borderRadius: 5,
                 borderWidth: 1,
-                borderColor: __DEV__ ? `${AppColors.amber500}50` : `${AppColors.emerald500}50`,
+                borderColor: __DEV__
+                    ? `${AppColors.amber500}50`
+                    : `${AppColors.emerald500}50`,
             }}>
                     <Text style={{
                 fontFamily: AppFonts.interBold,
                 fontSize: 10,
-                color: __DEV__ ? AppColors.amber500 : AppColors.emerald600,
+                color: __DEV__
+                    ? AppColors.amber500
+                    : AppColors.emerald600,
             }}>
                       {__DEV__ ? 'Development (Debug)' : 'Production (Release)'}
                     </Text>
                   </View>
                 </View>
 
-                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
-                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                <View style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+            }}>
+                  <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 11.5,
+                color: AppColors.grayText,
+            }}>
                     Metro Bundler Connection
                   </Text>
                   <Text style={{
                 fontFamily: AppFonts.interBold,
                 fontSize: 11.5,
-                color: isLocalDebugEnvironment() ? AppColors.emerald600 : AppColors.grayText,
+                color: isLocalDebugEnvironment()
+                    ? AppColors.emerald600
+                    : AppColors.grayText,
             }}>
-                    {isLocalDebugEnvironment() ? 'Connected (Hot Reload Active)' : 'Offline / Standalone'}
+                    {isLocalDebugEnvironment()
+                ? 'Connected (Hot Reload Active)'
+                : 'Offline / Standalone'}
                   </Text>
                 </View>
               </View>
@@ -2595,28 +2704,62 @@ const SettingsPanel = () => {
               </Text>
 
               <View style={{ gap: 8 }}>
-                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
-                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                <View style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+            }}>
+                  <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 11.5,
+                color: AppColors.grayText,
+            }}>
                     React Native Version
                   </Text>
-                  <Text style={{ fontFamily: AppFonts.interBold, fontSize: 11.5, color: AppColors.primaryBlack }}>
-                    v{(Platform.constants?.reactNativeVersion?.major != null)
+                  <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 11.5,
+                color: AppColors.primaryBlack,
+            }}>
+                    v
+                    {Platform.constants?.reactNativeVersion?.major !=
+                null
                 ? `${Platform.constants.reactNativeVersion.major}.${Platform.constants.reactNativeVersion.minor}.${Platform.constants.reactNativeVersion.patch}`
                 : '0.74+'}
                   </Text>
                 </View>
 
-                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
-                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                <View style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+            }}>
+                  <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 11.5,
+                color: AppColors.grayText,
+            }}>
                     React Core Version
                   </Text>
-                  <Text style={{ fontFamily: AppFonts.interBold, fontSize: 11.5, color: AppColors.primaryBlack }}>
+                  <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 11.5,
+                color: AppColors.primaryBlack,
+            }}>
                     v{React.version}
                   </Text>
                 </View>
 
-                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
-                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                <View style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+            }}>
+                  <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 11.5,
+                color: AppColors.grayText,
+            }}>
                     JavaScript Engine
                   </Text>
                   <View style={{
@@ -2627,27 +2770,60 @@ const SettingsPanel = () => {
                 borderWidth: 1,
                 borderColor: `${AppColors.purple}40`,
             }}>
-                    <Text style={{ fontFamily: AppFonts.interBold, fontSize: 10.5, color: AppColors.purple }}>
-                      {Boolean(global?.HermesInternal) ? 'Hermes Engine (Active)' : 'JavaScriptCore (JSC)'}
+                    <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 10.5,
+                color: AppColors.purple,
+            }}>
+                      {Boolean(global?.HermesInternal)
+                ? 'Hermes Engine (Active)'
+                : 'JavaScriptCore (JSC)'}
                     </Text>
                   </View>
                 </View>
 
-                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
-                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                <View style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+            }}>
+                  <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 11.5,
+                color: AppColors.grayText,
+            }}>
                     Rendering Architecture
                   </Text>
-                  <Text style={{ fontFamily: AppFonts.interBold, fontSize: 11.5, color: AppColors.primaryBlack }}>
-                    {Boolean(global?.nativeFabricUIManager) ? 'Fabric (New Architecture)' : 'Paper (Legacy Bridge)'}
+                  <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 11.5,
+                color: AppColors.primaryBlack,
+            }}>
+                    {Boolean(global?.nativeFabricUIManager)
+                ? 'Fabric (New Architecture)'
+                : 'Paper (Legacy Bridge)'}
                   </Text>
                 </View>
 
-                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
-                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                <View style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+            }}>
+                  <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 11.5,
+                color: AppColors.grayText,
+            }}>
                     TurboModules Support
                   </Text>
-                  <Text style={{ fontFamily: AppFonts.interBold, fontSize: 11.5, color: AppColors.primaryBlack }}>
-                    {Boolean(global?.__turboModuleProxy || global?.TurboModuleRegistry)
+                  <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 11.5,
+                color: AppColors.primaryBlack,
+            }}>
+                    {Boolean(global?.__turboModuleProxy ||
+                global?.TurboModuleRegistry)
                 ? 'Enabled (C++ JSI)'
                 : 'Standard Bridge'}
                   </Text>
@@ -2675,59 +2851,149 @@ const SettingsPanel = () => {
               </Text>
 
               <View style={{ gap: 8 }}>
-                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
-                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                <View style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+            }}>
+                  <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 11.5,
+                color: AppColors.grayText,
+            }}>
                     Operating System
                   </Text>
-                  <Text style={{ fontFamily: AppFonts.interBold, fontSize: 11.5, color: AppColors.primaryBlack }}>
-                    {Platform.OS === 'ios' ? 'Apple iOS' : Platform.OS === 'android' ? 'Google Android' : Platform.OS}{' '}
+                  <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 11.5,
+                color: AppColors.primaryBlack,
+            }}>
+                    {Platform.OS === 'ios'
+                ? 'Apple iOS'
+                : Platform.OS === 'android'
+                    ? 'Google Android'
+                    : Platform.OS}{' '}
                     {Platform.Version}
                   </Text>
                 </View>
 
-                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
-                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                <View style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+            }}>
+                  <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 11.5,
+                color: AppColors.grayText,
+            }}>
                     Device Hardware Model
                   </Text>
-                  <Text style={{ fontFamily: AppFonts.interBold, fontSize: 11.5, color: AppColors.primaryBlack }}>
+                  <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 11.5,
+                color: AppColors.primaryBlack,
+            }}>
                     {Platform.constants?.Model ||
-                (Platform.OS === 'ios' ? 'Apple Device' : 'Android Device')}
+                (Platform.OS === 'ios'
+                    ? 'Apple Device'
+                    : 'Android Device')}
                   </Text>
                 </View>
 
-                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
-                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                <View style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+            }}>
+                  <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 11.5,
+                color: AppColors.grayText,
+            }}>
                     Window Viewport (Points)
                   </Text>
-                  <Text style={{ fontFamily: AppFonts.interBold, fontSize: 11.5, color: AppColors.primaryBlack }}>
-                    {Math.round(Dimensions.get('window').width)} × {Math.round(Dimensions.get('window').height)} pt
+                  <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 11.5,
+                color: AppColors.primaryBlack,
+            }}>
+                    {Math.round(Dimensions.get('window').width)} ×{' '}
+                    {Math.round(Dimensions.get('window').height)} pt
                   </Text>
                 </View>
 
-                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
-                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                <View style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+            }}>
+                  <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 11.5,
+                color: AppColors.grayText,
+            }}>
                     Native Physical Resolution
                   </Text>
-                  <Text style={{ fontFamily: AppFonts.interBold, fontSize: 11.5, color: AppColors.primaryBlack }}>
-                    {Math.round(Dimensions.get('screen').width * PixelRatio.get())} × {Math.round(Dimensions.get('screen').height * PixelRatio.get())} px
+                  <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 11.5,
+                color: AppColors.primaryBlack,
+            }}>
+                    {Math.round(Dimensions.get('screen').width * PixelRatio.get())}{' '}
+                    ×{' '}
+                    {Math.round(Dimensions.get('screen').height * PixelRatio.get())}{' '}
+                    px
                   </Text>
                 </View>
 
-                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
-                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                <View style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+            }}>
+                  <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 11.5,
+                color: AppColors.grayText,
+            }}>
                     Pixel Density & Font Scale
                   </Text>
-                  <Text style={{ fontFamily: AppFonts.interBold, fontSize: 11.5, color: AppColors.primaryBlack }}>
-                    {PixelRatio.get().toFixed(1)}x ({PixelRatio.get() >= 3 ? '@3x' : PixelRatio.get() >= 2 ? '@2x' : '@1x'}) • Font: {PixelRatio.getFontScale().toFixed(2)}x
+                  <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 11.5,
+                color: AppColors.primaryBlack,
+            }}>
+                    {PixelRatio.get().toFixed(1)}x (
+                    {PixelRatio.get() >= 3
+                ? '@3x'
+                : PixelRatio.get() >= 2
+                    ? '@2x'
+                    : '@1x'}
+                    ) • Font: {PixelRatio.getFontScale().toFixed(2)}x
                   </Text>
                 </View>
 
-                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
-                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                <View style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+            }}>
+                  <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 11.5,
+                color: AppColors.grayText,
+            }}>
                     Timezone & Locale
                   </Text>
-                  <Text style={{ fontFamily: AppFonts.interBold, fontSize: 11.5, color: AppColors.primaryBlack }}>
-                    {Intl.DateTimeFormat().resolvedOptions().timeZone || 'System'} ({Intl.DateTimeFormat().resolvedOptions().locale || 'en'})
+                  <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 11.5,
+                color: AppColors.primaryBlack,
+            }}>
+                    {Intl.DateTimeFormat().resolvedOptions().timeZone ||
+                'System'}{' '}
+                    ({Intl.DateTimeFormat().resolvedOptions().locale || 'en'})
                   </Text>
                 </View>
               </View>
@@ -2753,73 +3019,151 @@ const SettingsPanel = () => {
               </Text>
 
               <View style={{ gap: 8 }}>
-                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
-                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                <View style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+            }}>
+                  <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 11.5,
+                color: AppColors.grayText,
+            }}>
                     Storage Persistence Engine
                   </Text>
                   <View style={{
-                backgroundColor: isPersistentStorageAvailable() ? `${AppColors.emerald500}18` : `${AppColors.amber500}18`,
+                backgroundColor: isPersistentStorageAvailable()
+                    ? `${AppColors.emerald500}18`
+                    : `${AppColors.amber500}18`,
                 paddingHorizontal: 6,
                 paddingVertical: 1.5,
                 borderRadius: 5,
                 borderWidth: 1,
-                borderColor: isPersistentStorageAvailable() ? `${AppColors.emerald500}50` : `${AppColors.amber500}50`,
+                borderColor: isPersistentStorageAvailable()
+                    ? `${AppColors.emerald500}50`
+                    : `${AppColors.amber500}50`,
             }}>
                     <Text style={{
                 fontFamily: AppFonts.interBold,
                 fontSize: 10.5,
-                color: isPersistentStorageAvailable() ? AppColors.emerald600 : AppColors.amber500,
+                color: isPersistentStorageAvailable()
+                    ? AppColors.emerald600
+                    : AppColors.amber500,
             }}>
-                      {isPersistentStorageAvailable() ? 'MMKV Fast Native Storage' : 'In-Memory State'}
+                      {isPersistentStorageAvailable()
+                ? 'MMKV Fast Native Storage'
+                : 'In-Memory State'}
                     </Text>
                   </View>
                 </View>
 
-                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
-                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                <View style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+            }}>
+                  <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 11.5,
+                color: AppColors.grayText,
+            }}>
                     Native Module Status
                   </Text>
                   <Text style={{
                 fontFamily: AppFonts.interBold,
                 fontSize: 11.5,
-                color: Boolean(global?.NativeInspectorModule) ? AppColors.emerald600 : AppColors.grayText,
+                color: Boolean(global?.NativeInspectorModule)
+                    ? AppColors.emerald600
+                    : AppColors.grayText,
             }}>
-                    {Boolean(global?.NativeInspectorModule) ? 'Linked & Active' : 'JavaScript Only'}
+                    {Boolean(global?.NativeInspectorModule)
+                ? 'Linked & Active'
+                : 'JavaScript Only'}
                   </Text>
                 </View>
 
-                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
-                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                <View style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+            }}>
+                  <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 11.5,
+                color: AppColors.grayText,
+            }}>
                     Network Logger Interceptor
                   </Text>
-                  <Text style={{ fontFamily: AppFonts.interBold, fontSize: 11.5, color: AppColors.emerald600 }}>
+                  <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 11.5,
+                color: AppColors.emerald600,
+            }}>
                     Active (XMLHttpRequest & Fetch Hooked)
                   </Text>
                 </View>
 
-                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
-                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                <View style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+            }}>
+                  <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 11.5,
+                color: AppColors.grayText,
+            }}>
                     Redux & Analytics Watchers
                   </Text>
-                  <Text style={{ fontFamily: AppFonts.interBold, fontSize: 11.5, color: AppColors.primaryBlack }}>
-                    Redux: {isReduxConnected() ? 'Connected' : 'Listening'} • Analytics: {isAnalyticsConnected() ? 'Connected' : 'Listening'}
+                  <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 11.5,
+                color: AppColors.primaryBlack,
+            }}>
+                    Redux: {isReduxConnected() ? 'Connected' : 'Listening'} •
+                    Analytics:{' '}
+                    {isAnalyticsConnected() ? 'Connected' : 'Listening'}
                   </Text>
                 </View>
 
-                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
-                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                <View style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+            }}>
+                  <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 11.5,
+                color: AppColors.grayText,
+            }}>
                     Crash & Exception Boundary
                   </Text>
-                  <Text style={{ fontFamily: AppFonts.interBold, fontSize: 11.5, color: AppColors.emerald600 }}>
+                  <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 11.5,
+                color: AppColors.emerald600,
+            }}>
                     Global JS Exception Handler Active
                   </Text>
                 </View>
 
-                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
-                  <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+                <View style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+            }}>
+                  <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 11.5,
+                color: AppColors.grayText,
+            }}>
                     Memory Management
                   </Text>
-                  <Text style={{ fontFamily: AppFonts.interBold, fontSize: 11.5, color: AppColors.emerald600 }}>
+                  <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 11.5,
+                color: AppColors.emerald600,
+            }}>
                     Dynamic Auto RAM Tiering Active
                   </Text>
                 </View>
@@ -2845,29 +3189,65 @@ const SettingsPanel = () => {
                 LICENSE & CREDITS
               </Text>
 
-              <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
-                <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+              <View style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+            }}>
+                <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 11.5,
+                color: AppColors.grayText,
+            }}>
                   License
                 </Text>
-                <Text style={{ fontFamily: AppFonts.interBold, fontSize: 11.5, color: AppColors.emerald600 }}>
+                <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 11.5,
+                color: AppColors.emerald600,
+            }}>
                   MIT Permissive Open Source
                 </Text>
               </View>
 
-              <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
-                <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+              <View style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+            }}>
+                <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 11.5,
+                color: AppColors.grayText,
+            }}>
                   Created & Maintained By
                 </Text>
-                <Text style={{ fontFamily: AppFonts.interBold, fontSize: 11.5, color: AppColors.primaryBlack }}>
+                <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 11.5,
+                color: AppColors.primaryBlack,
+            }}>
                   Vengateswaran
                 </Text>
               </View>
 
-              <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
-                <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11.5, color: AppColors.grayText }}>
+              <View style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+            }}>
+                <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 11.5,
+                color: AppColors.grayText,
+            }}>
                   Repository
                 </Text>
-                <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 11, color: AppColors.purple }}>
+                <Text style={{
+                fontFamily: AppFonts.interRegular,
+                fontSize: 11,
+                color: AppColors.purple,
+            }}>
                   github.com/vengatmacuser/react-native-inapp-inspector
                 </Text>
               </View>