ScrollViews and FlatList doesn't work together

Question

I receive this error in my app:

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.

I have and index.js

<ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
   //...
{selected === 1 && <Component1 />}
{ selected === 2 && <Component2 />}
  </ScrollView>

Now inside my Component2 I have

<View>
 //....
<CustomFlatList data={dataPermission()}
</View>

I use this dataPermission to popolute "data"

and at the end in my CustomFlatList I use the FlatList

const renderItem = () => {
<TouchableOpacity style={[styles.row]}>
  //....
</TouchableOpacity>
 }


if (data.length == 0) {
    return (
      <View style={styles.container}>
        //....
      </View>
    )
  } else {
    return (
      <View style={styles.container}>
        <FlatList data={data} renderItem={renderItem} />
      </View>
    )
  }

Now my problem is that I have used in the index.js a ScrollView with inside a FlatList and I suppose that is the problem.

In your opinion how can I do to fix this error?

Thank you

Answer 1

The error message is straight forward: You should never nest a FlatList inside a ScrollView . This is because the parent scroll action dominates the child scroll action .

This problem is easy to resolve. Replace the parent ScrollView with a normal View . The FlatList already supports scrolling. If you have multiple sections (ie different data sets), then you might want to use a SectionList .

Remark: You can usually achieve visually the same with a ScrollView as you could do with a FlatList BUT

ScrollView renders all its react child components at once, but this has a performance downside.

Thus, it is advised to use a FlatList whenever one want to render data inside a scrollable container.