title: Showing list empty message at the center of the screen in a FlatList using ListHeaderComponent
body: <p>I am using React-Native version 0.43.0 which does not support ListEmptyComponent of FlatList. Hence I am using ListHeaderComponent to render a view when the list is empty, </p>
  
  <pre><code>import React, { Component } from 'react';
  import { Text, View, StyleSheet,FlatList } from 'react-native';
  
  class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        listData: []
      }
    }
    render() {
      return (
        &lt;View style={styles.container}&gt;
          &lt;FlatList
            renderItem={() =&gt; null}
            data={this.state.listData}
            ListHeaderComponent={() =&gt; (!this.state.listData.length? 
              &lt;Text style={styles.emptyMessageStyle}&gt;The list is empty&lt;/Text&gt;  
              : null)
            }
          /&gt;
        &lt;/View&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex:1
    },
    emptyMessageStyle: {
      textAlign: 'center',
      //My current hack to center it vertically
      //Which does not work as expected
      marginTop: '50%', 
    }
  });
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/je2g1.png" rel="noreferrer"><img src="https://i.stack.imgur.com/je2g1.png" alt="enter image description here"></a></p>
  
  <blockquote>
    <p>As you can see from the image the text is not centered vertically</p>
  </blockquote>
  
  <p>Any idea how to center it vertically in a FlatList?</p>
  
  <p>I have already tried applying justifyContent, alignItems etc but no use.</p>
  
  <p>This is a link to the snack.expo - <a href="https://snack.expo.io/S16dDifZf" rel="noreferrer">https://snack.expo.io/S16dDifZf</a> </p>