{"action":"created","issue":{"url":"https://api.github.com/repos/facebook/react-native/issues/1831","repository_url":"https://api.github.com/repos/facebook/react-native","labels_url":"https://api.github.com/repos/facebook/react-native/issues/1831/labels{/name}","comments_url":"https://api.github.com/repos/facebook/react-native/issues/1831/comments","events_url":"https://api.github.com/repos/facebook/react-native/issues/1831/events","html_url":"https://github.com/facebook/react-native/issues/1831","id":92384484,"number":1831,"title":"[ListView] rows aren't rendered until scroll","user":{"login":"michalraska","id":827753,"avatar_url":"https://avatars.githubusercontent.com/u/827753?v=3","gravatar_id":"","url":"https://api.github.com/users/michalraska","html_url":"https://github.com/michalraska","followers_url":"https://api.github.com/users/michalraska/followers","following_url":"https://api.github.com/users/michalraska/following{/other_user}","gists_url":"https://api.github.com/users/michalraska/gists{/gist_id}","starred_url":"https://api.github.com/users/michalraska/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/michalraska/subscriptions","organizations_url":"https://api.github.com/users/michalraska/orgs","repos_url":"https://api.github.com/users/michalraska/repos","events_url":"https://api.github.com/users/michalraska/events{/privacy}","received_events_url":"https://api.github.com/users/michalraska/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":{"login":"ide","id":379606,"avatar_url":"https://avatars.githubusercontent.com/u/379606?v=3","gravatar_id":"","url":"https://api.github.com/users/ide","html_url":"https://github.com/ide","followers_url":"https://api.github.com/users/ide/followers","following_url":"https://api.github.com/users/ide/following{/other_user}","gists_url":"https://api.github.com/users/ide/gists{/gist_id}","starred_url":"https://api.github.com/users/ide/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ide/subscriptions","organizations_url":"https://api.github.com/users/ide/orgs","repos_url":"https://api.github.com/users/ide/repos","events_url":"https://api.github.com/users/ide/events{/privacy}","received_events_url":"https://api.github.com/users/ide/received_events","type":"User","site_admin":false},"assignees":[{"login":"ide","id":379606,"avatar_url":"https://avatars.githubusercontent.com/u/379606?v=3","gravatar_id":"","url":"https://api.github.com/users/ide","html_url":"https://github.com/ide","followers_url":"https://api.github.com/users/ide/followers","following_url":"https://api.github.com/users/ide/following{/other_user}","gists_url":"https://api.github.com/users/ide/gists{/gist_id}","starred_url":"https://api.github.com/users/ide/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ide/subscriptions","organizations_url":"https://api.github.com/users/ide/orgs","repos_url":"https://api.github.com/users/ide/repos","events_url":"https://api.github.com/users/ide/events{/privacy}","received_events_url":"https://api.github.com/users/ide/received_events","type":"User","site_admin":false}],"milestone":null,"comments":58,"created_at":"2015-07-01T13:25:10Z","updated_at":"2016-07-08T01:23:35Z","closed_at":null,"body":"Hi,\r\nI have list view which displays partially local and partially remote data. Local data are initial for ListView.DataSource. This datasource is set in state of my custom component which wraps ListView and passed in render method to ListView. When are remote data received, new datasource is cloned by cloneWithRowsAndSections method and set to state of custom component. Problem is that are re-rendered only already displayed rows and new rows are rendered after scroll.\r\n\r\n![renderbug](https://cloud.githubusercontent.com/assets/827753/8455400/9fa2f94a-2004-11e5-8a76-fec4dd9db164.gif)\r\n\r\nIs it bug or how I should to force rendering of ListView? With react-native 0.5 it worked but after upgrade to 0.6 it behaves as described above.\r\n"},"comment":{"url":"https://api.github.com/repos/facebook/react-native/issues/comments/231252939","html_url":"https://github.com/facebook/react-native/issues/1831#issuecomment-231252939","issue_url":"https://api.github.com/repos/facebook/react-native/issues/1831","id":231252939,"user":{"login":"gnestor","id":512354,"avatar_url":"https://avatars.githubusercontent.com/u/512354?v=3","gravatar_id":"","url":"https://api.github.com/users/gnestor","html_url":"https://github.com/gnestor","followers_url":"https://api.github.com/users/gnestor/followers","following_url":"https://api.github.com/users/gnestor/following{/other_user}","gists_url":"https://api.github.com/users/gnestor/gists{/gist_id}","starred_url":"https://api.github.com/users/gnestor/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gnestor/subscriptions","organizations_url":"https://api.github.com/users/gnestor/orgs","repos_url":"https://api.github.com/users/gnestor/repos","events_url":"https://api.github.com/users/gnestor/events{/privacy}","received_events_url":"https://api.github.com/users/gnestor/received_events","type":"User","site_admin":false},"created_at":"2016-07-08T01:23:35Z","updated_at":"2016-07-08T01:23:35Z","body":"I think this is related to the ListView's `scrollRenderAheadDistance` (because it renders the un-rendered rows after being touched) and I have managed to fix it by setting the `scrollRenderAheadDistance` to a value greater than 1800. There is definitely a correlation between `scrollRenderAheadDistance` and the number of rows that are rendered but it's inconsistent. I've found that it usually renders as follows (although sometimes it will render all rows):\r\n\r\n| scrollRenderAheadDistance | Number of rows rendered |\r\n|---------------------------------------|------------------------------------|\r\n| 1000                                      | 2                                        |\r\n| 1200                                      | 2-5                                     |\r\n| 1400                                      | 5                                        |\r\n| 1600                                      | 6                                        |\r\n| 1800                                      | 7+                                      |\r\n\r\nI'm rendering a ListView with rows of 80pt height. I've derived a formula that should help you set the exact right `scrollRenderAheadDistance` for your ListView:\r\n\r\n`scrollRenderAheadDistance = 680 + (ROW_HEIGHT_IN_PIXELS * INITIAL_PAGE_SIZE_IN_PIXELS)`\r\n\r\nHowever,  I don't understand the significance of `680` (or `320 * 2`)."}}
{"actor":{"display_login":"gnestor"}}