React-native: [ScrollView] [ListView] scrollToBottom

[winterbe]

Hey there,

it took me quite some time to figure out how to programmatically scroll a ScrollView to the bottom such that the last elements become visible. This works for me on iOS and ScrollView (didn't test with ListView and Android yet):

const MyComponent = React.createClass({
  contentHeight: 0,
  scrollViewHeight: 0,

  render() {
    return (
      <ScrollView
        ref='scrollView'
        onContentSizeChange={(w, h) => this.contentHeight = h}
        onLayout={ev => this.scrollViewHeight = ev.nativeEvent.layout.height}>
          ...
      </ScrollView>
    );
  },

  scrollToBottom(animated = true) {
    const scrollHeight = this.contentHeight - this.scrollViewHeight;
    if (scrollHeight > 0) {
      const scrollResponder = this.refs.scrollView.getScrollResponder();
      scrollResponder.scrollResponderScrollTo({x: 0, scrollHeight, animated});
    }
  }
});

In my opinion this method should be directly exposed by ScrollView and ListView since it's a quite common usecase. And there's quite a bit confusion on StackOverflow about how to achieve this (see here and here for example).

Since many React-Native developers are probably also doing web development, a similar API to the DOM would be nice by exposing a scrollHeight property which automatically updates when the layout of the component changes:

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight

What do you think?

[sibelius]

this do not work with ListView

[winterbe]

@sibelius Maybe you could use ListView#renderScrollComponent so you can pass your own ScrollView with the props set up as described above.

[sibelius]

this solution works for ListView: http://stackoverflow.com/a/34838513/2628278

[toddmetheny]

Where is scrollToBottom() called?

[winterbe]

Use it manually where ever you want. In my usecase I have a text field attached to the bottom of the screen and when the text field gains focus I want the ScrollView above to be scrolled to the bottom because that's the position where new elements get attached when hitting enter.

[kt3k]

Found maybe a typo in the example:

      scrollResponder.scrollResponderScrollTo({x: 0, scrollHeight, animated});

This line should be the below (in my env):

      scrollResponder.scrollResponderScrollTo({x: 0, y: scrollHeight, animated});

[sudhanshu6247]

contentHeight is not giving exact height of content in scrollview, it's giving lesser value. I tried measure() function for wrapper inside scrollview, it's also giving same value as contentHeight. In scrollView I am loading several components, it seems it's ignoring the height of some components.

[hramos]

Closing as ListView is deprecated in 0.43. Use FlatList.