Merge pull request #242 from flexbox/fix/netInfo

fix: 🐛 migrate courses to netInfo

Author: MatthysDev

challenges/data/03.md

@@ -9,23 +9,28 @@
 
 ## 👾 Before we start the exercise
 
-- [ ] We are going to install and use `react-native-offline`
-- [ ] Have a look at [`react-native-offline` documentation](https://github.com/rgommezz/react-native-offline)
+- [ ] We are going to install and use `@react-native-community/netinfo`
+- [ ] Have a look at [`@react-native-community/netinfo` documentation](https://github.com/react-native-netinfo/react-native-netinfo)
 
 ## 👨‍🚀 Exercise 3
 
-![Offline Example](https://raw.githubusercontent.com/reactgraphqlacademy/twitter-clone-native/master/src/exercice/05/offline-example.gif)
-
 - [ ] Install the library
 
 ```console
-npm install react-native-offline
+yarn add @react-native-community/netinfo
+```
+```console
+npm install --save @react-native-community/netinfo
 ```
 
+- [ ] Create a new file `Network.tsx` and [paste this component](https://raw.githubusercontent.com/flexbox/react-native-workshop/main/hackathon/spacecraft/src/components/exercice/Network.tsx)
+
+You can use console.log to check if the user is connected to the internet.
+
 - [ ] Update the entry point of your application to add a new provider
 
 ```javascript
-import { NetworkProvider } from 'react-native-offline';
+import { NetworkProvider } from '~/contexts/Network';
 ```
 
 `NetworkProvider` will injects the network state to children components via [React Context](https://reactjs.org/docs/context.html).

hackathon/spacecraft/src/components/exercice/Network.tsx

@@ -0,0 +1,30 @@
+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);
+
+  useEffect(() => {
+    // use `NetInfo.addEventListener` to listen to network status changes
+    // use `NetInfo.fetch` to get the current network status
+    // store the network status in the `isConnected` state
+    return () => {
+      // unsubscribe from the network status listener
+    };
+  }, [isConnected]);
+
+  return (
+    {/* Add `NetworkContext.Provider` with the connection status value */ }
+  );
+};
+
+export const useNetwork = () => useContext(NetworkContext);