title: React Native FlatList extending beyond screen when rendered with a header
body: <p>I'm trying to create a header that renders above a <code>FlatList</code> component. If the screen is 800px tall, the header is 100px tall, the <code>FlatList</code> should fill up 700px (with <code>flexGrow: 1</code>), and be scrollable (if there are too many <code>ListItems</code>). Basic markup is as follows:</p>
  
  <pre><code>&lt;View style={{flexGrow: 1, backgroundColor: 'soothing-yellow-thunder'}}&gt;
    &lt;Header style={{height: 100}} /&gt;
  
    &lt;FlatList ... /&gt;
  &lt;/View&gt;
  </code></pre>
  
  <p>However, when I render the header, the height of the <code>FlatList</code> component is actually 800px, matching the height of the wrapping component with <code>flexGrow: 1</code>. I can tell it's 800px - the last 100px of which is accessible only by intentionally scrolling past where the FlatList believes the end is. The <code>FlatList</code> "extra" height is <strong><em>exactly</em></strong> as far as the header is tall. Actual working code, and a link to a snack (which should allow you to reproduce in browser, or on your phone if you have expo installed):</p>
  
  <p><a href="https://snack.expo.io/@sgardn04/flatlist-header-example" rel="nofollow noreferrer">https://snack.expo.io/@sgardn04/flatlist-header-example</a></p>
  
  <pre><code>import * as React from 'react';
  import { Text, View, FlatList } from 'react-native';
  
  export default class App extends React.Component {
    _renderList() {
      return (
        &lt;FlatList
          data={[{key: '0', content: 'hello there 0'}, {key: '1', content: 'hello there 1'}, {key: '2', content: 'hello there 2'}, {key: '3', content: 'hello there 3'}, {key: '4', content: 'hello there 4'},]}
          renderItem={({item}) =&gt; { return &lt;View style={{height: 140, borderColor: 'red', borderWidth: 1}}&gt;&lt;Text&gt;{item.content}&lt;/Text&gt;&lt;/View&gt; }} /&gt;
      )
    }
  
    _renderListWithHeader() {
      return (
        &lt;View style={{flexGrow: 1}}&gt;
          &lt;View style={{height: 70, backgroundColor: 'lime', alignItems: 'center', justifyContent: 'center'}}&gt;&lt;Text&gt;Header&lt;/Text&gt;&lt;/View&gt;
  
          {this._renderList()}
        &lt;/View&gt;
      )
    }
  
    render() {
      return (
        this._renderListWithHeader()
        // this._renderList()
      )
    }
  }
  </code></pre>
  
  <p>What am I misunderstanding about how flex layouts work? I was under the impression that the <code>FlatList</code> component was effectively wrapped by something that has <code>flexGrow: 1</code>, so the container will grow to fill available space but not overflow. Obviously the list could have ten times as much vertical content as space allows for, but the fact that it's exactly off by the height of the header is very suspicious. What's actually going on here? If you'd like to see what I consider "working" behavior, try switching the commented methods in the render method of the code I have posted (and adding items to the data if you have a larger screen so it overflows).</p>