diff --git a/apps/mobile/components/BootError.tsx b/apps/mobile/components/BootError.tsx
new file mode 100644
index 0000000..f4267bf
--- /dev/null
+++ b/apps/mobile/components/BootError.tsx
@@ -0,0 +1,51 @@
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
+
+import { colors } from '../theme/colors';
+
+interface Props {
+ error: Error;
+}
+
+// Last-resort fallback. Renders whenever AppBootstrap's init effect throws or
+// when the global JS error handler catches an unhandled exception. The
+// env-diagnostic line ("env-ok" / "env-missing") makes future bug reports
+// triageable from a single screenshot.
+export function BootError({ error }: Props) {
+ const envOk = Boolean(process.env.EXPO_PUBLIC_SUPABASE_URL);
+ return (
+
+ App-Start fehlgeschlagen
+ {error.message}
+
+ EXPO_PUBLIC_SUPABASE_URL:
+
+ {envOk ? 'env-ok' : 'env-missing'}
+
+
+ {error.stack && {error.stack}}
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flexGrow: 1,
+ backgroundColor: colors.bg,
+ padding: 24,
+ paddingTop: 64,
+ gap: 12,
+ },
+ title: { color: colors.text, fontSize: 20, fontWeight: '700' },
+ message: { color: colors.danger, fontSize: 14, lineHeight: 20 },
+ diagnostic: { flexDirection: 'row', gap: 8, marginTop: 8 },
+ diagnosticLabel: { color: colors.textMuted, fontSize: 12 },
+ diagnosticValue: { fontSize: 12, fontWeight: '700' },
+ ok: { color: colors.success },
+ bad: { color: colors.danger },
+ stack: {
+ color: colors.textDim,
+ fontSize: 11,
+ fontFamily: 'Courier',
+ marginTop: 16,
+ },
+});
diff --git a/apps/mobile/components/BootSplash.tsx b/apps/mobile/components/BootSplash.tsx
new file mode 100644
index 0000000..3cf6421
--- /dev/null
+++ b/apps/mobile/components/BootSplash.tsx
@@ -0,0 +1,22 @@
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
+
+import { colors } from '../theme/colors';
+
+// Shown while AppBootstrap is initialising the crypto backend. Identical
+// background to the Expo splash so the handoff is invisible to the user.
+export function BootSplash() {
+ return (
+
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ alignItems: 'center',
+ justifyContent: 'center',
+ backgroundColor: colors.bg,
+ },
+});