How can i render kind of skeleton placeholder items instead of whitespaces/blank?

[bloggerklik]

Hi, my items have SVG. This affects performance a lot. Blank occur when scrolling is too fast. To avoid this, I want to send an empty item component of the same height until the item component is ready. I think it would be a better interface than a blank. How can I do that? Thanks.

[ammarfaris]

Based on the description on FlatList here https://reactnative.dev/docs/flatlist it says:

In order to constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it's possible to scroll faster than the fill rate and momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application, and we are working on improving it behind the scenes.

So it would be really nice to be able to replace these blanks with skeleton placeholder as mentioned by @bloggerklik, please..

I'm encountering momentary blanks easily with fast-scrolling on my Samsung Note 9 ; my iPhone 12 seems to be okay.

running the latest flash-list library version, and Expo 48.

Found this, but this is for React web only, https://virtuoso.dev/scroll-seek-placeholders/

[tarcisioandrade]

same problem here...

[mohamed2m2018]

same problem

[mohamed2m2018]

any progress?

[natainditama]

any updates?

[jonhy751]

I need placeholder in renderItens, help me

[azlinaSanspaper]

Hi just add loader before the FlashList and put FlashList inside absolute View
<View style={{ flex: 1 }}>
<View style={{flex:1, height:'100%', width:'100%'}}>
{ your loader here} < / View>
<View style={{flex:1, height:'100%', position:'absolute', width:'100%'}}>

<FlashList
ref={flatListRef}
keyExtractor={(item, index) =>(item.uuid+"_"+index.toString())}
......

and dont forget add background color to the View of the render Item

loading.mp4

[vishal-nayak07]

Facing the same issue. i am using @shopify/flash-list version 1.5.0 in my react native app.
getting blank screen while scrolling.

#854 (comment)

[bloggerklik]

Strange but this solved my problem. There is no need for skeleton placeholder anymore. #854