'Scroll to item in SectionList using id and useRef()

const DATA = [
      {
        title: "Appetizers",
        data: [
          {
            id: 0,
            title:'Garlic Knots',
            description: "vsjvnmvimrivmeirv",
            price: "$6.95",
            section:"Appetizers"
          },
          {
            id: 1,
            title:'Mozzarella Sticks',
            description: "vsjvnmvimrivmeirv",
            price: "$6.95",
            section:"Appetizers"
          },
          {
            id: 2,
            title:'Calamari',
            description: "vsjvnmvimrivmeirv",
            price: "$6.95",
            section:"Appetizers"
          },
        ]
      },
      {
        title: "Salads",
        data: [
          {
            id: 3,
            title:'Garden Salad',
            description: "vsjvnmvimrivmeirv",
            price: "$6.95",
            section:"Appetizers"
          },
          {
            id: 4,
            title:'Caesar Salad',
            description: "vsjvnmvimrivmeirv",
            price: "$6.95",
            section:"Appetizers"
          },
          {
            id: 5,
            title:'Greek Salad',
            description: "vsjvnmvimrivmeirv",
            price: "$6.95",
            section:"Appetizers"
          },
        ]
      },
    ];
    
    
    
    export default function Orders({navigation}) {
    
      const [click, setClick] = useState(6);
    
    
      const scrollToSection = (e) => {
        setClick(e);
      }
    
    
      const MenuSections = [
        {
          id: 6,
          title: "Appetizers",
        },
        {
          id: 7,
          title: "Salads",
        },
        {
          id: 8,
          title: "Cold Subs",
        },
        {
          id: 9,
          title: "Hot Subs",
        },
        {
          id: 10,
          title: "Pizza",
        },
        {
          id: 11,
          title: "Entrees",
        },
        {
          id: 12,
          title: "Desserts",
        },
    
    
      ]
    
    
    
      
    
    
      return (
        <View>
              <View>
                <FlatList
                        data={MenuSections}
                        horizontal={true}
                        showsHorizontalScrollIndicator={false}
                        keyExtractor={(item) => item.id}
                        renderItem={({item}) => {
                          return(
                              <TouchableOpacity key={item.id} onPress={() =>   scrollToSection(item.id)}>
                                <View>
                                  <Text>{item.title}</Text>
                                </View>
                              </TouchableOpacity>
                          )
                        }}
                    /> 
              </View>
              <View>
                  <SectionList
                    sections={DATA}
                    keyExtractor={(item, index) => item + index}
                    renderItem={({ item }) => 
                        <TouchableOpacity key={item.id} ref={(ref) => this.refs[data.id] = ref}>  <------------------
                          <View>
                            <Text>{item.title}</Text>
                            <Text>{item.price}</Text>
                            <Text>{item.description}</Text>
                          </View>
                        </TouchableOpacity>
                    }
                    renderSectionHeader={({ section: { title } }) => (
                      <Text>{title}</Text>
                    )}
                  />
              </View>
        </View>
      );
    }
    

Hello, basically in my screen I have one Horizontal FlatList, which serves as a Menu to select different sections of a Restaurant Menu (see arrays above), and a SectionList to display those sections, I'm trying use the Horizontal Menu to build the ability that when pressing one of the Buttons, such as Salads, it would scroll down to the Salad sections in the Restaurant Menu, I can't seem to find a way to put the item.id as ref in of the SectionList, so that when I press the Button it scrolls down to that specific id



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source