ListEmptyComponent does not accept full screen with flex 1 under "Real Native Section"

Question

So, I am using React Native Section List, and the following is my ListEmptyContent code

// 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 the EmptyTemplate is displayed, it is displayed on top and does not stretch to full screen.

Answer 1

I succeeded with a simple trick as shown below

import { Dimensions } from "react-native";
const SCREEN_HEIGHT = Dimensions.get("window").height;

than i declare an empty component

_listEmptyComponent = () => {
    return (
      <View
        style={{
          justifyContent: "center",
          alignItems: "center",
          height: SCREEN_HEIGHT , //responsible for 100% height
          backgroundColor: "#ddd"
        }}
      >
        <Text
          style={{
            justifyContent: "center",
            alignItems: "center",
            fontSize: 20
          }}
        >
          No Contracts Found
        </Text>
      </View>
    );

And finally Flatlistit looks like this:

          <FlatList
            extraData={this.props.contracts}
            data={this.props.contracts}
            ListEmptyComponent={this._listEmptyComponent.bind(this)}
            renderItem={({ item }) => (
              <Text>{item.contractName}>
              <Text/>
            )}
            keyExtractor={(item, index) => item.id}
          />