react-native: Show a Full Screen Notification When the React Native App is Offline with useNetInfo Hook

(*1*)(*18*)

Trainer: [0:00] You’ll call to mind offline beef up as having ranges or tiers. It will be important to make a choice the extent of beef up in line with the app we are in fact construction. At this time, we don’t have any offline beef up.(*20*)

(*16*) Which means that despite the fact that our app depends on API requests, we do not test for community standing, nor can we inform the consumer that they are able to’t in fact use the app whilst they are offline.(*20*)

(*15*) In case your app depends on API requests, the minimal we will have to construct, ahead of delivery your app, is a blockading notification to let the consumer know they want to be on-line to in fact use your app. Within the parts listing, let’s upload a brand new document referred to as App Offline Web page.(*20*)

(*14*) We’re going to import React from React, and stylesheet, textual content, and examine from React Local. Export const app offline web page. This may occasionally go back a React useful element, and can be an error serve as returning a view with two traces of textual content inside of it.(*20*)

[0:43] First one announcing, you might be offline, and a 2d announcing, please test your knowledge connection. UXy’s, on every occasion you display the consumer a complete display screen error, you wish to have to inform them what they will have to do to eliminate it. On the backside of the document, let’s do const kinds = stylesheet create.(*20*)

[0:58] Let’s upload a container taste. This can be flex one, justify content material middle, and align merchandise middle. We’re going to give our view taste = kinds.container. Let’s do any other taste for the heading. This can be margin-top 20, font measurement 20, and textual content turn into uppercase.(*20*)

[1:14] Let’s give our first textual content a method = kinds.heading. In spite of everything, a method for the textual content. This can be margin-top 15, font measurement 18, and colour grey. We’re going to give this 2d textual content taste = kinds.textual content.(*20*)

[1:29] Let’s additionally import the standing bar, and upload standing bar hidden to the element, to cover the standing bar as we do within the app.tsx. React Local NetInfo is an open supply library that can permit us to test whether or not the consumer is offline or no longer.(*20*)

[1:42] Let’s reproduction the set up command and paste it into the terminal. We’re going to additionally want to cd into the iOS listing and run pod set up, and cd again to the foundation listing and rebuild the app.(*20*)

[1:52] We will be able to import the useNetInfo hook from the NetInfo library, and in addition our newly created App Offline Web page. In our app element, we will destructure isConnected from the useNetInfo hook. Simply above the go back, we will test if isConnected is fake.(*20*)

[2:07] If that is so, go back the App Offline Web page. Once I flip off my Web and reload the app, I can see the app offline web page. Turning my Web again on and reloading the app, I can see the information once more.(*20*)

[2:18] Something to notice when coping with the rest offline, the simulators or emulators don’t seem to be going to provide the similar enjoy as an actual instrument. Specifically, since this can be a hook, this stroll between the offline web page and the app will have to occur in an instant.(*20*)

[2:30] When coping with the rest to do with offline, you will have to all the time test on an actual instrument. I will open Xcode and run this app on my actual instrument. This is the app operating on my telephone. You can see that I am getting a community error when looking to load the app.(*20*)

[2:42] It is because once we initialize the Urql shopper, we’re the usage of a localhost API. Localhost is native to this instrument and no longer my telephone.(*20*)

(*3*) To get round this, be sure that your telephone is hooked up to the similar WiFi community as the pc you might be operating the API on. Then if you are on a Mac, open community personal tastes, and beneath WiFi, reproduction the native IP on your instrument. You’ll change localhost along with your native IP.(*20*)

(*2*) Once I reload the app on my telephone, I will see the information and the bookmarks as anticipated. Once I flip my WiFi off and return to the app, I am in an instant introduced with the offline web page. Once I flip my WiFi again on, I am getting proven the app content material once more.(*20*)

(Visited 1 times, 1 visits today)