Update known-issues.md #712
Conversation
| When you scroll down a FlashList of components containing images, on iOS it will show the incorrect image and flicker to the correct image once the correct URI is loaded. To avoid this, you need to check if the URI ref of the current item rendering is the URI of the image you want to render. If it is not, then you need to render a blank image and then render the correct image once the URI is loaded. An example | ||
| of this is shown on this [gist here](https://gist.githubusercontent.com/naqvitalha/f13772b7bc5d361fb95cdd008f47042b/raw/41992420e40512ce10ea6189fea4a71b43cf020e/RecyclableImage.tsx). |
There was a problem hiding this comment.
I wouldn't include this as a known issue as we can't fix this as it's fundamentally tied to the recycling mechanism which is what makes FlashList fast. I'd instead add a note about this in the Recycling documentation section.
|
@karlazzampersonal did you try using edit: I cannot get neither I worked around this by adding a |
|
@karlazzampersonal, I looked into that issue with @tsapeta and the new This library has special treatment for recycling, with a new prop called https://docs.expo.dev/versions/unversioned/sdk/image/#recyclingkey And before you ask: it also works without Expo, you just need to install the core (which adds only 150KB overhead to your final app bundle, in case you're worried). BTW, it is the only library in the ecosystem so far that handles this correctly. Might also be interesting for you @LinusU |
|
@hirbod that sounds great! I've been eyeing I think that it would be nice to get this into the known-issues document anyhow, mentioning |
Description
I had an issue using FlashList with image components not rendering the correct image the first time that item renders as you scroll down or up. The fix is in the readme, its to display a white image until the correct Image URI renders.
I encountered this issue and received help from one of the shopify devs. I wanted to add it to the list of known issues as recommended by one of the shopify devs since this is an issue everyone who uses iOS will have with a similar use case of rendering images in a FlashList
Screenshots or videos (if needed)
Flickering before wrapping Image in RecyclableImage: (You can see the bar Gray Dog's img didn't render correctly at first)
trim.5F19E121-554C-463C-AE7C-873686D55D9E.mov
No flickering after wrapping Image in RecyclableImage:
RPReplay_Final1671156566.mov