/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 vote117 views1 answer
Ts remove first 0 number from string
TypeScript
1 vote123 views1 answer
Canactivate get current url
TypeScript
1 vote124 views1 answer
How to print the results of a command in a fil in linux
TypeScript
0 vote184 views1 answer
How to reorder boxplots in ggplot
TypeScript
0 vote129 views1 answer
Prevent anchor tag to move to up when we click on it
TypeScript
0 vote131 views1 answer
How to get value from observable
TypeScript
0 vote124 views1 answer
How to check string array is sorted or not in typescript
TypeScript
0 vote122 views1 answer
Typescript throw not implemented exception
TypeScript
0 vote127 views1 answer
Facade design pattern typescript
TypeScript
0 vote127 views1 answer
Stats normal
TypeScript