I'm trying to implement two different lists, one to be horizontal made with FlatList being used as a top bar to select the category of the menu, and another one with SectionList which is vertical and will display the items in the menu under said category, I'm trying to set the ability in which when the user tap on one of the menu category from the top bar, it will scroll down to that category in the SectionList and vice versa, when user scrolls the menu, the category should change to current category in the top bar, I couldn't find many tutorials about it since I'm relatively new, and I tried the code below, when I run the code it returns

TypeError: flatListRef.current.scrollToIndex is not a function. (In 'flatListRef.current.scrollToIndex({
        animated: true,
        id: id
      })', 'flatListRef.current.scrollToIndex' is undefined)

List: Top Tab Bar

const MenuSections = [
{
  id: 1,
  title: "Appetizers",
},
{
  id: 2,
  title: "Salads",
},
{
  id: 3,
  title: "Cold Subs",
},
{
  id: 4,
  title: "Hot Subs",
},

]

List: Section List

 const DATA = [
  {
    id: 1,
    title: "Appetizers",
    data: [
      {
        id: 1.1,
        title:'Garlic Knots',
        description: "vsjvnmvimrivmeirv",
        price: 6.95,
        section:"Appetizers"
      },
      {
        id: 1.2,
        title:'Mozzarella Sticks',
        description: "vsjvnmvimrivmeirv",
        price: 6.95,
        section:"Appetizers"
      },
      {
        id: 1.3,
        title:'Calamari',
        description: "vsjvnmvimrivmeirv",
        price: 6.95,
        section:"Appetizers"
      },
    ]
  },
  {
    id: 2,
    title: "Salads",
    data: [
      {
        id: 2.1,
        title:'Garden Salad',
        description: "vsjvnmvimrivmeirv",
        price: 6.95,
        section:"Appetizers"
      },
      {
        id: 2.2,
        title:'Caesar Salad',
        description: "vsjvnmvimrivmeirv",
        price: 6.95,
        section:"Appetizers"
      },
      {
        id: 2.3,
        title:'Greek Salad',
        description: "vsjvnmvimrivmeirv",
        price: 6.95,
        section:"Appetizers"
      },
    ]
  },
  {
    id: 3,
    title: "Cold Subs",
    data: [
      {
        id: 3.1,
        title:'Garden Salad',
        description: "vsjvnmvimrivmeirv",
        price: 6.95,
        section:"Appetizers"
      },
      {
        id: 3.2,
        title:'Caesar Salad',
        description: "vsjvnmvimrivmeirv",
        price: 6.95,
        section:"Appetizers"
      },
      {
        id: 3.3,
        title:'Greek Salad',
        description: "vsjvnmvimrivmeirv",
        price: 6.95,
        section:"Appetizers"
      },
    ]
  },
  {
    id: 4,
    title: "Hot Subs",
    data: [
      {
        id: 4.1,
        title:'Garden Salad',
        description: "vsjvnmvimrivmeirv",
        price: 6.95,
        section:"Appetizers"
      },
      {
        id: 4.2,
        title:'Caesar Salad',
        description: "vsjvnmvimrivmeirv",
        price: 6.95,
        section:"Appetizers"
      },
      {
        id: 4.3,
        title:'Greek Salad',
        description: "vsjvnmvimrivmeirv",
        price: 6.95,
        section:"Appetizers"
      },
    ]
  },
];

Screen

export default function Orders({ navigation }) {
   
  const scrollToItem = useRef();
  
  const handleItemPress = (e) => {
    setClick(e);
    scrollToItem.current.scrollToLocation(e);
  };

  return (
    <View>
          <View>
            <TouchableOpacity onPress={() => setModalVisible(true)}>
            </TouchableOpacity>
            <FlatList
                    data={MenuSections}
                    horizontal={true}
                    showsHorizontalScrollIndicator={false}
                    keyExtractor={(item) => item.id}
                    renderItem={({item}) => {
                      return(
                          <TouchableOpacity key={item.id} style={{borderBottomWidth: click === item.id ? (2):(0)}} onPress={() => handleItemPress(item.id)}>
                            <View style={{padding:15}}>
                              <Text style={styles.txtTitle}>{item.title}</Text>
                            </View>
                          </TouchableOpacity>
                      )
                    }}
                /> 
          </View>
          <View>
              <SectionList
                ref={scrollToItem}
                sections={DATA}
                keyExtractor={(item, index) => item   index}
                renderItem={({ item }) => 
                    <TouchableOpacity key={item.id} style={styles.btnMenu} onPress={() => navigation.navigate('DisplayItem', {
                      id: item.id,
                      title: item.title,
                      price: item.price,
                      description: item.description
                    })}>
                      <View>
                        <Text>{item.title}</Text>
                        <Text>{item.price}</Text>
                        <Text>{item.description}</Text>
                      </View>
                    </TouchableOpacity>
                }
                renderSectionHeader={({ section: { title } }) => (
                  <Text>{title}</Text>
                )}
              />
          </View>

    </View>
  );
}

CodePudding user response：