@appspacer/react-native 1.0.0

package/dist/useAppSpacerUpdate.js

@@ -0,0 +1,81 @@
+import { useState, useEffect, useCallback } from "react";
+import { AppSpacer } from "./AppSpacer";
+import { UpdateStatus } from "./types";
+/**
+ * Production-grade React hook for AppSpacer OTA updates.
+ */
+export function useAppSpacerUpdate() {
+    const [status, setStatus] = useState(AppSpacer.getStatus());
+    const [update, setUpdate] = useState(null);
+    const [error, setError] = useState(null);
+    const [downloadProgress, setDownloadProgress] = useState(0);
+    useEffect(() => {
+        const unsubscribeStatus = AppSpacer.onStatusChange((newStatus, detail) => {
+            setStatus(newStatus);
+            if (newStatus === UpdateStatus.ERROR) {
+                setError(detail ?? "Unknown error");
+            }
+            else {
+                setError(null);
+            }
+            // Reset progress when not downloading
+            if (newStatus !== UpdateStatus.DOWNLOADING) {
+                setDownloadProgress(0);
+            }
+        });
+        const unsubscribeProgress = AppSpacer.onDownloadProgress((progress) => {
+            setDownloadProgress(progress);
+        });
+        return () => {
+            unsubscribeStatus();
+            unsubscribeProgress();
+        };
+    }, []);
+    const checkForUpdate = useCallback(async () => {
+        try {
+            const result = await AppSpacer.checkForUpdate();
+            setUpdate(result);
+        }
+        catch (err) {
+            setError(err.message);
+        }
+    }, []);
+    const downloadUpdate = useCallback(async () => {
+        try {
+            await AppSpacer.downloadUpdate();
+        }
+        catch (err) {
+            setError(err.message);
+        }
+    }, []);
+    const restartApp = useCallback(() => {
+        AppSpacer.restartApp();
+    }, []);
+    const sync = useCallback(async (options) => {
+        try {
+            const result = await AppSpacer.sync(options);
+            setUpdate(result);
+        }
+        catch (err) {
+            setError(err.message);
+        }
+    }, []);
+    const clearOldUpdates = useCallback(async () => {
+        return AppSpacer.clearOldUpdates();
+    }, []);
+    const getUpdateMetadata = useCallback(async () => {
+        return AppSpacer.getUpdateMetadata();
+    }, []);
+    return {
+        status,
+        update,
+        error,
+        downloadProgress,
+        checkForUpdate,
+        downloadUpdate,
+        restartApp,
+        sync,
+        clearOldUpdates,
+        getUpdateMetadata,
+    };
+}

package/dist/withAppSpacer.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { AppSpacerConfig, SyncOptions } from "./types";
+export type AppSpacerOptions = AppSpacerConfig & SyncOptions;
+export declare function withAppSpacer(options: AppSpacerOptions): <P extends object>(WrappedComponent: React.ComponentType<P>) => React.ComponentType<P>;

package/dist/withAppSpacer.js

