search

Shopify / flash-list

A better list for React Native
https://shopify.github.io/flash-list/
MIT License
5.33k stars 275 forks source link

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

Open bloggerklik opened 1 year ago

bloggerklik commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

same problem here...

mohamed2m2018 commented 1 year ago

same problem

mohamed2m2018 commented 10 months ago

any progress?

natainditama commented 10 months ago

any updates?

jonhy751 commented 9 months ago

I need placeholder in renderItens, help me

azlinaSanspaper commented 9 months ago

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

https://github.com/Shopify/flash-list/assets/128111694/4bc76822-d3be-417f-8124-daeae4f82245

vishal-nayak07 commented 8 months ago

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

https://github.com/Shopify/flash-list/issues/854#issuecomment-1862178968

bloggerklik commented 8 months ago

Strange but this solved my problem. There is no need for skeleton placeholder anymore. https://github.com/Shopify/flash-list/issues/854