{"action":"created","issue":{"url":"https://api.github.com/repos/facebook/react-native/issues/15734","repository_url":"https://api.github.com/repos/facebook/react-native","labels_url":"https://api.github.com/repos/facebook/react-native/issues/15734/labels{/name}","comments_url":"https://api.github.com/repos/facebook/react-native/issues/15734/comments","events_url":"https://api.github.com/repos/facebook/react-native/issues/15734/events","html_url":"https://github.com/facebook/react-native/issues/15734","id":254545842,"number":15734,"title":"VirtualizedList + getItemLayout only renders initialNumToRender items","user":{"login":"PublicParadise","id":2541332,"avatar_url":"https://avatars3.githubusercontent.com/u/2541332?v=4","gravatar_id":"","url":"https://api.github.com/users/PublicParadise","html_url":"https://github.com/PublicParadise","followers_url":"https://api.github.com/users/PublicParadise/followers","following_url":"https://api.github.com/users/PublicParadise/following{/other_user}","gists_url":"https://api.github.com/users/PublicParadise/gists{/gist_id}","starred_url":"https://api.github.com/users/PublicParadise/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/PublicParadise/subscriptions","organizations_url":"https://api.github.com/users/PublicParadise/orgs","repos_url":"https://api.github.com/users/PublicParadise/repos","events_url":"https://api.github.com/users/PublicParadise/events{/privacy}","received_events_url":"https://api.github.com/users/PublicParadise/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2017-09-01T06:14:20Z","updated_at":"2017-09-06T16:30:20Z","closed_at":null,"author_association":"NONE","body":"<!--\r\n  PLEASE DON'T DELETE THIS TEMPLATE UNTIL YOU HAVE READ THE FIRST SECTION.\r\n-->\r\n\r\n### Is this a bug report?\r\n\r\nYes\r\n\r\n<!--\r\n  If you answered \"Yes\":\r\n\r\n    We expect that it will take you about 30 minutes to produce a high-quality bug report.\r\n    While this may seem like a lot, putting care into issues helps us fix them faster.\r\n    For bug reports, it is REQUIRED to fill the rest of this template, or the issue will be closed.\r\n\r\n  If you answered \"No\":\r\n\r\n    We use GitHub Issues exclusively for tracking bugs in React Native. If you're looking for help,\r\n    the Community page at http://facebook.github.io/react-native/support.html list various resources \r\n    that should help you get started.\r\n\r\n  Now scroll below!\r\n-->\r\n\r\n### Have you read the [Contributing Guidelines](https://facebook.github.io/react-native/docs/contributing.html)?\r\n\r\nYes\r\n\r\n### Environment\r\n\r\n<!--\r\n  Please fill in all the relevant fields by running these commands in terminal.\r\n-->\r\n\r\n1. `react-native -v`: 0.47.2\r\n2. `node -v`: v6.10.3\r\n3. `npm -v`: 3.10.10\r\n4. `yarn --version`<!-- (if you use Yarn) -->: n/a\r\n\r\nThen, specify:\r\n\r\n<!-- (What platform are you building for? Choose any from iOS, Android, AppleTV.) -->\r\n- Target Platform: iOS\r\n\r\n<!-- Which operating system are you using? Specify macOS, Windows, or Linux, along with specific release versions -->\r\n- Development Operating System: macOS\r\n\r\n<!-- Include any additional relevant information. Are you using Xcode or Android Studio to build native code? Is the issue specific to a particular iOS or Android SDK? -->\r\n- Build tools: Xcode\r\n\r\n### Steps to Reproduce\r\n\r\n<!--\r\n  How would you describe your issue to someone who doesn’t know you or your project?\r\n  Try to write a sequence of steps that anybody can repeat to see the issue.\r\n  Be specific! If the bug cannot be reproduced, your issue may be closed.\r\n-->\r\n\r\n(Write your steps here:)\r\n\r\n1. Create a component with a `FlatList` w/t `getItemLayout`, i.e.\r\n\r\n```jsx\r\n<FlatList\r\n            ref={ref => { const anyRef: any = ref; this._flatList = anyRef }}\r\n            data={data}\r\n            renderItem={this._renderItem}\r\n            onViewableItemsChanged={this._onViewableItemsChanged}\r\n            getItemLayout={this._getItemLayout}\r\n            initialNumToRender={10}\r\n          />\r\n```\r\nI am using the standard `getItemLayout`:\r\n```js\r\ngetItemLayout={(data, index) => (\r\n  {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}\r\n)}\r\n```\r\n2. Provide a data source that has more than `initialNumToRender` items\r\n3. Render and scroll to bottom\r\n\r\n### Expected Behavior\r\n\r\n<!--\r\n  How did you expect your project to behave?\r\n  It’s fine if you’re not sure your understanding is correct.\r\n  Just write down what you thought would happen.\r\n-->\r\n\r\n(Write what you thought would happen.)\r\n\r\nAll items are rendered.\r\n\r\n### Actual Behavior\r\n\r\nOnly `initialNumToRender` items are rendered.\r\n\r\n<!--\r\n  Did something go wrong?\r\n  Is something broken, or not behaving as you expected?\r\n  Describe this section in detail, and attach screenshots if possible.\r\n  Don't just say \"it doesn't work\"!\r\n-->\r\n\r\n(Write what happened. Add screenshots!)\r\n\r\n### Reproducible Demo\r\n\r\nThe bug is in VirtualizedList:\r\n```\r\nconst onLayout =\r\n      getItemLayout && !parentProps.debug && !fillRateHelper.enabled()\r\n        ? undefined\r\n        : this.props.onLayout;\r\n```\r\n\r\nThe fix is:\r\n```\r\nconst onLayout = this.props.onLayout;\r\n```\r\nYou need `onLayout` because somebody needs to call `_onCellLayout(e, key, ii)`.\r\n\r\n<!--\r\n  Please share a project that reproduces the issue.\r\n  There are two ways to do it:\r\n\r\n    * Create a new app using https://snack.expo.io/ and try to reproduce the issue in it.\r\n      This is useful if you roughly know where the problem is, or can’t share the real code.\r\n\r\n    * Or, copy your app and remove things until you’re left with the minimal reproducible demo.\r\n      This is useful for finding the root cause. You may then optionally create a Snack.\r\n\r\n  This is a good guide to creating bug demos: https://stackoverflow.com/help/mcve\r\n  Once you’re done, copy and paste the link to the Snack or a public GitHub repository below:\r\n-->\r\n\r\n(Paste the link to an example project and exact instructions to reproduce the issue.)\r\n\r\n<!--\r\n  What happens if you skip this step?\r\n\r\n  Someone will read your bug report, and maybe will be able to help you,\r\n  but it’s unlikely that it will get much attention from the team. Eventually,\r\n  the issue will likely get closed in favor of issues that have reproducible demos.\r\n\r\n  Please remember that:\r\n\r\n    * Issues without reproducible demos have a very low priority.\r\n    * The person fixing the bug would have to do that anyway. Please be respectful of their time.\r\n    * You might figure out the issues yourself as you work on extracting it.\r\n\r\n  Thanks for helping us help you!\r\n-->\r\n"},"comment":{"url":"https://api.github.com/repos/facebook/react-native/issues/comments/327539851","html_url":"https://github.com/facebook/react-native/issues/15734#issuecomment-327539851","issue_url":"https://api.github.com/repos/facebook/react-native/issues/15734","id":327539851,"user":{"login":"duailibe","id":1574588,"avatar_url":"https://avatars3.githubusercontent.com/u/1574588?v=4","gravatar_id":"","url":"https://api.github.com/users/duailibe","html_url":"https://github.com/duailibe","followers_url":"https://api.github.com/users/duailibe/followers","following_url":"https://api.github.com/users/duailibe/following{/other_user}","gists_url":"https://api.github.com/users/duailibe/gists{/gist_id}","starred_url":"https://api.github.com/users/duailibe/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/duailibe/subscriptions","organizations_url":"https://api.github.com/users/duailibe/orgs","repos_url":"https://api.github.com/users/duailibe/repos","events_url":"https://api.github.com/users/duailibe/events{/privacy}","received_events_url":"https://api.github.com/users/duailibe/received_events","type":"User","site_admin":false},"created_at":"2017-09-06T16:30:19Z","updated_at":"2017-09-06T16:30:19Z","author_association":"NONE","body":"Hey, I've just run to a similar problem: the FlatList w/ `getItemLayout` would render the `initialNumToRender` and then have a blank space below related to the additional items not being rendered. And when I removed `getItemLayout` it would render the additional items but only after scrolling. But the most interesting part is that that would not happen all the time, only when the app would go through a specific flow.\r\n\r\nAfter some debugging with the RN internals, I've discovered that we had a never ending animation that was preventing FlatList to update, since it uses `InteractionManager.runAfterInteractions()`. When I fixed that, everything started working again.\r\n\r\nAlso, with your fix, `getItemLayout` is ignored and I don't want that in my use case."}}
{"actor":{"display_login":"duailibe"}}