[FlatList] looks weird after call scrollToEnd(), add a gif

[zongwan]

* React Native version: 0.45.0-rc.0
* Platform: iOS 9.3 only
* Development Operating System: macOS
* Dev tools: Xcode 8.3.2

scrollToEnd() without enough items then FlatList never comes back to top every time .

core code

fetchBugDetail() {
    this.setState({ fetching: true }, () => {
      const items = [...defaultItems];
      setTimeout(() => {
        this.setState(
          { items, fetching: false },
        );
      }, 1000);
      setTimeout(() => this.autoScroll(), 1300);
    });
  }

I don't know when will fetch action finish with redux-saga, so I do setTimeout. (sad for self)
Could you tell me how to trigger view's method after fetch action in a preferred way ?

----- full code -----

import React, { Component } from 'react';
import {
  AppRegistry,
  Text,
  View,
  FlatList,
} from 'react-native';

const defaultItems = [
  {
    at: '2017-05-18 14:49:50',
    msg: 'ScrollView Bug?',
    type: 0,
  },
  {
    at: '2017-05-18 14:49:51',
    msg: 'scrollToEnd() without enough items',
  },
  {
    at: '2017-05-18 14:49:52',
    msg: 'It looks weird',
    type: 0,
  },
  {
    at: '2017-05-18 14:49:53',
    msg: 'how to fix it ?',
  },
  {
    at: '2017-05-18 14:49:54',
    msg: '------note------',
    type: 0,
  },
  {
    at: '2017-05-18 14:49:55',
    msg: 'Make it gray to help you understand.',
    type: 0,
  },
];
export default class example extends Component {

  constructor() {
    super();
    this.state = {
      items: [],
      fetching: false,
      input: null,
    };
  }
  componentDidMount() {
    this.fetchBugDetail();
  }
  autoScroll() {
    if (this.flatList) {
      this.flatList.scrollToEnd();
    }
  }
  fetchBugDetail() {
    this.setState({ fetching: true }, () => {
      const items = [...defaultItems];
      setTimeout(() => {
        this.setState(
          { items, fetching: false },
        );
      }, 1000);
      setTimeout(() => this.autoScroll(), 1300);
    });
  }

  renderItem({ item }) {
    let place;
    let bgc;
    let tc;
    if (item.type === 0) {
      place = 'flex-start';
      bgc = '#fff';
      tc = '#000';
    } else {
      place = 'flex-end';
      bgc = '#25b6f3';
      tc = '#fff';
    }
    return (
      <View
        style={{
          marginHorizontal: 4,
          marginVertical: 8,
        }}
      >
        <View
          style={{
            alignItems: 'center',
            justifyContent: 'center',
            marginBottom: 12,
          }}
        >
          <Text>
            {item.at}
          </Text>
        </View>
        <View
          style={{
            backgroundColor: bgc,
            borderRadius: 4,
            alignSelf: place,
            padding: 8,
          }}
        >
          <Text
            style={{
              color: tc,
            }}
          >
            {item.msg}
          </Text>
        </View>
      </View>
    );
  }
  render() {
    return (
      <View
        style={{
          flex: 1,
          backgroundColor: '#F5FCFF',
        }}
      >
        <FlatList
          contentContainerStyle={{
            backgroundColor: '#ccc',
          }}
          ref={(r) => { this.flatList = r; }}
          data={this.state.items}
          keyExtractor={item => item.at}
          renderItem={item => this.renderItem(item)}
          refreshing={this.state.fetching}
          onRefresh={() => this.fetchBugDetail()}
        />
      </View>
    );
  }
}

AppRegistry.registerComponent('example', () => example);

[zongwan]

@sahrens
Please consider to fix this bug.

[fBehzad]

autoScroll() {
if (this.flatListRef !== null) {
this.flatList.scrollToEnd();
}
}