I have an Header component in my FlatList, how can I make the first Item overlap the bottom part of the Header?

Question

In the current user story at my company, I need to build a component that sits on top of the list, this component is the Header of the FlatList. I need to make the first item, not the Header, stay on top of the Header, but theres text on the Header so that text should be visible too.

I made it with a FlatList inside a ScrollView: - ScrollView - HeaderComponent - FlatList

It works pretty well, the problem is the company that hired me doesn't like that.

When using a ScrollView I also, used position absolute and made the marginTop -80.

I'm using the FlatList prop: ListHeaderComponent/ListHeaderComponentStyle

    const concierge = <Concierge type="article" />;
    return (
      <FlatList
        style={styles.container}
        data={data}
        keyExtractor={(card, i) => `${card.id}_${i}`}
        renderItem={this.renderQuickViews}
        extraData={cardsContent}
        ListHeaderComponent={concierge}
        ListHeaderComponentStyle={styles.concierge}
      />
    );

I need the Concierge component to be displayed under the first element of the list, but still be seen, the first element can only overlap the Header by like half of it.

João Silva João Silva · Accepted Answer · 2019-06-26T10:50:49

I found the solution, after some time resting my head, since if I do a marginBottom: 80, the below item would go down 80px, that's the logical thing to do in CSS, then if I did marginBottom: -80, should it go up? Yes, it did.

The solution to make the first element in the FlatList overlap the FlatList Header is a simple: marginBottom: -80

The number is relative, in my case -80 was the number, in someone elses case might be another number.

I have an Header component in my FlatList, how can I make the first Item overlap the bottom part of the Header?

1 Answers