Factor out FatalError component from App.tsx

App.tsx

@@ -1,23 +1,22 @@
 import {
+  NavigationContainer,
   DarkTheme as NavigationDarkTheme,
   DefaultTheme as NavigationDefaultTheme,
-  NavigationContainer,
 } from "@react-navigation/native";
 import React, { useEffect, useMemo, useState } from "react";
-import { View, useColorScheme } from "react-native";
+import { useColorScheme } from "react-native";
 import {
   MD3DarkTheme as PaperDarkTheme,
   MD3LightTheme as PaperDefaultTheme,
   Provider as PaperProvider,
-  Text,
 } from "react-native-paper";
 import MaterialIcon from "react-native-vector-icons/MaterialCommunityIcons";
 import AppSnack from "./AppSnack";
 import AppStack from "./AppStack";
+import FatalError from "./FatalError";
 import { AppDataSource } from "./data-source";
 import { settingsRepo } from "./db";
 import { ThemeContext } from "./use-theme";
-import { MARGIN } from "./constants";
 
 export const CombinedDefaultTheme = {
   ...NavigationDefaultTheme,
@@ -93,18 +92,11 @@ const App = () => {
     >
       <NavigationContainer theme={paperTheme}>
         {error && (
-          <View
-            style={{ flex: 1, justifyContent: "center", alignItems: "center" }}
-          >
-            <Text
-              style={{
-                color: systemTheme === "dark" ? "white" : "black",
-                margin: MARGIN,
-              }}
-            >
-              Database failed to initialize: {error}
-            </Text>
-          </View>
+          <FatalError
+            message={error}
+            setAppSettings={setAppSettings}
+            setError={setError}
+          />
         )}
         {appSettings.startup !== undefined && (
           <ThemeContext.Provider

FatalError.tsx

@@ -0,0 +1,55 @@
+import { View, useColorScheme } from "react-native";
+
+import { useCallback } from "react";
+import { Dirs, FileSystem } from "react-native-file-access";
+import { Button, Text } from "react-native-paper";
+import { CombinedDarkTheme, CombinedDefaultTheme } from "./App";
+import { MARGIN } from "./constants";
+import { AppDataSource } from "./data-source";
+import { settingsRepo } from "./db";
+
+export default function FatalError({
+  message,
+  setAppSettings,
+  setError,
+}: {
+  message: string;
+  setAppSettings: (settings: {
+    startup: any;
+    theme: string;
+    lightColor: string;
+    darkColor: string;
+  }) => void;
+  setError: (message: string) => void;
+}) {
+  const systemTheme = useColorScheme();
+
+  const resetDatabase = useCallback(async () => {
+    await FileSystem.cp("/dev/null", Dirs.DatabaseDir + "/massive.db");
+    await AppDataSource.initialize();
+    const gotSettings = await settingsRepo.findOne({ where: {} });
+    setAppSettings({
+      startup: gotSettings.startup,
+      theme: gotSettings.theme,
+      lightColor: gotSettings.lightColor || CombinedDefaultTheme.colors.primary,
+      darkColor: gotSettings.darkColor || CombinedDarkTheme.colors.primary,
+    });
+    setError("");
+  }, [setAppSettings, setError]);
+
+  return (
+    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+      <Text
+        style={{
+          color: systemTheme === "dark" ? "white" : "black",
+          margin: MARGIN,
+        }}
+      >
+        Database failed to initialize: {message}
+      </Text>
+      <Button mode="contained" onPress={resetDatabase}>
+        Reset database
+      </Button>
+    </View>
+  );
+}