[FlatList] numColumns glitch when rerendering #12595
Comments
|
+1 Also noticing some flickering/stuttering with FlatList numColumns={2} in various situations (like when I just add a |
Summary:
We really need a better list view - so here it is!
Main changes from existing `ListView`:
* Items are "virtualized" to limit memory - that is, items outside of the render window are unmounted and their memory is reclaimed. This means that instance state is not preserved when items scroll out of the render window.
* No `DataSource` - just a simple `data` prop of shape `Array<any>`. By default, they are expected to be of the shape `{key: string}` but a custom `rowExtractor` function can be provided for different shapes, e.g. graphql data where you want to map `id` to `key`. Note the underlying `VirtualizedList` is much more flexible.
* Fancy `scrollTo` functionality: `scrollToEnd`, `scrollToIndex`, and `scrollToItem` in addition to the normal `scrollToOffset`.
* Built-in pull to refresh support - set set the `onRefresh` and `refreshing` props.
* Rendering additional rows is usually done with low priority, after any interactions/animations complete, unless we're about to run out of rendered content. This should help apps feel more responsive.
* Component props replace render functions, e.g. `ItemComponent: ReactClass<{item: Item, index: number}>` replaces `renderRow: (...) => React.Element<*>`
* Supports dynamic items automatically by using `onLayout`, or `getItemLayout` can be provided for a perf boost and smoother `scrollToIndex` and scroll bar behavior.
* Visibility callback replaced with more powerful viewability callback and works in vertical and horizontal mode on at least Android and iOS, but probably other platforms as well. Extra power comes from the `viewablePercentThreshold` that lets the client decide when an item should be considered viewable.
Demo:
https://www.facebook.com/groups/576288835853049/permalink/753923058089625/
Reviewed By: yungsters
Differential Revision: D4412469
fbshipit-source-id: e2d891490bf76fe14df49294ecddf78a58adcf23
|
Hmm, what kind of re-rendering are you doing? I don't know why it would blink unless you're doing something like rendering a placeholder briefly or something like that? You can see in the |
hramos
changed the title
|
Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally! If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:
If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution. |
|
I'm also experiencing this issue :/ @olofd did you manage to fix it? |
Description
When you set the property numColumns in the new FlatList and then rerender a column when eg. pressing that column, the entire row rerenders and you can see it rerendering, it blinks.
Reproduction
Set numColumns on FlatList and then cause a rerender.
Solution
Looking at the implementation it seems that each row is only one instance of CellRenderer in VirtualizedList. And the column-splitting is taken care of by the parent component FlatList.
My best guess is that this is somehow what's causing the problem. It seems that it might be fixed if each column in the row was a instance of CellRenderer.
Additional Information
The text was updated successfully, but these errors were encountered: