React Native - stickyHeaderIndices not working for SectionList

Question

I am trying to make some header to stick to the top of the SectionList but it seems like the stickyHeaderIndices={[0]} doesn't work as expected. This is the section list:

     <SectionList
          ref={(ref) => (productsSectionListRef = ref)}
          stickyHeaderIndices={[0]}
          ListHeaderComponent={_renderHeader()}
          contentContainerStyle={[style.products_container]}
          sections={productListSections}
          renderItem={({item, section}: {item: string; section: any}) => {
            return _renderProduct(item);
          }}
          stickySectionHeadersEnabled={false}
          renderSectionHeader={({section}) => {
            return _renderProductHeader(section.title);
          }}
          keyExtractor={(item) => item}
          showsVerticalScrollIndicator={false}
          viewabilityConfig={{
            itemVisiblePercentThreshold: 50,
          }}
          onViewableItemsChanged={_onViewableItemsChanged}
          bounces={false}
          scrollEventThrottle={4}
          initialNumToRender={productListSections.length}
          scrollEnabled={scrollEnabled}
          removeClippedSubviews={true}/>

I tryed to put the header outside the section list but the header it's bigger and I cannot scroll inside of that header component.

score 0 · Answer 1 · answered Oct 05 '20 at 11:03

stickyHeaderIndices={[0]}

will make first item in flatlist sticky to the top if you change to

stickyHeaderIndices={[5]}

the 4th item will stick to top after the item reached to the top when scrolled

item in

ListHeaderComponent={_renderHeader()}

will be on top of the flatlist but not act as item inside flatlist its independent

React Native - stickyHeaderIndices not working for SectionList

1 Answers1