question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

SectionList throws Warning that is only for FlatList when using flexWrap

See original GitHub issue

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.0.0 => 16.0.0 react-native: 0.50.4 => 0.50.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.

simulator screen shot - iphone 6 - 2018-01-10 at 11 52 27

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

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:7
  • Comments:5

github_iconTop GitHub Comments

1reaction
MrLohcommented, Feb 24, 2018

This is still a problem. I marked the line in the source code that causes it. This bot gets more aggressive every time.

0reactions
MrLohcommented, Feb 24, 2018

Reopened in new issue #18079

Read more comments on GitHub >

github_iconTop Results From Across the Web

SectionList throws Warning that is only for FlatList when using ...
It seems to work but shows a warning: Warning: `flexWrap: `wrap`` is not supported with the `VirtualizedList` components.Consider using ` ...
Read more >
React Native FlatList Warning - scrollview - Stack Overflow
However the issue is that every time it's rendering the list, im getting this log warning: Warning: `flexWrap: `wrap`` is not supported with...
Read more >
How to Fix 'VirtualizedLists should never be nested inside ...
In this article, we will explore the reasons behind this warning and provide solutions for fixing it. Virtualized lists, such as SectionList and...
Read more >
React Native June 2017 (v0.46.0) released
... Render section footer in SectionList sections with no data (f702cbe); ART: Call toString on fontWeight else throws error if passed an ...
Read more >
React Native Unique Key | React Native Sports App Tutorial
After saving this however, you'll get a warning that states, flexWrap: wrap is not supported with the VirtualizedList components. Consider using numColumns with...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found