FlatList inside ScrollView doesn't scroll

Question

I've 4 FlatLists with maxHeight set to 200 inside a ScrollView.

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

and when I try to scroll a FlatList, it doesn't scroll but the ScrollView scrolls. How do I fix this issue ?

Full Source Code

import { Component, default as React } from 'react';
import { FlatList, ScrollView, Text } from 'react-native';

export  class LabScreen extends Component<{}> {
  render() {
    return (
      <ScrollView>
        {this.renderFlatList('red')}
        {this.renderFlatList('green')}
        {this.renderFlatList('purple')}
        {this.renderFlatList('pink')}
      </ScrollView>
    );
  }

  getRandomData = () => {
    return new Array(100).fill('').map((item, index) => {
      return { title: 'Title ' + (index + 1) };
    });
  };

  renderFlatList(color: string) {
    return (
      <FlatList
        data={this.getRandomData()}
        backgroundColor={color}
        maxHeight={200}
        marginBottom={50}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item }) => <Text>{item.title}</Text>}
      />
    );
  }
}

snack.expo link

score 124 · Accepted Answer · edited May 15 '20 at 16:30

124

We can use the built-in nestedscrollenabled prop for the children FlatList/ScrollView components.

<FlatList nestedScrollEnabled />

This is only required for Android (Nested scrolling is supported by default on iOS).

edited May 15 '20 at 16:30

Aniruddha Shevle

4,602
4
22
36

answered Feb 18 '19 at 21:13

rnk

2,394
1
19
19

15

thanks it helped, added to parent and to children – Sergii May 01 '19 at 14:02
1

I needed this on iOS for a FlatList inside a ScrollView. – Stritt Feb 07 '20 at 17:52
10

NOT worked for me. – Aman Deep Dec 14 '20 at 04:22
rnk and @Aniruddha Shevla how is possible that nestedScrollEnabled which is prop of ScrollView ,and used by FlatList – Muhammad Mehdi Jun 14 '21 at 16:30
and what about the reverse case, if we nest scrollview inside a flatlist, this prop doesn't seem to work in that case – Irfan wani Apr 20 '23 at 10:57
2

This works perfect for me but still throws the following warning/error: VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality – maxi hraschan May 05 '23 at 21:32

score 40 · Answer 2 · edited Jan 27 '22 at 09:42

I was having a very similar issue until I came across an almost complete solution in a very helpful comment on one of the GitHub issues for the react-native project: https://github.com/facebook/react-native/issues/1966#issuecomment-285130701.

The issue is that the parent component is the only one registering the scroll event. The solution is to contextually decide which component should actually be handling that event based on the location of the press.

You'll need to slightly modify your structure to:

<View>
  <ScrollView>
    <View>
      <FlatList />
    </View>
    <View>
      <FlatList />
    </View>
    <View>
      <FlatList />
    </View>
    <View>
      <FlatList />
    </View>
  </ScrollView>
</View>;

The only thing I had to change from the GitHub comment was to use this._myScroll.contentOffset instead of this.refs.myList.scrollProperties.offset.

I've modified your fully working example in a way that allows scrolling of the inner FlatLists.

import { Component, default as React } from "react";
import { View, FlatList, ScrollView, Text } from "react-native";

export default class LabScreen extends Component<{}> {
  constructor(props) {
    super(props);
    this.state = { enableScrollViewScroll: true };
  }

  render() {
    return (
      <View
        onStartShouldSetResponderCapture={() => {
          this.setState({ enableScrollViewScroll: true });
        }}
      >
        <ScrollView
          scrollEnabled={this.state.enableScrollViewScroll}
          ref={(myScroll) => (this._myScroll = myScroll)}
        >
          {this.renderFlatList("red")}
          {this.renderFlatList("green")}
          {this.renderFlatList("purple")}
          {this.renderFlatList("pink")}
        </ScrollView>
      </View>
    );
  }

  getRandomData = () => {
    return new Array(100).fill("").map((item, index) => {
      return { title: "Title " + (index + 1) };
    });
  };

  renderFlatList(color: string) {
    return (
      <View
        onStartShouldSetResponderCapture={() => {
          this.setState({ enableScrollViewScroll: false });
          if (
            this._myScroll.contentOffset === 0 &&
            this.state.enableScrollViewScroll === false
          ) {
            this.setState({ enableScrollViewScroll: true });
          }
        }}
      >
        <FlatList
          data={this.getRandomData()}
          backgroundColor={color}
          maxHeight={200}
          marginBottom={50}
          keyExtractor={(item, index) => index.toString()}
          renderItem={({ item }) => <Text>{item.title}</Text>}
        />
      </View>
    );
  }
}

Hopefully you find this useful!

Not a problem! I had to solve the same issue myself so I figured I may as well share the solution. — Eric Le Fort, Aug 26 '18 at 21:18
What are the values that you use for styling on these elements? — Alex Chin, Feb 14 '19 at 19:25
@EricLeFort 2 things: 1. The second answer is much better 2. in you code: " this.setState({ enableScrollViewScroll: false }); if (this._myScroll.contentOffset === 0 && this.state.enableScrollViewScroll === false) {" setState is async function and there is no guarantee that line after you get a false value on this.state.enableScrollViewScroll in a matter of fact almost sure it won't be having the false value — Erab BO, May 03 '19 at 11:51
this code work well , but when i switch to another view , it doesn't scroll but when i scroll again it scrolls — Mahyar Fard, Jul 13 '19 at 07:20
Even in 2019, this is the only workaround as far as i know. Tried to use 'nestedscrollenabled' it was not working properly — Tanvir Rahman, Nov 17 '19 at 04:42
I spent the whole day trying to fix drag-and-drop inside a FlatList, while using the react-native-draggable-flatlist library, where it wasn't dragging since the parent ScrollView would start scrolling. Setting scrollEnabled as soon as the dragging movement begins solved the problem. Thank you. — T. Dayya, Nov 18 '19 at 20:53

