title: React-Native: Ref is missing scrollToIndex() for FlatList
body: <p>I am passing a ref to a FlatList and expecting to access the scrollToIndex() function, but it doesn't appear in the console and it throws an error when I try to use it saying &quot;scrollTo() is not a function&quot;, it doesn't even recognise that I'm trying to use scrollToIndex().</p>
  <p>This is a simple example of usage in my code:</p>
  <pre><code>const ref = useRef()
  
  ref.current?.scrollToIndex({index:itemIndex,animated:true})
  
  &lt;FlatList ref={ref} .../&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/zEALI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zEALI.png" alt="console.log for ref" /></a></p>
  <p>Has anyone experienced this and knows how to make it work? I've looked over the documentation and examples and everything seems to be fine. Any help would be appreciated!</p>
  <p><strong>UPDATE:</strong></p>
  <p>Component:</p>
  <pre><code>import React from &quot;react&quot;;
  import { View, FlatList, ImageBackground,TouchableOpacity,ScrollView,StyleSheet, Text} from &quot;react-native&quot;;
  
  
  const Projects = ({ index, navigation }) =&gt; {
   const {width} = Dimensions.get(&quot;window&quot;)
    const [imageIndex, setIndex] = React.useState(0)
    const ref = React.useRef()
    const wItem = (width - 63) / 2;
  console.log(&quot;index projects&quot;, imageIndex)
  
  
  const scrollToIndex = (index)=&gt;{
    if(ref.current){
      ref.current.scrollToIndex({index:index})
    }
  }
   
  const goToIndex = React.useCallback((info) =&gt; {
    const wait = new Promise(resolve =&gt; setTimeout(resolve, 200));
    wait.then(() =&gt; {
      ref.current?.scrollToIndex({ index: info.index, animated: true });
    })
  }, [])
  
    return (
    
        &lt;ScrollView &gt;
        &lt;TouchableOpacity onPress={()=&gt; scrollToIndex(5)}&gt;&lt;Text&gt;Scroll to&lt;/Text&gt;&lt;/TouchableOpacity&gt;
        &lt;FlatList ref={ref}
        nestedScrollEnabled
          numColumns={2}
          data={DATA}
          onScrollToIndexFailed={(index)=&gt;goToIndex(index)}
          style={styles.flatList}
          keyExtractor={(i, index) =&gt; index.toString()}
          renderItem={({ item, index }) =&gt; (
            &lt;View style={styles.item}&gt;
              &lt;ImageBackground
                source={item.image}
                /* @ts-ignore */
                imageStyle={styles.imgStyle}
                style={{ width: wItem, height: wItem, alignItems: &quot;flex-end&quot; }}&gt;
                
              &lt;/ImageBackground&gt;
              &lt;/TouchableOpacity&gt;
              &lt;Text&gt;{item.title}&lt;/Text&gt;
            &lt;/View&gt;
          )}
        /&gt;
      &lt;/ScrollView&gt;
    
    );
  };
  
  export default Projects;
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
    },
    item: {
      marginRight: 15,
      marginBottom: 24,
      alignItems:'center'
     
    },
    flatList: {
      marginHorizontal: 24,
      marginTop: 16,
    },
    imgStyle: {
      borderRadius: 12,
    },
  });
  </code></pre>
  <p>const DATA = [//list of local images]</p>