feat: Asynchronous updates

App.tsx

@@ -1,10 +1,11 @@
 /* eslint-disable no-unused-vars */
 /* eslint-disable react/display-name */
 import React from 'react';
-import {Provider as PaperProvider} from 'react-native-paper';
+import {Provider as PaperProvider, Snackbar} from 'react-native-paper';
 import {enableScreens} from 'react-native-screens';
 import {Provider, useSelector} from 'react-redux';
 import {Prompt} from './src/helper/Prompt';
+import {GlobalSnackbar} from './src/helper/GlobalSnackbar';
 import './src/i18n/config';
 import MainNavigation from './src/navigation/MainNavigation';
 import {RootState, store} from './src/redux/store';
@@ -33,14 +34,15 @@ const ReduxWrappedApp = () => {
   } else if (selectedTheme == 'dark') {
     theme = OwnPaperThemeDark;
   } else {
-    theme = OwnPaperThemeDark;
+    theme = colorScheme == 'light' ? OwnPaperTheme : OwnPaperThemeDark;
   }
 
 
   return (
     <PaperProvider theme={theme}>
       <MainNavigation />
       <Prompt/>
+      <GlobalSnackbar />
     </PaperProvider>
   );
 };

src/helper/GlobalSnackbar.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import {MD3Theme, Snackbar, withTheme} from 'react-native-paper';
+
+interface Options {
+  message: string;
+  button1?:string;
+  button1Callback?: () => void;
+  button2?: string;
+  button2Callback?: () => void ;
+}
+interface State extends Options{
+  shown: boolean;
+}
+
+interface Props {
+  theme: MD3Theme
+}
+class SnackbarWithoutStyles extends React.Component<Props, State> {
+  private static component: SnackbarWithoutStyles;
+  constructor(props: Props) {
+    super(props);
+    SnackbarWithoutStyles.component = this;
+    this.state = {
+      shown: false,
+      message: '',
+      button1: '',
+      button1Callback: undefined,
+    };
+  }
+
+  render() {
+    return <Snackbar
+      duration={20000}
+      theme={this.props.theme}
+      visible={this.state.shown}
+      onDismiss={() => this.setState({shown: false})}
+      action={this.state.button1 ? {
+        label: this.state.button1,
+        onPress: this.state.button1Callback,
+        buttonColor: this.props.theme.colors.primary,
+        textColor: this.props.theme.colors.onPrimary
+      }: undefined}>
+      {this.state.message}
+    </Snackbar>;
+  }
+
+
+  componentDidMount() {
+    SnackbarWithoutStyles.component = this;
+  }
+
+  public static show(options: Options) {
+    this.component.setState({...options, shown: true});
+  }
+}
+export const SnackbarUtil = {
+  show: (options: Options) => {
+    SnackbarWithoutStyles.show(options);
+  },
+};
+
+export const GlobalSnackbar = withTheme(SnackbarWithoutStyles);

src/helper/Prompt.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Button, Dialog, MD3Colors, MD3Theme, Paragraph, withTheme} from 'react-native-paper';
+import {Button, Dialog, MD3Theme, Paragraph, withTheme} from 'react-native-paper';
 import CentralStyles from '../styles/CentralStyles';
 
 interface Options {

src/i18n/de.json

@@ -9,6 +9,10 @@
     "sunday": "Sonntag"
   },
   "common": {
+    "update": {
+      "restartprompt": "Eine neue App Version ist verfügbar. Neustarten?",
+      "restartbutton": "Jetzt neustarten"
+    },
     "or": "oder",
     "save": "Speichern",
     "unknownerror": "Unknown error occured",

src/i18n/en.json

@@ -9,6 +9,10 @@
     "sunday": "Sunday"
   },
   "common": {
+    "update": {
+      "restartprompt": "A new app version is available. Restart?",
+      "restartbutton": "Restart now"
+    },
     "or": "or",
     "save": "Save",
     "unknownerror": "Unknown error occured",
@@ -164,4 +168,4 @@
       "week": "Week"
     }
   }
-}
+}

src/screens/LoginScreen/SplashScreen.tsx

@@ -11,6 +11,7 @@ import {changeBackendUrl, changeOnlineState} from '../../redux/features/settings
 import {useAppDispatch} from '../../redux/hooks';
 import {LoginBackdrop} from './LoginBackdrop';
 import {useAppTheme} from '../../styles/CentralStyles';
+import {SnackbarUtil} from '../../helper/GlobalSnackbar';
 
 
 export const SplashScreen = () => {
@@ -33,27 +34,28 @@ export const SplashScreen = () => {
 
 
       // Check for new app versions
-      try {
-        const info = await NetInfo.fetch();
-        if (info.isInternetReachable) {
-          setStatusText(t('screens.splash.checkingforupdates'));
+      const info = await NetInfo.fetch();
+      if (info.isInternetReachable) {
+        // Do update asynchronously
+        const updateAsync = async () => {
           console.log('Update check');
           await new Promise((r) => setTimeout(r, 1000));
           const update = await Updates.checkForUpdateAsync();
           if (update.isAvailable) {
             console.log('Dowload update');
-            setStatusText(t('screens.splash.downloading'));
             await Updates.fetchUpdateAsync();
             console.log('Restarting app');
-            setStatusText(t('screens.splash.restarting'));
-            await AppPersistence.clearOfflineData();
-            Updates.reloadAsync()
-                .then((r) => console.log('Restart triggered', r))
-                .catch((e) => console.error('Restarting failed', e));
+
+            SnackbarUtil.show({message: t('common.update.restartprompt'), button1: t('common.update.restartbutton'), button1Callback: () => {
+              AppPersistence.clearOfflineData().then(() => {
+                Updates.reloadAsync()
+                    .then((r) => console.log('Restart triggered', r))
+                    .catch((e) => console.error('Restarting failed', e));
+              });
+            }});
           }
-        }
-      } catch (e) {
-        // Ignore error, just start with unupdated version
+        };
+        updateAsync();
       }
 
       // TODO: Proper management of backend url via redux