/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 vote227 views1 answer
Execution failed for task ':app:lint'. > Lint infrastructure error
TypeScript
28 votes230 views4 answers
Install typescript
TypeScript
1 vote256 views1 answer
How to add custom snippets in emmet in visual studio code
TypeScript
0 vote228 views1 answer
HTML form inputs to excel spreadsheet [duplicate]
TypeScript
1 vote250 views1 answer
Script to see what tkinter fonts installed on system
TypeScript
4 votes223 views1 answer
How to find how many digits a number has in c++
TypeScript
0 vote228 views1 answer
How can you run your test in different environments
TypeScript
0 vote209 views4 answers
Symfony\Component\Debug\Exception\FatalThrowableError Type error: ReflectionFunction::__construct() expects parameter 1 to be string, array given
TypeScript
0 vote257 views2 answers
How to remove one object in an array of objects in mongoose
TypeScript
1 vote232 views1 answer
Node fetch exports is not defined
TypeScript