CODEWITHSUNDEEP
listviewscrollreact-native
Abdennacer Lachiheb
Abdennacer Lachiheb

Reputation: 4888

react native scroll to a listview item programmatically

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>

Upvotes: 1

Views: 1515

Answers (1)

LS05
LS05

Reputation: 102

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

Upvotes: 2

Related Questions