react native scroll to a listview item programmatically

Question

I have a horizontal ListView each item of the ListView occupy the whole width and height and same for the second item and so on ( it's like a horizontal pagination ), after implementing it I want to scroll to the next item programmatically, so I disabled scrolling scrollEnabled={false} now I want to scroll programmatically ( after triggering an event ) to the next item (page), any hint or idea for this one?

UPD

This the error caused by scrollTo : scrollTo is not defined

<Button title="Learn More"
  onPress = {(ev)=>{
     scrollTo(0, 1000)
  }}></Button>

scrollTo function would be best possible way to achieve this. — Sagar Khatri
– Sagar Khatri, Commented May 3, 2017 at 9:06
@SagarKhatri I'd did use it inside a function "renderRow()" but I'm getting scrollTo in not defined! — Abdennacer Lachiheb
– Abdennacer Lachiheb, Commented May 3, 2017 at 9:15
@AbdenaceurLichiheb If you're getting that error (and not only in this case) is better to showing us the code :) — LS05
– LS05, Commented May 3, 2017 at 9:37
ok. This is more a javascript related error. scrollTo(0, 1000) is not defined because the context of that call is that arrow function and not the component. So you need a reference to the ListView and then you can do like: listview.scrollTo(0, 1000) — LS05
– LS05, Commented May 3, 2017 at 9:44
@AbdenaceurLichiheb Just for reference: developer.mozilla.org/en/docs/Web/JavaScript/Reference/… — LS05
– LS05, Commented May 3, 2017 at 10:58

LS05 · Accepted Answer · 2017-05-03 10:49:59Z

2

1. Try to get a reference to the scroll view

This is how I do it:

render(){
  let _listView: ListView;
  return (          
      <ListView ref={(listView) => { _listView = listView; }}
            dataSource={this.state.dataSource}
            renderRow={this._renderRow.bind(this)}
      />
  )
}

2. Using the _listView variable and calling the scrollTo method.

Note that you're using it in an arrow function and in my code above, the _listView variable is inside the render method. So you can create it inside the constructor and then use it as a class property.

Like this:

constructor() {
  this._listView = {};
}

(Note that this is an example initialization, I don't know where you're using that button, so probably this second point is not necessary or even wrong, so everything could be done inside the render method).

answered May 3, 2017 at 10:49

LS05

1022 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Abdennacer Lachiheb Over a year ago

I already fix it I just forgot to add ref="listview" to my listview, thanks :)

Collectives™ on Stack Overflow

react native scroll to a listview item programmatically

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related