title: How to create flatlist auto scroll with Hooks in React Native
body: <p>I'm trying to create an auto scroll flatlist carousel that can also allow the user to scroll manually. The problem is that I get this error <code>flatListRef.scrollToIndex is not a function</code>. I tried searching how other people create an auto scroll flatlist but their solution is using class.</p>
  <pre><code>const flatListRef = useRef(null)
  useEffect (() =&gt; { 
      const totalIndex = data.length - 1;
      setInterval (() =&gt; {
          if(flatListRef.current.index &lt; totalIndex) {
              flatListRef.scrollToIndex({animated: true, index: flatListRef.current.index + 1})
          } else {
              flatListRef.scrollToIndex({animated: true, index: 0})
          }
      }, 3000)
  }, []);
  
  const renderItem = ({item}) =&gt; {
      return (
          &lt;View style={styles.cardView}&gt;
              &lt;Image style={styles.image} source={item.image} resizeMode=&quot;contain&quot;/&gt;
          &lt;/View&gt;
      )
  } 
  return (
      &lt;View style={{paddingHorizontal: 10}} &gt;
          &lt;FlatList 
              ref={flatListRef}
              data={data} 
              keyExtractor={data =&gt; data.id}
              horizontal
              pagingEnabled
              scrollEnabled
              snapToAlignment=&quot;center&quot;
              scrollEventThrottle={16}
              decelerationRate={&quot;fast&quot;}
              showsHorizontalScrollIndicator={true}
              persistentScrollbar={true}
              renderItem={renderItem}
          /&gt; 
      &lt;/View&gt;
  );
  </code></pre>
  <p>styles:</p>
  <pre><code>cardView: {
      flex: 1, 
      width: width - 20,  
      height: height * 0.21,
      backgroundColor: Colors.empty,
      alignItems: 'center',
      justifyContent: 'center', 
  },
  image: {
      backgroundColor: Colors.empty,
      width: width - 20,  
      height: height * 0.21,
  }, 
  </code></pre>