react-native-inapp-inspector 2.2.9 → 2.3.1

package/dist/commonjs/index.js

@@ -38,7 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.registerComponentProfile = exports.getHermesMemoryStats = exports.measureAsync = exports.trackHeavyTask = exports.trackNavigationTransition = exports.trackComponentRender = exports.useNavigationProfiler = exports.useComponentProfiler = exports.usePerformanceTracker = exports.registerGAPlugin = exports.getEventCategory = exports.getLastActionForReducer = exports.clearActionHistory = exports.getActionHistory = exports.subscribeReduxState = exports.getReduxState = exports.inspectorReduxMiddleware = exports.connectReduxStore = exports.ErrorBoundary = exports.CrashTab = exports.computeCrashFingerprint = exports.recordUserActionBreadcrumb = exports.recordReduxBreadcrumb = exports.recordNetworkBreadcrumb = exports.recordNavigationBreadcrumb = exports.addCrashBreadcrumb = exports.recordCustomCrash = exports.parseCrashStackTrace = exports.exportCrashReport = exports.simulateTestCrash = exports.clearCrashRecords = exports.getCrashRecords = exports.emitCrashEvent = exports.subscribeCrashEvents = exports.setupGlobalCrashHandler = exports.getCollectionEnabled = exports.getDefaultEventParameters = exports.getCurrentUserId = exports.getCurrentUserProperties = exports.clearAnalyticsEvents = exports.subscribeAnalyticsEvents = exports.logAnalyticsEvent = exports.setupAnalyticsLogger = exports.subscribeConsoleLogs = exports.clearConsoleLogs = exports.setupConsoleLogger = exports.addAxiosInterceptors = exports.subscribeNetworkLogs = exports.clearNetworkLogs = exports.setupNetworkLogger = void 0;
 exports.connectMMKV = exports.connectAsyncStorage = exports.BrandCircleIcon = exports.BrandSquareIcon = exports.prunePerformanceEvents = exports.getMaxPerformanceEventsLimit = exports.setMaxPerformanceEventsLimit = exports.pruneCrashRecords = exports.getMaxCrashLogsLimit = exports.pruneAnalyticsLogs = exports.getMaxAnalyticsLogsLimit = exports.setMaxAnalyticsLogsLimit = exports.pruneReduxHistory = exports.getMaxReduxHistoryLimit = exports.setMaxReduxHistoryLimit = exports.pruneConsoleLogs = exports.getMaxConsoleLogsLimit = exports.setMaxConsoleLogsLimit = exports.pruneNetworkLogs = exports.getMaxNetworkLogsLimit = exports.setMaxNetworkLogsLimit = exports.subscribeMemoryWarning = exports.pruneAllLogs = exports.setupMemoryWarningHandler = exports.isNativeModuleAvailable = exports.setNativeStorageItem = exports.getNativeStorageItem = exports.getNativeFpsMetrics = exports.stopNativeFpsMonitoring = exports.startNativeFpsMonitoring = exports.subscribeNativeDeviceShake = exports.subscribeNativeFloatingButtonPress = exports.setNativeFloatingButtonBadge = exports.hideNativeFloatingButton = exports.showNativeFloatingButton = exports.subscribeNativeCrashes = exports.enableNativeCrashProtection = exports.getNativeDeviceMetrics = exports.InspectCatch = exports.InspectTrackTime = exports.InspectLog = exports.generateFixSnippet = exports.getInitialPerformanceEvents = exports.getInitialRenderProfiles = exports.getPerformanceEvents = exports.subscribePerformanceEvents = exports.clearPerformanceEvents = exports.logPerformanceEvent = exports.getRenderProfiles = exports.subscribeRenderProfiles = void 0;
