Show a Full Screen Notification When the React Native App is Offline with useNetInfo Hook

Instructor: [0:00] You can think of offline support as having levels or tiers. It's important to choose the level of support based on the app we're actually building. Right now, we have no offline support.

[0:08] Meaning that even though our app relies on API requests, we don't check for network status, nor do we tell the user that they can't actually use the app while they're offline.

[0:16] If your app relies on API requests, the minimum we should build, before shipping your app, is a blocking notification to let the user know they need to be online to actually use your app. In the components directory, let's add a new file called App Offline Page.

[0:29] We'll import React from React, and stylesheet, text, and view from React Native. Export const app offline page. This will return a React functional component, and will be an error function returning a view with two lines of text inside it.

[0:43] First one saying, you are offline, and a second saying, please check your data connection. UXy's, whenever you show the user a full screen error, you need to tell them what they should do to get rid of it. At the bottom of the file, let's do const styles = stylesheet create.

[0:58] Let's add a container style. This will be flex one, justify content center, and align item center. We'll give our view style = styles.container. Let's do another style for the heading. This will be margin-top 20, font size 20, and text transform uppercase.

[1:14] Let's give our first text a style = styles.heading. Finally, a style for the text. This will be margin-top 15, font size 18, and color gray. We'll give this second text style = styles.text.

[1:29] Let's also import the status bar, and add status bar hidden to the component, to hide the status bar as we do in the app.tsx. React Native NetInfo is an open source library that will allow us to check whether the user is offline or not.

[1:42] Let's copy the installation command and paste it into the terminal. We'll also need to cd into the iOS directory and run pod install, and cd back to the root directory and rebuild the app.

[1:52] We can import the useNetInfo hook from the NetInfo library, and also our newly created App Offline Page. In our app component, we can destructure isConnected from the useNetInfo hook. Just above the return, we can check if isConnected is false.

[2:07] If so, return the App Offline Page. When I turn off my Internet and reload the app, I will see the app offline page. Turning my Internet back on and reloading the app, I will see the data again.

[2:18] One thing to note when dealing with anything offline, the simulators or emulators aren't going to give you the same experience as a real device. In particular, since this is a hook, this walk between the offline page and the app should happen immediately.

[2:30] When dealing with anything to do with offline, you should always check on a real device. I'm going to open Xcode and run this app on my real device. Here is the app running on my phone. You'll see that I'm getting a network error when trying to load the app.

[2:42] This is because when we initialize the Urql client, we are using a localhost API. Localhost is local to this device and not my phone.

[2:50] To get around this, ensure that your phone is connected to the same WiFi network as the computer you're running the API on. Then if you're on a Mac, open network preferences, and under WiFi, copy the local IP for your device. You can replace localhost with your local IP.

[3:06] When I reload the app on my phone, I can see the data and the bookmarks as expected. When I turn my WiFi off and go back to the app, I'm immediately presented with the offline page. When I turn my WiFi back on, I get shown the app content again.