fix: 🐛 migrate courses to netInfo

Author: MatthysDev

challenges/data/03.md

@@ -9,23 +9,60 @@
 
 ## 👾 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 context `Network.tsx`
+
+You should check if the user is connected to the internet and display a message when the user is not connected.
+
+```javascript
+const NetworkContext = createContext<NetworkContextProps>(
+  {} as NetworkContextProps
+);
+
+export const NetworkProvider = ({ children }: PropsWithChildren) => {
+  const [isConnected, setIsConnected] = useState<boolean | null>(false);
+
+  useEffect(() => {
+    const unsubscribe = NetInfo.addEventListener((state) => {
+      setIsConnected(state.isConnected);
+    });
+
+    NetInfo.fetch().then((state) => {
+      setIsConnected(state.isConnected);
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [isConnected]);
+
+  return (
+    <NetworkContext.Provider value={{ isConnected }}>
+      {children}
+    </NetworkContext.Provider>
+  );
+};
 ```
 
+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).