title: React-Native: FlatList Scroll to index show error undefined
body: <p>I want to achieve scroll to index on button(previous/Next) action of horizontal FlatList.
  So i have added <code>ref</code> in flat list but it gives error</p>
  <h2>Code:</h2>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import {
    View,
    Text,
    FlatList,
    Dimensions,
    Button,
    TouchableOpacity
  } from &quot;react-native&quot;;
  
  const { height, width } = Dimensions.get(&quot;window&quot;);
  
  
  class AnswerView extends Component {
    render() {
      return (
        &lt;View style={{
            width: width/2,
            height: 60,
            backgroundColor: &quot;#ffffff&quot;,
            flexDirection: &quot;column&quot;,
            justifyContent: &quot;center&quot;,
            alignItems: &quot;stretch&quot;
        }}&gt;
          &lt;View style={{
                flex: 1,
                backgroundColor: &quot;#ffffff&quot;,
                flexDirection: &quot;column&quot;,
                justifyContent: &quot;center&quot;,
                alignItems: &quot;center&quot;,
                borderWidth: 1,
                borderColor: &quot;#00E2B2&quot;,
                borderRadius: 4,
                marginLeft: (this.props.index % 2 != 0) ? 8 : 16,
                marginRight: (this.props.index % 2 == 0) ? 8 : 16,
                marginTop: 14
            }}&gt;
            &lt;Text&gt; Index: {this.props.index}  &amp;  Item: {this.props.item} &lt;/Text&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      )
    }
  }
  
  class AssessmentListItem extends Component {
    
    constructor(props) {
      super(props);
      this.state = {
        answers: [1, 2, 3, 4, 5, 6, 7]
      };
    }
  
    renderAnswer = ({ item, index }) =&gt; {
      return &lt;AnswerView item={item} index={index}/&gt;;
    };
  
    render() {
      return (
        &lt;View
          style={{
            width: width,
            height: '100%',
            justifyContent: &quot;center&quot;,
            alignItems: &quot;center&quot;
          }}
        &gt;
          &lt;View style={{
            width: &quot;100%&quot;,
            height: 100,
            backgroundColor: &quot;#ffffff&quot;,
            flexDirection: &quot;row&quot;,
            justifyContent: &quot;flex-start&quot;,
            alignItems: &quot;center&quot;
          }}&gt;
          &lt;Text style={{
            marginLeft: 16,
            fontSize: 18,
            fontWeight: &quot;600&quot;
          }}&gt; {this.props.item}: All health problems I have had: ?? &lt;/Text&gt;
          &lt;/View&gt;
          &lt;FlatList style={{
              width: &quot;100%&quot;,
              height: &quot;100%&quot;,
              backgroundColor: &quot;#ffffff&quot;
          }}
          data={this.state.answers}
          renderItem={this.renderAnswer}
          numColumns={2}
          keyExtractor={(id, index) =&gt; index.toString()}
          /&gt;
        &lt;/View&gt;
      );
    }
  }
  
  export default class App extends Component {
  
    constructor(props) {
      super(props);
      this.state = {
        images: [1, 2]
      };
    }
  
    renderItem = ({ item, index }) =&gt; {
      return &lt;AssessmentListItem item={item} /&gt;;
    };
  
    onPressPrevious() {
        this.flatListRef.scrollToIndex({ animated: true, index: 0 });
    };
  
    onPressNext() {
        this.flatListRef.scrollToIndex({animated: true, index: 1});
    };
  // TODO: HERE
    render() {
      return (
        &lt;View style={{ flex: 1 }}&gt;
          &lt;FlatList
            ref={ref =&gt; {
              this.flatListRef = ref;
            }}
            style={{ flex: 1 }}
            data={this.state.images}
            horizontal
            pagingEnabled={true}
            legacyImplementation={false}
            keyExtractor={(id, index) =&gt; index.toString()}
            renderItem={this.renderItem}
            {...this.props}
          /&gt;
          &lt;View
            style={{
              width: &quot;100%&quot;,
              height: 110,
              flexDirection: &quot;row&quot;,
              justifyContent: &quot;center&quot;,
              alignItems: &quot;stretch&quot;,
              backgroundColor: &quot;#ffffff&quot;,
              shadowColor: &quot;#000000&quot;,
              shadowOpacity: 0.05,
              shadowRadius: 5,
              shadowOffset: {
                  height: -1,
                  width: 0
              }
            }}
          &gt;
            
            &lt;TouchableOpacity
              style={{
                flex: 1,
                height: 48,
                backgroundColor: &quot;#ffffff&quot;,
                flexDirection: &quot;column&quot;,
                justifyContent: &quot;center&quot;,
                alignItems: &quot;center&quot;,
                marginLeft: 16,
                marginTop: 14,
                marginRight: 16,
                borderWidth: 1,
                borderColor: &quot;#00E2B2&quot;,
                borderRadius: 4
              }}
              onPress={this.onPressPrevious}
            &gt;
                &lt;Text style={{
                    color: &quot;#00E2B2&quot;,
                    fontSize: 16,
                    fontWeight: &quot;700&quot;
                }}&gt;PREVIOUS&lt;/Text&gt;
            &lt;/TouchableOpacity&gt;
            &lt;TouchableOpacity
              style={{
                flex: 1,
                height: 48,
                backgroundColor: &quot;#00E2B2&quot;,
                flexDirection: &quot;column&quot;,
                justifyContent: &quot;center&quot;,
                alignItems: &quot;center&quot;,
                marginRight: 16,
                marginTop: 14,
                borderWidth: 1,
                borderColor: &quot;#00E2B2&quot;,
                borderRadius: 4
              }}
              onPress={this.onPressNext}
            &gt;
                &lt;Text style={{
                  color: &quot;#ffffff&quot;,
                  fontSize: 16,
                  fontWeight: &quot;700&quot;
                }}&gt;NEXT&lt;/Text&gt;
            &lt;/TouchableOpacity&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      );
    }
  }
  </code></pre>
  <h2>Stack Trace:</h2>
  <pre><code>undefined is not an object (evaluating 'this.refs.flatListRef')
  
  onPressPrevious
      App.js:113:16
  </code></pre>
  <p>I have taken Referencce from here: <a href="https://snack.expo.io/rkVFW2M1H" rel="nofollow noreferrer">https://snack.expo.io/rkVFW2M1H</a></p>
  <p>Let me know what i'm missing??</p>