ImageCachePreloader does not work on first time preloading

[augustbjornberg]

I've realized that ImageCachePreloader doesn't work when "successfully" attempting to preload urls for the first time. By "successfully" i mean one preload attempt with an available internet connection.

Edit:
This bug emerged when upgrading from React Native 0.56.0 to React Native 0.59.8. Bug is confirmed to occur on iOS when starting from a fresh React Native 0.59.8 install.

---

Fastest way to reproduce bug

1. Run a fresh install with internet access
2. Wait for the preload to complete
3. Turn off internett access
4. Render a new CachedImage, image will not display

I've run all scenarios i can think of to narrow it down to this behavior. I've tried variations of using a ImageCacheProvider component, as well as using a standalone ImageCachePreloader.
In all scenarios tried, i enabled/disabled setting the urlsToPreload and/or disabling ImageCachePreloader.preloadImages. The bug is reproduced no matter if i have a combination of both ways of preloading enabled, or one at a time.

Observations

1. The ImageCachePreloader module seems to perform as intended when "successfully" attempting to preload for the second time.
2. I'm reading a lot of "[framework] CUICatalog: Invalid asset name supplied: '(null)'" readouts. Even when preloading was successful and images render as intended.
3. ImageCachePreloader is calling onPreloadComplete, and complete event for each item although no items were stored in the device file system when reproducing the bug.

Screencap of bug: https://vimeo.com/337032777

Notice how the images are neither displayed on the device, nor appear in the device file system until the second attempt. Result is the same if running from xcode again rather than reloading in-app.

Setup

Package	Version
react	16.8.3
react-native	0.59.8
react-native-cached-image	https://github.com/fungilation/react-native-cached-image.git#master

Holler if code is wanted.

---

Any idea what the root of the bug might be @fungilation, @kfiroo ?

[augustbjornberg]

After extensive testing i can confirm that the bug occurs on iOS when starting from a fresh React Native 0.59.8 install. The first time the app is launched, ImageCachePreloader will only preload the first URL in the urlsToPreload list. The bug does not seem to appear on consecutive launches.

Gist to files used to recreate bug.

Steps to recreate bug.

1. $ react-native init TestProject && cd TestProject
2. $ yarn add fungilation/react-native-cached-image
3. $ react-native link rn-fetch-blob
4. $ react-native link @react-native-community/netinfo
5. Update repo with files from gist. Files go in root of TestProject.
6. Install and launch App.
7. Wait for ImageCachePreloader complete event. Wait an extra minute for good measure.
8. Quit App.
9. Turn off internet access on device.
10. Launch App again.
11. ❌ App will now have nothing but the first image in the list of URLs to preload stored in cache. Images can be cycled through by clicking the "Next Image" button. Clicking it once will show the first image in the list, clicking the button consecutive times will not render an image as all images but the first in the urlsToPreload list have not been cached.

Testing further.

If you launch the app again with internet access on the device enabled the urlsToPreload list will be successfully cached.

1. Quit App.
2. Turn on internet access on device.
3. Launch App.
4. Wait for ImageCachePreloader complete event. Wait an extra minute for good measure.
5. Quit App.
6. Turn off internet access on device.
7. Launch App again.
8. ✅ Images are now being pulled from the device cache and displaying as intended.

[augustbjornberg]

Update

I've since posting the issue replaced react-native-cached-image with react-native-fast-image. After more than two weeks of waiting for a response from maintainers i finally decided it was time to call quits and move on.

React-native-fast-image has so far worked flawlessly, and also appears to perform noticeably better than react-native-cached-image while lacking none of the features. It was a fairly effortless procedure to replace the two. If anyone has questions on replacing react-native-cached-image with react-native-fast-image, i'm happy to help.