VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.
Here is a VirutalizedList -backed container implementation using FlatList:
import React from 'react';
import { FlatList } from 'react-native';
export default function VirtualizedView(props: any) {
return (
<FlatList
data={[]}
ListEmptyComponent={null}
keyExtractor={() => "dummy"}
renderItem={null}
ListHeaderComponent={() => (
<React.Fragment>{props.children}</React.Fragment>
)}
/>
);
}
Usage:
<VirtualizedView>
<Text>Anything goes here</Text>
<FlatList
data={data}
keyExtractor={keyExtractor}
renderItem={({item}) => <Item data={item} />}
onRefresh={refetch}
refreshing={loading}
onEndReached={concatData}
/>
</VirtualizedView>
This will show scrollbar when you rotate your iPhone, and also remove warning message and performance will be saved without any problem.