CODEWITHSUNDEEP
react-nativereact-native-iosreact-native-flatlist
Manish
Manish

Reputation: 539

stickyHeaderIndices does not work properly in an inverted FlatList

I am still new to react native and am working on a chat app. I am using <FlatList /> element to display the long list of messages and add inverted prop to it, to show the last messages by default. But making my FlatList inverted, disturbed the functionality of stickyHeaderIndices that I am using to display the days of the messages (like they do in WhatsApp). Its been two days, I am stuck on this.

I am also attaching the piece of code for <FlatList/> I am using

<FlatList
    style={{ flex: 1 }}
    data={messageList}
    renderItem={this.renderMessage}
    keyExtractor={(item, index) => index.toString()}
    showsVerticalScrollIndicator={false}
    stickyHeaderIndices={stickyHeaders}
    inverted
/>

where variable messageList is an array of all the messages, inlcuding the headers I wish to display, this.renderMessage displays the individual message, stickyHeaders is an array with indexes of the headers that are stored in messageList.

Upvotes: 3

Views: 1022

Answers (1)

Manish
Manish

Reputation: 539

I think it is not possible as of now in React Native. I just realized that is maybe why Instagram doesn't provide this feature in their chat.

If someone reading it in the future knows the right implementation or solution for it, please drop by an answer. For now, I just dropped the idea of using sticky headers on an inverted list in my chat app. Thanks :(

Upvotes: 2

Related Questions