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

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.