[FlatList] The maintainVisibleContentPosition doesn't work for the 1st time change.

[chinalwb]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native version: https://github.com/facebook/react-native/releases
• Run react-native info in your terminal and paste its contents under "Environment"
• Let us know how to reproduce the issue. Include a code sample, share a project, or
  share an app that reproduces the issue using https://snack.expo.io/

Environment

Environment:
OS: macOS High Sierra 10.13.4
Node: 6.11.3
Yarn: 0.24.5
npm: 5.5.1
Watchman: 4.7.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 3.1 AI-173.4670197

Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: 0.55.2 => 0.55.2

Description

I have a FlatList with 8 items: 100 ~ 107 are being shown
I set minIndexForVisible = 0 for maintainVisibleContentPosition:

        <FlatList
          style={styles.flatList}
          data={this.state.items}
          renderItem={this._renderItem}
          maintainVisibleContentPosition={{
            minIndexForVisible: 0,
          }}
        />

I have a button to prepend 90 ~ 99 (10 items in total) to the FlatList.
At 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.

By clicking the prepend button, I expect the FlatList:

1. The items should be changed to 90 ~ 99 + 100 ~ 107 --- this is OK
2. 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.

Then I click the prepend button again, this time, I expect the FlatList:

1. The items should be changed to 80 ~ 89 + 90 ~ 107 --- this is OK
2. I expect the 1st visible item, i.e.: 92, to be keep its position -- this is OK this time.

Steps to Reproduce

See my code on snack. https://snack.expo.io/@rainliu123/flatlisttest

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  FlatList,
  Button,
} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component<Props> {

  constructor(props) {
    super(props)

    this.messages =  [{key: '100'}, {key: '101'}, {key: '102'}, {key: '103'},
    {key: '104'}, {key: '105'}, {key: '106'}, {key: '107'}]
    this.state = {
      items: [
       ...this.messages
        // {key: '104'}, {key: '105'}, {key: '106'}, {key: '107'}
      ],
    }

    this.topNumber = 100

    this._append = this._append.bind(this)
  }

  _renderItem = ({item}) => {
    return (
      <View style={styles.item}>
         <Text>{item.key}</Text>
      </View>
    )
  }


  _preppend = () => {
    console.log(`this.state.items len == ${this.state.items.length}`)
    let newItems = []
    for (var i = 10; i >= 1; i--) {
      const itemNumber = this.topNumber - i
      console.log(itemNumber)
      const newItemText = '' + itemNumber
      console.log(`${newItemText}`)
      const newItem = {
        key: newItemText,
      }
      newItems.push(newItem)
    }

    this.topNumber = this.topNumber - 10
    
    setTimeout(()=>{
      this.setState({
        items: [...newItems, ...this.state.items]
      })
    }, 1000)
    
  }

  _append = () => {
    const newItemText = '' + (100 + this.state.items.length)
    const newItem = {
      key: newItemText,
    }
    this.setState({
      items: [...this.state.items, newItem]
    })
  }

  render() {
    return (
      <View style={styles.container}>

        <FlatList
          style={styles.flatList}
          data={this.state.items}
          renderItem={this._renderItem}
          maintainVisibleContentPosition={{
            minIndexForVisible: 0,
          }}
        />

        <View style={styles.buttons}>
          <Button onPress={this._preppend}
            title="Preppend" />
          <Button onPress={this._append} 
            title="Append" />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  flatList: {
    flex: 8,
  },
  buttons: {
    height: 30,
    marginBottom: 10,
    flexDirection: 'row',
    justifyContent: 'space-around',
  },
  item: {
    flex: 1,
    width: 300,
    justifyContent: 'center',
    alignItems: 'center',
    height: 100,
    backgroundColor: '#fff000',
    marginBottom: 20,
  },
  container: {
    flex: 10,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#05FC0F',
  },
});

Expected Behavior

The first time I prepend items to FlatList, the content position should be locked

Actual Behavior

The first time I prepend items to FlatList, the content position cannot be locked.
BTW, the subsequent prepend items to FlatList is able to keep the position.

[react-native-bot]

It looks like your issue may be missing some necessary information. Can you run react-native info and edit your issue to include these results under the Environment section?

[chinalwb]

@react-native-bot I updated Environment section. Thanks.

[stale]

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.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

[sahrens]

Sorry no one got to this, and thanks so much for writing up such a detailed and complete repro / test case! We'll try to take a look at this soon.