VirtualizedLists should never be nested error - react-native

Question

I'm building a mobile application with React Native, and I have a ScrollView inside one of the pages.
The problem is that I have in this page a FlatList so when I go to that page, I get this error:
VirtualizedLists should never be nested inside plain ScroolViews with the same orientation... The thing is, I set the ScrollView nestedScrollEnabled to true and I also set the FlatList's scrollEnabled to false because I don't really need the scroll there (I'm using it to render items from an enum) so I thought that should fix the error, but the error still persist.
It looks like this:
<ScrollView showsVerticalScrollIndicator={false} nestedScrollEnabled={true}>
<MyComponent />
</ScrollView>
And MyComponent has this FlatList:
<FlatList
scrollEnabled={false}
style={{padding: 8,marginBottom: 8,}}
data={categories}
numColumns={numOfColumns}
keyExtractor={category => category}
renderItem={item => renderItem(item.item)}
/>

Answer 1

Can you try to add the property nestedScrollEnabled={true} to both the parents and the children:
<ScrollView showsVerticalScrollIndicator={false} nestedScrollEnabled={true}>
<MyComponent />
</ScrollView>
<FlatList
nestedScrollEnabled={true}
scrollEnabled={false}
style={{padding: 8,marginBottom: 8,}}
data={categories}
numColumns={numOfColumns}
keyExtractor={category => category}
renderItem={item => renderItem(item.item)}
/>

Answer 2

You can use the ListHeaderComponent and ListFooterComponent of the FlatList to render the other parts inside the scrollView. Using a FlatList inside a scrollview limits the performance of the FlatList.
<FlatList
ListHeaderComponent={
<>
<AboveFlatList />
</>
}
data={yourData}
renderItem={this.renderComponents}
...
...
ListFooterComponent={
<>
<BelowFlatList />
</>
}
/>