FlatList with ScrollTo in React Native - react-native

Question

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.
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.
What I want to do:
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:
Follow my code: (it can be simulated here: https://snack.expo.io/#wendell_chrys/06944b)
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: "1",
title: "Combos",
categorie: "section1",
},
{
id: "2",
title: "Side Dishes",
categorie: "section2",
},
{
id: "3",
title: "Hot Dog",
categorie: "section3",
},
{
id: "4",
title: "Desserts",
categorie: "section4",
},
{
id: "5",
title: "Drinks",
categorie: "section5",
},
];
const renderItem = ({ item }) => {
return (
<Item
item={item}
/>
);
};
const Item = ({ item, onPress, style }) => (
<TouchableOpacity onPress={onPress} >
<Text style={styles.itenscategoria}>{item.title}</Text>
</TouchableOpacity>
);
export default function App() {
return (
<View style={styles.container}>
<View style={styles.categories}>
<FlatList
data={DATA}
horizontal
showsHorizontalScrollIndicator={false}
renderItem={renderItem}
keyExtractor={(item) => item.id}
/>
</View>
<ScrollView>
<View style={styles.section1}>
<Text>Combos</Text>
</View>
<View style={styles.section2}>
<Text>Side Dishes</Text>
</View>
<View style={styles.section3}>
<Text>Hot Dog</Text>
</View>
<View style={styles.section4}>
<Text>Desserts</Text>
</View>
<View style={styles.section5}>
<Text>Drinks</Text>
</View>
</ ScrollView>
</View >
);
}
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,
},
});

Answer 1

You can make use of scrollToIndex of FlatList
See complete code below, or the snack here.
import React, { useEffect, useState, useRef } 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: "1",
title: "Combos",
categorie: "section1",
},
{
id: "2",
title: "Side Dishes",
categorie: "section2",
},
{
id: "3",
title: "Hot Dog",
categorie: "section3",
},
{
id: "4",
title: "Desserts",
categorie: "section4",
},
{
id: "5",
title: "Drinks",
categorie: "section5",
},
];
export default function App() {
const flatListRef = useRef();
const handleItemPress = (index) => {
flatListRef.current.scrollToIndex({ animated: true, index });
};
const renderItem = ({ item, index }) => {
return (
<Item
item={item}
onPress={() => handleItemPress(index)}
/>
);
};
const Item = ({ item, onPress, style }) => (
<TouchableOpacity onPress={onPress} >
<Text style={styles.itenscategoria}>{item.title}</Text>
</TouchableOpacity>
);
const renderDetails = ({ item, index }) => (
<View style={styles.section}>
<Text>{item.title}</Text>
</View>
);
return (
<View style={styles.container}>
<View style={styles.categories}>
<FlatList
data={DATA}
horizontal
showsHorizontalScrollIndicator={false}
renderItem={renderItem}
keyExtractor={(item) => item.id}
/>
</View>
<FlatList
ref={flatListRef}
data={DATA}
renderItem={renderDetails}
keyExtractor={(item) => item.id}
/>
</View >
);
}
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,
},
section: {
marginTop: 10,
backgroundColor: '#ccc',
width: '100%',
height: 200,
borderRadius: 10,
},
});