/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

0 vote187 views1 answer
Ts construct signature
TypeScript
4 votes187 views2 answers
Enable Template Path Hints for Storefront
TypeScript
27 votes192 views3 answers
Npx react typescript
TypeScript
0 vote187 views1 answer
Components of selenium
TypeScript
0 vote189 views1 answer
Adoni migrate
TypeScript
1 vote186 views1 answer
Node_modules/@apollo/client/react/context/ApolloConsumer.d.ts:1:19 - error TS2307: Cannot find module 'react' or its corresponding type declarations
TypeScript
5 votes183 views1 answer
Vscode change comments color
TypeScript
1 vote226 views1 answer
Conditional (click) action angular
TypeScript
1 vote183 views1 answer
Typescript check if string is number
TypeScript
0 vote191 views1 answer
How-do-i-navigate-to-a-parent-route-from-a-child-route
TypeScript