Flashing/flickering occurs when changing image sources

I am having an issue with flashing when I have a FastImage componenet on which I am changing the source dynamically. My use case is that I am creating an image picker. At first I thought this was a pre-caching issue but it doesn’t appear to be as the issue occurs even with pre-caching configured. It seems the issue is that when the image source changes, FastImage renders a blank image momentarily and then renders the new image. The flashing only occurs for a fraction of a second but is quite distracting. It also occurs when loading local resources stored within the React Native app. In comparison React Native’s default Image component waits for the Image to finish caching before swapping in the new image so no flashing occurs on change however the image caching on React Native is not great which is why I would prefer to use Fast Image.

I’ve made a screen recording to demonstrate the issue. All of these images were local files btw, and the video was recorded on a physical iPhone 12 (not emulated) running a production build (it was not connected to Metro).

It seems the flash is not visible on every transition in this recording likely because of the frame rate, but when viewing in person the flash does occur on each transition.

Environment

System:
    OS: macOS 10.15.7
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 348.77 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.21.0 - /usr/local/bin/node
    Yarn: 1.19.1 - /usr/local/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.2, DriverKit 20.0, macOS 11.0, tvOS 14.2, watchOS 7.1
    Android SDK: Not Found
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6626763
    Xcode: 12.2/12B45b - /usr/bin/xcodebuild
  Languages:
    Java: 12.0.1 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.3 => 0.63.3 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

[jamesxabregas]

Yeah this isn’t an issue with keys or anything like that. I looked into that. The issue is that until an image is within FastImage’s cache this sort of flashing will occur when changing the image source. The solution as per the documentation is to preload the images of course, but realistically this is flawed for two reasons:

1. If you have dynamic images you can’t realistically cache every image. Imagine scrolling through a list of Unsplash thumbnails and then you click on one and it loads the large image into an existing image component. Each large image might be 500KB, you’re not going to preload 50 of these on the chance that one of them might be clicked.
2. There is no callback or promise on the preload function, it just returns void, so you can’t even program around this issue and change the image source after the preload has completed because there is no way of determining that.

I ended up devloping a hacky solution within my own project where I had two images laid on top of each other with the lower level one loading the image first and then firing an onLoad event that set the source of the upper layer image. This meant that image sources could be changed without the flash occuring during the loading phase. However, as stated this is hacky and not particularly performant. This really should be fixed at the native level.

If someone could point me in the right direction I’d be more than happy to tinker with this to get it right.

[hugoh59]

I am also experiencing this issue and looking for a solution. Thank you