feat(offline): added checks for network connectivity

App.tsx

@@ -20,6 +20,7 @@ import * as Sentry from "sentry-expo";
 import Toaster from "./src/components/Toaster";
 import { NotificationsProvider } from "./src/contexts/PushNotificationsContext";
 import { useAppState } from "./src/hooks/refetch-hooks";
+import useNetworkState from "./src/hooks/use-network-state";
 import { useOnlineManager } from "./src/hooks/use-online-manager";
 import RootStackNavigator from "./src/navigation/RootStackNavigator";
 import queryClient from "./src/utils/query-client";
@@ -35,6 +36,7 @@ const App = () => {
 
   useOnlineManager();
   useAppState();
+  useNetworkState();
 
   const [fontsLoaded] = useFonts({
     SourceSansPro_700Bold,

CHANGELOG.md

@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [unreleased]
 
+- A toast is displayed when the internet connection is lost
+
 ## [2.1.1] - 2023-03-25
 
 ### Changes

app.json

@@ -5,7 +5,7 @@
     "scheme": "ping4gitlab",
     "description": "Multiplatform react-native app that sends you instant notifications about gitlab activities",
     "slug": "ping4gitlab",
-    "version": "2.1.1",
+    "version": "2.2.0",
     "privacy": "public",
     "orientation": "portrait",
     "userInterfaceStyle": "automatic",

package.json

@@ -20,7 +20,7 @@
     "@react-native-community/netinfo": "9.3.7",
     "@react-navigation/native": "^6.0.11",
     "@react-navigation/native-stack": "^6.7.0",
-    "@sentry/react-native": "4.9.0",
+    "@sentry/react-native": "4.13.0",
     "@shopify/flash-list": "^1.4.0",
     "@shopify/restyle": "2.0.0",
     "@tanstack/react-query": "^4.0.10",
@@ -34,20 +34,21 @@
     "expo-device": "~5.2.1",
     "expo-font": "~11.1.1",
     "expo-haptics": "~12.2.1",
-    "expo-linear-gradient": "~12.1.1",
+    "expo-linear-gradient": "~12.1.2",
     "expo-linking": "~4.0.1",
+    "expo-network": "~5.2.1",
     "expo-notifications": "~0.18.1",
     "expo-secure-store": "~12.1.1",
     "expo-splash-screen": "~0.18.1",
     "expo-status-bar": "~1.4.4",
     "expo-system-ui": "~2.2.1",
-    "expo-updates": "~0.16.3",
+    "expo-updates": "~0.16.4",
     "expo-web-browser": "~12.1.1",
     "formik": "^2.2.9",
     "jwt-decode": "^3.1.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.71.3",
+    "react-native": "0.71.6",
     "react-native-feather": "^1.1.2",
     "react-native-progress": "^5.0.0",
     "react-native-safe-area-context": "4.5.0",
@@ -56,7 +57,7 @@
     "react-native-toast-message": "^2.1.5",
     "react-native-web": "~0.18.10",
     "react-native-webview": "11.26.0",
-    "sentry-expo": "~6.0.0",
+    "sentry-expo": "~6.1.0",
     "yup": "^0.32.11"
   },
   "devDependencies": {

src/hooks/use-network-state.ts

@@ -0,0 +1,32 @@
+import * as Network from "expo-network";
+import { useEffect, useState } from "react";
+import { Toast } from "react-native-toast-message/lib/src/Toast";
+import * as Sentry from "sentry-expo";
+
+const useNetworkState = () => {
+  const [isOnline, setIsOnline] = useState(false);
+
+  useEffect(() => {
+    Network.getNetworkStateAsync()
+      .then((state) => setIsOnline(state.isInternetReachable ?? false))
+      .catch((err) => {
+        console.warn("Error getting network state", err);
+        Sentry.Native.captureException(err);
+      });
+  }, []);
+
+  useEffect(() => {
+    if (!isOnline) {
+      Toast.show({
+        type: "error",
+        text1: "No internet connection",
+        text2: "It seems you are offline",
+        autoHide: false,
+      });
+    }
+  }, [isOnline]);
+
+  return isOnline;
+};
+
+export default useNetworkState;

src/hooks/use-online-manager.ts

@@ -2,16 +2,26 @@ import NetInfo from "@react-native-community/netinfo";
 import { onlineManager } from "@tanstack/react-query";
 import { useEffect } from "react";
 import { Platform } from "react-native";
+import { Toast } from "react-native-toast-message/lib/src/Toast";
 
 export function useOnlineManager() {
   useEffect(() => {
     if (Platform.OS !== "web") {
       return NetInfo.addEventListener((state) => {
-        onlineManager.setOnline(
+        const isOnline =
           state.isConnected != null &&
-            state.isConnected &&
-            Boolean(state.isInternetReachable)
-        );
+          state.isConnected &&
+          Boolean(state.isInternetReachable);
+
+        if (!isOnline)
+          Toast.show({
+            type: "error",
+            text1: "No internet connection",
+            text2: "It seems you are offline (NetInfo)",
+            autoHide: false,
+          });
+
+        onlineManager.setOnline(isOnline);
       });
     }
   }, []);