Flashlist:v2.0.3: Type chat render from bottom not working.

[VincentLe94]

Hi team, I am migrated from v1 to v2.0.3 to support new arch. But flag startRenderingFromBottom not working expected.

<FlashList
ref={flashtListRef}
data={dataMessage ?? []}
renderItem={renderItem}
keyExtractor={(item, index) =>
${item.id}-item-message
}
onScroll={handleScroll}
maintainVisibleContentPosition={{
autoscrollToBottomThreshold: 0.2,
startRenderingFromBottom: true,
}}
showsVerticalScrollIndicator={false}
/>

[LuongTruong]

@VincentLe94 I am wondering if your are facing the same issue as me. The list is simply render from bottom, but not REVERT the items in the list. 🤔

[flessard]

@naqvitalha Please roll back to the old mechanic with invert; the new one is really buggy and not smooth.

[evelant]

Hmm it looks like there may be a bug with onStartReached -- it works when scrolling up but only when you reach the very top of the list. If you're near the top and scroll down it starts loading more at the top if within the threshold. This is on 2.1.0. It seems like there's a logic bug with onStartReached where it's listening for scroll down events rather than scroll up.

In addition to this the transition to 2.0 is a bit confusing with regard to inverted lists per the docs. You need to do more than the docs mention. Here's how it plays out:

• Reverse the sort of your data from how it was using inverted
• Replace onEndReached with onStartReached
• Switch ListHeaderComponent with ListFooterComponent
• Remove inverted prop, replace with maintainVisibleContentPosition with startRenderingFromBottom: true

The key being the list is no longer inverted. It's in "normal" top to bottom order except scrolling starts at the bottom. The onStartReached behavior does seem like a genuine bug however.

[minhna]

I tried to set onEndReachedThreshod value to 0, when I scroll up to the top of the list, it loads more items but render them down below. In other words, the list stays at the top. It's not expected behavior.

[LuongTruong]

Hello guys, thanks for the input. After reading the document once again, I see that the list need to be reversed by ourselves before using. However, the thing is replacing onEndReached by onStartReached, I saw there are some tickets saying it is not working well.

I am wondering if the version 2.1.0 fixes the issue?

I am currently using "@shopify/flash-list": "1.8.3", with "react-native": "0.81.4", . Looks like it is working but have no idea how long can it last.

[evelant]

2.1.0 does not fix the onStartReached behavior. I'm on 2.1.0 and it only fires onStartReached when actually reaching the top of the list. When near the top of the list and scrolling down however it fires per the onStartReachedThreshold value. The bug seems to be that onStartReached is listening for scrolling down instead of scrolling up.

[evelant]

I dug into this and found some bugs with onStartReached, PR here #1932. It seems to work correctly with the fixes, you can use patch-package or pnpm patch to apply the 3 lines to useBoundDetection.ts.