title: FlatList Component Life Cycle Methods ScrollToIndex ScrollToEnd etc
body: <p>I am using the new <a href="https://facebook.github.io/react-native/docs/flatlist.html" rel="noreferrer"><code>FlatList</code> component</a> and want to make use of <code>ScrollToIndex</code> (or <code>ScrollToEnd</code>) within lifecycle methods such as <code>componentDidMount</code>.</p>
  
  <p>I have an array of let's say 100 items and I don't want to start to render at the first item but in the beginning. Let's say at the 50th item. When the <code>FlatList</code> is only showing one item at a time, it's working as desired with some hack as described here: <a href="https://github.com/facebook/react-native/issues/13202" rel="noreferrer">https://github.com/facebook/react-native/issues/13202</a></p>
  
  <pre><code>componentDidMount() {
    let wait = new Promise((resolve) =&gt; setTimeout(resolve, 500));  // Smaller number should work
    wait.then( () =&gt; {
      this.refs.flatlist.scrollToIndex({index: 4, animated: true});
    });
  }
  </code></pre>
  
  <p>This snippet makes <code>scrollToIndex</code> run <strong>after</strong> some milliseconds of the invocation of <code>componentDidMount</code>.</p>
  
  <p>But when I use a <code>FlatList</code> where the view comprises a 3x3 grid, I simply cannot make it run. When I use <code>scrollToIndex</code> and the index is outside of the specified props <code>initialNumToRender</code>, I only get an error <code>scrollIndex out of range $ID</code> which I cannot understand. The provided data array has all the, for instance, 100 items. When I make us of <code>scrollToEnd</code>, it only stops somewhere in between and not at the end. For me, it looks like some kind of bug and I don't know any other way how to scroll to the $X item after the initial rendering. Can you help me?</p>
  
  <p>I am grateful for any kind of help or comment.</p>
  
  <p>I tried in on React-Native v0.43.0 and v0.44.0 on iOS and Android (Emulator and Device) and it's always the same.</p>