No Internet Banner

App.js

@@ -1,10 +1,16 @@
-import "@expo/metro-runtime";
-import { useState, useEffect } from "react";
-import { ActivityIndicator } from "react-native";
-import { StatusBar } from "expo-status-bar";
+import React, { useState, useEffect } from "react";
+import {
+  View,
+  Text,
+  ActivityIndicator,
+  StyleSheet,
+  Platform,
+  StatusBar,
+} from "react-native";
 import { NavigationContainer } from "@react-navigation/native";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import AsyncStorage from "@react-native-async-storage/async-storage";
+import NetInfo from "@react-native-community/netinfo";
 
 import colors from "./src/constants/colors";
 import HomeScreen from "./src/screens/HomeScreen";
@@ -15,13 +21,15 @@ import EmbeddedFormScreen from "./src/screens/EmbeddedFormScreen";
 import VolunteerOpportunityScreen from "./src/screens/VolunteerOpportunityScreen";
 import EndScreen from "./src/screens/EndScreen";
 import HomeHeader from "./src/components/HomeHeader";
+import NoInternetBanner from "./src/components/NoInternetBanner";
 import { alertError } from "./src/utils";
 
 const Stack = createNativeStackNavigator();
 
 export default function App() {
   const [loading, setLoading] = useState(true);
   const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [isConnected, setIsConnected] = useState(true);
 
   useEffect(() => {
     (async () => {
@@ -34,60 +42,92 @@ export default function App() {
         setLoading(false);
       }
     })();
-  });
+
+    const unsubscribe = NetInfo.addEventListener((state) => {
+      setIsConnected(state.isConnected);
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, []);
 
   if (loading) {
-    return <ActivityIndicator size="large" />;
+    return (
+      <View style={styles.centeredContainer}>
+        <ActivityIndicator size="large" />
+        <Text>Loading...</Text>
+      </View>
+    );
   }
 
   return (
     <NavigationContainer>
-      <StatusBar style="light" />
-      <Stack.Navigator
-        initialRouteName={isLoggedIn ? "Home" : "Sign In"}
-        screenOptions={{
-          headerStyle: {
-            backgroundColor: colors.primary,
-          },
-          headerTintColor: colors.white,
-        }}
-      >
-        <Stack.Screen
-          name="Sign In"
-          component={SignInScreen}
-          options={{
-            headerBackVisible: false,
-          }}
-        />
-        <Stack.Screen
-          name="Home"
-          component={HomeScreen}
-          options={{
-            header: (props) => <HomeHeader {...props} />,
-          }}
-        />
-        <Stack.Screen name="Account" component={AccountScreen} />
-        <Stack.Screen
-          name="Volunteer Opportunity"
-          component={VolunteerOpportunityScreen}
-          options={{
-            title: null,
+      <StatusBar
+        // @ts-ignore
+        style="light"
+      />
+      <View style={styles.container}>
+        {!isConnected && <NoInternetBanner />}
+        <Stack.Navigator
+          initialRouteName={isLoggedIn ? "Home" : "Sign In"}
+          screenOptions={{
             headerStyle: {
-              backgroundColor: colors.black,
+              backgroundColor: colors.primary,
             },
+            headerTintColor: colors.white,
           }}
-        />
-        <Stack.Screen name="Volunteer Form" component={VolunteerFormScreen} />
-        <Stack.Screen name="Google Forms" component={EmbeddedFormScreen} />
-        <Stack.Screen
-          name="End"
-          component={EndScreen}
-          options={{
-            title: null,
-            headerBackVisible: false,
-          }}
-        />
-      </Stack.Navigator>
+        >
+          <Stack.Screen
+            name="Sign In"
+            component={SignInScreen}
+            options={{
+              headerBackVisible: false,
+            }}
+          />
+          <Stack.Screen
+            name="Home"
+            component={HomeScreen}
+            options={{
+              header: (props) => <HomeHeader {...props} />,
+            }}
+          />
+          <Stack.Screen name="Account" component={AccountScreen} />
+          <Stack.Screen
+            name="Volunteer Opportunity"
+            component={VolunteerOpportunityScreen}
+            options={{
+              title: null,
+              headerStyle: {
+                backgroundColor: colors.black,
+              },
+            }}
+          />
+          <Stack.Screen name="Volunteer Form" component={VolunteerFormScreen} />
+          <Stack.Screen name="Google Forms" component={EmbeddedFormScreen} />
+          <Stack.Screen
+            name="End"
+            component={EndScreen}
+            options={{
+              title: null,
+              headerBackVisible: false,
+            }}
+          />
+        </Stack.Navigator>
+      </View>
     </NavigationContainer>
   );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: colors.white,
+    paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
+  },
+  centeredContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+});

package.json

@@ -15,6 +15,7 @@
     "@expo/metro-runtime": "~3.2.3",
     "@react-native-async-storage/async-storage": "1.23.1",
     "@react-native-community/cli-server-api": "^13.6.9",
+    "@react-native-community/netinfo": "^11.3.2",
     "@react-native-google-signin/google-signin": "^12.2.1",
     "@react-navigation/native": "^6.1.17",
     "@react-navigation/native-stack": "^6.10.0",
@@ -24,6 +25,7 @@
     "expo-constants": "^16.0.2",
     "expo-linear-gradient": "^13.0.2",
     "expo-status-bar": "~1.12.1",
+    "netinfo": "^0.1.3",
     "react": "18.2.0",
     "react-native": "0.74.5",
     "react-native-animated-dots-carousel": "^1.0.2",

src/components/NoInternetBanner.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+import colors from "../constants/colors";
+
+const NoInternetBanner = () => (
+  <View style={styles.container}>
+    <Text style={styles.text}>No Internet Connection</Text>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: colors.danger,
+    paddingVertical: 10,
+    paddingHorizontal: 20,
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 1000,
+    justifyContent: "center",
+    alignItems: "center",
+    elevation: 2,
+  },
+  text: {
+    color: "white",
+    textAlign: "center",
+    fontWeight: "bold",
+  },
+});
+
+export default NoInternetBanner;