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

Question

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?

question from:https://stackoverflow.com/questions/44638286/how-do-you-make-the-listheadercomponent-of-a-react-native-flatlist-sticky

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