3

In iOS with Objective-C we can make UITableView scroll to the particular row index by using scrollToRowAtIndexPath method but in React-Native I did NOT find such a way to scroll Listview at particular row index.

Following is the scenario,

  1. There is Listview with such expandable rows like while tapping it expands and the expandable row contains TextInput component.
  2. While inputting text in TextInput, the keyboard will be shown up and ideally at that moment Listview should be scrolled to up (once the keyboard get down Listview should be scrolled down to its previous position).

This can be easily achieved with Native-iOS but I am stuck in React-Native.

enter image description here

I TRIED FOLLOWING WAY BUT DID NOT ACHIEVE WELL

There is a method called scrollTo(x:0,y:10,animated:true) in Listview component (actually its method of Scrollview) by which it can be scrolled up/down based on the y coordinate of the parent view.

I successfully receive Keyboard's Up & Down events in my code and based on that I can somehow manage with scrollTo method (by calculating the y coordinate) when Keyboard gets up (as mentioned in @Alexey's answer) but I have NO idea about how to calculate y coordinate when Keyboard gets down? (At this moment ideally, the Listview should scroll down to its previous position).

Any help or hint would be appreciated!

Nirav Dangi
  • 3,607
  • 4
  • 49
  • 60
  • I had the same question here: http://stackoverflow.com/questions/34750424/react-native-listview-how-to-scroll-to-a-particular-row – Ben Clayton Mar 17 '16 at 16:47

1 Answers1

5

What about row height * item index? Let's say you want to scroll to 20th element in your ListView. Each row has height: 50. We calculate an offset at 20th element by using formula I mentioned above: 50 * 20 = 1000. Then use scrollTo(0, 1000) and you'll scroll to the desired element.

To be able to scroll back, you need to store an offset before you apply a scrollTo function: 

var scrollProperties = this.refs.listView.scrollProperties;
var scrollOffset = scrollProperties.contentLength - scrollProperties.visibleLength;

After you hook up on keyboard's event (keyboardWillHide from the DeviceEventEmitter), you can do scrollTo to the previous offset.

Alexey Kureev
  • 1,978
  • 15
  • 25
  • Thanks for the answer. Yes, I already had this trick in my mind. But here it's getting trouble when the Keyboard gets down. At this moment ideally, the Listview should scroll down to its previous position but how can I come to know its previous position? I hope you getting my query..! Please check point-2 in my question ````(once the keyboard get down Listview should be scrolled down to its previous position)```` – Nirav Dangi Mar 17 '16 at 11:17
  • Well, in this case you store your previous offset – Alexey Kureev Mar 17 '16 at 13:05