ListEmptyComponent not taking full screen with flex 1 in React Native Section List

Question

So I am using React Native Section List and following is my Code of ListEmptyContent

// define your styles
const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
    marginLeft: 10,
    marginRight: 10,
  },
  imageStyle: {
    width: 140,
    height: 120,
  },
  titleStyle: {
    fontSize: 14,
    color: '#363a45',
  },
  subTitleStyle: {
    fontSize: 12,
    color: '#898d97',
  },
});
// create a component
const GPEmtptyTransaction = ({ firstLine, secondLine }) => {
  return (
    <View style={styles.container}>
      <Image source={images.emptyTransactionIcon} style={styles.imageStyle} />
      <Text style={styles.titleStyle}>{firstLine}</Text>
      <Text style={styles.subTitleStyle}>{secondLine}</Text>
    </View>
  );
};

But when EmptyTemplate is rendered it is rendered on Top and not stretching to full screen.

Answer 1

This works for me, apply flexGrow: 1 to contentContainerStyle

<FlatList
    data={this.props.operations}
    contentContainerStyle={{ flexGrow: 1 }}
    ListEmptyComponent={<EmptyPlaceHolder />}
    renderItem={this.renderOperationItem} />