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
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 (i.e. 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.