FlatList inside ScrollView doesn't scroll

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

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

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