CODEWITHSUNDEEP
ioslistviewreact-native
Hasen
Hasen

Reputation: 12314

React Native ListView with fixed section header that can be updated

I made a section header in my listview that responds to state changes but I realised I need it to be fixed. But upon changing it from renderHeader to renderSectionHeader it is fixed but then no longer responds to state changes.

    <ListView
      dataSource={this.state.dataSource}
      renderHeader={this.renderHeader}
      renderRow={this._renderRow}
    />

renderHeader: function() {
return (
  <View>
    <Text>{this.state.header}</Text>
  </View>

In this way if the state is changed, the text (or whatever it is) will update accordingly. But when scrolling the list the header is not fixed.

    <ListView
      dataSource={this.state.dataSource}
      renderSectionHeader={this.renderSectionHeader}
      renderRow={this._renderRow}
    />

renderSectionHeader: function() {
return (
  <View>
    <Text>{this.state.header}</Text>
  </View>

With the code as above however, the section header is fixed in place when scrolling but when making alterations to state they strangely do not update in the section header as they do with the ordinary header.

Upvotes: 1

Views: 1446

Answers (1)

Nader Dabit
Nader Dabit

Reputation: 53691

If you use the renderSectionHeader to render your header, you need to use cloneWithRowsAndSections as opposed to cloneWithRows.

Here is a pretty good discussion on how to implement this depending on your data.

Here is the implementation of cloneWithRowsAndSections on GitHub.

Upvotes: 1

Related Questions