React Native Flatlist ListHeaderComponent 不起作用

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

I created a simple snack for you, check if this helps. Your code looks okay but not sure about the whole screen design. Here is my snack link. https://snack.expo.io/@saad-bashar/excited-fudge

It might be related to the other components inside your screen. So first check only with flatlist, remove all other components. Hope you can sort it out:)

Answer 2

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.

Answer 3

Use ListHeaderComponentStyle to style the ListHeaderComponent.