{"action":"created","issue":{"url":"https://api.github.com/repos/facebook/react-native/issues/19621","repository_url":"https://api.github.com/repos/facebook/react-native","labels_url":"https://api.github.com/repos/facebook/react-native/issues/19621/labels{/name}","comments_url":"https://api.github.com/repos/facebook/react-native/issues/19621/comments","events_url":"https://api.github.com/repos/facebook/react-native/issues/19621/events","html_url":"https://github.com/facebook/react-native/issues/19621","id":330570788,"node_id":"MDU6SXNzdWUzMzA1NzA3ODg=","number":19621,"title":"[FlatList] The `maintainVisibleContentPosition` doesn't work for the 1st time change.","user":{"login":"chinalwb","id":1758864,"node_id":"MDQ6VXNlcjE3NTg4NjQ=","avatar_url":"https://avatars2.githubusercontent.com/u/1758864?v=4","gravatar_id":"","url":"https://api.github.com/users/chinalwb","html_url":"https://github.com/chinalwb","followers_url":"https://api.github.com/users/chinalwb/followers","following_url":"https://api.github.com/users/chinalwb/following{/other_user}","gists_url":"https://api.github.com/users/chinalwb/gists{/gist_id}","starred_url":"https://api.github.com/users/chinalwb/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/chinalwb/subscriptions","organizations_url":"https://api.github.com/users/chinalwb/orgs","repos_url":"https://api.github.com/users/chinalwb/repos","events_url":"https://api.github.com/users/chinalwb/events{/privacy}","received_events_url":"https://api.github.com/users/chinalwb/received_events","type":"User","site_admin":false},"labels":[{"id":860843489,"node_id":"MDU6TGFiZWw4NjA4NDM0ODk=","url":"https://api.github.com/repos/facebook/react-native/labels/:large_orange_diamond:Lists","name":":large_orange_diamond:Lists","color":"fef2c0","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2018-06-08T08:44:38Z","updated_at":"2018-09-10T22:54:46Z","closed_at":null,"author_association":"NONE","body":"<!-- Requirements: please go through this checklist before opening a new issue -->\r\n  - [ ] Review the documentation: https://facebook.github.io/react-native\r\n  - [ ] Search for existing issues: https://github.com/facebook/react-native/issues\r\n  - [ ] Use the latest React Native version: https://github.com/facebook/react-native/releases\r\n  - [ ] Run `react-native info` in your terminal and paste its contents under \"Environment\"\r\n  - [ ] Let us know how to reproduce the issue. Include a code sample, share a project, or\r\n    share an app that reproduces the issue using https://snack.expo.io/\r\n\r\n## Environment\r\nEnvironment:\r\n  OS: macOS High Sierra 10.13.4\r\n  Node: 6.11.3\r\n  Yarn: 0.24.5\r\n  npm: 5.5.1\r\n  Watchman: 4.7.0\r\n  Xcode: Xcode 9.2 Build version 9C40b\r\n  Android Studio: 3.1 AI-173.4670197\r\n\r\nPackages: (wanted => installed)\r\n  react: 16.3.1 => 16.3.1\r\n  react-native: 0.55.2 => 0.55.2\r\n\r\n## Description\r\nI have a FlatList with 8 items: 100 ~ 107 are being shown\r\nI set `minIndexForVisible = 0` for `maintainVisibleContentPosition`:\r\n```\r\n        <FlatList\r\n          style={styles.flatList}\r\n          data={this.state.items}\r\n          renderItem={this._renderItem}\r\n          maintainVisibleContentPosition={{\r\n            minIndexForVisible: 0,\r\n          }}\r\n        />\r\n```\r\nI have a button to prepend 90 ~ 99 (10 items in total) to the FlatList.\r\nAt beginning, the top item 100 is being shown at top of the FlatList, then I scroll down a bit, then 102 is being at top of the screen.\r\n\r\nBy clicking the prepend button, I expect the FlatList:\r\n1. The items should be changed to 90 ~ 99 + 100 ~ 107 --- this is OK\r\n2. I expect the 1st visible item, i.e.: 102, to be keep its position -- this is not OK -- instead the FlatList scrolls to top, i.e.: the item 92 is being shown at top.\r\n\r\nThen I click the prepend button again, this time, I expect the FlatList:\r\n1. The items should be changed to 80 ~ 89 + 90 ~ 107 --- this is OK\r\n2. I expect the 1st visible item, i.e.: 92, to be keep its position -- this is OK this time.\r\n\r\n## Steps to Reproduce\r\nSee my code on snack.  [https://snack.expo.io/@rainliu123/flatlisttest](https://snack.expo.io/@rainliu123/flatlisttest)\r\n\r\n```\r\nimport React, { Component } from 'react';\r\nimport {\r\n  Platform,\r\n  StyleSheet,\r\n  Text,\r\n  View,\r\n  FlatList,\r\n  Button,\r\n} from 'react-native';\r\n\r\nconst instructions = Platform.select({\r\n  ios: 'Press Cmd+R to reload,\\n' +\r\n    'Cmd+D or shake for dev menu',\r\n  android: 'Double tap R on your keyboard to reload,\\n' +\r\n    'Shake or press menu button for dev menu',\r\n});\r\n\r\nexport default class App extends Component<Props> {\r\n\r\n  constructor(props) {\r\n    super(props)\r\n\r\n    this.messages =  [{key: '100'}, {key: '101'}, {key: '102'}, {key: '103'},\r\n    {key: '104'}, {key: '105'}, {key: '106'}, {key: '107'}]\r\n    this.state = {\r\n      items: [\r\n       ...this.messages\r\n        // {key: '104'}, {key: '105'}, {key: '106'}, {key: '107'}\r\n      ],\r\n    }\r\n\r\n    this.topNumber = 100\r\n\r\n    this._append = this._append.bind(this)\r\n  }\r\n\r\n  _renderItem = ({item}) => {\r\n    return (\r\n      <View style={styles.item}>\r\n         <Text>{item.key}</Text>\r\n      </View>\r\n    )\r\n  }\r\n\r\n\r\n  _preppend = () => {\r\n    console.log(`this.state.items len == ${this.state.items.length}`)\r\n    let newItems = []\r\n    for (var i = 10; i >= 1; i--) {\r\n      const itemNumber = this.topNumber - i\r\n      console.log(itemNumber)\r\n      const newItemText = '' + itemNumber\r\n      console.log(`${newItemText}`)\r\n      const newItem = {\r\n        key: newItemText,\r\n      }\r\n      newItems.push(newItem)\r\n    }\r\n\r\n    this.topNumber = this.topNumber - 10\r\n    \r\n    setTimeout(()=>{\r\n      this.setState({\r\n        items: [...newItems, ...this.state.items]\r\n      })\r\n    }, 1000)\r\n    \r\n  }\r\n\r\n  _append = () => {\r\n    const newItemText = '' + (100 + this.state.items.length)\r\n    const newItem = {\r\n      key: newItemText,\r\n    }\r\n    this.setState({\r\n      items: [...this.state.items, newItem]\r\n    })\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <View style={styles.container}>\r\n\r\n        <FlatList\r\n          style={styles.flatList}\r\n          data={this.state.items}\r\n          renderItem={this._renderItem}\r\n          maintainVisibleContentPosition={{\r\n            minIndexForVisible: 0,\r\n          }}\r\n        />\r\n\r\n        <View style={styles.buttons}>\r\n          <Button onPress={this._preppend}\r\n            title=\"Preppend\" />\r\n          <Button onPress={this._append} \r\n            title=\"Append\" />\r\n        </View>\r\n      </View>\r\n    );\r\n  }\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n  flatList: {\r\n    flex: 8,\r\n  },\r\n  buttons: {\r\n    height: 30,\r\n    marginBottom: 10,\r\n    flexDirection: 'row',\r\n    justifyContent: 'space-around',\r\n  },\r\n  item: {\r\n    flex: 1,\r\n    width: 300,\r\n    justifyContent: 'center',\r\n    alignItems: 'center',\r\n    height: 100,\r\n    backgroundColor: '#fff000',\r\n    marginBottom: 20,\r\n  },\r\n  container: {\r\n    flex: 10,\r\n    justifyContent: 'center',\r\n    alignItems: 'center',\r\n    backgroundColor: '#05FC0F',\r\n  },\r\n});\r\n```\r\n\r\n## Expected Behavior\r\nThe first time I prepend items to FlatList, the content position should be locked\r\n\r\n## Actual Behavior\r\nThe first time I prepend items to FlatList, the content position cannot be locked.\r\nBTW, the subsequent prepend items to FlatList is able to keep the position."},"comment":{"url":"https://api.github.com/repos/facebook/react-native/issues/comments/420087882","html_url":"https://github.com/facebook/react-native/issues/19621#issuecomment-420087882","issue_url":"https://api.github.com/repos/facebook/react-native/issues/19621","id":420087882,"node_id":"MDEyOklzc3VlQ29tbWVudDQyMDA4Nzg4Mg==","user":{"login":"stale[bot]","id":26384082,"node_id":"MDM6Qm90MjYzODQwODI=","avatar_url":"https://avatars3.githubusercontent.com/in/1724?v=4","gravatar_id":"","url":"https://api.github.com/users/stale%5Bbot%5D","html_url":"https://github.com/apps/stale","followers_url":"https://api.github.com/users/stale%5Bbot%5D/followers","following_url":"https://api.github.com/users/stale%5Bbot%5D/following{/other_user}","gists_url":"https://api.github.com/users/stale%5Bbot%5D/gists{/gist_id}","starred_url":"https://api.github.com/users/stale%5Bbot%5D/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/stale%5Bbot%5D/subscriptions","organizations_url":"https://api.github.com/users/stale%5Bbot%5D/orgs","repos_url":"https://api.github.com/users/stale%5Bbot%5D/repos","events_url":"https://api.github.com/users/stale%5Bbot%5D/events{/privacy}","received_events_url":"https://api.github.com/users/stale%5Bbot%5D/received_events","type":"Bot","site_admin":false},"created_at":"2018-09-10T22:54:46Z","updated_at":"2018-09-10T22:54:46Z","author_association":"NONE","body":"Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as \"For Discussion\" or \"Good first issue\" and I will leave it open. Thank you for your contributions.\n"}}
{"actor":{"display_login":"stale"}}