react-native-inapp-inspector 2.3.15 → 2.3.17

package/dist/esm/index.d.ts

@@ -26,4 +26,6 @@ export { ActiveTab, Method, StatusFilter, SortOrder, LocalFilter, ModalAnimation
 export { AppFonts, setAppFonts, type AppFontConfig, } from './styles/AppFonts';
 export { AppColors, setAppColors, getThemeColors, updateAppColorsTheme, } from './styles/AppColors';
 export { t, i18n, useTranslation, setLanguage, addTranslations, setTranslations, I18nextProvider, } from './i18n';
+export { fetchRemoteConfigModuleStatus, isFirebaseRemoteConfigAvailable, } from './helpers/remoteConfig';
+export { ScreenCapture, ScreenRecorder, type ScreenshotOptions, type ScreenshotResult, type RecordingOptions, type RecordingResult, type GifConversionOptions, type CapturedMediaItem, type ImageFormat, type AudioSource, type RecordingFormat, } from './capture';
 export { LIB_VERSION } from './constants/version';

package/dist/esm/index.js

@@ -12,15 +12,16 @@ import { setupNetworkLogger, clearNetworkLogs, subscribeNetworkLogs, setNetworkM
 import { setupConsoleLogger, clearConsoleLogs, subscribeConsoleLogs, setConsoleModuleEnabled, } from './customHooks/consoleLogger';
 import { IGNORED_LOG_PREFIXES } from './customHooks/logFilters';
 import { setupGlobalCrashHandler, subscribeCrashEvents, getCrashRecords, clearCrashRecords, setMaxCrashLogsLimit, setCrashModuleEnabled, } from './customHooks/crashHandler';
-import { trackActiveTelemetryHeartbeat, setTelemetryEnabled, } from './helpers/telemetry';
+import { trackActiveTelemetryHeartbeat, setTelemetryEnabled, trackInspectorTabView, trackInspectorScreenView, } from './helpers/telemetry';
 import { subscribeAnalyticsEvents, clearAnalyticsEvents, autoSetupAnalyticsLogger, isAnalyticsConnected, setAnalyticsModuleEnabled, } from './customHooks/analyticsLogger';
 import { getReduxState, subscribeReduxState, setReduxAutoRefresh, getLastActionForReducer, clearActionHistory, isReduxConnected, setReduxModuleEnabled, } from './customHooks/reduxLogger';
 import { setPerformanceModuleEnabled } from './customHooks/performanceTracker';
 import { setBundleModuleEnabled } from './customHooks/bundleAnalyzer';
 import { showNativeFloatingButton, hideNativeFloatingButton, setNativeFloatingButtonBadge, subscribeNativeFloatingButtonPress, subscribeNativeDeviceShake, isNativeModuleAvailable, } from './native/NativeInspector';
+import { fetchRemoteConfigModuleStatus, } from './helpers/remoteConfig';
 import { LIB_VERSION } from './constants';
 import { toggleGlobalTheme } from './styles';
-const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, environment, initialVisible = false, visible: controlledVisible, }) => {
+const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, environment, initialVisible = false, visible: controlledVisible, remoteConfig, }) => {
     setCustomStorage(storage || null);
     const [isDark, setIsDark] = useState(false);
     const [reduxState, setReduxState] = useState(null);
@@ -157,6 +158,7 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
     const [logSearch, setLogSearch] = useState('');
     const [logFilters, setLogFilters] = useState(new Set(['all']));
     const [settingsPage, setSettingsPage] = useState(null);
+    const [isFeedbackOpen, setIsFeedbackOpen] = useState(false);
     const [settingsActiveSubTab, setSettingsActiveSubTab] = useState('module');
     const [tabVisibility, setTabVisibility] = useState({
         apis: true,
@@ -309,6 +311,25 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
             cancelled = true;
         };
     }, []);
+    useEffect(() => {
+        let isMounted = true;
+        if (remoteConfig === false)
+            return;
+        fetchRemoteConfigModuleStatus(typeof remoteConfig === 'object' ? remoteConfig : undefined)
+            .then(remoteModules => {
+            if (isMounted && remoteModules) {
+                setTabVisibility(prev => ({
+                    ...prev,
+                    ...remoteModules,
+                    apis: remoteModules.apis ?? true,
+                }));
+            }
+        })
+            .catch(() => { });
+        return () => {
+            isMounted = false;
+        };
+    }, [remoteConfig]);
     useEffect(() => {
         if (!settingsHydratedRef.current)
             return;
@@ -448,6 +469,7 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
             setActiveTab(key);
             loadNativePage(key);
         }
+        trackInspectorTabView(key);
     }, [loadNativePage]);
     const [selectedEvent, setSelectedEvent] = useState(null);
     const [analyticsSearch, setAnalyticsSearch] = useState('');
