Merge pull request #234 from flexbox/feature/netinfo

migrate to netinfo api

Author: MatthysDev

hackathon/spacecraft/App.tsx

@@ -1,10 +1,10 @@
 import React from "react";
-import { NetworkProvider } from "react-native-offline";
 import { Provider as PaperProvider } from "react-native-paper";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import Constants from "expo-constants";
 
 import { AuthenticationProvider } from "~/context/Authentication";
+import { NetworkProvider } from "~/context/Network";
 import { useAppearanceTheme } from "~/hooks/useAppearanceTheme";
 import { Navigator } from "~/navigation/Navigator";
 

hackathon/spacecraft/src/components/Offline.tsx

@@ -1,17 +1,23 @@
 import React from "react";
-import { StyleSheet, Text, View } from "react-native";
-import { useIsConnected } from "react-native-offline";
-import { ActivityIndicator } from "react-native-paper";
+import { StyleSheet, View, Text } from "react-native";
+import { ActivityIndicator, useTheme } from "react-native-paper";
+
+import { useNetwork } from "~/context/Network";
 
 export const Offline = () => {
-  const isConnected = useIsConnected();
+  const { isConnected } = useNetwork();
+  const { colors } = useTheme();
 
   return (
     <>
       {!isConnected && (
-        <View style={styles.container}>
-          <Text style={styles.message}>Offline, reconnection in progress…</Text>
-          <ActivityIndicator color="#991B1B" />
+        <View
+          style={[styles.container, { backgroundColor: colors.errorContainer }]}
+        >
+          <Text style={{ color: colors.error }}>
+            Offline, reconnection in progress…
+          </Text>
+          <ActivityIndicator color={colors.error} />
         </View>
       )}
     </>
@@ -20,18 +26,14 @@ export const Offline = () => {
 
 const styles = StyleSheet.create({
   container: {
-    alignItems: "center",
-    backgroundColor: "#FEE2E2",
-    borderRadius: 10,
-    flexDirection: "row",
-    justifyContent: "space-between",
-    marginHorizontal: 20,
     padding: 20,
+    marginHorizontal: 20,
     position: "absolute",
     top: 55,
     width: "90%",
-  },
-  message: {
-    color: "#991B1B",
+    borderRadius: 10,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
   },
 });

hackathon/spacecraft/src/context/Authentication.tsx

@@ -12,7 +12,7 @@ const AuthenticationContext = createContext<AuthenticationContextProps>(
 
 export const AuthenticationProvider = ({ children }: PropsWithChildren) => {
   const [user, setUser] = useState<boolean>(false);
-  console.log("file: Authentication.tsx ~ line 19 ~ user", user);
+  // console.log("file: Authentication.tsx ~ line 19 ~ user", user);
 
   return (
     <AuthenticationContext.Provider value={{ user, setUser }}>

hackathon/spacecraft/src/context/Network.tsx

@@ -0,0 +1,42 @@
+import NetInfo from "@react-native-community/netinfo";
+import type { PropsWithChildren } from "react";
+import React, { createContext, useContext, useEffect, useState } from "react";
+
+interface NetworkContextProps {
+  isConnected: boolean | null;
+}
+
+const NetworkContext = createContext<NetworkContextProps>(
+  {} as NetworkContextProps
+);
+
+export const NetworkProvider = ({ children }: PropsWithChildren) => {
+  const [isConnected, setIsConnected] = useState<boolean | null>(false);
+  // console.log("file: Network.tsx ~ line 19 ~ isConnected", isConnected);
+
+  useEffect(() => {
+    const unsubscribe = NetInfo.addEventListener((state) => {
+      // console.log("Connection type", state.type);
+      // console.log("Is connected?", state.isConnected);
+      setIsConnected(state.isConnected);
+    });
+
+    NetInfo.fetch().then((state) => {
+      // console.log("Connection type", state.type);
+      // console.log("Is connected?", state.isConnected);
+      setIsConnected(state.isConnected);
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [isConnected]);
+
+  return (
+    <NetworkContext.Provider value={{ isConnected }}>
+      {children}
+    </NetworkContext.Provider>
+  );
+};
+
+export const useNetwork = () => useContext(NetworkContext);