score 17 · Answer 3 · edited Jun 27 '22 at 20:25

17

This is the simplest answer that requires zero configuration.. and it works like a charm

<ScrollView horizontal={false}>
    <ScrollView horizontal={true}>
        <Flatlist
          ....
          ....
        />
    </ScrollView>
</ScrollView>

edited Jun 27 '22 at 20:25

Asmat ullah

681
8
23

answered Jun 01 '21 at 09:25

i-wizard

226
2
5

Yeaaa, I agree! – Miroslav Maksimovic Nov 23 '21 at 14:29

score 15 · Answer 4 · edited Apr 20 '21 at 10:06

15

I fixed my problem with nested FlatList not being able to scroll items on android by simply importing FlatList

import { FlatList } from 'react-native-gesture-handler';

If this would not work, also try to import ScrollView.

import { ScrollView } from 'react-native';
// OR
import { ScrollView } from 'react-native-gesture-handler';

You need to play around with these imports, at least it worked in my case.

edited Apr 20 '21 at 10:06

phwt

1,356
1
22
42

answered Apr 19 '21 at 07:27

Vojd Naroda

151
1
5

I was importing from `react-native` which caused me invariant violation: withNavigation. Changing to `react-native-gesture-handler` solved! – testing_22 Aug 13 '21 at 01:15
It worked perfect thanks. – Rahul Mishra Jan 18 '22 at 13:35

score 10 · Answer 5 · answered Jan 27 '20 at 18:56

10

Try to set the FlatList as nested

nestedScrollEnabled={true}

answered Jan 27 '20 at 18:56

Roberto Clavijo

149
1
6

4

duplicate answer :D – peja Dec 21 '20 at 13:05
1

It has to be done for all ScrollViews ancestors. Also, the "scroll able" feature on FlatList depend on the height and it is set as: style ={{ height: Dimensions.get('window').height / 1.5}} – Jose Cabrera Zuniga Mar 18 '21 at 01:22

score 3 · Answer 6 · answered May 14 '23 at 17:29

I'm surprised that none of the answers actually worked for me. I went searching for the reason ScrollView and FlatList don't work together and found that there are props on FlatList that can accomodate the header and footer areas above and below my FlatList. If I use this I can make sure the whole screen still scrolls and I don't get the error.

Here is where I found this answer and I've put an example below.

<View>
  <FlatList
    ListHeaderComponent={<View><Text>Top of screen content goes here</Text></View>}
    keyExtractor={(item) => item._id}
    data={[{_id: 1, text: 'one'}, {_id: 2, text: 'two'}]
    renderItem={({item}) => (<View><Text>{item.text}</Text></View>)}
  />
</View>

This worked for my use case. My goal was to have some content above my flatlist but have that content scroll away when trying to view the flatlist. Nesting a ScrollView and FlatList, at least currently, is giving me lots of problems like firing off way too many refreshes and causing instability — cchoe1, May 17 '23 at 01:24

score 1 · Answer 7 · answered Jul 01 '21 at 17:44

1

Using View with a flex:1 instead of ScrollView worked for me.

answered Jul 01 '21 at 17:44

Sunday David

105
5

Did you even read the question? The answer you gave is not possible. – Kelly Jan 26 '22 at 07:28
1

Doesn't matter what people say. this works perfectly for me after hours of following the other answers. – Ben Phung May 14 '22 at 06:25
Don't even make sense ;( – chankruze Jun 04 '22 at 17:05

Helmons · Answer 8 · 2021-10-25T12:04:47.387

0

Use map instead of Flatlist, same result and don't break the application

Minha conta

   {
      buttonsProfile.map(button => (
         <ArrowButton 
              key={button.key}
              title={button.title}
              iconName={button.icon} 
              toogle={button.toogle}
              onPress={() => {navigation.navigate(button.route)}}
          />
      ))
    }

edited Oct 25 '21 at 12:04

answered Oct 15 '21 at 12:21

Helmons

21
1

Is there some sample code you could share? – Simon Oct 15 '21 at 14:50
see the example below, consider the content as a scroll – Helmons Oct 21 '21 at 20:47
2

This is only viable for a small list, with a large list it can easily run the app out of memory. – OneOfOne Nov 30 '21 at 17:52
The map is not a good option and performs less than a react-native core component. – Lahiru Amarathunge Jun 30 '23 at 16:56

score 0 · Answer 9 · answered Jun 07 '23 at 01:48

0

Make sure you add nestedScrollEnabled to each flatlist / scrollview but most importantly make sure you do not use pos absolute and allow your screen to flex to be able to scroll

answered Jun 07 '23 at 01:48

Jonathan Coletti

448
4
13

score -1 · Answer 10 · answered Jul 26 '22 at 14:25

-1

The better answer is to put a horizontal ScrollView inside of the other ScrollView and then the FlatList

answered Jul 26 '22 at 14:25

Bruno Luiz

64
4

FlatList inside ScrollView doesn't scroll

10 Answers10

Linked