React-Native another VirtualizedList-backed container

Question

After upgrading to react-native 0.61 i get a lot of warnings like that:

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

What is the other VirtualizedList-backed container that i should use, and why is it now advised not to use like that?

Could you entitle your question the full warning message ? because it is not so easy to find with your current title. — Etienne Tonnelier, Oct 15 '20 at 10:58
Just for anyone who might have the same problem as me, it was because i encapsulated a `` inside a `` — Jarrett, Jan 19 '21 at 07:40
In case of not having more items in FlatList, just render items inside of ScrollView and not use FlatList — Mohammad Momtaz, Nov 06 '21 at 06:23
If you have `horizontal={false}` (=>vertical) for `FlatList` inside`ScrollView`, just replace the `ScrollView` with regular `View` (if you have more content besides `FlatList`). Don't have any other paralel content in the wrapping view? => simply don't wrap the `FlatList` in the `ScrollView` at all ;-) (`SafeAreaView` is iOS only) — jave.web, Mar 14 '22 at 02:36

score 157 · Accepted Answer · answered Oct 20 '19 at 22:08

157

If someone's still looking for a suggestion to the problem that @Ponleu and @David Schilling have described here (regarding content that goes above the FlatList), then this is the approach I took:

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

You can read more about this here: https://facebook.github.io/react-native/docs/flatlist#listheadercomponent

Hopefully it helps someone. :)

answered Oct 20 '19 at 22:08

Afraz Hussain

2,183
1
11
17

2

Do you know why this should be better then the way the warning gets produced? – David Schilling Nov 13 '19 at 07:06
9

@DavidSchilling because the way you tried results with 2 scroll containers: `ScrollView` and `FlatList` - you'll get inconsistent scroll behaviour. Way presented in this answer results in only 1 scroll container and in Header/Footer you can put any view, no matter how complex. – Variag Nov 14 '19 at 08:33
I am using function component, and got ContentThatGoesAboveTheFlatList re-render issue. Any solution on this – Ponleu Nov 22 '19 at 08:04
1

@Ponleu You can memoize your ContentThatGoesAboveTheFlatList component by using the `useMemo` hook provided by React, to avoid re-renders. More information here: https://reactjs.org/docs/hooks-reference.html#usememo Let me if it’s helpful. :) – Afraz Hussain Nov 23 '19 at 06:09
6

I need two flat lists with different data sets in one page... what should i do? – Athar Rajpoot Oct 22 '20 at 12:01
What if you need to be able to scroll, and still present two FlatList (with columns) in the middle of the content? A bit like a webpage structure: Intro / FlatList / Middle section / FlatList / Footer section ? – Binajmen May 19 '21 at 13:21
@Binajmen No feature to support that out of the box, as far as I'm aware. Did you consider just trying out 2 FlatLists for your example? 1 on the top with just the header component, and 2nd one on the bottom with both header and footer components? I don't see how that would result in any error. – Afraz Hussain May 19 '21 at 19:16
1

@AtharRajpoot this method still works for that just have the ListFooterComponent be the FlatList of the second data set. If you want a header for the second data set, just wrap it in a fragment with the flatlist – Ryker Jun 07 '21 at 16:31
@Ryker Without the Scrollview as the parent you'd have to enable scrolling for both Flatlists creating an unsynchronized scroll – 6rchid Nov 06 '21 at 05:51
I have an array of Flatlist. How can I do that? – Md. Robi Ullah Sep 05 '22 at 16:30

Edward D'Souza · Answer 2 · 2020-06-01T19:18:20.507

Just in case this helps someone, this is how I fixed the error in my case.

I had a FlatList nested inside a ScrollView:

render() {
    return (
        <ScrollView>
            <Text>{'My Title'}</Text>
            <FlatList
                data={this.state.myData}
                renderItem={({ item }) => {
                    return <p>{item.name}</p>;
                }}
            />
            {this.state.loading && <Text>{'Loading...'}</Text>}
        </ScrollView>
    );
}

and I got rid of the ScrollView by using the FlatList to render everything I needed, which got rid of the warning:

