sticky-parallax-header
sticky-parallax-header copied to clipboard
netguru
Is there a way to make the StickyHeaderSectionList renderHeader scrollable
Environment
Library version: 1.1.1
Affected platforms
- [ ] Android
- [ ] iOS
Current behavior
When my renderHeader is too large, I can't slide the page anymore
Expected behavior
When my renderHeader is too large, I can slide the page anymore
Reproduction
<StickyHeaderSectionList
ref={listRef}
enableSafeAreaTopInset={false}
backgroundColor={c2_2_1}
contentContainerStyle={contentContainerStyle}
titleStyle={{color: c2_1_1}}
parallaxHeight={100}
renderTabs={() => {
if (isNotEmpty(menuListData)) {
return (
<MenuList
menuListData={menuListData}
selectedIndex={selectedIndex}
onMenuClick={handleMenuClick}
/>
);
} else {
return null;
}
}}
tabTextStyle={{...t3_2, color: c2_1_1}}
tabTextActiveStyle={{...t3_2, color: c2_2_1}}
sections={menuData}
tabTextContainerActiveStyle={{backgroundColor: c2_1_1}}
keyExtractor={(_, i) => ${i}}
renderItem={renderItem}
renderSectionHeader={renderSectionHeader}
getItemLayout={getItemLayout}
updateCellsBatchingPeriod={100}
renderHeader={() => (
<ListHeader
popularDishList={popularDishList}
onDishClick={onDishSelected}
onHeightChanged={height => setListHeaderHeight(height)}
onMenuClick={handleMenuClick}
/>
)}
ListEmptyComponent={emptyComponent}
showsVerticalScrollIndicator={false}
onViewableItemsChanged={handleSectionViewableItemsChanged}
viewabilityConfig={{
itemVisiblePercentThreshold: 50, //means if 50% of the item is visible
}}
/>
