React-native ScrollView/FlatList stick to top and bottom of list

user_18695118 0
Viewed 176

I would like to have an item in a ScrollView or FlatList stick to the top AND bottom of the list. This is for a leaderboard component where the current players score is visible at all times.

I've tried to accomplish this with stickyHeaderIndices and can't seem to figure it out. Any help is appreciated.

For example

react-native typescript android javascript ios
1 Answers

you can use the following code to create Sticky Header and Footer

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