React Native: How to implement a custom hook for network status in React Native?

1import { useState, useEffect } from "react";
2import NetInfo from '@react-native-community/netinfo';
3
4type NetworkStatus = {
5  isConnected: boolean;
6  isWifi: boolean;
7  isCellular: boolean;
8  type: string;
9};
10
11function useNetworkStatus(): NetworkStatus {
12  const [status, setStatus] = useState<NetworkStatus>({
13    isConnected: true,
14    isWifi: false,
15    isCellular: false,
16    type: "unknown",
17  });
18
19  useEffect(() => {
20    const unsubscribe = NetInfo.addEventListener((state) => {
21      setStatus({
22        isConnected: state.isConnected ?? false,
23        isWifi: state.type === "wifi",
24        isCellular: state.type === "cellular",
25        type: state.type,
26      });
27    });
28
29    return () => unsubscribe();
30  }, []);
31
32  return status;
33}
34
35// Usage
36function App() {
37  const { isConnected, type } = useNetworkStatus();
38
39  return (
40    <View>
41      <Text>Connected: {isConnected ? "Yes" : "No"}</Text>
42      <Text>Network: {type}</Text>
43    </View>
44  );
45}