React Native ListView scrollToEnd it doesn't work

Question

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

I'm not sure this would work since the ListView doesn't have to render all elements when the view is mounted. There's also no way of knowing when the ListView is done with rendering all the elements. AFAIK the `scrollToEnd` method can be used with a button. — Eldelshell, Feb 18 '17 at 12:13
@user1221780 no,I have no error about it,It is running on iOS simulator — Aaron_ls, Feb 19 '17 at 12:18
@Eldelshell I have a try,It worked by used with a button,but I want to let the ListView scroll to the end at the beginning — Aaron_ls, Feb 20 '17 at 06:47

score 20 · Answer 1 · answered Sep 22 '17 at 17:43

20

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

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

answered Sep 22 '17 at 17:43

Samuel G. P.

3,004
2
29
36

This is valid, but why – weijia.wang Dec 25 '17 at 02:58
Sorry, I don't remember where I got this workaround, but i can say I've spent hours struggling with this bug... – Samuel G. P. Dec 27 '17 at 16:56
2

It's bad practice to use setTimeout – dǝɥɔS ʇoıןןƎ Jan 15 '19 at 17:46
1

It'll just be because rendering takes time. Use onLayout with a bound method which scrolls to end: e.g. scrollToBottom() { this.refs.myView.scrollToEnd() } – Chanoch Mar 27 '19 at 17:11

score 13 · Answer 2 · edited Mar 25 '18 at 16:58

13

Try this:

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

document

edited Mar 25 '18 at 16:58

Jian

3,118
2
22
36

answered Sep 26 '17 at 07:46

Javid Jamae

8,741
4
47
62

MorningLit · Answer 3 · 2023-05-21T13:10:07.133

1

For functional components, the equivalent is using useEffect like so:

useEffect(()=>{
    setTimeout(ref?.current.scrollToEnd());
},[yourArrayData])

Note, you don't need to set a duration for the setTimeout, this is because of Macrotasks in JavaScript, https://javascript.info/event-loop if you want to find out more

edited May 21 '23 at 13:10

answered May 20 '23 at 07:33

MorningLit

36
3

Note, with this solution, `yourArrayData` will cause the `useEffect` to call if it changes (if it in state) or has perceived to have changed since React does not run a deep check on objects in a dependency array [link](https://stackoverflow.com/questions/54095994/react-useeffect-comparing-objects), this answer is still a viable solution – Harrison May 22 '23 at 09:40
Yea I place the yourArrayData in the dependency array because it is equivalent to this other solution https://stackoverflow.com/a/46420586/13710770 Use an empty array if you want this other equivalent solution https://stackoverflow.com/a/46370418/13710770 – MorningLit May 25 '23 at 01:41

score 0 · Answer 4 · answered Mar 27 '19 at 17:18

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.

score 0 · Answer 5 · answered Nov 15 '19 at 08:03

0

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);

answered Nov 15 '19 at 08:03

kautikmistry

686
6
10

React Native ListView scrollToEnd it doesn't work

5 Answers5

Linked