title: React Native Flatlist height dynamic
body: <p>I am using react native 0.59, for layout I am using native base and react-native-easy-grid.
  Because of different size of mobile device, I need to put flatlist height dynamic. it is starting almost middle of the screen, and I would like to show it until the footer bar. </p>
  
  <p>here is my code</p>
  
  <pre><code>&lt;Container&gt;
  &lt;ImageBackground source={require(imagePath+"bg-default.png")}
                                   style={{width: screenWidth, height: screenHeight, resizeMode: 'cover'}} &gt;
  
      &lt;Content scrollEnabled={false}&gt;
  
          &lt;Grid&gt;
              &lt;Row style={{ height: screenHeight*0.36, alignItems:'center',justifyContent:'center' }}&gt;
                  &lt;Image style={styles.iconImage} source={{ uri: this.state.image_url.displayImage}}/&gt;
  
              &lt;/Row&gt;
  
              &lt;Row style={{ backgroundColor: "#1a0568", height:screenHeight*0.058, textAlignVertical: 'center', alignItems: 'center'}}&gt;
                  &lt;Text style={styles.titleStyle}&gt;{"Information list"}&lt;/Text&gt;            
              &lt;/Row&gt;
  
              &lt;Row style={{ backgroundColor: 'none',height:screenHeight*0.38}}&gt;
                  &lt;FlatList
                      style={[styles.listContainer]}
                      data={this.state.informationList}
                      keyExtractor={this._keyExtractor}
                      renderItem={this._renderItem}
                  /&gt;
              &lt;/Row&gt;
  
          &lt;/Grid&gt;
      &lt;/Content&gt;
  &lt;/ImageBackground&gt;
  &lt;/Container&gt;
  </code></pre>
  
  <p>As you can see, I set flatlist height screenHeight*0.38, therefore, in some mobile its perfect, but in some mobile there is some empty space. (See the attached picture)
  I have tried to make it dynamic with different example to fill rest of the space like
  <a href="https://stackoverflow.com/questions/40393939/how-to-set-the-style-attribution-to-fill-the-rest-space">How to set the style attribution to fill the rest space?</a>
  (though I need to fill until footer bar), This example works well with normal component But it didnt work with flatlist. Flatlist doesnt scroll anymore. Because it loads all rows which goes out of the screen. what is the right way of setting dynamic height with flatlist?</p>
  
  <p><a href="https://i.stack.imgur.com/1wz5g.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1wz5g.png" alt="Picture Attached"></a></p>