Implement network check

Author: CommanderRedYT

licenses.json

@@ -16,6 +16,12 @@
         "licenseUrl": "https://github.com/react-native-community/react-native-art",
         "parents": "opendtu-react-native"
     },
+    "@react-native-community/[email protected]": {
+        "licenses": "MIT",
+        "repository": "https://github.com/react-native-netinfo/react-native-netinfo",
+        "licenseUrl": "https://github.com/react-native-netinfo/react-native-netinfo/raw/master/LICENSE",
+        "parents": "opendtu-react-native"
+    },
     "@react-native-masked-view/[email protected]": {
         "licenses": "MIT",
         "repository": "https://github.com/react-native-masked-view/masked-view",

package.json

@@ -29,6 +29,7 @@
     "@os-team/i18next-react-native-language-detector": "^1.0.30",
     "@react-native-async-storage/async-storage": "^1.19.3",
     "@react-native-community/art": "^1.2.0",
+    "@react-native-community/netinfo": "^11.2.1",
     "@react-native-masked-view/masked-view": "^0.3.0",
     "@react-navigation/bottom-tabs": "^6.5.9",
     "@react-navigation/native": "^6.1.8",

src/App.tsx

@@ -14,6 +14,7 @@ import { SafeAreaProvider } from 'react-native-safe-area-context';
 import SplashScreen from 'react-native-splash-screen';
 import { Provider as ReduxProvider } from 'react-redux';
 
+import AppOfflineModal from '@/components/modals/AppOfflineModal';
 import EnableAppUpdatesModal from '@/components/modals/EnableAppUpdatesModal';
 
 import ApiProvider from '@/api/ApiHandler';
@@ -243,6 +244,7 @@ const _App: FC = () => {
 
   return (
     <PaperProvider theme={theme}>
+      <AppOfflineModal />
       <StatusBar
         backgroundColor={theme.colors.background}
         barStyle={theme.dark ? 'light-content' : 'dark-content'}

src/components/modals/AppOfflineModal.tsx

@@ -0,0 +1,30 @@
+import { useNetInfo } from '@react-native-community/netinfo';
+
+import type { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Box } from 'react-native-flex-layout';
+import { Portal, Text } from 'react-native-paper';
+
+import BaseModal from '@/components/BaseModal';
+
+const AppOfflineModal: FC = () => {
+  const { t } = useTranslation();
+  const { isConnected } = useNetInfo();
+
+  return (
+    <Portal>
+      <BaseModal visible={!isConnected} dismissable={false}>
+        <Box p={16}>
+          <Box mb={8}>
+            <Text variant="bodyLarge">{t('offlineModal.title')}</Text>
+          </Box>
+          <Box mb={4}>
+            <Text>{t('offlineModal.description')}</Text>
+          </Box>
+        </Box>
+      </BaseModal>
+    </Portal>
+  );
+};
+
+export default AppOfflineModal;

src/translations/translation-files

@@ -2274,6 +2274,11 @@
     prompts "^2.4.0"
     semver "^7.5.2"
 
+"@react-native-community/netinfo@^11.2.1":
+  version "11.2.1"
+  resolved "https://registry.yarnpkg.com/@react-native-community/netinfo/-/netinfo-11.2.1.tgz#177f5409f2ac41fd51ede6e4994307bb0edb2178"
+  integrity sha512-n9kgmH7vLaU7Cdo8vGfJGGwhrlgppaOSq5zKj9I7H4k5iRM3aNtwURw83mgrc22Ip7nSye2afZV2xDiIyvHttQ==
+
 "@react-native-masked-view/masked-view@^0.3.0":
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/@react-native-masked-view/masked-view/-/masked-view-0.3.0.tgz#bd29fae18d148a685331910a3c7b766ce87eafcc"