CODEWITHSUNDEEP
react-native
yongfong zhang
yongfong zhang

Reputation: 633

onEndReached fire again and again when ListView nested in ScrollView

 render() {
    return (
      <ScrollView style={styles.scroll_style}>
        {this._renderStoreInfo()}
        {this._renderOperatesView()}
        <View style={styles.space}/>
        <ListView
          contentContainerStyle={styles.list}
          dataSource={this.state.dataSource}
          renderRow={(rowData, sectionID, rowID) => this._renderRow(rowData, rowID)}
          renderFooter={this._renderFooter.bind(this)}
          onEndReached={this._onEndReached.bind(this)}
          onEndReachedThreshold={10} />
      </ScrollView>
    );
  }

the onEndReached fired again and again as soon as it was mounted. but I do not scroll(pull up) the listview.

Upvotes: 3

Views: 2186

Answers (2)

王維新 Daky
王維新 Daky

Reputation: 1

My personal experience.
Just replace <ScrollView> with <View> , then the onEndReached function will work great.
ListView will have scroll-bar itself when your dataSource data over the current screen.
You don't need to use scrollView in the case.

Upvotes: 0

Al Belsky
Al Belsky

Reputation: 1592

There's currently an issue with ListView inside ScrollView, as both have to share the scroll.

It's possible to move what you'd like displayed above the ListView into ListView header (renderHeader method), and remove ScrollView - this avoids nested scroll components:

getPageHeader() {
  return (
    <View>
      {this._renderStoreInfo()}
      {this._renderOperatesView()}
      <View style={styles.space}/>
    </View>   
  )
}

render() {
  return (
      <ListView
        contentContainerStyle={styles.list}
        dataSource={this.state.dataSource}
        renderHeader={() => this.getPageHeader()}
        renderRow={(rowData, sectionID, rowID) => this._renderRow(rowData, rowID)}
        renderFooter={this._renderFooter.bind(this)}
        onEndReached={this._onEndReached.bind(this)}
        onEndReachedThreshold={10} />
  );
}

It's possible that this issue will be fixed in the near future.

Upvotes: 3

Related Questions