How do you make the ListHeaderComponent of a React Native FlatList 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]}
/>

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)