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

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.

_{(source: nativebase.io)}

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