FlatList inside ScrollView doesn't scroll : <p>I've 4 <code>FlatList</code>s with <code>maxHeight</code> set to <code>200</code> inside a <code>ScrollView</code>. </p>

<pre><code>&lt;ScrollView&gt;
  &lt;FlatList/&gt;
  &lt;FlatList/&gt;
  &lt;FlatList/&gt;
  &lt;FlatList/&gt;
&lt;/ScrollView&gt;
</code></pre>

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

<p><strong>Full Source Code</strong></p>

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

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

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

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

<p><a href="https://snack.expo.io/HyqtjuQz7" rel="noreferrer">snack.expo link</a></p>
