feat: check network state on mount (#362)

App.tsx

@@ -1,13 +1,7 @@
 import 'react-native-gesture-handler';
 
-import { bootstrapSDKs } from '$core/bootstrapSDKs';
-
 import { RootApp } from './src/App';
 
-import './src/core/i18n';
-
-bootstrapSDKs();
-
 function App() {
   return <RootApp />;
 }

app.config.ts

@@ -35,7 +35,7 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
   jsEngine: 'hermes',
   orientation: 'portrait',
   icon: './assets/icon.png',
-  userInterfaceStyle: 'light',
+  userInterfaceStyle: 'dark',
   splash: {
     image: './assets/splash.png',
     resizeMode: 'contain',
@@ -70,7 +70,6 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
         config: {
           organization: Env.SENTRY_ORG,
           project: Env.SENTRY_PROJECT,
-          authToken: Env.SENTRY_AUTH_TOKEN,
           setCommits: true,
         },
       },

package.json

@@ -87,6 +87,7 @@
     "expo-font": "~11.4.0",
     "expo-image": "~1.3.5",
     "expo-localization": "~14.3.0",
+    "expo-network": "~5.4.0",
     "expo-splash-screen": "~0.20.5",
     "expo-status-bar": "~1.6.0",
     "expo-updates": "~0.18.18",

src/App.tsx

@@ -7,6 +7,7 @@ import {
 } from 'react-native-safe-area-context';
 import Toast from 'react-native-toast-message';
 
+import { bootstrapSDKs } from '$core/bootstrapSDKs';
 import { RootStack } from '$core/navigation';
 import { theme } from '$core/theme';
 import { toastConfig } from '$core/toaster';
@@ -15,6 +16,11 @@ import { AppUpdateNeeded } from '$shared/components/AppUpdateNeeded';
 import { ErrorBoundary } from '$shared/components/ErrorBoundary';
 import { MaintenanceMode } from '$shared/components/MaintenanceMode';
 import { Splashscreen } from '$shared/components/splashscreen';
+import { useCheckNetworkStateOnMount } from '$shared/hooks/useCheckNetworkStateOnMount';
+
+import './core/i18n';
+
+bootstrapSDKs();
 
 const styles = StyleSheet.create({
   container: {
@@ -23,6 +29,8 @@ const styles = StyleSheet.create({
 });
 
 function App() {
+  useCheckNetworkStateOnMount();
+
   return (
     <ThemeProvider theme={theme}>
       <StatusBar barStyle="light-content" />

src/core/i18n/resources/en/appConfig.json

@@ -0,0 +1,6 @@
+{
+  "networkStateCheck": {
+    "message": "Please check your internet connection. The app might not work properly without it.",
+    "title": "No internet connection"
+  }
+}

src/core/i18n/resources/fr/appConfig.json

@@ -0,0 +1,6 @@
+{
+  "networkStateCheck": {
+    "message": "Vérifiez la connexion internet. L'app peut ne pas fonctionner correctement sans connexion internet.",
+    "title": "Pas de connexion internet"
+  }
+}

src/core/i18n/resources/index.ts

@@ -1,8 +1,10 @@
+import appConfigEN from './en/appConfig.json';
 import commonEN from './en/common.json';
 import homeScreenEN from './en/homeScreen.json';
 import miscScreensEN from './en/miscScreens.json';
 import otherScreenEN from './en/otherScreen.json';
 import settingsEN from './en/settings.json';
+import appConfigFR from './fr/appConfig.json';
 import commonFR from './fr/common.json';
 import homeScreenFR from './fr/homeScreen.json';
 import miscScreensFR from './fr/miscScreens.json';
@@ -16,12 +18,14 @@ export const resources = {
     otherScreen: otherScreenFR,
     miscScreens: miscScreensFR,
     settings: settingsFR,
+    appConfig: appConfigFR,
   },
   en: {
     common: commonEN,
     homeScreen: homeScreenEN,
     otherScreen: otherScreenEN,
     miscScreens: miscScreensEN,
     settings: settingsEN,
+    appConfig: appConfigEN,
   },
 };

src/core/logger/logger.ts

@@ -70,9 +70,9 @@ class LoggerClass {
     this.dev(message);
   }
 
-  dev(message: string) {
+  dev(...data: unknown[]) {
     // eslint-disable-next-line no-console
-    console.log(message);
+    console.log(...data);
   }
 }
 

src/shared/hooks/useCheckNetworkStateOnMount.ts

@@ -0,0 +1,37 @@
+import * as Network from 'expo-network';
+import { useTranslation } from 'react-i18next';
+
+import { ErrorMonitoring } from '$core/monitoring';
+import { Toaster } from '$core/toaster';
+import { sleep } from '$shared/utils/sleep';
+
+import { useRunOnMount } from './useRunOnMount';
+
+const ONE_SECOND = 1000;
+
+export const useCheckNetworkStateOnMount = () => {
+  const { t } = useTranslation('appConfig');
+
+  const checkNetworkState = async () => {
+    await sleep(ONE_SECOND);
+    const { isInternetReachable } = await Network.getNetworkStateAsync();
+
+    if (!isInternetReachable) {
+      Toaster.show({
+        type: 'info',
+        text1: t('networkStateCheck.title'),
+        text2: t('networkStateCheck.message'),
+      });
+    }
+  };
+
+  useRunOnMount(() => {
+    checkNetworkState().catch(() => {
+      ErrorMonitoring.breadcrumbs({
+        category: 'network',
+        type: 'network',
+        message: 'Failed to check network state',
+      });
+    });
+  });
+};

yarn.lock

@@ -9105,6 +9105,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"expo-network@npm:~5.4.0":
+  version: 5.4.0
+  resolution: "expo-network@npm:5.4.0"
+  peerDependencies:
+    expo: "*"
+  checksum: beab3cce8c8bdfc83914747a83bfe51560cbb5d3ac94deec0f4c9dbee031f5c61a2c655869e7d93f9c60ad6bb63cd2faef9a9369d27e1c4e3dc705b8be037f3b
+  languageName: node
+  linkType: hard
+
 "expo-splash-screen@npm:~0.20.5":
   version: 0.20.5
   resolution: "expo-splash-screen@npm:0.20.5"
@@ -16303,6 +16312,7 @@ __metadata:
     expo-font: ~11.4.0
     expo-image: ~1.3.5
     expo-localization: ~14.3.0
+    expo-network: ~5.4.0
     expo-splash-screen: ~0.20.5
     expo-status-bar: ~1.6.0
     expo-updates: ~0.18.18