@@ -626,12 +648,12 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
             Animated.timing(clearAnim, {
                 toValue: 1,
                 duration: 320,
-                useNativeDriver: true,
+                useNativeDriver: false,
             }),
             Animated.timing(clearAnim, {
                 toValue: 0,
                 duration: 0,
-                useNativeDriver: true,
+                useNativeDriver: false,
             }),
         ]).start();
         handleClearAll();
@@ -642,49 +664,53 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
         }
     }, []);
     useEffect(() => {
+        if (visible)
+            return;
         const loop = Animated.loop(Animated.sequence([
             Animated.timing(pulseAnim, {
                 toValue: 1.2,
                 duration: 800,
-                useNativeDriver: true,
+                useNativeDriver: false,
             }),
             Animated.timing(pulseAnim, {
                 toValue: 1,
                 duration: 800,
-                useNativeDriver: true,
+                useNativeDriver: false,
             }),
         ]));
         loop.start();
         return () => loop.stop();
-    }, [pulseAnim]);
+    }, [pulseAnim, visible]);
     useEffect(() => {
+        if (visible)
+            return;
         const loop = Animated.loop(Animated.sequence([
             Animated.timing(fabShineAnim, {
                 toValue: 1,
                 duration: 1100,
-                useNativeDriver: true,
+                useNativeDriver: false,
             }),
             Animated.delay(1600),
             Animated.timing(fabShineAnim, {
                 toValue: 0,
                 duration: 0,
-                useNativeDriver: true,
+                useNativeDriver: false,
             }),
         ]));
         loop.start();
         return () => loop.stop();
-    }, [fabShineAnim]);
+    }, [fabShineAnim, visible]);
     useEffect(() => {
         const loop = Animated.loop(Animated.sequence([
             Animated.timing(activePulseAnim, {
                 toValue: 1,
                 duration: 1200,
-                useNativeDriver: true,
+                useNativeDriver: false,
             }),
             Animated.timing(activePulseAnim, {
                 toValue: 0.4,
                 duration: 1200,
-                useNativeDriver: true,
+                useNativeDriver: false,
             }),
         ]));
         loop.start();
@@ -695,12 +721,12 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
             Animated.timing(unreadPulseAnim, {
                 toValue: 1.3,
                 duration: 800,
-                useNativeDriver: true,
+                useNativeDriver: false,
             }),
             Animated.timing(unreadPulseAnim, {
                 toValue: 0.8,
                 duration: 800,
-                useNativeDriver: true,
+                useNativeDriver: false,
             }),
         ]));
         loop.start();
