react-native: SectionList throws Warning that is only for FlatList when using flexWrap
Reopening #17516
Is this a bug report?
yes
Have you read the Contributing Guidelines?
yes
Environment
Environment: OS: macOS High Sierra 10.13.2 Node: 9.3.0 Yarn: 1.3.2 npm: 5.6.0 Watchman: 4.9.0 Xcode: Xcode 9.2 Build version 9C40b Android Studio: 3.0 AI-171.4408382
Packages: (wanted => installed) react: 16.3.2 => 16.3.2 react-native: 0.55.4 => 0.55.4
Target Platform: iOS (11.2)
Steps to Reproduce
put flexWrap on the contentContainerStyle of a SectionList:
<SectionList
contentContainerStyle= {{
flexWrap: 'wrap',
flexDirection: 'row',
}}
....
/>
Expected Behavior
It should either display an error/warning message that says that SectionList doesn’t support flexWrap or just work.
Actual Behavior
It seems to work but shows a warning:
Warning: `flexWrap: `wrap`` is not supported with the `VirtualizedList` components.Consider using `numColumns` with `FlatList` instead.
The warning originates here: https://github.com/facebook/react-native/blob/a8391bde7d757d01521a6d12170fb9090c17a6a0/Libraries/Lists/VirtualizedList.js#L720
A warning from VirtualizedList shouldn’t refer to FlatList. This issue has been reported before in #15772 and #13460. People suggest that using flexWrap works fine for them, so probably the warning should be removed. Otherwise, the warning should be thrown from SectionList and not refer to FlatList, since SectionList doesn’t have a numColumns prop.
Reproducible Demo
https://snack.expo.io/rkNQldQEM
Sent with GitHawk
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 9
- Comments: 23 (3 by maintainers)
After reviewing the code for SectionList, FlatList, and VirtualizedList, it seems that this warning is thrown to indicate that the new list components do not support the use of flexWrap: “wrap” to create a grid layout within a list. As of react-native 0.55.4, the calculation used to determine which items should be displayed on the screen is reliant on all items being in a single column. When flexWrap: “wrap” is used, the viewabilityConfig calculation is unable to accurately determine which items in the list should be displayed on the screen while scrolling.
It may appear that flexWrap: “wrap” works when ignoring this warning, but if the number of columns in a row is too high and the height of the items is too low, then the calculation used to load new items to the viewport will not be triggered when scrolling up or down. This means that the number of viewable items in the list will be limited to the initial amount rendered.
Not being able to accurately calculate the size of the viewport in a VirtualizedList using flexWrap: “wrap” seems like a pretty big limitation that should be addressed. It would be great if there was a way to calculate the size of the viewport using viewabilityConfig and getItemLayout, which should also include the width of an item to calculate the number of items in a row, to accurately determine which items should appear on the screen when scrolling using flexWrap: “wrap”.
I believe the current implementation of FlatList’s numColumns functionality needs to be either modified or removed and supported in the VirtualizedList component. This change should enable all components that extend the functionality of VirtualizedList, like SectionList or FlatList, to support a grid layout for items using flexWrap: “wrap”, in conjunction with getItemLayout, to dynamically calculate which items that should appear on the screen.
I find the current implementation of numColumns in FlatList to be quite hacky. If the numColumns property is set for a FlatList component, a group of items the size of numColumns will be inserted into a container view to create a grid like effect. The height of the viewport is then calculated by the item height, or getItemLayout, and offset of numColumns to determine which items should appear on the screen when scrolling. It works, but does not address the root of my problem; a grid layout that supports dynamic reordering of items using LayoutAnimation. Inserting items into a subview prevents FlatList from being able to dynamically reorder items with LayoutAnimation and has forced me to revert back to using ListView, which supports flexWrap: “wrap” grid layouts, but is scheduled for depreciation. Hopefully a solution to this issue is presented before the ListView component is fully depreciated.
Still waiting for any reaction. Nothing about this issue is stale except that it didn’t receive any attention.
Imo, the error message is fine. SectionList and FlatList use VirtualizedList under the hood, hence the warning “
flexWrap: wrapis not supported with the VirtualizedList components”why not? You’re being given an advice that might be helpful to you or other people: Consider using
numColumnswithFlatListinstead. I find this perfect! The message tells you that something you did may not work, and even gives a suggestion what you could use!To sum up, I do not think this is an issue.
It’s no problem to get rid of the warning, but it’s an confusing warning and it’s unclear what impact it has.
Since there is no num-columns option for section list, I don’t know how this message helps. It is also utterly confusing since flex-wrap: wrap is supported and seems to work fine (except maybe there are performance issues, maybe not). So in summary it provides a warning that something is not supported even though it works, and suggests something that doesn’t provide an alternative. So it is certainly quite unideal. The 5x +1s also clearly show that this is confusing others as well.
@vonovak what would you consider doing with this warning? Ignoring it or does one need to understand that sections and columns are not supported by any React native component and one must find another native solution to have a high performance list with section headings and several columns, or some other workaround. Do you actually know anything about what the warning is based on?
Sent with GitHawk
I have the same problem