How to use SectionList in a chat application - React Native

20 Views Asked by At

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>
        )}
      />
0

There are 0 best solutions below