{"action":"created","issue":{"url":"https://api.github.com/repos/facebook/react-native/issues/8003","repository_url":"https://api.github.com/repos/facebook/react-native","labels_url":"https://api.github.com/repos/facebook/react-native/issues/8003/labels{/name}","comments_url":"https://api.github.com/repos/facebook/react-native/issues/8003/comments","events_url":"https://api.github.com/repos/facebook/react-native/issues/8003/events","html_url":"https://github.com/facebook/react-native/issues/8003","id":159130069,"number":8003,"title":"[ScrollView] [ListView] scrollToBottom","user":{"login":"winterbe","id":485033,"avatar_url":"https://avatars.githubusercontent.com/u/485033?v=3","gravatar_id":"","url":"https://api.github.com/users/winterbe","html_url":"https://github.com/winterbe","followers_url":"https://api.github.com/users/winterbe/followers","following_url":"https://api.github.com/users/winterbe/following{/other_user}","gists_url":"https://api.github.com/users/winterbe/gists{/gist_id}","starred_url":"https://api.github.com/users/winterbe/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/winterbe/subscriptions","organizations_url":"https://api.github.com/users/winterbe/orgs","repos_url":"https://api.github.com/users/winterbe/repos","events_url":"https://api.github.com/users/winterbe/events{/privacy}","received_events_url":"https://api.github.com/users/winterbe/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":5,"created_at":"2016-06-08T10:25:19Z","updated_at":"2016-08-24T16:02:53Z","closed_at":null,"body":"Hey there,\r\n\r\nit 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):\r\n\r\n```js\r\nconst MyComponent = React.createClass({\r\n  contentHeight: 0,\r\n  scrollViewHeight: 0,\r\n\r\n  render() {\r\n    return (\r\n      <ScrollView\r\n        ref='scrollView'\r\n        onContentSizeChange={(w, h) => this.contentHeight = h}\r\n        onLayout={ev => this.scrollViewHeight = ev.nativeEvent.layout.height}>\r\n          ...\r\n      </ScrollView>\r\n    );\r\n  },\r\n\r\n  scrollToBottom(animated = true) {\r\n    const scrollHeight = this.contentHeight - this.scrollViewHeight;\r\n    if (scrollHeight > 0) {\r\n      const scrollResponder = this.refs.scrollView.getScrollResponder();\r\n      scrollResponder.scrollResponderScrollTo({x: 0, scrollHeight, animated});\r\n    }\r\n  }\r\n});\r\n```\r\n\r\nIn 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](http://stackoverflow.com/questions/29829375/how-to-scroll-to-bottom-in-react-native-listview/36803013) and [here](http://stackoverflow.com/questions/29310553/is-it-possible-to-keep-a-scrollview-scrolled-to-the-bottom) for example).\r\n\r\nSince 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:\r\n\r\nhttps://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight\r\n\r\nWhat do you think?"},"comment":{"url":"https://api.github.com/repos/facebook/react-native/issues/comments/242119317","html_url":"https://github.com/facebook/react-native/issues/8003#issuecomment-242119317","issue_url":"https://api.github.com/repos/facebook/react-native/issues/8003","id":242119317,"user":{"login":"winterbe","id":485033,"avatar_url":"https://avatars.githubusercontent.com/u/485033?v=3","gravatar_id":"","url":"https://api.github.com/users/winterbe","html_url":"https://github.com/winterbe","followers_url":"https://api.github.com/users/winterbe/followers","following_url":"https://api.github.com/users/winterbe/following{/other_user}","gists_url":"https://api.github.com/users/winterbe/gists{/gist_id}","starred_url":"https://api.github.com/users/winterbe/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/winterbe/subscriptions","organizations_url":"https://api.github.com/users/winterbe/orgs","repos_url":"https://api.github.com/users/winterbe/repos","events_url":"https://api.github.com/users/winterbe/events{/privacy}","received_events_url":"https://api.github.com/users/winterbe/received_events","type":"User","site_admin":false},"created_at":"2016-08-24T16:02:53Z","updated_at":"2016-08-24T16:02:53Z","body":"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."}}
{"actor":{"display_login":"winterbe"}}