render() {
    const getHeader = () => {
        return <Text>{'My Title'}</Text>;
    };

    const getFooter = () => {
        if (this.state.loading) {
            return null;
        }
        return <Text>{'Loading...'}</Text>;
    };

    return (
        <FlatList
            data={this.state.myData}
            renderItem={({ item }) => {
                return <p>{item.name}</p>;
            }}
            ListHeaderComponent={getHeader}
            ListFooterComponent={getFooter}
        />
    );
}

To whoever is looking for the best answer: "Go for this one. Use only one FlatList." — cmcodes, Jun 15 '20 at 14:14

Nisharg Shah · Answer 3 · 2020-10-02T18:29:06.663

58

The best way is to disable that warning because sometimes Flatlist need to be in ScrollView.

UPDATE RN V0.63 ABOVE

YellowBox is now changed and replace with LogBox

FUNCTIONAL

import React, { useEffect } from 'react';
import { LogBox } from 'react-native';

useEffect(() => {
    LogBox.ignoreLogs(['VirtualizedLists should never be nested']);
}, [])

CLASS BASED

import React from 'react';
import { LogBox } from 'react-native';

componentDidMount() {
    LogBox.ignoreLogs(['VirtualizedLists should never be nested']);
}

UPDATE RN V0.63 BELOW

FUNCTIONAL

import React, { useEffect } from 'react';
import { YellowBox } from 'react-native';

useEffect(() => {
    YellowBox.ignoreWarnings(['VirtualizedLists should never be nested']);
}, [])

CLASS BASED

import React from 'react';
import { YellowBox } from 'react-native';

componentDidMount() {
    YellowBox.ignoreWarnings(['VirtualizedLists should never be nested']);
}

edited Oct 02 '20 at 18:29

answered Sep 24 '20 at 17:50

Nisharg Shah

16,638
10
62
73

1

I had a button that opens a dialog and within that there was an input box. When I was clicking on input, dialog was immediately disappearing. So I had to wrap FlatList with ScrollView. That was solving the issue but causing the warning. None of the solutions I have found worked. So in this case I totally agree with Nisharg. Please inform me if somebody find a solution for this. – Sabri Meviş Sep 29 '20 at 13:33
1

This seems the only way to go for me, nothing else suggested helps me, using another component apart from a scrollview just doesn't work!! – Punter Bad Nov 27 '20 at 07:47
21

You know, warnings are there for a reason, you shouldn't just ignore them... – Rafael Tavares Dec 03 '20 at 13:29
Agreed but Sometimes we need to because of some low version dependencies – Nisharg Shah Dec 03 '20 at 13:31
5

@RafaelTavares, So why these ignored functions exist at all? – Mohsen Zia Jan 02 '21 at 09:40
LogBox.ignoreLogs(['VirtualizedLists should never be nested']); doesn't hide the log. Has the instructions changed to hide error logs? – Varun Gupta Oct 13 '21 at 10:46
That's not a fix... – tinmarfrutos Oct 22 '21 at 07:09
2

This doesn't work with react native 0.66 – Mehdi Faraji Oct 29 '21 at 16:29
1

it doesn't answer the question ! if, for any warning, the answer is: disable the warning, then... I don't have a then. – arnaudambro Oct 30 '21 at 07:04
it's not a solution to ignore Logs – Mohamed Ahmed Nov 17 '21 at 06:30
1

Is it just me or does this not work anymore? Was this message "upgraded" from yellow log to red error? – Dror Bar Dec 06 '21 at 13:55
3

@DrorBar yes, it became an error starting from RN 0.65. Anyway, you should be aware that when a FlatList is used inside a ScrollView, it fails to detect the screen size and thus cannot virtualize the items that should be 'off screen' rendering all of them immediately, which makes it even less performant than a regular map function, since it still has to create a view and add some logic. that's the reason the warning exists. – AlexanderD Jan 19 '22 at 09:15
2

This really should be the acceptable answer because. The reality is, I am using a component library, where adding a flat list for performance is more ideal that managing the state of an already existing bottomsheet component that is wrapped in a scrollview. Everything functions fine. And this error is truly not valuable to the structure of the views. You can edit the scrollview props if need in the parent to do nothing (thus a regular view if you want it to be). So this is correct and the right answer for sure. – thekevshow Dec 14 '22 at 03:35

