st0ffern / react-native-optimized-flatlist

Optimization for complex and slow React Native FlatLists
MIT License
259 stars 47 forks source link

every item is getting rendered until scroll #3

Closed jcharbo closed 6 years ago

jcharbo commented 7 years ago

Hi @stoffern , thank you for your work. Maybe I'm misunderstanding the intended usage but I would expect this control to only render the currently visible rows but it seems that it is rendering all. For example, if you create 30 rows and set them to a height so that only 5 fit on the screen, in the logs I see all 30 mounting, rendering, loading images, etc. It's only after I scroll that I see any disappear (the ones scrolled out of the top). Is this the intended behavior?

thanks

st0ffern commented 7 years ago

They all mount, but if they are not in view, it will render as a empty frame.. https://github.com/stoffern/react-native-optimized-flatlist/blob/master/src/FlatListItem.js#L35-L44

jcharbo commented 7 years ago

It doesn't appear that way to me. If I use the following in my renderitem the onloadend fires for every item. <Image source={{uri:'http://www.abc.net.au/news/image/7369752-16x9-940x529.jpg'}} style={{height:50,width:50}} onLoadEnd={()=>this.loaded()} />

jcharbo commented 7 years ago

@stoffern I think what's happening is that every item has isViewable=true when the list is first loaded.

st0ffern commented 7 years ago

@jcharbo thats true.

Also i would like to see that everyone that has problems with FlatList tries something out. I think i have solved the performance issue with tha right code on FlatList.

st0ffern commented 6 years ago

fixed here: d04c669a29c85e7560b2172753fa6572ed8b2951