React Native Flatlist ListHeaderComponent Doesn't Work

Question

ListHeaderComponent inside flatlist doesn't work. It won't render nothing in header (above flatlist). If I however put some custom component it does work but it doesn't with my renderHeader function. I tried making a custom component with the same view as in renderHeader but when I used that nothing rendered so I don't know

My flatlist along with whole render:

   render() {
          const { height } = Dimensions.get("window");
          return (
            <View style={{flex: 1,
              backgroundColor: "#EBECF4"}}>
              {/* <Text>
              Connection Status :{" "}
              {this.state.connection_status ? "Connected" : "Disconnected"}
            </Text> */}
    
              {/* <Loader loading={this.state.loading} /> */}
              <StatusBar backgroundColor="#63003d" barStyle="light-content" />
              <SafeAreaView>
                <ModernHeader
                  backgroundColor="#63003d"
                  height={50}
                  text="Eleph"
                  textStyle={{
                    color: "white",
                    fontFamily: "Lobster-Regular",
                    //fontWeight: "bold",
                    fontSize: 25,
                  }}
                  leftIconComponent={
                    <TouchableOpacity
                      style={{ marginRight: 0, margin: 0 }}
                      onPress={() =>
                        this.props.navigation.dispatch(DrawerActions.openDrawer())
                      }
                    >
                      <FontAwesome5 name="bars" size={22} color="white" />
                    </TouchableOpacity>
                  }
                  rightIconComponent={
                    <TouchableOpacity
                      style={{ marginLeft: 0, margin: 0 }}
                      onPress={() => this.props.navigation.navigate("Profile")}
                    >
                      {/* <MaterialCommunityIcons
                      name="chart-areaspline"
                      size={24}
                      color="#639dff"
                    /> */}
                      <Foundation name="graph-bar" size={24} color="white" />
                      {/* <FontAwesome name="bar-chart" size={24} color="white" /> */}
                    </TouchableOpacity>
                  }
                />
              </SafeAreaView>
    
                <FlatList
                
                  //contentInset={{ top: HEADER_HEIGHT }}
                  //contentOffset={{ y: -HEADER_HEIGHT }}
data={this.state.post}
              extraData={this.state.post}
              keyExtractor={(item) => item.id.toString()}  
              style={{
                marginHorizontal: 0,
                marginVertical: 6,
              }}
              renderItem={({ item }) => this.renderPost(item)}
              ListFooterComponent={this.renderFooter}
              ListHeaderComponent={this.renderHeader}
              refreshControl={
                <RefreshControl
                  style={{ color: "#639dff" }}
                  tintColor="#639dff"
                  titleColor="#fff"
                  refreshing={this.state.isLoading}
                  onRefresh={this.onRefresh}
                />
              }
              initialNumToRender={7}
              onEndReachedThreshold={0.1}
              showsVerticalScrollIndicator={false}
              onEndReached={() => {
                if (
                  !this.onEndReachedCalledDuringMomentum &&
                  !this.state.isMoreLoading
                ) {

                  this.getMore();
                }
              }}
              onMomentumScrollBegin={() => {
                this.onEndReachedCalledDuringMomentum = false;
              }}
              onScroll={(e) => {
                scrollY.setValue(e.nativeEvent.contentOffset.y);
              }}
            ></FlatList>
            {/* <View style={styles.footer}>
            <TouchableOpacity
              activeOpacity={0.9}
              onPress={this.getMore}
              style={styles.loadMoreBtn}
            >
              <Text style={styles.btnText}>See more moods</Text>
              {this.state.loading ? (
                <ActivityIndicator color="white" style={{ marginLeft:8 }} />
              ) : null}
            </TouchableOpacity>
          </View> */}
        
          </SafeAreaView>
         
        </View>

My renderHeader function:

renderHeader = () => {
    return (

    <View
    style={{
    flex: 1,
    flexDirection: "row",
    backgroundColor: "#ffffff",
    //width: "100%",
    padding: 11,
    alignItems: "center",
    position: "absolute",
    justifyContent: "center",
    //top: 50,
    //bottom: 0,
    //left: 0,
    //elevation: 4,
    //right: 0,
    //height: 50,
  }}

  //flexDirection: "row",
  //backgroundColor: "#ffffff",
  //width: "100%",
  //padding: 11,
  //alignItems: "center",
>
 
  <TouchableOpacity
    onPress={() => this.props.navigation.navigate("Post")}
  >
    <Text
      style={{ alignItems: "center", color: "#C4C6CE" }}
      //placeholder={How are you feeling right now ${this.state.user.name}?}
      multiline
    >{Tell us how are you feeling right now ${this.state.user.name}?}</Text>
  </TouchableOpacity>

  {/* <View style={styles.divider}></View> */}
</View>
    );
  }

Why for example renderFooter works??

renderFooter = () => {
    if (!this.state.isMoreLoading) return true;

    return (
      <ActivityIndicator
        size="large"
        color={"#D83E64"}
        style={{ marginBottom: 10 }}
      />
    );
  };

Answer 1

The solution is to remove the "absolute" style in the header for flatlist. The question is mine im just answering with different account but this is the solution that worked.