c18cf5bd4a
Summary: VirtualizedList sets high priority rendering when scrolled to the top of a list even if the bottom of the rendered list is still far away and there's nothing further to render above. This causes severe non-responsiveness while dozens of items are waiting to be rendered and user inputs can't get through. The fix is simply to not consider it high priority to render more items when we reach the top and the first item has already been rendered, or when we reach the bottom and the last item has been rendered. The code change just splits the two cases (hitting the top and bottom) instead of combining them into one. I wrote a small application that switches between two FlatLists. Demo of the original VirtualizedList <img src="https://user-images.githubusercontent.com/3090032/39456709-2c87069e-4d1b-11e8-8535-5bda6d59400c.gif" width="270" height="480"> I'm clicking pretty often on the button, but you can see that it only switches lists a split second after the rendering is all done because the javascript thread was being blocked. Demo of the fixed VirtualizedList <img src="https://user-images.githubusercontent.com/3090032/39456844-00312448-4d1c-11e8-805f-cbe17aa3f95e.gif" width="270" height="480"> You can see this one is significantly more responsive than the previous one. The source code for the demo application is available [here](https://gist.github.com/jabbawookiees/ba93a4e7b4f9b8f3acbc157e4fd04877) [ GENERAL ] [ ENHANCEMENT ] [ Libraries/Lists/VirtualizedList.js ] - Prevent high priority rendering at the top or bottom of a list. Closes https://github.com/facebook/react-native/pull/19081 Differential Revision: D7933994 Pulled By: sahrens fbshipit-source-id: 13c9f73baeb3487620b720854a753287ac0aa1fa |
||
|---|---|---|
| .. | ||
| ListView | ||
| __flowtests__ | ||
| __tests__ | ||
| FillRateHelper.js | ||
| FlatList.js | ||
| MetroListView.js | ||
| SectionList.js | ||
| ViewabilityHelper.js | ||
| VirtualizeUtils.js | ||
| VirtualizedList.js | ||
| VirtualizedSectionList.js | ||
