feat: Offline page

App.js

@@ -14,6 +14,7 @@ import { QRScreen } from "./pages/QRScreen";
 import { HomeScreen } from "./pages/HomeScreen";
 import { SettingsPage } from "./pages/SettingsPage";
 import { AboutPage } from "./pages/AboutPage";
+import { OfflinePage } from "./pages/OfflinePage";
 
 /* App component */
 
@@ -55,6 +56,11 @@ export default function App() {
           component={AboutPage}
           options={{ title: "About" }}
         />
+        <Stack.Screen
+          name="Offline"
+          component={OfflinePage}
+          options={{ title: "Offline" }}
+        />
         <Stack.Screen name="Settings" component={SettingsPage} />
       </Stack.Navigator>
     </NavigationContainer>

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@react-native-community/clipboard": "^1.5.1",
     "@react-native-community/masked-view": "^0.1.10",
+    "@react-native-community/netinfo": "^6.0.0",
     "@react-navigation/native": "^5.9.4",
     "@react-navigation/stack": "^5.14.5",
     "expo": "^41.0.0",

pages/HomeScreen.js

@@ -30,6 +30,9 @@ import {
   checkError,
 } from "../Pages";
 
+import NetInfo from "@react-native-community/netinfo";
+import { useFocusEffect } from "@react-navigation/native";
+
 import MenuItem from '../components/MenuItem';
 
 /* Root component */
@@ -47,7 +50,23 @@ export function HomeScreen({ navigation }) {
   // const [progress, setProgress] = useState("");
   const colorScheme = useColorScheme();
 
-  useEffect(() => {
+
+  useFocusEffect(() => {
+    NetInfo.fetch().then(state => {
+      if (!state.isConnected) {
+        navigation.navigate("Offline");
+      }
+    });
+  });
+
+  useEffect(() => {    
+
+    NetInfo.addEventListener(state => {
+      if (!state.isConnected) {
+        navigation.navigate("Offline");
+      }
+    });    
+
     if (text.length === config.codeMaxLength) {
       setText(text.replace(" ", "").toLowerCase());
       fetch(`https://interclip.app/includes/get-api?code=${text}`)

pages/OfflinePage.js

@@ -0,0 +1,75 @@
+/* React, React Native imports */
+
+import React, { useEffect } from 'react';
+import {
+  Image,
+  Text,
+  useColorScheme,
+  View,
+  Button
+} from 'react-native';
+
+/* Third party libraries */
+
+import NetInfo from "@react-native-community/netinfo";
+
+/* Local functions and variables */
+
+import { colors } from '../Pages';
+
+import {
+    styles,
+} from "../Pages";
+
+/* Root component */
+
+export function OfflinePage({ navigation }) {
+  const colorScheme = useColorScheme();
+
+  useEffect(() => {
+    NetInfo.addEventListener(state => {
+      if (state.isConnected) {
+        navigation.navigate("Home");
+      }
+    }); 
+  });
+
+  return (
+    <View
+      style={{
+        padding: 25,
+        flex: 1,
+        backgroundColor:
+          colorScheme === 'dark' ? colors.darkContent : colors.lightContent,
+      }}
+    >
+      <Image
+        style={styles.aboutImg}
+        source={{
+          uri: 'https://raw.githubusercontent.com/aperta-principium/Interclip/main/img/interclip_logo.png',
+        }}
+        alt="Interclip logo"
+      />
+      <Text
+        style={{
+          color: colorScheme === 'dark' ? 'white' : 'black',
+          fontSize: 20,
+          textAlign: 'center'
+        }}
+      >
+        It looks like you're offline...
+      </Text>
+      <Text
+        style={{
+          color: colorScheme === 'dark' ? 'white' : 'black',
+          marginTop: 35,
+          fontSize: 14,
+          textAlign: 'center'
+        }}
+      >
+        I can't help you with that, but you can try refreshing after you're connected.
+      </Text>
+      <Button title="Refresh" onPress={() => {navigation.navigate("Home")}} />
+    </View>
+  );
+}

yarn.lock

@@ -1812,6 +1812,11 @@
   resolved "https://registry.yarnpkg.com/@react-native-community/masked-view/-/masked-view-0.1.11.tgz#2f4c6e10bee0786abff4604e39a37ded6f3980ce"
   integrity sha512-rQfMIGSR/1r/SyN87+VD8xHHzDYeHaJq6elOSCAD+0iLagXkSI2pfA0LmSXP21uw5i3em7GkkRjfJ8wpqWXZNw==
 
+"@react-native-community/netinfo@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@react-native-community/netinfo/-/netinfo-6.0.0.tgz#2a4d7190b508dd0c2293656c9c1aa068f6f60a71"
+  integrity sha512-Z9M8VGcF2IZVOo2x+oUStvpCW/8HjIRi4+iQCu5n+PhC7OqCQX58KYAzdBr///alIfRXiu6oMb+lK+rXQH1FvQ==
+
 "@react-navigation/core@^5.15.3":
   version "5.15.3"
   resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-5.15.3.tgz#dce7090bf3ea0d302993d742c706825e495b812e"