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?
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]} />
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With