Vishal Pawar · Answer 4 · 2022-09-24T14:08:31.857

Data

// dummy data array
const data = [
    {id: 1, name: 'Tom'},
    {id: 2, name: 'Jerry'},
]

Solution #1

You can make a custom component for that like this

const VirtualizedList = ({children}) => {
    return (
        <FlatList
            data={[]}
            keyExtractor={() => "key"}
            renderItem={null}
            ListHeaderComponent={
                <>{children}</>
            }
        />
    )
}

then use this VirtualizedList as parent component:

...
return (
    <VirtualizedList>
         <FlatList
           data={data}
           keyExtractor={(item, index) => item.id + index.toString()}
           renderItem={_renderItem}
         />
         <AnyComponent/>
    </VirtualizedList>
)

Solution #2

If you use FlatList inside the ScrollView it gives warning which is annoying, so you can use array's map property, like this -

NOTE: It is not recommended way to show list. If you have small amount of that then you can use it that's totally fine, but if you want to show a list which get data from api and have lot's of data then you can go with other solutions. if you use map with large data then it affect your app performance

<ScrollView>
    {data.map((item, index) => (
        <View key={index}>
           <Text>{item.name}</Text>
        </View>
    ))}
</ScrollView>

Solution #3

if you make your FlatList horizontal (as per your need) then also warning will disappear

<ScrollView>
    <FlatList
       data={data}
       keyExtractor={(item, index) => item.id + index.toString()}
       horizontal={true}
    />
</ScrollView>

Solution #4

you can add header and footer component

In ListHeaderComponent and ListFooterComponent you can add any component so you don't need parent ScrollView

<FlatList
   data={data}
   keyExtractor={(item, index) => item.id + index.toString()}
   ListHeaderComponent={headerComponent}
   ListFooterComponent={footerComponent}
   ListEmptyComponent={emptyComponent}
   ItemSeparatorComponent={separator}
/>

// List components
const headerComponent = () => (
    <View>
       <Header/>
       <Any/>
    </View>
)
const footerComponent = () => (
    <View>
       <Footer/>
       <Any/>
    </View>
)
const emptyComponent = () => (
    <View>
       <EmptyView/>
       <Any/>
    </View>
)
const separator = () => (
    <View style={{height: 0.8, width: '100%', backgroundColor: '#fff'}} />
)

FlatList is usually used to dynamically load and show data. Converting it to a static list is not an approach in most cases. — Rustem Zinnatullin, Nov 25 '20 at 07:30
in my case horizontal={false} did the trick, coz horizontal={true} will lead FlatList to render items horizontally, which nobody wants... — NBaua, May 10 '21 at 03:24
As I said above, set it horizontal={true} as per your requirement. — Vishal Pawar, May 13 '21 at 11:11
The third solution actually solves my issue without adding too much complexity. Love it. — Augusto Gonzalez, May 22 '22 at 18:51
If you still want to use a separator for Solution 2 then see here: https://alexweinberger.com/main/map-react-items-with-separator/ — bieboebap, Sep 15 '22 at 20:43
If you really want to add separator like line or some view below it you can directly add borderBottomWidth in your view styles or can add a separate view with height of 1 and width of 100% and with black or any background colour. — Vishal Pawar, Sep 24 '22 at 14:01
Thank you! didn't realize there was a horizontal parameter for flatlist haha — Lloyd Rajoo, Dec 02 '22 at 23:22

score 16 · Answer 5 · answered Mar 28 '20 at 06:07

16

The warning appears because ScrollView and FlatList share the same logic, if FlatList run inside ScrollView, it's duplicated

By the way SafeAreaView doesn't work for me, the only way to solve is

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

The error disappears

answered Mar 28 '20 at 06:07

Tuan Dat Tran

425
5
7

This one worked for me. I needed ```Flatlist``` inside ```Scrollview``` and the good old ```map``` function you have suggested here did it for me! – Muteshi Oct 27 '20 at 18:20
1

Don't understand this. How does the map help? Where did the FlatList go? – Ken Feb 15 '21 at 15:24
Idea is correct, but code not working. – Kyriakos Xatzisavvas Nov 12 '21 at 22:15
1

