VirtualizedLists should never be nested inside plain ScrollViews error

[fluiddot]

Description

After the the RN 0.64 upgrade, I noticed that the app is showing the following error:

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead.

As far as I investigated, it looks related to rendering a FlatList component inside a ScrollView.

Reference: https://stackoverflow.com/questions/58243680/react-native-another-virtualizedlist-backed-container

Step-by-step reproduction instructions

1. Use a debug version that connects to the Metro server.
2. Open the editor.
3. Observe in the console that the mentioned error is logged.

Expected behaviour

No errors should be logged.

Actual behaviour

The mentioned error is logged.

Screenshots or screen recording (optional)

N/A

WordPress information

• WordPress version: N/A
• Gutenberg version: N/A
• Are all plugins except Gutenberg deactivated? N/A
• Are you using a default theme (e.g. Twenty Twenty-One)? N/A

Device information

• Device: iPhone 8 (simulator)
• Operating system: iOS 14.2
• WordPress app version: 779bb171e889ad527cc1c311675119e6596e0127

[dcalhoun]

React Native 0.71.0 includes changes to this error. It will be interesting to see if this issue goes away or becomes more pressing whenever we upgrade React Native.

Additionally, #48791 may impact any solution to this error.

[fluiddot]

React Native 0.71.0 includes changes to this error. It will be interesting to see if this issue goes away or becomes more pressing whenever we upgrade React Native.

Thanks for sharing the update @dcalhoun 🙇 ! If this issue will be considered an error in newer RN versions, my impression is that it will be more pressing and probably a blocker when we upgrade RN to 0.71+.

Additionally, #48791 may impact any solution to this error.

Seems clear that we'd need to stop passing the scrollEnabled prop in inner blocks to avoid to this warning. Most likely
the changes introduced #48791 would help us although we'd need to tweak it as it relies on that prop.

[dcalhoun]

If this issue will be considered an error in newer RN versions, my impression is that it will be more pressing and probably a blocker when we upgrade RN to 0.71+.

I believe it is already an error in our current release, 0.69. So, in theory, correctly leveraging scrollEnabled could resolve the error.

[dcalhoun]

Addressed by #53237.