I have a React Native FlatList with a ListHeaderComponent with 2 internal Text. The structure is:
- header
- section 1 - non sticky
- section 2 - sticky
- list items
This means that as the list scrolls up, Section 1 should disappear (non-sticky) whereas section 2 should stay at the top of the list (sticky).
This is the code:
<FlatList
data={ items }
renderItem={ renderItem }
ListHeaderComponent={
<View>
<Text>Section 1</Text>
<Text>Section 2</Text>
</View>
}
stickyHeaderIndices={[0]}
/>
I have to set the indices to [0] so it picks the header but there is no way to select the second within the header. Any ideas?
BTW - I thought of capturing the vertical offset as the list scrolls and then put on the HeaderComponent main <View style={{marginTop: -offset }}> so it simulates a scroll. But my understanding is that Android does not support negative margins.
BTW-2 - I am using react-native-draggable-flatlist so I wouldn't like to put the Text in the list itself as it would complicated the logic of the list items. Thanks!
This worked for me when trying to use SectionList