How do you make the ListHeaderComponent of a React Native FlatList sticky?

I have a FlatList that is purposefully wider then the screen width.

The list scrolls vertically to view each row and sits in a horizontal ScrollView to access off-screen items.

The ListHeaderComponent prop is basically an x-axis label I'd like to behave as a "frozen header"; like in a spreadsheet.

How do I make the ListHeaderComponent sticky?

Solution 1:

You need to set prop to Flatlist as stickyHeaderIndices={[0]}

ListHeaderComponent: This prop would set the header view at the top of FlatList.

stickyHeaderIndices={[0]}: This prop would set the FlatList 0 index position item as sticky header and as you can see we have already added the header to FlatList so the header is now on 0 index position, so it will by default make the header as sticky.

<FlatList
  data={ this.state.FlatListItems }
  ItemSeparatorComponent={ this.FlatListItemSeparator}
  renderItem={ ({item}) => (
    <Text
      style={styles.FlatList_Item}
      onPress={this.GetItem.bind(this, item.key)}> {item.key}
      </Text>
  )}
  ListHeaderComponent={this.Render_FlatList_Sticky_header}
  stickyHeaderIndices={[0]}
/>

Solution 2:

stickyHeaderIndices={[0]} would solve your problem.

 <FlatList
        data={this.state.data}
        renderItem={this.renderItem}
        keyExtractor={item => item.id}
        stickyHeaderIndices={[0]}
      />

Besides, stickyHeaderIndices can also be an array of the indices we want to stick. You can even set a lot of indices like this: FlatList Sticky Header Example

 <FlatList
        data={this.state.data}
        renderItem={this.renderItem}
        keyExtractor={item => item.name}
        stickyHeaderIndices={[0, 6, 13]}
      />

When you keep scrolling the FlatList, item0 will be sticky, and then be replaced by item6, item13.

You can't find stickyHeaderIndices in the RN FlatList documentation. But you can find it in the source code. VirtualizedList supports it.

VirtualizedList.js#L964