React Native ListView ScrollToEnd It Doesn't Work

I use the ListView's scrollToEnd, but it doesn't work, but it worked for scrollTo. What should I do to deal with it.

Solution 1:

There is a workaround, wrap it in a setTimeout like so:

componentDidMount() {
  setTimeout(() => {
    this.refs.dateList.scrollToEnd();
  }, 50);
}

Solution 2:

Try this:

<ListView
    ref={ ( ref ) => this.scrollView = ref }
    onContentSizeChange={ () => {        
        this.scrollView.scrollToEnd( { animated: false } )
    } } >
</ListView>

document

Solution 3:

Rendering takes time so setTimeout() before scrolling to end will work. You can, however, use the onLayout() method.

export default MyComponent extends React.Component {
  constructor(props) {
    super(props)

    this.scrollToBottom = this.scrollToBottom.bind(this)
  }

  scrollToBottom() {
    this.refs.myView.scrollToEnd()
  }

  render() {
    return {
      <ListView
           onLayout={this.scrollToBottom}
           ref='myView'
           ...
      />
   }
 }

Note: ListView is now deprecated.

Solution 4:

This this worked for me.

<Content ref={c => (this.contentComponent = c)}>
....Any code
</Content >

This allows you to to use the scrollToPosition(0) function like

this.contentComponent._root.scrollToPosition(0);