/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 vote169 views1 answer
When new item added in array its not refreshing the list in ember
TypeScript
0 vote157 views1 answer
Centos remote desktop clients vs remote management for linux
TypeScript
1 vote152 views1 answer
Should robots have faces?
TypeScript
0 vote151 views6 answers
Python double check if wants to execute funtion
TypeScript
0 vote157 views1 answer
Does key repeats in hashmap
TypeScript
1 vote147 views1 answer
Laravel update if exists or create
TypeScript
11 votes178 views3 answers
Property 'active' has no initializer and is not definitely assigned in the constructor.ts(2564)
TypeScript
1 vote165 views1 answer
Remove contraints command psql
TypeScript
2 votes159 views3 answers
Mat dialog disable close
TypeScript
1 vote155 views1 answer
Typescript merge union type props
TypeScript