title: FlatList with ScrollTo in React Native
body: <p>I'm new to React Native, I'm trying to make a FlatList in an application with Expo that will pull some categories of products from a Json, I managed to make the FlatList and also a Json simulation for testing, however I wish that by clicking on any item in the FlatList it directs the Scroll to the respective section, the same when using anchor with id in HTML.</p>
  <p>For example: FlatList will display the categories: Combo, Side Dishes, Hot Dog, etc. For each category that is displayed by FlatList I have already created a View that will display products in this category.</p>
  <h3>What I want to do:</h3>
  <p>When you click on a category displayed by FlatList the Scroll scrolls to the View that displays the products of this category, that is, if you click on Combo the page scrolls to the View that displays the products of the Combo category, if you click on Side Dishes the page scrolls until the View that displays the products in the Side Dishes category, follows my code:</p>
  <p>Follow my code: (it can be simulated here: <a href="https://snack.expo.io/@wendell_chrys/06944b" rel="nofollow noreferrer">https://snack.expo.io/@wendell_chrys/06944b</a>)</p>
  <pre><code>import React, { useEffect, useState } from 'react';
  import { View, Image, ImageBackground, Text, StyleSheet, ScrollView, Dimensions, FlatList, SafeAreaView, TouchableOpacity } from 'react-native';
  import { AppLoading } from 'expo';
  import Constants from 'expo-constants';
  
  
  const DATA = [
    {
      id: &quot;1&quot;,
      title: &quot;Combos&quot;,
      categorie: &quot;section1&quot;,
    },
    {
      id: &quot;2&quot;,
      title: &quot;Side Dishes&quot;,
      categorie: &quot;section2&quot;,
    },
    {
      id: &quot;3&quot;,
      title: &quot;Hot Dog&quot;,
      categorie: &quot;section3&quot;,
    },
    {
      id: &quot;4&quot;,
      title: &quot;Desserts&quot;,
      categorie: &quot;section4&quot;,
    },
    {
      id: &quot;5&quot;,
      title: &quot;Drinks&quot;,
      categorie: &quot;section5&quot;,
    },
  ];
  
  const renderItem = ({ item }) =&gt; {
  
    return (
      &lt;Item
        item={item}
      /&gt;
    );
  };
  
  const Item = ({ item, onPress, style }) =&gt; (
    &lt;TouchableOpacity onPress={onPress} &gt;
      &lt;Text style={styles.itenscategoria}&gt;{item.title}&lt;/Text&gt;
    &lt;/TouchableOpacity&gt;
  );
  
  
  
  export default function App() {
  
  
    return (
      &lt;View style={styles.container}&gt;
        &lt;View style={styles.categories}&gt;
  
        &lt;FlatList
          data={DATA}
          horizontal
          showsHorizontalScrollIndicator={false}
          renderItem={renderItem}
          keyExtractor={(item) =&gt; item.id}
        /&gt;
  
  
        &lt;/View&gt;
          &lt;ScrollView&gt;
          &lt;View style={styles.section1}&gt;
            &lt;Text&gt;Combos&lt;/Text&gt;
          &lt;/View&gt;
  
          &lt;View style={styles.section2}&gt;
            &lt;Text&gt;Side Dishes&lt;/Text&gt;
          &lt;/View&gt;
  
          &lt;View style={styles.section3}&gt;
            &lt;Text&gt;Hot Dog&lt;/Text&gt;
          &lt;/View&gt;
  
          &lt;View style={styles.section4}&gt;
            &lt;Text&gt;Desserts&lt;/Text&gt;
          &lt;/View&gt;
  
          &lt;View style={styles.section5}&gt;
            &lt;Text&gt;Drinks&lt;/Text&gt;
          &lt;/View&gt;
        &lt;/ ScrollView&gt;
  
      &lt;/View &gt;
      );
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      paddingTop: Constants.statusBarHeight,
      backgroundColor: '#000',
      padding: 8,
    },
    categories: {
      backgroundColor: '#FFFFFF',
      width: '100%',
      height: 50,
      top: 10,
      marginBottom:20,
    },
    itenscategoria: {
      padding:15,
      border: 1,
      borderRadius:25,
      marginRight:10,
  },
    section1: {
      marginTop: 10,
      backgroundColor: '#ccc',
      width: '100%',
      height: 200,
      borderRadius: 10,
    },
    section2: {
      marginTop: 10,
      backgroundColor: '#ccc',
      width: '100%',
      height: 200,
      borderRadius: 10,
    },
    section3: {
      marginTop: 10,
      backgroundColor: '#ccc',
      width: '100%',
      height: 200,
      borderRadius: 10,
    },
    section4: {
      marginTop: 10,
      backgroundColor: '#ccc',
      width: '100%',
      height: 200,
      borderRadius: 10,
    },
    section5: {
      marginTop: 10,
      backgroundColor: '#ccc',
      width: '100%',
      height: 200,
      borderRadius: 10,
    },
  });
  </code></pre>