Don't do it! FlatList provide lazy loading (if the content is not inside the screen it won't be rendered). Array.map() method don't, i don't recommend this if you will handle big data list. – gianlop3z Feb 14 '22 at 02:31
if you look for performance don't use map ) – Hamed Mar 08 '22 at 12:14

Variag · Answer 6 · 2019-10-08T10:12:50.320

9

Looking at the examples in docs I've changed container from:

<ScrollView>
    <FlatList ... />
</ScrollView>

to:

<SafeAreaView style={{flex: 1}}>
    <FlatList ... />
</SafeAreaView>

and all those warnings disappeared.

edited Oct 08 '19 at 10:12

answered Oct 08 '19 at 09:28

Variag

1,056
10
25

17

What if I render content above `FlatList` insides `ScrollView` and want that content to be scrollable? – Ponleu Oct 09 '19 at 04:44
2

It isn't good user experience to have two scrollable views one next to another. I would try to nest it like this: '' (not tested) – Variag Oct 09 '19 at 05:03
1

I'm pretty sure FlatList will not create another scroll, unless we wrap it in aside a container with specified height. – Ponleu Oct 09 '19 at 09:13
1

i have the same problem as @Ponleu. I have a `ScrollView` inside of that some content and then a `FlatList` also inside the `ScrollView`. And i want the whole screen to scroll together. – David Schilling Oct 10 '19 at 15:08
1

