ERROR - VirtualizedLists should never be nested inside plain ScrollViews with the same orientation

10
votes

I'm working on a react-native app and I have to put a list of object in a Scrollview, so I use the FlatList component to do it. This is the piece of code that generates the error:

<ScrollView contentContainerStyle={style}>
   Other components
   <FlatList
       style={style}
       data={data}
       scrollEnabled={false}
       keyExtractor={(item, index) => index.toString()}
       renderItem={({ item, index}) => (somethings)}
   />
   Other components
</ScrollView>

The complete error is: 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.

3
react-native
This is just warning, not error. - Dipan Sharma
Sometimes it deactivates the touch, it is not considerable only warning - Alessandro Carughi
You can disable this warning so, it will not deactivate the touch, you will not face this in production. - Dipan Sharma
Here's an article with why this happens and how to solve it: nyxo.app/… - Tebo
@Tebo the article u attached wasn't work - Mohamed Raza

3 Answers

4
votes

Flatlist has its own ScrollView you can scroll through the list using that so there is no need to put a flatlist into a ScrollView that is why its giving a warning, the both scrollview will clash and one of them (mostly the parent one) works.

0
votes

You can solve the 2 vertical ones(I'm assuming their side by side, separated with a segemented control?) by using the same flat list and switching out the data when it's switched. If they're just two vertical flat list's one after another use the SectionList.

For the horizontal one you can try putting the Horizontal FlatList in the ListHeaderComponent of the vertical FlatList and see what happens. It can be janky if you use a vertical FlatList in a vertical scroll view but maybe with two different axis it might be ok. The other option is two only show a few items in the horizontal scrollview and have a "Show More".

The last option is too re design/rethink the page so it's not doing so much. On mobile less is more and developers/designers like to get in the mindset of porting desktop thinking onto mobile. Might be worth a shot.

-1
votes

The error is self explanatory and it should be in a developers best interest to avoid these kind of things even when it's just a false alarm. Your particular situation could use the following solution:

<FlatList
  data={data}
  keyExtractor={(item, index) => `key-${index}`}
  ListHeaderComponent={() => (
    <SomeComponents>
      ...Some components those need to be on top of the list
    </SomeComponents>
  )}
  ListFooterComponent={() => (
    <SomeComponents>
      ...Some components those need to be below the list
    </SomeComponents>
  )}
  renderItem={({ item, index}) => (somethings)}
/>

Another note, if you need more complex list that needs header and footer for the list itself, you can try SectionList.