I am new to react native and wanted to use sectionList in the conversation area of a chat application. Similar to whatsapp, I tried to divide the messages into each sections by using days. It works fine. But the problem is that I need to render the latest messages first like in the whatsapp. So if i use the inverted, The section header is also getting inverted. How to solve this?
This is how i tried to do the section list. But how to render the last messages on the bottom first like in whatsapp or any other chat application? As I have to display the day also, I cant use flatlist.
<SectionList
sections={messages}
renderItem={renderItem}
ItemSeparatorComponent={() => <View style={{height: 10}} />}
SectionSeparatorComponent={() => <View style={{height: 10}} />}
stickySectionHeadersEnabled
// inverted
// invertStickyHeaders
initialNumToRender={20}
renderSectionHeader={({section: {day}}) => (
<Chip
elevated
textStyle={{color: theme.colors.onSurface}}
style={{
alignSelf: 'center',
borderRadius: 20,
backgroundColor: theme.colors.surface + '99',
}}>
{day}
</Chip>
)}
/>