`` only works on iOS version 11 or later (https://facebook.github.io/react-native/docs/safeareaview) – tim-montague Nov 14 '19 at 08:21
10

The main point of the `ScrollView` was to make it scrollable vertically for example. Taking that property won't leave it scrollable again. What was the point here? – Giorgi Gvimradze Mar 07 '20 at 09:51

score 8 · Answer 7 · edited Jun 04 '22 at 14:27

8

Below code works perfectly for me to disable annoying error:

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead.

React Native 0.68.2

  <ScrollView horizontal={false} style={{flex: 1}}>
    <ScrollView
      horizontal={true}
      contentContainerStyle={{width: '100%', height: '100%'}}>
      <FlatList ... />
    </ScrollView>
  </ScrollView>

edited Jun 04 '22 at 14:27

Zach Jensz

3,650
5
15
30

answered Jun 02 '22 at 17:38

Darius

103
1
8

This removes the error but there is no Flatlist scroll. In my case it still works well because I'm only displaying a couple data results. – Cory Apr 28 '23 at 17:21

score 6 · Answer 8 · answered Oct 13 '20 at 07:46

In my case, I needed to have FlatLists nested in a ScrollView because I am using react-native-draggable-flatlist to move ingredients and steps around in a recipe.

If we read the warning properly, it says that we should use another VirtualizedList-backed container to nest our child FlatList in. What I did is:

 /* outside the component */
const emptyArry = []

/* render */
 <FlatList
    scrollEnabled={false}
    horizontal
    data={emptyArray}
    ListEmptyComponent=(<DraggableList />)
  />

No more warning, and I think this is the pattern recommended by the warning.

score 6 · Answer 9 · answered Sep 29 '21 at 16:13

6

<ScrollView horizontal={false} style={{width: '100%', height: '100%'}}>
   <ScrollView horizontal={true} style={{width: '100%', height: '100%'}}>
      <FlatList ... />
   </ScrollView>
</ScrollView>

answered Sep 29 '21 at 16:13

saqib

111
2
5

score 4 · Answer 10 · answered Apr 25 '23 at 11:53

4

After RN 0.71 if you have prop scrollEnabled={false} in the FlatList, the error should not show anymore, as changelog:

Added a check to if scrollEnabled is not false, if so then fire the VirtualizedList error

answered Apr 25 '23 at 11:53

Aureo Beck

489
2
5

score 3 · Answer 11 · answered Apr 11 '20 at 13:12

I tried some ways to solve this, including ListHeaderComponent or ListFooterComponent, but it all didn't fit for me.

layout I wanted to achieve is like this, and I wanted to get scrolled in once.

<ScrollView>
  <View>I'm the first view</View>
  <View>I'm the second view</View>
  <MyFlatList />
</ScrollView>

First I want to say thanks to this issue and comments, which gave me bunch of ideas.

I was thinking of ListHeaderComponent places above the Flatlist, but since my Flatlist's direction was column, the header I wanted to place went on the left of the Flatlist :(

Then I had to try on VirtualizedList-backed thing. I just tried to pack all components in VirtualizedList, where renderItems gives index and there I could pass components conditionally to renderItems.

I could have worked this with Flatlist, but I haven't tried yet.
Finally it looks like this.

<View>
  <Virtualizedlist
    data={[]}
    initialNumToRender={1}
    renderItem={(props)=>{
      props.index===0 ? (1st view here) : props.index===1 ? (2nd view here) : (my flatlist)
    }}
    keyExtractor={item => item.key}
    getItemCount={2}
    getItem={ (data, index) => {
      return {
        id: Math.random().toString(12).substring(0),
      }
    }}
  />
</View>

(inside which lazyly renders↓)
  <View>I'm the first view</View>
  <View>I'm the second view</View>
  <MyFlatList />

and of course able to scroll the whole screen.

score 3 · Answer 12 · answered May 26 '20 at 10:41

3

As @Brahim stated above, setting the horizontal property to true seem to resolve the issues for a FlatList embedded in a ScrollView.

answered May 26 '20 at 10:41

Mike Grant

179
8

4

I don't know why so many people mention the `horizontal` property solutions, this breaks completely my design, I'm sure others as well – Rolando Nov 01 '21 at 15:29
If `numColumns` property is used then `horizontal` property breaks it at all. – Kh An Dec 04 '21 at 17:23
Yes, it so strange why guys is recommending this way with horizontal={true}, because it changes orientation of the scroll – jocoders Jan 21 '22 at 09:32

score 3 · Answer 13 · answered Jan 31 '23 at 16:24

You have to remove ScrollView and enable scroll from FlatList using the property scrollEnabled={true}, you can place the other views inside ListHeaderComponent and ListFooterComponent

<View flex={1}>
  <FlatList 
    data={data}
    scrollEnabled={true}
    showsVerticalScrollIndicator={false}
    renderItem={({ item }) => (
      <Text>{item.label}</Text>
    )}
    keyExtractor={item => item.id}
    ListHeaderComponent={() => (
        <Text>Title</Text>
    )}
    ListFooterComponent={() => (
        <Text>Footer</Text>
    )}
  />
</View>

score 1 · Answer 14 · answered Jul 18 '20 at 23:09

1

So I faced the same problem while using a picker-based component inside <ScrollView> and the one thing that helped me solve the problem was adding keyboardShouldPersistTaps={true} inside the <ScrollView> as a prop.

This is my code snippet.

<ScrollView keyboardShouldPersistTaps={true}> 
      <SelectionDD studentstatus={studentStatus}/>
      <SearchableDD collegeNames={collegeNames} placeholder='University'/>
</ScrollView>

answered Jul 18 '20 at 23:09

gaurav gandhi

19
2

1

it deprecated .. must be keyboardShouldPersistTaps="always" – cantaş Aug 13 '20 at 06:11
I am not sure if it has recently changed. But thanks a lot for the information!! – gaurav gandhi Aug 31 '20 at 20:30
This doesn't remove the error for me – velkoon Jun 01 '22 at 17:54

score 1 · Answer 15 · answered Aug 23 '22 at 12:51

I have two Flatlist; each of them has many Item also has a feature to collapse and expand. Because of that, I can't use SafeAreaView.

I saw another solution and found a new way.

I define one Flatlist in the core component ( without Scrollview) and render each Flatlist with a map function inside ListHeaderComponent and ListFooterComponent.

 <View style={{flex: 1}}>
    <FlatList
        style={{backgroundColor: 'white'}}
        refreshing={loading}
        onRefresh={() => sample()}
        ListHeaderComponent = {
          <View>
             {collapse/expandComponent}
             {this.state.sample1&& content1.map((item, index) => this.renderList1(item,index))}
          </View>
        }
        ListFooterComponent = {
          <View>
            {collapse/expandComponent}
            {this.state.sample2 && content2.map((item, index) => this.renderlist2(item,index))}
          </View>
        }
      />
  </View>

score 0 · Answer 16 · answered Jan 27 '20 at 06:30

0

In my opinion i can use map instead of FlatList. But in my case i wan't to show large list. Not using FlatList may cause performance issue. so i used this to suppress warning https://github.com/GeekyAnts/NativeBase/issues/2947#issuecomment-549210509

answered Jan 27 '20 at 06:30

tvankith

323
1
5
20

score 0 · Answer 17 · answered Nov 11 '20 at 02:57

0

Without hiding YellowBox you still can implement scroollable view inside scrollable view. You can use this library. It replace the default Scrollview from React Native.

answered Nov 11 '20 at 02:57

azwar_akbar

1,451
18
27

score 0 · Answer 18 · answered Feb 12 '21 at 04:28

This may help someone down the line, be sure you to check how your components are nested. Removing the ScrollView from the top component fixed the issue.

I ran into this issue because I had two components nested like this essentially:

Component 1

<ScrollView>
   <OtherStuff />

   <ListComponent />
</ScrollView>

My second component 'ListComponent' had a FlatList already wrapped with SafeAreaView.

<SafeAreaView style={styles.container}>
    <FlatList
        data={todoData}
        renderItem={renderItem}
        ItemSeparatorComponent={() => <View style={styles.separator} />}
        keyExtractor={item => item.id.toString()}
    />
</SafeAreaView>

In the end I replaced the ScrollView from the first component with a View instead.

Anass · Answer 19 · 2022-12-19T20:54:34.483

I was having this issue using a scrollview as parent view, and nesting a SelectBox from react-native-multi-selectbox package. I was able to solve this by adding listOptionProps={{nestedScrollEnabled: true}} like this:

<ScrollView>
  <SelectBox
    label="Select single"
    options={serverData}
    listOptionProps={{nestedScrollEnabled: true}}
    value={input.elementSelected}
    onChange={event =>
      inputHandlerLang('elementSelected', event, key)
    }
    hideInputFilter={false}
  />
</ScrollView>

the error still present but scrolling within SelectBox works as well as within the parent scrollview. I also do have to suppress the error with LogBox. I don't know if there are any drawbacks to this but I'll try to test this more.

Update 1: this used to work in v0.68.2, but since I updated to patch v0.68.5, the warning became an error.

score 0 · Answer 20 · answered Jun 16 '22 at 14:35

Use flatList like this ListHeaderComponent and ListFooterComponent:

<FlatList ListHeaderComponent={
    <ScrollView
        style={styles.yourstyle}
        showsVerticalScrollIndicator={false}
    >
        <View style={styles.yourstyle}>
        </View>
    </ScrollView>
    }
    data={this.state.images}
    renderItem={({ item, index }) => {
        return (
            <View
                style={styles.yourstyle}
            >
                <Image
                    source={{
                        uri: item,
                    }}
                    style={styles.yourstyle}
                    resizeMode={"contain"}
                />
                <Text
                    numberOfLines={2}
                    ellipsizeMode="tail"
                    style={styles.yourstyle}
                >
                    {item.name}
                </Text>
            </View>
        );
    }}
    keyExtractor={({ name }, index) => index.toString()}
    ListFooterComponent={
        <View style={styles.yourstyle}></View>
    }
/>

score 0 · Answer 21 · answered Jul 23 '22 at 10:41

If you use ScrollView and FlatList together you'll get inconsistent scroll behaviour. So just remove ScrollView and use FlatList in a View.

<View flex={1}>
<FlatList 
    data={list}
    renderItem={({ item }) => this.renderItem(item) }
    keyExtractor={item => item.id}
    />
</View>

score 0 · Answer 22 · answered Aug 28 '22 at 16:14

import React from 'react';
import { FlatList, ScrollViewProps } from 'react-native';

export const ScrollView: React.FC<ScrollViewProps> = props => {
  return (
    <FlatList
      {...props}
      data={[]}
      renderItem={() => null}
      ListHeaderComponent={() => (
        <React.Fragment>{props.children}</React.Fragment>
      )}
      ListEmptyComponent={null}
      keyExtractor={() => 'blank'}
    />
  );
};

This will essentially work exactly like a ScrollView except without this error.

score 0 · Answer 23 · answered Jul 04 '23 at 20:45

A lot of things here did not work for me. That isn't to say that solutions are broken or wrong. Some look similar to the React Native docs examples.

So to avoid headaches, one thing I have just come to terms with (and I was building my app, so you might not have room to do this), is that if you just make the FlatList horizontal (using the horizontal boolean property), you avoid all of the experimenting. Vertical flat lists in vertical views seem to have a conflict.

Making the flat list horizontal was a quick and painless way for me to keep things moving forward. No one would use the UI (most likely, and especially with all options in full view) and think to themselves, this app would be great if this list of touchable items was vertical instead.

Just leaving this for those few people who could live with just making it horizontal and moving on in 20 seconds instead of wasting 40 minutes trying to work different solutions around this.

This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/34641281) — kikon, Jul 10 '23 at 18:34

