Android FlatList Full-Screen View: Flickering and Z-Fighting

[jfilter]

Hey dude,

thanks for your great work. The package is working very well on iOS but we have some problem when running under some very specific circumstances on Android.

I don't know how to describe in brief. If you need any other information, please don't hesitate to ask. I am more than willing to provide any additional context.

We make use of two scene with respectively one FlatList. The first scene is an overview of images. We show images on a 3x3 grid. Everything works fine. In the second scene, we show exactly the same images but in a full-screen view. Here are some strange problems. When we swipe through the images, we get like randomly images overlapping each other for some seconds. It looks like some Z-Fighting/Flickering. I am not sure if it has something to do with the FlatList, but when we switch to <Image> everything is working fine. If you want, I can upload a GIF.

I use React-Native v0.43.0

Thanks for your help.

[wcandillon]

@jfilter Yes a gif would be nice. I don't have any experience with FlatList yet. This sounds quite curious, especially if it's android only. Could it be related to #49?

[tijp]

I have the same issue in react-native v0.44. It only occurs on android and it seems like the further down you go in the list, the worse it gets. When using the standard Image component there are no issues.

It looks something like this (it's s bit hard to see in a gif):

However I managed to fix it by defining the height of the list items. Hopefully that works for you too.

[AntAreS24]

I have the same issue in react-native v0.44. Android only. I'll see if I'm allowed to share the video (privately might be easier for me since it's a confidential app). The problem in my case is that all items in the list have different height and content. Some have images, some don't, some have small images and some large.

We resize all content based on the screen ratio and crop the image either in height or width depending on the orientation, so I cannot "fix" the height for all images.

[Selman555]

Could this be related somehow?
The disappearing items in the list all have images in them. They only disappear when those images haven't been cached before.