-exports.BreadcrumbType = exports.CrashFilterType = exports.CrashDetailSubTab = exports.CrashExportFormat = exports.CrashType = exports.PerformanceSubTab = exports.BundleSubTab = exports.DiffResultType = exports.StackFrameType = exports.GAEventCategory = exports.AnalyticsEventSource = exports.ConsoleLogType = exports.LogFilter = exports.SettingsSubTab = exports.SettingsPage = exports.ModalAnimationType = exports.LocalFilter = exports.SortOrder = exports.StatusFilter = exports.Method = exports.ActiveTab = exports.subscribeToStorageChanges = exports.clearStorageDriver = exports.removeStorageEntry = exports.setStorageEntry = exports.fetchStorageEntries = exports.getRegisteredMMKVInstanceIds = exports.isMMKVConnected = exports.isAsyncStorageConnected = void 0;
+exports.I18nextProvider = exports.setTranslations = exports.addTranslations = exports.setLanguage = exports.useTranslation = exports.i18n = exports.t = exports.updateAppColorsTheme = exports.getThemeColors = exports.setAppColors = exports.AppColors = exports.setAppFonts = exports.AppFonts = exports.BreadcrumbType = exports.CrashFilterType = exports.CrashDetailSubTab = exports.CrashExportFormat = exports.CrashType = exports.PerformanceSubTab = exports.BundleSubTab = exports.DiffResultType = exports.StackFrameType = exports.GAEventCategory = exports.AnalyticsEventSource = exports.ConsoleLogType = exports.LogFilter = exports.SettingsSubTab = exports.SettingsPage = exports.ModalAnimationType = exports.LocalFilter = exports.SortOrder = exports.StatusFilter = exports.Method = exports.ActiveTab = exports.subscribeToStorageChanges = exports.clearStorageDriver = exports.removeStorageEntry = exports.setStorageEntry = exports.fetchStorageEntries = exports.getRegisteredMMKVInstanceIds = exports.isMMKVConnected = exports.isAsyncStorageConnected = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const native_1 = require("@react-navigation/native");
@@ -68,7 +68,7 @@ const NativeInspector_2 = require("./native/NativeInspector");
 const constants_1 = require("./constants");
 // Stylesheet
 const styles_1 = require("./styles");
-const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigationRef, appIcon, environment, initialVisible, visible: controlledVisible, }) => {
+const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, environment, initialVisible = false, visible: controlledVisible, }) => {
     // Set custom storage synchronously during render phase
     (0, settingsStore_1.setCustomStorage)(storage || null);
     const [isDark, setIsDark] = (0, react_1.useState)(false);
@@ -80,7 +80,7 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
     const [modalHeightPercent, setModalHeightPercent] = (0, react_1.useState)(90);
     const [modalAnimationType, setModalAnimationType] = (0, react_1.useState)('slide');
     const [logs, setLogs] = (0, react_1.useState)([]);
-    const [visible, setVisible] = (0, react_1.useState)(initialVisible ?? controlledVisible ?? false);
+    const [visible, setVisible] = (0, react_1.useState)(controlledVisible ?? initialVisible ?? false);
     (0, react_1.useEffect)(() => {
         if (controlledVisible !== undefined) {
             setVisible(controlledVisible);
@@ -224,8 +224,8 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
         bundle: false,
         performance: false,
         crash: false,
-        device: true,
-        storage: true,
+        device: false,
+        storage: false,
     });
     const [maxNetworkLogs, setMaxNetworkLogs] = (0, react_1.useState)(100);
     const [maxAnalyticsEventsLimit, setMaxAnalyticsEventsLimit] = (0, react_1.useState)(75);
@@ -280,8 +280,8 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
             bundle: false,
             performance: false,
             crash: false,
-            device: true,
-            storage: true,
+            device: false,
+            storage: false,
         });
         setDefaultTab('apis');
         setIsAutoRamLimitEnabled(true);
@@ -355,6 +355,8 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
                         bundle: false,
                         performance: false,
                         crash: false,
+                        device: false,
+                        storage: false,
                     },
                     ...(saved.tabVisibility || {}),
                     apis: true,
@@ -580,12 +582,21 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
     const navigationContext = react_1.default.useContext(native_1.NavigationContext);
     const hasNavigationContext = navigationContext !== undefined;
     const currentRouteRef = (0, react_1.useRef)({
-        path: 'Navigators',
+        path: '',
         params: null,
     });