score -1 · Answer 24 · answered Jun 06 '20 at 22:34

Actually as I know, using nested VirtualizedLists, caused always performance issues, just the warning to that issue is new. I tried everything I found on the internet, non of them helped. I use now ScrollView or when you just have a normall View with maxHeight then you will be able to scroll if the content-height is bigger then the maxHeight of you View. So:

<ScrollView>
   {items.map((item, index) =>
       <YourComponent key={index} item={item} />
   )}
</ScrollView>

Or just:

<View style={{maxHeight: MAX_HEIGHT}}>
    {items.map((item, index) =>
       <YourComponent key={index} item={item} />
    )}
</View>

FlatList is usually used to dynamically load and show data. Converting it to a static list is not an approach in most cases. — Rustem Zinnatullin, Nov 25 '20 at 07:31

score -1 · Answer 25 · answered Jun 15 '20 at 07:25

This error disappeared because of using FlatList inside ScrollView. You can write like the following code.

<SafeAreaView style={styles.container}>
            <View style={styles.container}>
              <View>
                <Header />
              </View>

                {(list.length == 0) &&
                  <View style={{flex:1, margin: 15}}>
                    <Text style={{textAlign: 'center'}}>No peripherals</Text>
                  </View>
                }
                <FlatList 
                  data={list}
                  renderItem={({ item }) => this.renderItem(item) }
                  keyExtractor={item => item.id}
                />
            </View>
          </SafeAreaView>

