How To Build WordPress Client App with React Native Part #20: Saving Data to Cache

This series intends to show how I build an app to serve content from my WordPress blog by using react-native. Since my blog is talking about react-native, the series and the articles are interconnected. We will learn how to set-up many packages that make our lives comfortable and learn how to deal with WordPress APIs. Here, the most prominent features talked about in the book are the dark theme, offline mode, infinite scroll and many more. You can discover much more in this series. this inspiration to do this tutorial series came from the from instamobile React Native App Templates Here, we are going to save the article data to cache so that the users can still access some articles during offline mode. For that, we store the latest post into in five screens that have remote data. AsyncStorage Here, we are going to start with the file. Home.js In Home.js Here, we first import the package and package. We also need to set the cacheKey so that we can identify the cache data for each screen. NetInfo AsyncStorage NetInfo ; AsyncStorage ; cacheKey = ; import from '@react-native-community/netinfo' import from '@react-native-community/async-storage' const 'CacheData' Now, we need to update the functions that fetches the posts using following code: { networkState = NetInfo.fetch(); (!networkState.isConnected) { _cachedData = AsyncStorage.getItem(cacheKey); (!_cachedData) { ( , ); } try const await if const await if throw new Error "You're currently offline and no local data was found." Here, we first check the connection using the state of the module. If the connection is false then, we load the cache not found error. isConnected NetInfo Then, we load the data from the cache and set it to the posts data in order to display in the screen as shown in the code snippet below: cachedData = .parse(_cachedData); .setState({ : cachedData.post, : , }); } const JSON this lastestpost isFetching false If the connection is active, then we load the data from the WordPress API just as before as shown in the code snippet below: page = .state.page; response = fetch( , ); post = response.json(); AsyncStorage.setItem( cacheKey, .stringify({ post, }), ); let this const await `https://kriss.io/wp-json/wp/v2/posts?per_page=5&page= ` ${page} const await await JSON So, if we are online then we store the latest post to the for caching. So that, the same data can be loaded when we are offline. AsyncStorage In SinglePost.js Here, we do the same thing as the screen. The only difference is that we need to load a single post. Home.js For that, we are going to filter the posts in the cache before displaying the post data in the offline mode. In order to implement this, we need to use the code from the following code snippet: cachedData = .parse(_cachedData); post = cachedData.post.filter( value.id === post_id); .setState({ : post, : , : , }); const JSON let => value this post isloading false offline true In Categories.js We do the same thing in as on the Home.js screen. But, we need to change the as shown in the code snippet below: Categories.js cacheKey cacheKey = ; const 'CategoriesCache' In Bookmark.js We do the same thing in as on the screen. But, we need to change the as shown in the code snippet below: Bookmark.js Home.js cacheKey cacheKey = ; const 'Bookmark' Hence, we will get the following result in the emulator screens: As we can see, we can access the post data even when we are offline. The network info is also displayed. In Android Emulator In case of Android, If we go into offline mode then our app loses its connection to the metro bundler server. Hence, we will not be able to run our app in the offline. This is shown by the emulator simulation below: Now, in order to solve this issue, we need to run our application in the emulator without the development server like the metro bundler. For that, we need to make some configurations to our file in the folder. build.gradle './android/app/' In our file, we can see a large commented out block that explains which settings you can set in the map inside your gradle file. ./android/app/build.gradle project.ext.react We need to search for project.ext.react map in our gradle configuration file and add the entry as shown in the code snippet below: bundleInDebug: true project.ext.react = [ entryFile: , : , bundleInDebug: , ]project.ext.react = [ entryFile: , : , bundleInDebug: , ] "index.js" enableHermes false // clean and rebuild if changing true "index.js" enableHermes false // clean and rebuild if changing true This will configure gradle to actually bundle the JS code and assets and package those files into the APK instead of serving them up from the dev server. Now, if we run our app in the emulator, we will get the yellow warnings at the bottom. In order to prevent that, we need to add to following code: devDisabledInDebug: true project.ext.react = [ entryFile: , : , bundleInDebug: , : ] "index.js" enableHermes false // clean and rebuild if changing true devDisabledInDebug true Now, we can run our project in the Android emulator without the metro bundler server. Hence, we run the app using , we will get the following result in our Android emulator: react-native run-android As we can see, we can now run the app properly in offline mode. We can also see that the data is cached from the . AsyncStorage Note that, if we want our metro bundler to work then, we can simply remove the codes we added in the file. There are lots of advantages using a metro bundler development server like debugging and hot reloading. build.gradle Summary In this chapter, we learned how to implement the offline mode in the react native app. We used the netinfo package to display the offline icon in the header by checking the network status of the device. Then, we use the save package to handle the loading the data from cache or from the API. If the app is in offline mode, we display the cached data. We load the data into cache when we are online and we have the latest post. In this way, we successfully learned how to implement the offline mode in the app.