Advanced: react-native-expo-image-cache (I believe it does not work)

React Native
1

DEVELOPER NOTES

Alternative; GitHub - wcandillon/react-native-expo-image-cache: React Native Image Cache and Progressive Loading based on Expo
***** Stores images in the file system of the device. *****
$ npm i react-native-expo-image-cache
react-native-expo-image-cache@4.1.0

This component relies on Expo Blur
$ expo install expo-blur
added 1 package from 1 contributor and audited 1083 packages in 3.276
NOTE: Has a slightly different API than React Native

Code updates:
Card.js

BEFORE:
import { Image } from ‘react-native’;
function Card({ title, subTitle, imageUrl, onPress }) {
<Image style={styles.image} source={{uri: imageUrl}} />
AFTER:
import { Image } from ‘react-native-expo-image-cache’;
function Card({ title, subTitle, imageUrl, onPress, thumbnailUrl }) {
<Image style={styles.image} tint=“light” preview={{ uri: thumbnailUrl }} uri={imageUrl} />

Updated ListingsScreen.js

Added the following param to <Card … />
thumbnailUrl={item.images[0].thumbnailUrl}

SHUT DOWN backend
Restart App: Card images should be retrieved from the device’s local storage.
Works for a few minutes, then FAILS to after about 5 minutes (which is the time limit in cache.js)

CONCLUSION:

  • react-native-expo-image-cache does NOT Work, or
  • device local storage only caches for about 5 minutes as well.
  • Too close for a coincidence; therefore, (I believe react-native-expo-image-cache does not work)

THE WAY TO TELL FOR SURE:

  • Take out the usage of cache.js, then run the App: TODO
2

Check out my video tutorial on how to make the image cache to work on the “Done With It” app:
https://www.youtube.com/watch?v=7seTV–hR44