React Native FlatList extending beyond screen when rendered with a header

Question

I'm trying to create a header that renders above a FlatList component. If the screen is 800px tall, the header is 100px tall, the FlatList should fill up 700px (with flexGrow: 1), and be scrollable (if there are too many ListItems). Basic markup is as follows:

<View style={{flexGrow: 1, backgroundColor: 'soothing-yellow-thunder'}}>
  <Header style={{height: 100}} />

  <FlatList ... />
</View>

However, when I render the header, the height of the FlatList component is actually 800px, matching the height of the wrapping component with flexGrow: 1. 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 FlatList "extra" height is exactly 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):

https://snack.expo.io/@sgardn04/flatlist-header-example

import * as React from 'react';
import { Text, View, FlatList } from 'react-native';

export default class App extends React.Component {
  _renderList() {
    return (
      <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}) => { return <View style={{height: 140, borderColor: 'red', borderWidth: 1}}><Text>{item.content}</Text></View> }} />
    )
  }

  _renderListWithHeader() {
    return (
      <View style={{flexGrow: 1}}>
        <View style={{height: 70, backgroundColor: 'lime', alignItems: 'center', justifyContent: 'center'}}><Text>Header</Text></View>

        {this._renderList()}
      </View>
    )
  }

  render() {
    return (
      this._renderListWithHeader()
      // this._renderList()
    )
  }
}

What am I misunderstanding about how flex layouts work? I was under the impression that the FlatList component was effectively wrapped by something that has flexGrow: 1, 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).

Answer 1

Simply just give flex:1 to style of your parent View.

<View style={{flex:1}}>
<View></View>
<Flatlist/>
</View>