{"action":"created","issue":{"url":"https://api.github.com/repos/facebook/react-native/issues/13905","repository_url":"https://api.github.com/repos/facebook/react-native","labels_url":"https://api.github.com/repos/facebook/react-native/issues/13905/labels{/name}","comments_url":"https://api.github.com/repos/facebook/react-native/issues/13905/comments","events_url":"https://api.github.com/repos/facebook/react-native/issues/13905/events","html_url":"https://github.com/facebook/react-native/issues/13905","id":227820158,"number":13905,"title":"List component to iterate over data object, not array","user":{"login":"annelorraineuy","id":5892190,"avatar_url":"https://avatars0.githubusercontent.com/u/5892190?v=3","gravatar_id":"","url":"https://api.github.com/users/annelorraineuy","html_url":"https://github.com/annelorraineuy","followers_url":"https://api.github.com/users/annelorraineuy/followers","following_url":"https://api.github.com/users/annelorraineuy/following{/other_user}","gists_url":"https://api.github.com/users/annelorraineuy/gists{/gist_id}","starred_url":"https://api.github.com/users/annelorraineuy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/annelorraineuy/subscriptions","organizations_url":"https://api.github.com/users/annelorraineuy/orgs","repos_url":"https://api.github.com/users/annelorraineuy/repos","events_url":"https://api.github.com/users/annelorraineuy/events{/privacy}","received_events_url":"https://api.github.com/users/annelorraineuy/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2017-05-10T21:47:46Z","updated_at":"2017-05-11T00:58:32Z","closed_at":null,"body":"### Description\r\n\r\nI posted on StackOverflow but no luck. Before, I used ListView successfully to iterate over a data object. Now, FlatList only accepts an array of objects, and based on the docs it says VirtualizedList can be used for any data type. \r\n\r\nHowever, there's no example of overriding `getItem`, `getItemCount`, and `keyExtractor` for iterating over an object with keys.\r\n\r\n### Reproduction Steps and Sample Code\r\n\r\nSo far, this is what I have but it is not quite right.\r\n\r\n```\r\nimport React, { Component } from 'react';\r\nimport { VirtualizedList } from 'react-native';\r\nimport _isEqual from 'lodash/isEqual';\r\nimport _size from 'lodash/size';\r\nimport _forEach from 'lodash/forEach';\r\nimport GameListView from './GameListView';\r\n\r\nexport default class GameCategoriesRoll extends Component\r\n{\r\n    constructor(props)\r\n    {\r\n        super(props)\r\n        // console.log('data:', this.props.data);\r\n        this._getItem = this._getItem.bind(this)\r\n        this._keyExtractor = this._keyExtractor.bind(this)\r\n        this._renderRow = this._renderRow.bind(this)\r\n    }\r\n\r\n    shouldComponentUpdate(nextProps, nextState, nextContext)\r\n    {\r\n        return !_isEqual(this.props, nextProps) || !_isEqual(this.state, nextState)\r\n    }\r\n\r\n    _keyExtractor(data) {\r\n       // returns all keys in object\r\n        return _forEach(data, function(category, key){\r\n            console.log('keyextractor:', key);\r\n            return key\r\n        });\r\n    }\r\n\r\n    _getItem(data) {\r\n      // data is the whole collection returned so i try to return just one key\r\n        return _forEach(data, function(category, key){\r\n            console.log('getItem category: ', category, 'key', key);\r\n            return category\r\n        });\r\n    }\r\n\r\n    _renderRow(item)\r\n    {\r\n        console.log('renderRow: ', item); // <- returns whole collection / object\r\n        if (item.appItems && item.appItems.length > 0)\r\n        {\r\n            console.log('item', item);\r\n            /*return (\r\n                <GameListView\r\n                    category={item.name}\r\n                    games={item}\r\n                    recentlyPlayed={false}\r\n                />)*/\r\n        }\r\n    }\r\n\r\n    render()\r\n    {\r\n        return (\r\n            <VirtualizedList\r\n                keyExtractor={(item) => this._keyExtractor(item)}\r\n                data={this.props.data}\r\n                getItem={(data) => this._getItem(data)}\r\n                getItemCount={(data) => data ? _size(data) : 0}\r\n                renderItem={this._renderRow}\r\n                debug\r\n                contentContainerStyle={{ flexGrow: 1, overflow: 'hidden' }}\r\n                showsVerticalScrollIndicator={false}\r\n                automaticallyAdjustContentInsets={false}\r\n                removeClippedSubviews={false}\r\n                enableEmptySections={true}\r\n            />\r\n        )\r\n    }\r\n}\r\n```\r\n\r\nData format:\r\n```\r\n{ \r\n under5: {\r\n   categoryTitle: \"5 and Under\",\r\n   items: [\r\n      { ... },\r\n      { ... }\r\n    ]\r\n  },\r\n learning: Object (same format as above...), \r\n puzzles: Object, \r\n family: Object, \r\n sports: Object\r\n...\r\n}\r\n```\r\n\r\n### Solution\r\n\r\nMaybe an example of using VirtualizedList to iterate over complex data objects, or even a simple data object. Currently there is no example on the docs. See: https://facebook.github.io/react-native/docs/virtualizedlist.html\r\n\r\n### Additional Information\r\n\r\n* React Native version: 0.43.4\r\n* Platform: testing on Android\r\n* Development Operating System: macOS Sierra 10.12.4\r\n* Dev tools: Android Studio\r\n"},"comment":{"url":"https://api.github.com/repos/facebook/react-native/issues/comments/300652931","html_url":"https://github.com/facebook/react-native/issues/13905#issuecomment-300652931","issue_url":"https://api.github.com/repos/facebook/react-native/issues/13905","id":300652931,"user":{"login":"MovingGifts","id":1202909,"avatar_url":"https://avatars2.githubusercontent.com/u/1202909?v=3","gravatar_id":"","url":"https://api.github.com/users/MovingGifts","html_url":"https://github.com/MovingGifts","followers_url":"https://api.github.com/users/MovingGifts/followers","following_url":"https://api.github.com/users/MovingGifts/following{/other_user}","gists_url":"https://api.github.com/users/MovingGifts/gists{/gist_id}","starred_url":"https://api.github.com/users/MovingGifts/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/MovingGifts/subscriptions","organizations_url":"https://api.github.com/users/MovingGifts/orgs","repos_url":"https://api.github.com/users/MovingGifts/repos","events_url":"https://api.github.com/users/MovingGifts/events{/privacy}","received_events_url":"https://api.github.com/users/MovingGifts/received_events","type":"User","site_admin":false},"created_at":"2017-05-11T00:58:32Z","updated_at":"2017-05-11T00:58:32Z","body":"@facebook-github-bot answered"}}
{"actor":{"display_login":"MovingGifts"}}