Flickering of images in FlatList at start of transition

[kennygoff]

I've been having some issues with images flickering at the start of the transition navigation. I have a transitions with one large shared image, 5 small ones, and some text, and the images occasionally flicker. I'm not sure if its a performance issue or an issue with opacity/styling or even the transition calculations.

I put together a snack on Expo with a somewhat similar structure to what I have in the app: https://snack.expo.io/@kennygoff/fluidtransition-test

Here is a GIF of the issue in action on device: https://gph.is/2NHoobv

In the GIF, it completely messes up the transition, which is pretty rare. The second open, where the main image and one of the smaller images flicker invisible is what happens often for me. It's not consistent, but clicking open and close on items for about a minute will get it to happen normally.

Happens on iOS and Android, both simulator and device.

Possibly related:

• https://github.com/fram-x/FluidTransitions/issues/80
• https://github.com/fram-x/FluidTransitions/issues/79

[chrfalch]

Hi @kennygoff! Thanks for submitting an issue with a test project! When opening the snack on my iPhone I didn't notice any flickering at all (the GIF you sent didn't look good, I admit that).

Would it be possible for you to upgrade to the latest version of the package (as of today this will be 0.2.71) and see if the release build flickers (We've noticed that sometimes the debug environment slows the executing down a bit, causing some flicker to occasionally occur).

[kennygoff]

Thanks @chrfalch! I tested running using 0.2.71 on device in release mode and the issue still occurs. I did realize my Expo Snack which was a fork of someone else's was running 0.2.0 whereas my app was running 0.2.6. I will try to update the Snack to the latest version when I get a chance and get back to you.

[kennygoff]

@chrfalch I've updated the snack (same link) to 0.2.6 to reflect what's in my app, but I wasn't able to get the latest version of the library running on Expo Snack. Changing the version to 0.2.71 or 0.2.72 in the package.json of the snack fails to install.

[nlbgt]

@chrfalch @kennygoff I've run into a similar issue. If you slow down the transition you are much more likely to see the issue.

https://snack.expo.io/@nlbgt256/fluidtransition-test

I've noticed it much more using the back button but it certainly happens from time to time going from the list to the detail page.

Here is a quick video of the issue as well: https://slack-files.com/T02LRKTL7-FD8QGD59U-75212c5bd8

[chrfalch]

Hi @nlbgt, I'm aware of the small "flicker"-issue when running the transition in slo-mo; would you please test to see if this is an issue on a real device with full-speed as well?

[cbrewer1689]

I'm seeing a flicker as well when using images. Slow motion is not enabled, debug disabled and on a real iPhone X. It is intermittent, but the flicker does happen more than not.

[chrfalch]

Try switching to the FastImage component - the built-in Image component has some issue with flickering.

[cbrewer1689]

Thanks @chrfalch! That did really help with the flickering and smoothing out of the images.