+    (0, react_1.useEffect)(() => {
+        (0, networkLogger_1.setRouteInfoProvider)(() => currentRouteRef.current);
+        return () => {
+            (0, networkLogger_1.setRouteInfoProvider)(null);
+        };
+    }, []);
     (0, react_1.useEffect)(() => {
         if (navState) {
-            currentRouteRef.current = (0, helpers_1.getNavigationInfo)(navState);
+            const info = (0, helpers_1.getNavigationInfo)(navState);
+            if (info?.path) {
+                currentRouteRef.current = info;
+            }
         }
     }, [navState]);
     (0, react_1.useEffect)(() => {
@@ -594,9 +605,22 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
         const updateState = () => {
             try {
                 if (typeof navigationRef.isReady === 'function' && navigationRef.isReady()) {
+                    const currentRoute = typeof navigationRef.getCurrentRoute === 'function'
+                        ? navigationRef.getCurrentRoute()
+                        : null;
+                    if (currentRoute?.name) {
+                        currentRouteRef.current = {
+                            path: currentRoute.name,
+                            params: currentRoute.params || null,
+                        };
+                    }
                     const state = navigationRef.getRootState();
                     if (state) {
                         setNavState(state);
+                        const routeInfo = (0, helpers_1.getNavigationInfo)(state);
+                        if (routeInfo?.path) {
+                            currentRouteRef.current = routeInfo;
+                        }
                     }
                 }
             }
@@ -760,22 +784,26 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
     const useNativeFab = (react_native_1.Platform.OS === 'ios' || react_native_1.Platform.OS === 'android') && isNativeModule;
     // 100% Native Main-Thread Floating Button Lifecycle
     (0, react_1.useEffect)(() => {
-        if (!useNativeFab || !isEnabled || !enabled) {
+        if (!useNativeFab || !enabled) {
             if (useNativeFab) {
-                (0, NativeInspector_2.hideNativeFloatingButton)();
+                (0, NativeInspector_2.hideNativeFloatingButton)().catch(() => { });
             }
             return;
         }
         if (visible) {
-            (0, NativeInspector_2.hideNativeFloatingButton)();
+            (0, NativeInspector_2.hideNativeFloatingButton)().catch(() => { });
         }
         else {
-            (0, NativeInspector_2.showNativeFloatingButton)();
-            (0, NativeInspector_2.setNativeFloatingButtonBadge)(logs.length > 0 || analyticsEvents.length > 0);
+            (0, NativeInspector_2.showNativeFloatingButton)().catch(() => { });
+            (0, NativeInspector_2.setNativeFloatingButtonBadge)(logs.length > 0 || analyticsEvents.length > 0).catch(() => { });
         }
+        return () => {
+            if (useNativeFab) {
+                (0, NativeInspector_2.hideNativeFloatingButton)().catch(() => { });
+            }
+        };
     }, [
         useNativeFab,
-        isEnabled,
         enabled,
         visible,
         logs.length,
@@ -834,20 +862,11 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
             if (freshCrashes.length > 0) {
                 setCrashRecords(freshCrashes);
             }
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [visible]);
-    (0, react_1.useEffect)(() => {
-        if (visible) {
-            const task = react_native_1.InteractionManager.runAfterInteractions(() => {
+            const frame = requestAnimationFrame(() => {
                 setIsReady(true);
             });
-            const fallbackTimer = setTimeout(() => {
-                setIsReady(true);
-            }, 350);
             return () => {
-                task.cancel();
-                clearTimeout(fallbackTimer);
+                cancelAnimationFrame(frame);
             };
         }
         else {
@@ -908,7 +927,9 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
                 if (freshIds.size > 0) {
                     freshIds.forEach(id => {
                         if (!logRouteMapRef.current.has(id)) {
-                            logRouteMapRef.current.set(id, currentRouteRef.current);
+                            const matchedLog = deduped.find(l => l.id === id);
+                            const resolvedRoute = matchedLog?.routeInfo || currentRouteRef.current;
+                            logRouteMapRef.current.set(id, resolvedRoute);
                         }
                     });
                     setNewLogIds(freshIds);
@@ -921,6 +942,12 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
                 const deduped = (0, helpers_1.deduplicateLogs)(raw);
                 const incoming = new Set(deduped.map(l => l.id));
                 prevLogIdsRef.current = incoming;
+                deduped.forEach(l => {
+                    if (!logRouteMapRef.current.has(l.id)) {
+                        const resolvedRoute = l?.routeInfo || currentRouteRef.current;
+                        logRouteMapRef.current.set(l.id, resolvedRoute);
+                    }
+                });
                 setLogs(deduped);
             }
             else {
@@ -1192,8 +1219,8 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
         const groups = [];
         for (let i = 0; i < filteredLogs.length; i++) {
             const log = filteredLogs[i];
-            const routeInfo = logRouteMapRef.current.get(log.id);
-            const pageName = routeInfo?.path || 'Navigators';
+            const routeInfo = logRouteMapRef.current.get(log.id) || log?.routeInfo;
+            const pageName = (0, helpers_1.getLogPageName)(log, routeInfo);
             if (groups.length === 0 ||
                 groups[groups.length - 1].pageName !== pageName) {
                 groups.push({ pageName, color: (0, helpers_1.getDomainColor)(pageName), logs: [] });
@@ -1446,7 +1473,28 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
                     log.type || '',
                     log.sourceMethod || '',
                 ].join(' ').toLowerCase();
-                return queryTokens.every(token => searchTarget.includes(token));
+                return queryTokens.every(token => {
+                    if (token.startsWith('level:') || token.startsWith('is:') || token.startsWith('type:')) {
+                        const flag = token.replace(/^(level:|is:|type:)/, '').trim();
+                        if (flag === 'error' || flag === 'err')
+                            return log.type === 'error';
+                        if (flag === 'warn' || flag === 'warning')
+                            return log.type === 'warn';
+                        if (flag === 'info')
+                            return log.type === 'info';
+                        if (flag === 'log')
+                            return log.sourceMethod === 'log';
+                        if (flag === 'analytics')
+                            return (log.message || '').toLowerCase().includes('[analytics');
+                    }
+                    if (token === 'error' || token === 'err') {
+                        return log.type === 'error' || searchTarget.includes(token);
+                    }
+                    if (token === 'warn' || token === 'warning') {
+                        return log.type === 'warn' || searchTarget.includes(token);
+                    }
+                    return searchTarget.includes(token);
+                });
             });
         }
         // #7 — apply sort order (newest/oldest first)
@@ -1654,7 +1702,8 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
         setVisible,
         closeModal,
         isReady,
-        isEnabled,
+        enabled,
+        isEnabled: enabled,
         appIcon,
         environment,
         modalHeightPercent,
@@ -1831,14 +1880,22 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
     </InspectorContext_1.InspectorContext.Provider>);
 };
 const NetworkInspectorWrapper = (props) => {
-    // If running in production release build and not explicitly force-enabled (e.g. for QA builds),
-    // return null immediately for 0-overhead production stubbing.
-    if (typeof __DEV__ !== 'undefined' && !__DEV__ && !props?.forceEnable) {
+    const enabled = props?.enabled ?? true;
+    (0, react_1.useEffect)(() => {
+        if (!enabled) {
+            (0, NativeInspector_2.hideNativeFloatingButton)().catch(() => { });
+        }
+        return () => {
+            (0, NativeInspector_2.hideNativeFloatingButton)().catch(() => { });
+        };
+    }, [enabled]);
+    // If enabled is false, return null immediately with 0 overhead
+    if (!enabled) {
         return null;
     }
     return (<i18n_1.I18nextProvider i18n={i18n_1.i18n}>
       <ErrorBoundary_1.default fallbackType="inline">
-        <NetworkInspector {...props}/>
+        <NetworkInspector {...props} enabled={enabled}/>
       </ErrorBoundary_1.default>
     </i18n_1.I18nextProvider>);
 };
@@ -1994,3 +2051,19 @@ Object.defineProperty(exports, "CrashExportFormat", { enumerable: true, get: fun
 Object.defineProperty(exports, "CrashDetailSubTab", { enumerable: true, get: function () { return types_1.CrashDetailSubTab; } });
 Object.defineProperty(exports, "CrashFilterType", { enumerable: true, get: function () { return types_1.CrashFilterType; } });
 Object.defineProperty(exports, "BreadcrumbType", { enumerable: true, get: function () { return types_1.BreadcrumbType; } });
+var AppFonts_1 = require("./styles/AppFonts");
+Object.defineProperty(exports, "AppFonts", { enumerable: true, get: function () { return AppFonts_1.AppFonts; } });
+Object.defineProperty(exports, "setAppFonts", { enumerable: true, get: function () { return AppFonts_1.setAppFonts; } });
+var AppColors_1 = require("./styles/AppColors");
+Object.defineProperty(exports, "AppColors", { enumerable: true, get: function () { return AppColors_1.AppColors; } });
+Object.defineProperty(exports, "setAppColors", { enumerable: true, get: function () { return AppColors_1.setAppColors; } });
+Object.defineProperty(exports, "getThemeColors", { enumerable: true, get: function () { return AppColors_1.getThemeColors; } });
+Object.defineProperty(exports, "updateAppColorsTheme", { enumerable: true, get: function () { return AppColors_1.updateAppColorsTheme; } });
+var i18n_2 = require("./i18n");
+Object.defineProperty(exports, "t", { enumerable: true, get: function () { return i18n_2.t; } });
+Object.defineProperty(exports, "i18n", { enumerable: true, get: function () { return i18n_2.i18n; } });
+Object.defineProperty(exports, "useTranslation", { enumerable: true, get: function () { return i18n_2.useTranslation; } });
+Object.defineProperty(exports, "setLanguage", { enumerable: true, get: function () { return i18n_2.setLanguage; } });
+Object.defineProperty(exports, "addTranslations", { enumerable: true, get: function () { return i18n_2.addTranslations; } });
+Object.defineProperty(exports, "setTranslations", { enumerable: true, get: function () { return i18n_2.setTranslations; } });
+Object.defineProperty(exports, "I18nextProvider", { enumerable: true, get: function () { return i18n_2.I18nextProvider; } });

package/dist/commonjs/styles/AppColors.d.ts

@@ -344,4 +344,8 @@ export declare const getThemeColors: (isDark: boolean) => {
 };
 export declare const AppColors: typeof LightColors;
 export declare const updateAppColorsTheme: (isDark: boolean) => void;
+/**
+ * Configure or override specific color tokens used throughout the inspector.
+ */
+export declare const setAppColors: (customColors: Partial<typeof LightColors>) => void;
 export default AppColors;

package/dist/commonjs/styles/AppColors.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.updateAppColorsTheme = exports.AppColors = exports.getThemeColors = void 0;
+exports.setAppColors = exports.updateAppColorsTheme = exports.AppColors = exports.getThemeColors = void 0;
 const LightColors = {
     // ─── Core (Thai Airways Royal Palette) ───
     primaryLight: '#FFFFFF',
@@ -389,4 +389,14 @@ const updateAppColorsTheme = (isDark) => {
     Object.assign(exports.AppColors, (0, exports.getThemeColors)(isDark));
 };
 exports.updateAppColorsTheme = updateAppColorsTheme;
+/**
+ * Configure or override specific color tokens used throughout the inspector.
+ */
+const setAppColors = (customColors) => {
+    if (!customColors || typeof customColors !== 'object')
+        return;
+    Object.assign(exports.AppColors, customColors);
+    Object.assign(LightColors, customColors);
+};
+exports.setAppColors = setAppColors;
 exports.default = exports.AppColors;

package/dist/commonjs/styles/AppFonts.d.ts

@@ -1,7 +1,18 @@
+export interface AppFontConfig {
+    interRegular?: string;
+    interMedium?: string;
+    interBold?: string;
+    Sfprotext?: string;
+}
 export declare const AppFonts: {
     interRegular: string;
     interMedium: string;
     interBold: string;
     Sfprotext: string;
 };
+/**
+ * Configure or override font families used across all inspector screens.
+ * Useful when integrating into apps with custom font setups or system fonts.
+ */
+export declare const setAppFonts: (customFonts: Partial<typeof AppFonts>) => void;
 export default AppFonts;

package/dist/commonjs/styles/AppFonts.js

@@ -1,10 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AppFonts = void 0;
+exports.setAppFonts = exports.AppFonts = void 0;
 exports.AppFonts = {
     interRegular: 'Inter-Regular',
     interMedium: 'Inter-Medium',
     interBold: 'Inter-Bold',
     Sfprotext: 'Inter-Regular',
 };
+/**
+ * Configure or override font families used across all inspector screens.
+ * Useful when integrating into apps with custom font setups or system fonts.
+ */
+const setAppFonts = (customFonts) => {
+    if (!customFonts || typeof customFonts !== 'object')
+        return;
+    Object.assign(exports.AppFonts, customFonts);
+};
+exports.setAppFonts = setAppFonts;
 exports.default = exports.AppFonts;

package/dist/commonjs/types/interfaces.d.ts

@@ -106,6 +106,7 @@ export interface NetworkLog {
     /** Client identifier: axios, fetch, xhr, apollo, etc. */
     client?: 'axios' | 'fetch' | 'xhr' | 'apollo' | 'graphql' | string;
     caller?: string;
+    routeInfo?: RouteInfo;
 }
 export interface RouteInfo {
     path: string;
@@ -156,8 +157,6 @@ export interface PersistedSettings {
 }
 export interface NetworkInspectorProps {
     enabled?: boolean;
-    isEnabled?: boolean;
-    forceEnable?: boolean;
     storage?: InspectorStorage;
     navigationRef?: any;
     appIcon?: any;
@@ -173,6 +172,7 @@ export interface InspectorContextValue {
     setVisible: React.Dispatch<React.SetStateAction<boolean>>;
     closeModal: () => void;
     isReady: boolean;
+    enabled: boolean;
     isEnabled: boolean;
     appIcon?: any;
     environment?: string;

package/dist/esm/components/AppHeaderLogo.js

@@ -12,15 +12,23 @@ export const AppHeaderLogo = ({ size = 46, customIcon, }) => {
                 height: size,
             });
             return (<View style={[
-                    logoStyles.container,
-                    { width: size, height: size, padding: 0, borderRadius: Math.round(size * 0.28) },
+                    logoStyles.svgContainer,
+                    {
+                        width: size,
+                        height: size,
+                        borderRadius: Math.round(size * 0.23),
+                    },
                 ]}>
           {clonedIcon}
         </View>);
         }
         return (<View style={[
-                logoStyles.container,
-                { width: size, height: size, borderRadius: Math.round(size * 0.28) },
+                logoStyles.imageContainer,
+                {
+                    width: size,
+                    height: size,
+                    borderRadius: Math.round(size * 0.23),
+                },
             ]}>
         <Image source={customIcon} style={logoStyles.image} resizeMode="cover"/>
       </View>);
@@ -32,33 +40,58 @@ export const AppHeaderLogo = ({ size = 46, customIcon, }) => {
             android: { uri: 'ic_launcher' },
             default: { uri: 'AppIcon' },
         });
-        return (<View style={[logoStyles.container, { width: size, height: size }]}>
+        return (<View style={[
+                logoStyles.imageContainer,
+                {
+                    width: size,
+                    height: size,
+                    borderRadius: Math.round(size * 0.23),
+                },
+            ]}>
         <Image source={nativeSource} style={logoStyles.image} resizeMode="cover" onError={() => setLoadError(true)}/>
       </View>);
     }
     // 3. Fallback: Inspector's Signature Owl Brand Logo
     return (<View style={[
-            logoStyles.container,
-            { width: size, height: size, padding: 0, borderRadius: Math.round(size * 0.28) },
+            logoStyles.svgContainer,
+            {
+                width: size,
+                height: size,
+                borderRadius: Math.round(size * 0.23),
+            },
         ]}>
       <BrandSquareIcon size={size}/>
     </View>);
 };
 const logoStyles = StyleSheet.create({
-    container: {
-        borderRadius: 10,
+    svgContainer: {
+        overflow: 'hidden',
+        alignItems: 'center',
+        justifyContent: 'center',
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.25,
+        shadowRadius: 3,
+        elevation: 3,
+    },
+    imageContainer: {
         overflow: 'hidden',
         backgroundColor: 'rgba(255, 255, 255, 0.15)',
         borderWidth: 1,
-        borderColor: 'rgba(255, 255, 255, 0.28)',
-        padding: 2.5,
+        borderColor: 'rgba(255, 255, 255, 0.35)',
+        padding: 2,
         alignItems: 'center',
         justifyContent: 'center',
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.25,
+        shadowRadius: 3,
+        elevation: 3,
     },
     image: {
         width: '100%',
         height: '100%',
-        borderRadius: 7.5,
+        borderRadius: 8,
     },
 });
 export default AppHeaderLogo;