VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - 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 ScrollViews 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)}
/>
It essentially looks like this:
<SafeAreaView>
<ScrollView>
<FlatList />
<OTHER COMPONENTS />
</ScrollView>
</SafeAreaView>

Answer 1

Your component FlatList and ScrollView have the same orientation(vertical), so you need put your component inside a ScrollView with horizontal orientation like this:
<View>
<ScrollView nestedScrollEnabled={true} style={{ width: "100%" }} >
<View>
<ScrollView horizontal={true} style={{ width: "100%" }}>
<MyComponent />
</ScrollView>
</View>
</ScrollView>
</View>

Answer 2

The error is because you are using a FlatList inside a ScrollView.
The FlatList is already a scrollable component,
FlatList are accepting props like ListHeaderComponent for rendering header content and ListFooterComponent for rendering footer content. Here you can remove the ScrollView and instead of that you can only render FlatList for making whole page scrollable
You need to change your code as shown below:
const _renderHeader = () => <Text>Your Header</Text>
const _renderFooter = () => <Text>Your Footer</Text>
const _renderFooter = () => <Text>FlatList items</Text>
<SafeAreaView>
<FlatList
data={data}
keyExtractor={(item, index) => String(index)}
renderItem={_renderItem}
ListHeaderComponent={_renderHeader}
ListFooterComponent={_renderFooter}
ListFooterComponentStyle={styles.footerStyle} //If you need to give specific styles for footer component
ListHeaderComponentStyle={styles.headerStyle} //for header comp style
/>
</SafeAreaView>
You don't want to use a ScrollView when you are using a FlatList
You can check the official docs for more clarification