/TypeScript/VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.

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.

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead

<SafeAreaView style={{flex: 1}}>
    <FlatList
      data={data}
      ListHeaderComponent={ContentThatGoesAboveTheFlatList}
      ListFooterComponent={ContentThatGoesBelowTheFlatList} />
</SafeAreaView>

-1

Source: stackoverflow.com

Virtualizedlists should never be nested inside plain scrollviews with the same orientation

<ScrollView>
    {data.map((item, index) => {
        ...your code
    }}
</ScrollView>

-1

Source: stackoverflow.com

Similar codes

1 vote271 views2 answers
How to get all elements of column in pandas dataframe
TypeScript
0 vote218 views1 answer
How to check if all elements are equal C#
TypeScript
0 vote219 views1 answer
Which electromagnetic radiation is used for heating and night vision equipment
TypeScript
19 votes260 views5 answers
Delete all documents in a collection mongodb
TypeScript
2 votes239 views2 answers
Props vue typescript
TypeScript
0 vote177 views1 answer
Cmd move file to parent folder
TypeScript
34 votes244 views3 answers
Serverless.ps1 cannot be loaded because running scripts is disabled on this system.
TypeScript
0 vote231 views1 answer
Create an array for looping typescript
TypeScript
1 vote230 views1 answer
Get a span inside a div with div id javascript
TypeScript
0 vote231 views1 answer
Components of cucumber bdd framework
TypeScript