How do you make ListHeaderComponent of React Native FlatList sticky?

Question

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

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

The ListHeaderComponent element is basically an X axis label that I would like to keep as a “frozen header”; like in a spreadsheet.

How to make ListHeaderComponent sticky?

Answer 1

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

ListHeaderComponent . This tooltip set the caption at the top of the Flatlist .

stickyHeaderIndices = {[0]} : this tooltip will set the element of the Flatlist 0 position to be a sticky title, and as you can see, we have already added the title to the Flatlist , so the title is now at index position 0, so it will make the title sticky by default.

 <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]} /> 

Answer 2

@Albi @Pir Shukarullah Shah Tell me, please, is there a similar way to attach the first column of FlatList. The flat list is inside the horizontal ScrollView, and I want the first column to be attached to the horizontal scroll.