score -1 · Answer 26 · answered Feb 14 '22 at 02:39

You can add horizontal=True and contentContainerStyle={{ width: '100%' }} to the ScrollView parent.

<ScrollView
  style={styles.collaborators}
  contentContainerStyle={{ width: '100%' }} <-- 
  horizontal <--
>
  <FlatList
    data={list?.slice(0, 10) || []}
    keyExtractor={item => item.cc}
    ItemSeparatorComponent={Separator}
    renderItem={({ item }) => (
      <Collaborator name={item.name} cc={item.cc} />
    )}
  />
</ScrollView>

using this won't let me scroll – Anas Yousuf Jun 02 '22 at 06:57 — Anas Yousuf, Jun 02 '22 at 06:57

score -1 · Answer 27 · answered Jun 25 '22 at 00:25

This worked for me (as a bit of a hack). Use a FlatList with empty data and null renderItem props instead of using a ScrollView

const emptyData = [];

const renderNullItem = () => null;

const App = () => {
  const ListFooterComponent = (
    <FlatList ... />
  );

  return (
    <SafeAreaView>
      <FlatList
        data={emptyData}
        renderItem={renderNullItem}
        ListFooterComponent={ListFooterComponent}
      />
    </SafeAreaView>
  );
};

Why would you do that? If you do not use flatList then just use ScrollView — TheLegend27, Dec 30 '22 at 13:07

score -6 · Answer 28 · answered Aug 19 '20 at 18:50

-6

I had the same issue, and just got rid of it by removing the ScrollView around the FlatList. Because by default FlatList provides Scroll Functionality based on the length of content that it renders.

answered Aug 19 '20 at 18:50

Syed Multhazim

1

This won't work if you have other content/components that are siblings to the FlatList on the same screen. – Case Silva Sep 17 '20 at 19:25