@@ -0,0 +1,487 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState, useRef, useCallback } from "react";
+import { AppState, Modal, View, Text, StyleSheet, TouchableOpacity, Platform, Dimensions, ActivityIndicator, 
+// eslint-disable-next-line deprecation/deprecation
+SafeAreaView, } from "react-native";
+import { AppSpacer } from "./AppSpacer";
+import { UpdateStatus, InstallMode, UpdateUIType } from "./types";
+const { width } = Dimensions.get("window");
+export function withAppSpacer(options) {
+    const selectedUI = options.updateUI || UpdateUIType.PREMIUM_DARK;
+    return function (WrappedComponent) {
+        return function AppSpacerWrapper(props) {
+            const [showModal, setShowModal] = useState(false);
+            const [update, setUpdate] = useState(null);
+            const [status, setStatus] = useState(UpdateStatus.IDLE);
+            const [progress, setProgress] = useState(0);
+            useEffect(() => {
+                AppSpacer.init({
+                    deploymentKey: options.deploymentKey,
+                    appVersion: options.appVersion,
+                    checkInterval: options.checkInterval,
+                    enableCrashReporting: options.enableCrashReporting,
+                });
+                return () => AppSpacer.destroy();
+            }, []);
+            // ✅ Use a ref so AppState listener always reads current status
+            // without needing to be re-registered on every status change
+            const statusRef = useRef(UpdateStatus.IDLE);
+            useEffect(() => {
+                statusRef.current = status;
+            }, [status]);
+            // ✅ Resolve the correct install mode given a specific update
+            const resolveInstallMode = useCallback((currentUpdate) => {
+                if (currentUpdate.mandatory) {
+                    return (options.mandatoryInstallMode ??
+                        options.installMode ??
+                        InstallMode.IMMEDIATE);
+                }
+                return options.installMode ?? InstallMode.ON_NEXT_RESTART;
+            }, []);
+            // ✅ Accept currentUpdate directly — avoids stale state closure
+            const handleSilentDownload = useCallback(async (currentUpdate) => {
+                try {
+                    await AppSpacer.downloadUpdate();
+                    const mode = resolveInstallMode(currentUpdate);
+                    if (mode === InstallMode.IMMEDIATE) {
+                        AppSpacer.restartApp();
+                    }
+                }
+                catch {
+                    // Silent background download failures are non-fatal
+                }
+            }, [resolveInstallMode]);
+            const runSync = useCallback(async () => {
+                try {
+                    const result = await AppSpacer.checkForUpdate();
+                    if (!result.updateAvailable)
+                        return;
+                    setUpdate(result);
+                    if (options.updateDialog) {
+                        setShowModal(true);
+                    }
+                    else {
+                        // ✅ Pass result directly — no stale state risk
+                        await handleSilentDownload(result);
+                    }
+                }
+                catch {
+                    // Check failures are non-fatal
+                }
+            }, [handleSilentDownload]);
+            useEffect(() => {
+                const unsubscribeStatus = AppSpacer.onStatusChange((s) => setStatus(s));
+                const unsubscribeProgress = AppSpacer.onDownloadProgress((p) => setProgress(p));
+                runSync();
+                const subscription = AppState.addEventListener("change", (nextState) => {
+                    // ✅ Guard: don't re-trigger check if already downloading/installing
+                    if (nextState === "active" &&
+                        statusRef.current === UpdateStatus.IDLE) {
+                        runSync();
+                    }
+                });
+                return () => {
+                    subscription.remove();
+                    unsubscribeStatus();
+                    unsubscribeProgress();
+                };
+            }, [runSync]);
+            // ✅ Respects installMode — no longer always calls restartApp()
+            const confirmInstall = useCallback(async () => {
+                try {
+                    await AppSpacer.downloadUpdate();
+                    const mode = resolveInstallMode(update ?? { updateAvailable: true });
+                    if (mode === InstallMode.IMMEDIATE) {
+                        AppSpacer.restartApp();
+                    }
+                    else {
+                        // ON_NEXT_RESTART or ON_NEXT_RESUME — close modal, update applies on next launch
+                        setShowModal(false);
+                    }
+                }
+                catch {
+                    setShowModal(false);
+                }
+            }, [update, resolveInstallMode]);
+            const ignoreInstall = useCallback(() => setShowModal(false), []);
+            const isProcessing = status === UpdateStatus.DOWNLOADING ||
+                status === UpdateStatus.INSTALLING;
+            const renderUI = () => {
+                switch (selectedUI) {
+                    // ─────────────────────────────────────────────────────────────
+                    case UpdateUIType.GLASS:
+                        return (_jsxs(View, { style: [
+                                styles.glassCard,
+                                { backgroundColor: "rgba(255,255,255,0.15)" },
+                            ], children: [_jsx(Text, { style: styles.glassTitle, children: update?.mandatory ? "Urgent Patch" : "App Upgrade" }), _jsx(Text, { style: styles.glassDesc, children: update?.description || "Stability and performance improvements." }), isProcessing ? (_jsx(ActivityIndicator, { color: "#FFF", size: "large" })) : (_jsxs(View, { style: styles.glassActions, children: [!update?.mandatory && (_jsx(TouchableOpacity, { onPress: ignoreInstall, style: styles.glassBtnSecondary, children: _jsx(Text, { style: styles.glassBtnTextSecondary, children: "Later" }) })), _jsx(TouchableOpacity, { onPress: confirmInstall, style: styles.glassBtnPrimary, children: _jsx(Text, { style: styles.glassBtnTextPrimary, children: "Update Now" }) })] }))] }));
+                    // ─────────────────────────────────────────────────────────────
+                    case UpdateUIType.MINIMAL:
+                        return (_jsxs(View, { style: styles.minimalCard, children: [_jsxs(View, { style: styles.minimalHeader, children: [_jsx(Text, { style: styles.minimalTitle, children: "Update Required" }), update?.label ? (_jsxs(Text, { style: styles.minimalVersion, children: ["v", update.label] })) : null] }), _jsx(Text, { style: styles.minimalDesc, children: update?.description || "Release notes not provided." }), isProcessing ? (
+                                // ✅ Added track container so bar is visible at 0%
+                                _jsx(View, { style: styles.minimalProgressTrack, children: _jsx(View, { style: [
+                                            styles.minimalBar,
+                                            { width: `${Math.round(progress * 100)}%` },
+                                        ] }) })) : (_jsxs(View, { style: styles.minimalFooter, children: [!update?.mandatory && (_jsx(TouchableOpacity, { onPress: ignoreInstall, children: _jsx(Text, { style: styles.minimalLink, children: "Postpone" }) })), _jsx(TouchableOpacity, { onPress: confirmInstall, style: styles.minimalBtn, children: _jsx(Text, { style: styles.minimalBtnText, children: "Update" }) })] }))] }));
+                    // ─────────────────────────────────────────────────────────────
+                    case UpdateUIType.BOTTOM_SHEET:
+                        return (
+                        // ✅ Sheet manages its own bottom alignment — not relying on overlay
+                        _jsx(View, { style: styles.sheetWrapper, children: _jsxs(View, { style: styles.sheet, children: [_jsx(View, { style: styles.sheetHandle }), _jsx(Text, { style: styles.sheetTitle, children: "New Version Available" }), _jsx(Text, { style: styles.sheetDesc, children: "Get the latest features and bug fixes. The app will restart after install." }), isProcessing ? (_jsxs(View, { style: styles.sheetLoading, children: [_jsx(ActivityIndicator, { color: "#6366F1" }), _jsxs(Text, { style: styles.sheetLoadingText, children: ["Downloading... ", Math.round(progress * 100), "%"] })] })) : (_jsxs(View, { style: styles.sheetActions, children: [_jsx(TouchableOpacity, { onPress: confirmInstall, style: styles.sheetBtnPrimary, children: _jsx(Text, { style: styles.sheetBtnTextPrimary, children: "Install Update" }) }), !update?.mandatory && (_jsx(TouchableOpacity, { onPress: ignoreInstall, style: styles.sheetBtnSecondary, children: _jsx(Text, { style: styles.sheetBtnTextSecondary, children: "Not Now" }) }))] }))] }) }));
+                    // ─────────────────────────────────────────────────────────────
+                    case UpdateUIType.FULL_SCREEN:
+                        return (_jsxs(SafeAreaView, { style: styles.fullScreen, children: [_jsx(View, { style: styles.fullScreenGlow }), _jsx(Text, { style: styles.fullScreenEmoji, children: "\u2728" }), _jsx(Text, { style: styles.fullScreenTitle, children: "Time to Expand" }), _jsx(Text, { style: styles.fullScreenDesc, children: "A new build is ready. We've optimized the core engine and added new capabilities." }), _jsx(View, { style: styles.fullScreenFooter, children: isProcessing ? (
+                                    // ✅ Added track behind the fill bar
+                                    _jsxs(View, { style: styles.fullScreenProgressWrapper, children: [_jsx(View, { style: styles.fullScreenProgressTrack, children: _jsx(View, { style: [
+                                                        styles.fullScreenBar,
+                                                        { width: `${Math.round(progress * 100)}%` },
+                                                    ] }) }), _jsxs(Text, { style: styles.fullScreenProgressText, children: [Math.round(progress * 100), "% Complete"] })] })) : (_jsxs(_Fragment, { children: [_jsx(TouchableOpacity, { onPress: confirmInstall, style: styles.fullScreenBtn, children: _jsx(Text, { style: styles.fullScreenBtnText, children: "Deploy Update" }) }), !update?.mandatory && (_jsx(TouchableOpacity, { onPress: ignoreInstall, style: styles.fullScreenMinor, children: _jsx(Text, { style: styles.fullScreenMinorText, children: "Skip for now" }) }))] })) })] }));
+                    // ─────────────────────────────────────────────────────────────
+                    case UpdateUIType.PREMIUM_DARK:
+                    default:
+                        return (_jsxs(View, { style: styles.card, children: [_jsx(View, { style: styles.glow }), _jsxs(View, { style: styles.content, children: [_jsx(View, { style: styles.iconBox, children: _jsx(Text, { style: styles.icon, children: "\u26A1" }) }), _jsx(Text, { style: styles.title, children: update?.mandatory ? "Mandatory Update" : "Update Available" }), update?.label ? (_jsxs(Text, { style: styles.version, children: ["AppSpacer v", update.label] })) : null, _jsx(View, { style: styles.descBox, children: _jsx(Text, { style: styles.description, children: update?.description || "Improvements and patches." }) }), isProcessing ? (_jsxs(View, { style: styles.progressContainer, children: [_jsx(View, { style: styles.progressBarBg, children: _jsx(View, { style: [
+                                                            styles.progressBarFill,
+                                                            { width: `${Math.round(progress * 100)}%` },
+                                                        ] }) }), _jsxs(Text, { style: styles.progressText, children: [status === UpdateStatus.DOWNLOADING
+                                                            ? "Downloading..."
+                                                            : "Applying...", " ", Math.round(progress * 100), "%"] })] })) : (_jsxs(View, { style: styles.footer, children: [!update?.mandatory && (_jsx(TouchableOpacity, { style: styles.ignoreBtn, onPress: ignoreInstall, children: _jsx(Text, { style: styles.ignoreText, children: "Later" }) })), _jsx(TouchableOpacity, { style: styles.installBtn, onPress: confirmInstall, children: _jsx(Text, { style: styles.installText, children: "Install Now" }) })] }))] })] }));
+                }
+            };
+            // ✅ Overlay justifyContent is conditional per UI type
+            const overlayStyle = [
+                styles.overlay,
+                selectedUI === UpdateUIType.FULL_SCREEN && styles.overlayFullScreen,
+                selectedUI === UpdateUIType.BOTTOM_SHEET && styles.overlayBottomSheet,
+            ];
+            return (_jsxs(View, { style: { flex: 1 }, children: [_jsx(WrappedComponent, { ...props }), _jsx(Modal, { visible: showModal, transparent: true, animationType: selectedUI === UpdateUIType.BOTTOM_SHEET ? "slide" : "fade", statusBarTranslucent: true, children: _jsx(View, { style: overlayStyle, children: renderUI() }) })] }));
+        };
+    };
+}
+// ─── Styles ──────────────────────────────────────────────────────────────────
+const styles = StyleSheet.create({
+    // OVERLAY — base (centered)
+    overlay: {
+        flex: 1,
+        backgroundColor: "rgba(0,0,0,0.85)",
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    // ✅ Full-screen variant — no backdrop, fills screen
+    overlayFullScreen: {
+        backgroundColor: "#080B14",
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    // ✅ Bottom sheet variant — aligns to bottom, not center
+    overlayBottomSheet: {
+        justifyContent: "flex-end",
+        alignItems: "stretch",
+        backgroundColor: "rgba(0,0,0,0.5)",
+    },
+    // ── PREMIUM_DARK ────────────────────────────────────────────────────────
+    card: {
+        width: width * 0.85,
+        backgroundColor: "#161E2E",
+        borderRadius: 32,
+        borderWidth: 1,
+        borderColor: "rgba(255,255,255,0.1)",
+        overflow: "hidden",
+        paddingTop: 12,
+    },
+    glow: {
+        position: "absolute",
+        top: -100,
+        left: "25%",
+        right: "25%",
+        height: 150,
+        backgroundColor: "#6366F1",
+        opacity: 0.1,
+        borderRadius: 100,
+        transform: [{ scaleX: 2 }],
+    },
+    content: { padding: 24, alignItems: "center" },
+    iconBox: {
+        width: 64,
+        height: 64,
+        borderRadius: 22,
+        backgroundColor: "rgba(99,102,241,0.15)",
+        justifyContent: "center",
+        alignItems: "center",
+        marginBottom: 20,
+        borderWidth: 1,
+        borderColor: "rgba(99,102,241,0.3)",
+    },
+    icon: { fontSize: 32 },
+    title: {
+        color: "#FFFFFF",
+        fontSize: 22,
+        fontWeight: "900",
+        textAlign: "center",
+        marginBottom: 6,
+    },
+    version: {
+        color: "#6366F1",
+        fontSize: 14,
+        fontWeight: "800",
+        marginBottom: 20,
+        backgroundColor: "rgba(99,102,241,0.1)",
+        paddingHorizontal: 12,
+        paddingVertical: 4,
+        borderRadius: 12,
+    },
+    descBox: {
+        backgroundColor: "rgba(255,255,255,0.03)",
+        padding: 16,
+        borderRadius: 18,
+        width: "100%",
+        marginBottom: 32,
+    },
+    description: {
+        color: "#94A3B8",
+        fontSize: 14,
+        textAlign: "center",
+        lineHeight: 22,
+    },
+    footer: { flexDirection: "row", width: "100%", gap: 12 },
+    ignoreBtn: {
+        flex: 1,
+        height: 58,
+        borderRadius: 18,
+        justifyContent: "center",
+        alignItems: "center",
+        backgroundColor: "rgba(255,255,255,0.03)",
+    },
+    ignoreText: { color: "#94A3B8", fontSize: 16, fontWeight: "700" },
+    installBtn: {
+        flex: 2,
+        height: 58,
+        borderRadius: 18,
+        justifyContent: "center",
+        alignItems: "center",
+        backgroundColor: "#6366F1",
+    },
+    installText: { color: "#FFFFFF", fontSize: 16, fontWeight: "900" },
+    progressContainer: { width: "100%", alignItems: "center" },
+    progressBarBg: {
+        width: "100%",
+        height: 8,
+        backgroundColor: "rgba(255,255,255,0.05)",
+        borderRadius: 4,
+        overflow: "hidden",
+        marginBottom: 12,
+    },
+    progressBarFill: {
+        height: "100%",
+        backgroundColor: "#6366F1",
+        borderRadius: 4,
+    },
+    progressText: {
+        color: "#6366F1",
+        fontSize: 12,
+        fontWeight: "800",
+        textTransform: "uppercase",
+        letterSpacing: 1,
+    },
+    // ── GLASS ───────────────────────────────────────────────────────────────
+    glassCard: {
+        width: width * 0.88,
+        borderRadius: 36,
+        padding: 32,
+        borderWidth: 1,
+        borderColor: "rgba(255,255,255,0.2)",
+        alignItems: "center",
+    },
+    glassTitle: {
+        color: "#FFF",
+        fontSize: 24,
+        fontWeight: "900",
+        marginBottom: 16,
+    },
+    glassDesc: {
+        color: "rgba(255,255,255,0.7)",
+        fontSize: 16,
+        textAlign: "center",
+        marginBottom: 32,
+    },
+    glassActions: { width: "100%", gap: 12 },
+    glassBtnPrimary: {
+        backgroundColor: "#FFF",
+        height: 60,
+        borderRadius: 20,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    glassBtnSecondary: {
+        backgroundColor: "rgba(255,255,255,0.1)",
+        height: 60,
+        borderRadius: 20,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    // ✅ Split into two styles — primary is dark text on white, secondary is white text
+    glassBtnTextPrimary: { color: "#000", fontSize: 16, fontWeight: "800" },
+    glassBtnTextSecondary: { color: "#FFF", fontSize: 16, fontWeight: "700" },
+    // ── MINIMAL ─────────────────────────────────────────────────────────────
+    minimalCard: {
+        width: width * 0.9,
+        backgroundColor: "#FFF",
+        borderRadius: 24,
+        padding: 24,
+    },
+    minimalHeader: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        marginBottom: 12,
+    },
+    minimalTitle: { fontSize: 18, fontWeight: "800", color: "#111" },
+    minimalVersion: {
+        fontSize: 12,
+        fontWeight: "700",
+        color: "#6366F1",
+        backgroundColor: "#EEF2FF",
+        paddingHorizontal: 8,
+        paddingVertical: 2,
+        borderRadius: 6,
+    },
+    minimalDesc: {
+        fontSize: 14,
+        color: "#666",
+        lineHeight: 20,
+        marginBottom: 24,
+    },
+    minimalFooter: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+    },
+    minimalLink: { color: "#999", fontSize: 14, fontWeight: "600" },
+    minimalBtn: {
+        backgroundColor: "#111",
+        paddingHorizontal: 20,
+        paddingVertical: 12,
+        borderRadius: 12,
+    },
+    minimalBtnText: { color: "#FFF", fontWeight: "800" },
+    // ✅ Track added so fill is visible at 0%
+    minimalProgressTrack: {
+        height: 4,
+        backgroundColor: "#F3F4F6",
+        borderRadius: 2,
+        overflow: "hidden",
+        marginBottom: 16,
+    },
+    minimalBar: { height: "100%", backgroundColor: "#6366F1", borderRadius: 2 },
+    // ── BOTTOM SHEET ────────────────────────────────────────────────────────
+    // ✅ Wrapper fills width and pushes sheet to bottom via overlay's flex-end
+    sheetWrapper: { width: "100%" },
+    sheet: {
+        backgroundColor: "#FFF",
+        borderTopLeftRadius: 32,
+        borderTopRightRadius: 32,
+        padding: 32,
+        paddingBottom: Platform.OS === "ios" ? 48 : 32,
+    },
+    sheetHandle: {
+        width: 40,
+        height: 5,
+        backgroundColor: "#E5E7EB",
+        borderRadius: 3,
+        alignSelf: "center",
+        marginBottom: 24,
+    },
+    sheetTitle: {
+        fontSize: 22,
+        fontWeight: "900",
+        color: "#111",
+        marginBottom: 12,
+    },
+    sheetDesc: {
+        fontSize: 15,
+        color: "#4B5563",
+        lineHeight: 22,
+        marginBottom: 32,
+    },
+    sheetActions: { gap: 12 },
+    sheetBtnPrimary: {
+        backgroundColor: "#6366F1",
+        height: 60,
+        borderRadius: 20,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    sheetBtnSecondary: {
+        backgroundColor: "#F3F4F6",
+        height: 60,
+        borderRadius: 20,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    sheetBtnTextPrimary: { color: "#FFF", fontSize: 16, fontWeight: "800" },
+    sheetBtnTextSecondary: {
+        color: "#4B5563",
+        fontSize: 16,
+        fontWeight: "700",
+    },
+    sheetLoading: { alignItems: "center", gap: 12 },
+    sheetLoadingText: { color: "#6366F1", fontWeight: "800" },
+    // ── FULL SCREEN ─────────────────────────────────────────────────────────
+    fullScreen: {
+        flex: 1,
+        width: "100%",
+        backgroundColor: "#080B14",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 40,
+    },
+    fullScreenGlow: {
+        position: "absolute",
+        width: width * 1.5,
+        height: width * 1.5,
+        backgroundColor: "#6366F1",
+        opacity: 0.05,
+        borderRadius: width,
+    },
+    fullScreenEmoji: { fontSize: 64, marginBottom: 40 },
+    fullScreenTitle: {
+        color: "#FFF",
+        fontSize: 32,
+        fontWeight: "900",
+        textAlign: "center",
+        marginBottom: 20,
+    },
+    fullScreenDesc: {
+        color: "#94A3B8",
+        fontSize: 17,
+        textAlign: "center",
+        lineHeight: 26,
+        marginBottom: 60,
+    },
+    fullScreenFooter: { width: "100%", alignItems: "center" },
+    fullScreenBtn: {
+        backgroundColor: "#6366F1",
+        width: "100%",
+        height: 64,
+        borderRadius: 22,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    fullScreenBtnText: { color: "#FFF", fontSize: 18, fontWeight: "900" },
+    fullScreenMinor: { marginTop: 24 },
+    fullScreenMinorText: { color: "#475569", fontSize: 16, fontWeight: "600" },
+    // ✅ Proper progress track + fill structure
+    fullScreenProgressWrapper: { width: "100%", alignItems: "center" },
+    fullScreenProgressTrack: {
+        width: "100%",
+        height: 6,
+        backgroundColor: "rgba(255,255,255,0.08)",
+        borderRadius: 3,
+        overflow: "hidden",
+        marginBottom: 16,
+    },
+    fullScreenBar: {
+        height: "100%",
+        backgroundColor: "#6366F1",
+        borderRadius: 3,
+    },
+    fullScreenProgressText: { color: "#6366F1", fontWeight: "900" },
+});

package/ios/AppSpacerCrashHandler.h

@@ -0,0 +1,12 @@
+#import <Foundation/Foundation.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface AppSpacerCrashHandler : NSObject
+
++ (void)start;
++ (void)saveCrashToDiskSyncWithId:(NSString *)crashId payload:(NSString *)payload;
+
+@end
+
+NS_ASSUME_NONNULL_END

package/ios/AppSpacerCrashHandler.m

@@ -0,0 +1,90 @@
+#import "AppSpacerCrashHandler.h"
+#import <UIKit/UIKit.h>
+
+static NSUncaughtExceptionHandler *defaultUncaughtExceptionHandler;
+static BOOL isInitialized = NO;
+
+// Function to synchronously format and save the crash
+static void SaveNativeCrashToDisk(NSString *reason, NSArray *stackSymbols) {
+    NSString *crashId = [NSString stringWithFormat:@"native-%lld-%05d", (long long)([[NSDate date] timeIntervalSince1970] * 1000), arc4random_uniform(100000)];
+    
+    NSMutableDictionary *crashData = [NSMutableDictionary dictionary];
+    crashData[@"id"] = crashId;
+    crashData[@"type"] = @"native";
+    
+    NSMutableDictionary *payload = [NSMutableDictionary dictionary];
+    payload[@"message"] = reason;
+    payload[@"stack"] = [stackSymbols componentsJoinedByString:@"\n"];
+    payload[@"isFatal"] = @YES;
+    
+    crashData[@"payload"] = [[NSString alloc] initWithData:[NSJSONSerialization dataWithJSONObject:payload options:0 error:nil] encoding:NSUTF8StringEncoding];
+    
+    NSDateFormatter *formatter = [[NSDateFormatter alloc] init];
+    formatter.dateFormat = @"yyyy-MM-dd'T'HH:mm:ss'Z'";
+    formatter.timeZone = [NSTimeZone timeZoneWithName:@"UTC"];
+    crashData[@"timestamp"] = [formatter stringFromDate:[NSDate date]];
+    
+    NSData *jsonData = [NSJSONSerialization dataWithJSONObject:crashData options:0 error:nil];
+    if (jsonData) {
+        NSString *jsonString = [[NSString alloc] initWithData:jsonData encoding:NSUTF8StringEncoding];
+        [AppSpacerCrashHandler saveCrashToDiskSyncWithId:crashId payload:jsonString];
+    }
+}
+
+// Exception Handler
+static void AppSpacerUncaughtExceptionHandler(NSException *exception) {
+    NSString *reason = [NSString stringWithFormat:@"%@: %@", exception.name, exception.reason];
+    SaveNativeCrashToDisk(reason, [exception callStackSymbols]);
+    
+    if (defaultUncaughtExceptionHandler != NULL) {
+        defaultUncaughtExceptionHandler(exception);
+    }
+}
+
+// Signal Handler
+static void AppSpacerSignalHandler(int signal) {
+    NSString *reason = [NSString stringWithFormat:@"Signal %d received", signal];
+    SaveNativeCrashToDisk(reason, [NSThread callStackSymbols]);
+    
+    // We intentionally don't chain standard BSD signals here to avoid loops,
+    // the system will terminate the process anyway because we don't catch the signal
+    // a second time (SA_RESETHAND could be used natively, but for now we just exit)
+    exit(signal);
+}
+
+@implementation AppSpacerCrashHandler
+
++ (void)start {
+    if (isInitialized) return;
+    isInitialized = YES;
+    
+    defaultUncaughtExceptionHandler = NSGetUncaughtExceptionHandler();
+    NSSetUncaughtExceptionHandler(&AppSpacerUncaughtExceptionHandler);
+    
+    signal(SIGABRT, AppSpacerSignalHandler);
+    signal(SIGILL, AppSpacerSignalHandler);
+    signal(SIGSEGV, AppSpacerSignalHandler);
+    signal(SIGFPE, AppSpacerSignalHandler);
+    signal(SIGBUS, AppSpacerSignalHandler);
+    signal(SIGPIPE, AppSpacerSignalHandler);
+}
+
++ (NSString *)crashDirectory {
+    NSString *cachesDirectory = [NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES) firstObject];
+    NSString *crashPath = [cachesDirectory stringByAppendingPathComponent:@"appspacer_crashes"];
+    
+    NSFileManager *fm = [NSFileManager defaultManager];
+    if (![fm fileExistsAtPath:crashPath]) {
+        [fm createDirectoryAtPath:crashPath withIntermediateDirectories:YES attributes:nil error:nil];
+    }
+    return crashPath;
+}
+
++ (void)saveCrashToDiskSyncWithId:(NSString *)crashId payload:(NSString *)payload {
+    NSString *dir = [self crashDirectory];
+    NSString *filePath = [dir stringByAppendingPathComponent:[NSString stringWithFormat:@"%@.json", crashId]];
+    
+    [payload writeToFile:filePath atomically:YES encoding:NSUTF8StringEncoding error:nil];
+}
+
+@end