programmatically cant scroll when two nested VirtualizedLists with the same orientation

42 Views Asked by At

So here is the problem that i have i had a sectionList component inside a scrollView and i encountered this error Error_1

   <ScrollView>
            <HomeHeader
              QuickAccess={QuickAccess}
              handleFilterPresentModalPress={handleFilterPresentModalPress}
            />
            <MenuTab sectionListData={sectionListData} /> ***--->SectionList***
          </ScrollView>

So to avoid that i used flatlist as a container where now i have a Section List nested inside a flat list

<FlatList
            nestedScrollEnabled={true}
            onScroll={handleScroll}
            scrollEventThrottle={16}
            data={dummyData}
            keyExtractor={(item, index) => `key-${index}`}
            ListHeaderComponent={
              <HomeHeader
                QuickAccess={QuickAccess}
                handleFilterPresentModalPress={handleFilterPresentModalPress}
              />
            }
            ListFooterComponent={<View style={{ height: 10 }}></View>}
            renderItem={({ item, index }) => (
              <MenuTab sectionListData={sectionListData} /> ***---> SectionList***
            )}
          />

But now when I programmatically try to scroll section list to a certain header I get this error error_2

I have tried adding nestedScrollEnabled on flatlist as well but no luck

 const scrollToSection = (sectionTitle) => {
    if (sectionListRef.current) {
      const sectionIndex = data.findIndex(
        (section) => section.title === sectionTitle
      );
      if (sectionIndex >= 0) {
        sectionListRef.current.scrollToLocation({
          sectionIndex: sectionIndex,
          itemIndex: 0,
          viewOffset: 0,
          animated: true,
        });
      }
    }
  };


  <TouchableOpacity onPress={() => scrollToSection("Sides")}>
        <Text>Scroll to Section 2, Item 2</Text>
      </TouchableOpacity>

Any help or guidance on this will be much appreciated ,Thanks in advance

EXPO SNACK

1

There are 1 best solutions below

0
BHL On

So my problem was Section List was inside a flatlist. I was using flatlist as main container. Now that i moved sectionList outside it works thanks @marcelofreiries