launchplatform / inverted-section-list Goto Github PK

When to scroll about 100+ items, empty areas appear in the list. Also empty areas sometimes appear when I'm open a keyboard. If use a react native section list, there is no empty areas. But I need an inverted section list with sticky headers, what is not available out of the box in react native for current version.

Version of react native: 0.70.4

example of rendering 150 items

Screen-Recording-2023-03-21-at-1.mp4

I'm using inverted section list for a chat app. I need to implement scroll to the new received messages. I can calculate the index of section and index of specific item, but scrollToLocation method throw 'undefined is not a function'. If apply same code for built in SectionList, scroll works without errors.

RN version: 0.70.5

useEffect(() => {
if (messages.length && !newMessageScrolled) {
const sectionIndex = batchedMessages.findIndex((section) =>
section?.data?.find((a) => a.messageIndex === newMessagesCount.index)
);
if (sectionIndex !== -1 && newMessagesCount.index > 0 && listRef.current) {
listRef.current.scrollToLocation({ sectionIndex: sectionIndex, itemIndex: newMessagesCount.index });
setNewMessageScrolled(true);
}
}
}, [newMessageScrolled, newMessagesCount]);

<InvertedSectionList
ref={listRef}
contentContainerStyle={getListContainerStyle()}
onScrollToIndexFailed={handleScrollError}
bounces={false}
keyExtractor={listKeyExtractor}
sections={batchedMessages}
scrollEventThrottle={16}
onScroll={handleListScroll}
initialNumToRender={isTablet ? 10 : 16}
renderItem={renderMessage}
renderSectionFooter={renderSectionHeader}
stickyHeaderHiddenOnScroll={true}
stickySectionHeadersEnabled={true}
ListEmptyComponent={renderEmpty}
ListFooterComponent={renderFooter}
/>