migrate to netinfo api

Author: flexbox

hackathon/spacecraft/App.tsx

@@ -1,10 +1,10 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import Constants from "expo-constants";
 import React from "react";
-import { NetworkProvider } from "react-native-offline";
 import { Provider as PaperProvider } from "react-native-paper";
 
 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, View, Text } from "react-native";
-import { ActivityIndicator } from "react-native-paper";
-import { useIsConnected } from "react-native-offline";
+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>
       )}
     </>
@@ -26,12 +32,8 @@ const styles = StyleSheet.create({
     top: 55,
     width: "90%",
     borderRadius: 10,
-    backgroundColor: "#FEE2E2",
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
   },
-  message: {
-    color: "#991B1B",
-  },
 });

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);