FlatList inside ScrollView doesn't scroll

[theapache64]

Environment

Environment:
  OS: Linux 4.15
  Node: 8.11.2
  Yarn: 1.7.0
  npm: 5.6.0
  Watchman: 4.9.0
  Xcode: N/A
  Android Studio: 3.1 AI-173.4720617

Packages: (wanted => installed)
  react: 16.3.1 => 16.3.1
  react-native: 0.55.4 => 0.55.4

Description

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>}
      />
    );
  }
}

Reproducible Demo

snack.expo link

[pentarex]

see this comment
#1966 (comment)

[yasir-netlinks]

Hi there, have you found a solution for this problem, I am having the same issue

[theapache64]

@yasir-netlinks Did you check this

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[rjalkuino]

I tried this. The scrollview rendered all items in flatlist and adjusting its size and made the page laggy so i think because of too much data made it not unscrollable.

[Voliki]

Hi, this solution worked for me.

this.state = {
   enableScrollViewScroll: true,
};

onEnableScroll= (value: boolean) => {
    this.setState({
      enableScrollViewScroll: value,
    });
  };

render() {
   return (
      <View>
         ...
        <ScrollView
           scrollEnabled={this.state.enableScrollViewScroll}
        >
           ...
           <FlatList
              ...
              onTouchStart={() => {
                 this.onEnableScroll( false );
              }}
              onMomentumScrollEnd={() => {
                 this.onEnableScroll( true );
              }}
            />
            ...
         </ScrollView>
         ...
     </View>
   );
}

[ghost]

I got same issue. Any update?

[sophialittlejohn]

@Voliki thanks, your solution worked for me! Warning: if you have a position: absolute on one of the FlatLists the scroll on android breaks again.

[alexpchin]

Does this mean that the Flatlist should be able to scroll if the ScrollView scrollEnabled is hardcoded as false? I can't seem to get this to work still... i.e

render() {
   return (
      <View style={{flex: 1}}>
         ...
        <ScrollView
           style={{flexGrow: 1}}  
           scrollEnabled={false}
        >
           ...
           <FlatList
              ...
              // DOESN'T SCROLL...
            />
            ...
         </ScrollView>
         ...
     </View>
   );
}

[alloy]

Hello there 👋 this issue seems to have been inactive for the past few weeks and, moreover, people appear to have working solutions based on this comment. Because of this, it's likely that the issue is not a high priority anymore or it has been solved by OP; for these reasons, we'll close it. But please, if you think this is a different issue that needs to be addressed in React Native itself, please comment below and we can reopen it or please send us a Pull Request with a fix 😊

[christopher-18]

I faced the similar issue where I had FlatList inside the ScrollView.
It looked something like this:-

<ScrollView>
<View style={{paddingHorizontal: "4.3"}}>
                            <FlatList
                                contentContainerStyle={{ flexGrow: 1, justifyContent: "center" }}
                                ref={(ref) => { this.flatListRef = ref; }}
                                data={this.state.propertiesToShow}
                                extraData={this.state}
                                keyExtractor={(item, index) => index.toString()}
                                renderItem={({ item, index }) => this.renderHotelView(item, index)}
                                ItemSeparatorComponent={this.renderSeparator}
                                getItemLayout={(data, index) => (
                                    {length: moderateScale(200), offset: moderateScale(200) * index, index}
                                  )}
                            />
    </View></ScrollView>

Then I tried setting the scroll of flatlist as false, since I have already enclosed my flatlist to scrollview.
scrollEnabled={Platform.OS == 'ios' ? false : true}

I added the condition since, I was facing this issue only in IPhone 7 Plus.
Note: Doing the otherway round i.e. scroll of scrollview to false, was still giving me the same issue.

[itsgauravjain22]

Any official update. It's an important aspect of UI when designing. Some workarounds are there but they make the process complicated when there are multiple flatlist inside scrollview. And we want to achieve scrolling depending on where the users touch.
UI should scroll that flatlist when touched inside that flatlist and scroll scrollview when touched inside scrollview.

[Naturalclar]

@itsgauravjain22
there is a nestedScrollEnabled prop in both ScrollView and FlatList will using that prop solve your problem?
https://facebook.github.io/react-native/docs/scrollview#nestedscrollenabled