@@ -738,6 +764,7 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
         if (!useNativeFab)
             return;
         const unsubscribe = subscribeNativeFloatingButtonPress(() => {
+            hideNativeFloatingButton().catch(() => { });
             setVisible(true);
         });
         return () => {
@@ -748,7 +775,13 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
         if (!useNativeFab)
             return;
         const unsubscribe = subscribeNativeDeviceShake(() => {
-            setVisible(prev => !prev);
+            setVisible(prev => {
+                const next = !prev;
+                if (next) {
+                    hideNativeFloatingButton().catch(() => { });
+                }
+                return next;
+            });
         });
         return () => {
             unsubscribe();
@@ -758,10 +791,12 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
     useEffect(() => {
         isVisibleRefObj.current = visible;
         if (visible) {
+            trackInspectorScreenView('InspectorModal');
             const target = defaultTab === 'apis' || tabVisibility?.[defaultTab]
                 ? defaultTab
                 : 'apis';
             setActiveTab(target);
+            trackInspectorTabView(target);
             if (latestNetworkLogsRef.current.length > 0) {
                 const deduped = deduplicateLogs(latestNetworkLogsRef.current);
                 const incoming = new Set(deduped.map(l => l.id));
@@ -1128,18 +1163,20 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
     }, []);
     const groupedData = useMemo(() => {
         const result = [];
-        const groups = [];
+        const groupMap = new Map();
         for (let i = 0; i < filteredLogs.length; i++) {
             const log = filteredLogs[i];
             const routeInfo = logRouteMapRef.current.get(log.id) || log?.routeInfo;
             const pageName = getLogPageName(log, routeInfo);
-            if (groups.length === 0 ||
-                groups[groups.length - 1].pageName !== pageName) {
-                groups.push({ pageName, color: getDomainColor(pageName), logs: [] });
+            let group = groupMap.get(pageName);
+            if (!group) {
+                group = { pageName, color: getDomainColor(pageName), logs: [] };
+                groupMap.set(pageName, group);
             }
-            groups[groups.length - 1].logs.push(log);
+            group.logs.push(log);
         }
-        groups.forEach((g, idx) => {
+        let idx = 0;
+        groupMap.forEach(g => {
             let success = 0;
             let failed = 0;
             let loading = 0;
@@ -1156,7 +1193,7 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
             const timestamp = g.logs[0]?.startTime || 0;
             result.push({
                 type: 'header',
-                id: `hdr-${g.logs[0]?.id || 'empty'}-${g.pageName}`,
+                id: `hdr-${g.pageName}`,
                 pageName: g.pageName,
                 color: g.color,
                 stats: { success, failed, loading },
@@ -1165,6 +1202,7 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
                 isCollapsed,
                 isFirst: idx === 0,
             });
+            idx++;
             if (!isCollapsed) {
                 const displayLogs = g.logs.filter(l => {
                     if (l.status == null)
@@ -1176,7 +1214,7 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
                 displayLogs.forEach((log, index) => {
                     result.push({
                         type: 'log',
-                        id: log.id,
+                        id: `log-${log.id}`,
                         log,
                         isLast: index === displayLogs.length - 1,
                         color: g.color,
@@ -1622,6 +1660,8 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
         setShowHeaderInfo,
         settingsPage,
         setSettingsPage,
+        isFeedbackOpen,
+        setIsFeedbackOpen,
         updateAvailable,
         latestNpmVersion,
         clearAnim,
@@ -1780,6 +1820,7 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
         selectedLog,
         showHeaderInfo,
         settingsPage,
+        isFeedbackOpen,
         updateAvailable,
         latestNpmVersion,
         clearAnim,
@@ -1921,4 +1962,6 @@ export { ActiveTab, Method, StatusFilter, SortOrder, LocalFilter, ModalAnimation
 export { AppFonts, setAppFonts, } from './styles/AppFonts';
 export { AppColors, setAppColors, getThemeColors, updateAppColorsTheme, } from './styles/AppColors';
 export { t, i18n, useTranslation, setLanguage, addTranslations, setTranslations, I18nextProvider, } from './i18n';
+export { fetchRemoteConfigModuleStatus, isFirebaseRemoteConfigAvailable, } from './helpers/remoteConfig';
+export { ScreenCapture, ScreenRecorder, } from './capture';
 export { LIB_VERSION } from './constants/version';

package/dist/esm/native/NativeInspector.d.ts

@@ -74,3 +74,63 @@ export interface NativeCachedPageResult<T = any> {
     items: T[];
 }
 export declare const fetchNativeCachedPage: <T = any>(pageKey: "apis" | "logs" | "analytics" | "crash", offset?: number, limit?: number, query?: string) => Promise<NativeCachedPageResult<T> | null>;
+export interface ScreenshotOptions {
+    format?: 'png' | 'jpeg' | 'webp';
+    quality?: number;
+    scale?: number;
+    hideInspector?: boolean;
+    includeBase64?: boolean;
+}
+export interface ScreenshotResult {
+    uri: string;
+    format: 'png' | 'jpeg' | 'webp';
+    width: number;
+    height: number;
+    sizeBytes: number;
+    timestamp: number;
+    base64?: string;
+}
+export interface RecordingOptions {
+    format?: 'mp4' | 'gif';
+    audioSource?: 'none' | 'app' | 'mic' | 'mixed';
+    fps?: number;
+    bitrate?: number;
+    maxDurationSeconds?: number;
+    hideInspector?: boolean;
+}
+export interface RecordingResult {
+    uri: string;
+    format: 'mp4' | 'gif';
+    durationMs: number;
+    hasAudio: boolean;
+    width: number;
+    height: number;
+    sizeBytes: number;
+    timestamp: number;
+}
+export interface GifConversionOptions {
+    fps?: number;
+    width?: number;
+    maxDurationSeconds?: number;
+}
+export interface CapturedMediaItem {
+    id: string;
+    type: 'image' | 'video' | 'gif';
+    format: string;
+    uri: string;
+    filename: string;
+    sizeBytes: number;
+    timestamp: number;
+    durationMs?: number;
+    hasAudio?: boolean;
+    width?: number;
+    height?: number;
+}
+export declare const takeNativeScreenshot: (options?: ScreenshotOptions) => Promise<ScreenshotResult | null>;
+export declare const startNativeVideoRecording: (options?: RecordingOptions) => Promise<boolean>;
+export declare const stopNativeVideoRecording: () => Promise<RecordingResult | null>;
+export declare const isNativeRecordingActive: () => Promise<boolean>;
+export declare const convertNativeVideoToGif: (videoUri: string, options?: GifConversionOptions) => Promise<RecordingResult | null>;
+export declare const fetchCapturedMediaList: () => Promise<CapturedMediaItem[]>;
+export declare const deleteCapturedMediaFile: (uri: string) => Promise<boolean>;
+export declare const clearAllCapturedMediaFiles: () => Promise<boolean>;

package/dist/esm/native/NativeInspector.js

@@ -32,7 +32,7 @@ export const enableNativeCrashProtection = async (options) => {
     }
     try {
         const result = await NativeModule.enableNativeCrashProtection();
-        if (options?.showFloatingButton !== false) {
+        if (options?.showFloatingButton === true) {
             await showNativeFloatingButton();
         }
         return !!result;
@@ -269,3 +269,102 @@ export const fetchNativeCachedPage = async (pageKey, offset = 0, limit = 50, que
         return null;
     }
 };
+export const takeNativeScreenshot = async (options) => {
+    if (!NativeModule || !NativeModule.takeScreenshot) {
+        return null;
+    }
+    try {
+        const result = await NativeModule.takeScreenshot(options || {});
+        return result;
+    }
+    catch {
+        return null;
+    }
+};
+export const startNativeVideoRecording = async (options) => {
+    if (!NativeModule || !NativeModule.startVideoRecording) {
+        return false;
+    }
+    try {
+        const result = await NativeModule.startVideoRecording(options || {});
+        return !!result;
+    }
+    catch {
+        return false;
+    }
+};
+export const stopNativeVideoRecording = async () => {
+    if (!NativeModule || !NativeModule.stopVideoRecording) {
+        return null;
+    }
+    try {
+        const result = await NativeModule.stopVideoRecording();
+        return result;
+    }
+    catch {
+        return null;
+    }
+};
+export const isNativeRecordingActive = async () => {
+    if (!NativeModule || !NativeModule.isRecording) {
+        return false;
+    }
+    try {
+        const result = await NativeModule.isRecording();
+        return !!result;
+    }
+    catch {
+        return false;
+    }
+};
+export const convertNativeVideoToGif = async (videoUri, options) => {
+    if (!NativeModule || !NativeModule.convertToGif) {
+        return null;
+    }
+    try {
+        const result = await NativeModule.convertToGif(videoUri, options || {});
+        return result;
+    }
+    catch {
+        return null;
+    }
+};
+export const fetchCapturedMediaList = async () => {
+    if (!NativeModule || !NativeModule.getCapturedMedia) {
+        return [];
+    }
+    try {
+        const jsonStr = await NativeModule.getCapturedMedia();
+        if (!jsonStr)
+            return [];
+        const parsed = JSON.parse(jsonStr);
+        return Array.isArray(parsed) ? parsed : [];
+    }
+    catch {
+        return [];
+    }
+};
+export const deleteCapturedMediaFile = async (uri) => {
+    if (!NativeModule || !NativeModule.deleteCapturedMedia) {
+        return false;
+    }
+    try {
+        const result = await NativeModule.deleteCapturedMedia(uri);
+        return !!result;
+    }
+    catch {
+        return false;
+    }
+};
+export const clearAllCapturedMediaFiles = async () => {
+    if (!NativeModule || !NativeModule.clearAllCapturedMedia) {
+        return false;
+    }
+    try {
+        const result = await NativeModule.clearAllCapturedMedia();
+        return !!result;
+    }
+    catch {
+        return false;
+    }
+};

package/dist/esm/native/NativeNetworkInspector.d.ts

@@ -15,6 +15,14 @@ export interface Spec extends TurboModule {
     getNativeSystemMetrics(): Promise<Object>;
     pushNativeLogRecord(pageKey: string, jsonPayload: string): Promise<boolean>;
     checkFloatingButtonPress(): Promise<boolean>;
+    takeScreenshot(options: Object): Promise<Object>;
+    startVideoRecording(options: Object): Promise<boolean>;
+    stopVideoRecording(): Promise<Object>;
+    isRecording(): Promise<boolean>;
+    convertToGif(videoUri: string, options: Object): Promise<Object>;
+    getCapturedMedia(): Promise<string>;
+    deleteCapturedMedia(uri: string): Promise<boolean>;
+    clearAllCapturedMedia(): Promise<boolean>;
     addListener(eventName: string): void;
     removeListeners(count: number): void;
 }

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

@@ -168,6 +168,24 @@ declare const LightColors: {
     skySoftBg: string;
     skySoftBorder: string;
     skySoftText: string;
+    warningAmber: string;
+    npmRedLight: string;
+    red300: string;
+    overlayDark: string;
+    headerGlassDark: string;
+    badgeGlassDark: string;
+    borderGlassLight: string;
+    borderGlassMedium: string;
+    whiteAlpha06: string;
+    whiteAlpha08: string;
+    whiteAlpha10: string;
+    whiteAlpha12: string;
+    whiteAlpha15: string;
+    whiteAlpha20: string;
+    whiteAlpha24: string;
+    whiteAlpha30: string;
+    whiteAlpha33: string;
+    whiteAlpha60: string;
     domainColors: string[];
 };
 export declare const getThemeColors: (isDark: boolean) => {
@@ -340,6 +358,24 @@ export declare const getThemeColors: (isDark: boolean) => {
     skySoftBg: string;
     skySoftBorder: string;
     skySoftText: string;
+    warningAmber: string;
+    npmRedLight: string;
+    red300: string;
+    overlayDark: string;
+    headerGlassDark: string;
+    badgeGlassDark: string;
+    borderGlassLight: string;
+    borderGlassMedium: string;
+    whiteAlpha06: string;
+    whiteAlpha08: string;
+    whiteAlpha10: string;
+    whiteAlpha12: string;
+    whiteAlpha15: string;
+    whiteAlpha20: string;
+    whiteAlpha24: string;
+    whiteAlpha30: string;
+    whiteAlpha33: string;
+    whiteAlpha60: string;
     domainColors: string[];
 };
 export declare const AppColors: typeof LightColors;

package/dist/esm/styles/AppColors.js

@@ -168,6 +168,24 @@ const LightColors = {
     skySoftBg: '#E0F2FE',
     skySoftBorder: '#BAE6FD',
     skySoftText: '#0284C7',
+    warningAmber: '#F59E0B',
+    npmRedLight: '#FF6B6B',
+    red300: '#FCA5A5',
+    overlayDark: 'rgba(8, 12, 22, 0.95)',
+    headerGlassDark: 'rgba(15, 23, 42, 0.9)',
+    badgeGlassDark: 'rgba(15, 23, 42, 0.85)',
+    borderGlassLight: 'rgba(255, 255, 255, 0.08)',
+    borderGlassMedium: 'rgba(255, 255, 255, 0.15)',
+    whiteAlpha06: 'rgba(255, 255, 255, 0.06)',
+    whiteAlpha08: 'rgba(255, 255, 255, 0.08)',
+    whiteAlpha10: 'rgba(255, 255, 255, 0.1)',
+    whiteAlpha12: 'rgba(255, 255, 255, 0.12)',
+    whiteAlpha15: 'rgba(255, 255, 255, 0.15)',
+    whiteAlpha20: 'rgba(255, 255, 255, 0.2)',
+    whiteAlpha24: 'rgba(255, 255, 255, 0.24)',
+    whiteAlpha30: 'rgba(255, 255, 255, 0.3)',
+    whiteAlpha33: 'rgba(255, 255, 255, 0.33)',
+    whiteAlpha60: 'rgba(255, 255, 255, 0.6)',
     domainColors: [
         '#5C2D91',
         '#9B2677',
@@ -257,6 +275,24 @@ const DarkColors = {
     skySoftBg: '#082F4966',
     skySoftBorder: '#0284C788',
     skySoftText: '#38BDF8',
+    warningAmber: '#F59E0B',
+    npmRedLight: '#FF6B6B',
+    red300: '#FCA5A5',
+    overlayDark: 'rgba(8, 12, 22, 0.95)',
+    headerGlassDark: 'rgba(15, 23, 42, 0.9)',
+    badgeGlassDark: 'rgba(15, 23, 42, 0.85)',
+    borderGlassLight: 'rgba(255, 255, 255, 0.08)',
+    borderGlassMedium: 'rgba(255, 255, 255, 0.15)',
+    whiteAlpha06: 'rgba(255, 255, 255, 0.06)',
+    whiteAlpha08: 'rgba(255, 255, 255, 0.08)',
+    whiteAlpha10: 'rgba(255, 255, 255, 0.1)',
+    whiteAlpha12: 'rgba(255, 255, 255, 0.12)',
+    whiteAlpha15: 'rgba(255, 255, 255, 0.15)',
+    whiteAlpha20: 'rgba(255, 255, 255, 0.2)',
+    whiteAlpha24: 'rgba(255, 255, 255, 0.24)',
+    whiteAlpha30: 'rgba(255, 255, 255, 0.3)',
+    whiteAlpha33: 'rgba(255, 255, 255, 0.33)',
+    whiteAlpha60: 'rgba(255, 255, 255, 0.6)',
     green600: '#16A34A',
     green700: '#15803D',
     green800: '#166534',

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

@@ -1,12 +1,14 @@
 export interface AppFontConfig {
     interRegular?: string;
     interMedium?: string;
+    interSemiBold?: string;
     interBold?: string;
     Sfprotext?: string;
 }
 export declare const AppFonts: {
     interRegular: string;
     interMedium: string;
+    interSemiBold: string;
     interBold: string;
     Sfprotext: string;
 };

package/dist/esm/styles/AppFonts.js

@@ -1,6 +1,7 @@
 export const AppFonts = {
     interRegular: 'Inter-Regular',
     interMedium: 'Inter-Medium',
+    interSemiBold: 'Inter-SemiBold',
     interBold: 'Inter-Bold',
     Sfprotext: 'Inter-Regular',
 };

package/dist/esm/styles/index.d.ts

@@ -61,7 +61,8 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
     headerDetailCenter: {
         alignItems: string;
         justifyContent: string;
-        width: string;
+        flex: number;
+        minWidth: number;
     };
     headerDetailRow: {
         flexDirection: string;
@@ -149,6 +150,28 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
     listContent: {
         paddingBottom: number;
     };
+    supportFab: {
+        position: string;
+        bottom: number;
+        right: number;
+        width: number;
+        height: number;
+        borderRadius: number;
+        backgroundColor: string;
+        alignItems: string;
+        justifyContent: string;
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+        zIndex: number;
+        borderWidth: number;
+        borderColor: string;
+    };
     scrollTopBtn: {
         position: string;
         bottom: number;
@@ -1442,6 +1465,7 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         borderTopLeftRadius: number;
         borderTopRightRadius: number;
         overflow: string;
+        flexShrink: number;
     };
     statusChip: {
         paddingHorizontal: number;

package/dist/esm/styles/index.js

@@ -60,7 +60,8 @@ export const getRawStyles = (colors) => ({
     headerDetailCenter: {
         alignItems: 'center',
         justifyContent: 'center',
-        width: '100%',
+        flex: 1,
+        minWidth: 0,
     },
     headerDetailRow: {
         flexDirection: 'row',
@@ -137,6 +138,25 @@ export const getRawStyles = (colors) => ({
         letterSpacing: 0.2,
     },
     listContent: { paddingBottom: Platform.OS === 'ios' ? 44 : 32 },
+    supportFab: {
+        position: 'absolute',
+        bottom: 22,
+        right: 16,
+        width: 42,
+        height: 42,
+        borderRadius: 21,
+        backgroundColor: colors.purple,
+        alignItems: 'center',
+        justifyContent: 'center',
+        shadowColor: colors.purple,
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.45,
+        shadowRadius: 8,
+        elevation: 14,
+        zIndex: 999,
+        borderWidth: 1.5,
+        borderColor: 'rgba(255, 255, 255, 0.25)',
+    },
     scrollTopBtn: {
         position: 'absolute',
         bottom: 22,
@@ -1343,6 +1363,7 @@ export const getRawStyles = (colors) => ({
         borderTopLeftRadius: 20,
         borderTopRightRadius: 20,
         overflow: 'hidden',
+        flexShrink: 0,
     },
     statusChip: {
         paddingHorizontal: 10,

package/dist/esm/types/enums.d.ts

@@ -67,6 +67,8 @@ export declare const SettingsSubTab: {
     readonly Module: "module";
     readonly Ui: "ui";
     readonly Limits: "limits";
+    readonly Capture: "capture";
+    readonly About: "about";
 };
 export type SettingsSubTab = (typeof SettingsSubTab)[keyof typeof SettingsSubTab];
 export declare const LogFilter: {