react-native: Add Read-Only Offline Support Using the Offline Exchange from urql GraphCache

(*1*)

Kadi Kraman: [0:00] Lately, when the person’s software is offline, we display a full-screen message. To ensure that the person so that you can see the previous information whilst offline, we want to convert this full-screen web page to simply surround a part of the display.

(*20*) In our elements listing, let’s create a brand new report and phone it, AppOfflineMessage.tsx. Right here we’re going to import React from react and import View, Textual content, and StyleSheet from react-native. We will export const AppOfflineMessage.

[0:25] This will probably be a React practical part and an arrow serve as. We will go back a view with a textual content announcing, “You’re offline”. Beneath the part, we’re going to do a const kinds = Stylesheet.create. We will want a container taste and a textual content taste.

[0:41] For the container, we’re going to upload a backgroundColor black, justifyContent middle, alignItems middle, and paddingVertical 20. As our container background colour goes to be black, let’s make the textual content colour white.

[0:53] We will want to assign the view taste to be the kinds.container, and the textual content taste to be kinds.textual content. Heading again to the app.tsx, we’re going to want to import the AppOfflineMessage from our elements listing.

(*16*) Scrolling all the way down to our render serve as, let’s upload it beneath the navigation container. Let’s import SafeAreaProvider from react-native-safe-area-context.

[1:14] Let’s wrap our complete app right into a SafeAreaProvider. Heading again to the AppOfflineMessage, let’s import useSafeAreaInsets from react-native-safe-area-context. Let’s do const insets = useSafeAreaInsets.

(*13*) If we console.log the insets, this may increasingly let us know the place at the display it’s secure to render content material. Particularly, since I am the usage of an iPhone 13 simulator, this may increasingly inform me that the ground 34 and the highest 47 show issues at the display are spoken for. We should not render any content material there.

(*14*) Let’s convert this taste into an array. Let’s go in paddingBottom to be insets.backside. This may occasionally make certain that the offline message will probably be correctly visual without reference to the software. There may be now an excessive amount of area right here.

[1:58] Let’s additionally upload a marginTop of minus the ground inset divided by means of two, which can make this play well with the ground tab. Within the app.tsx, fairly than showing the entire web page offline message, let’s as an alternative conditionally, if isConnected is fake, go back the offline message. Differently, not anything.

(*11*) Virtually the whole lot we’d like for offline beef up is already packaged within the Graphcache change package deal. Alternatively, as we are the usage of React Local, we will be able to’t use the default garage, package deal with the change.

[2:26] Urql has a separate library for the default React Local garage. This has two peer dependencies, Async Garage and NetInfo. We have now already put in NetInfo. Let’s additionally set up Async Garage. Move into the doctors web page.

[2:38] We will replica the set up command, paste it into our terminal, set up the local dependencies, cd again to the foundation listing, and rebuild the app. In any case, we’re going to want to yarn upload Urql/storage-rn. In our app.tsx, let’s import makeAsyncStorage from our garage React Local library.

[2:55] Let’s create const garage = makeAsyncStorage. We will optionally go in a configuration object. This may occasionally come with the knowledge key, for instance, my-app-data, and the metadata key, for instance, my-app-metadata. Those are the Async Garage keys used to retailer the knowledge.

[3:11] In any case, we will be able to make a choice the max age, which is how lengthy you need to stay the knowledge in a cache. As an example, five days. Scrolling up, as an alternative of uploading cacheExchange from the Graphcache, let’s import the offlineExchange.

[3:24] Let’s exchange the cacheExchange in our exchanges array with the offlineExchange. We will additionally want to go the garage as a configuration object to the offlineExchange. The entirety else stays the similar.

[3:34] After I flip off my WiFi and I shut my in the community working API server and reload the simulator, I will be able to get the offline message. I will be able to nonetheless see the house web page information that I considered previous.

(*4*) Alternatively, once I faucet at the tale main points, you can understand that the writer and the entire tale do not get loaded. It’s because I hadn’t checked out this tale main points modal after putting in the offlineExchange, which means that this information hasn’t been stored within the cache.

(*3*) Let’s get started the API once more and activate WiFi. After I open the tale main points, and feature the tale main points loaded in. If I flip off my Web once more and prevent the API and reload the app, taking a look on the first tale, I do not get the tale main points.

(*2*) Taking a look at the second one tale, I do, as a result of the main points of this tale have been stored within the cache.

(Visited 1 times, 1 visits today)