Currently having an issue with our web chat application where if i scroll using the mouse it starts to go wild and have a mind of it’s own and i can’t stop it
"react-native-gifted-chat": "0.10.0-beta.web.26",
"react-native-gifted-chat": "^0.16.3",
"react-native-web": "^0.17.7",
Code Example
…….
<GiftedChat
messages={messages}
extraData={{ selectedMessage, hoverAction }}
user={{
_id: myEffectiveUserId,
}}
scrollToBottom={false}
listViewProps={{
ref: giftedChatListRef,
onScrollToIndexFailed: () => {},
scrollEventThrottle: 400,
onScroll: (e: any) => {
const { nativeEvent } = e
if (scrollToFocus) {
// workaround for the scrollToIndex - (only for web)
const { contentSize } = nativeEvent
setScrollToFocus(false)
giftedChatListRef.current?.scrollToOffset({
offset: contentSize.height - 10,
})
fetchNextPage()
}
const isCloseToTop = MessageUtils.isListScrolledToTop(nativeEvent)
if (isCloseToTop) {
if (hasNextPage && !isFetchingNextPage) {
fetchNextPage()
return
}
}
const isCloseToBottom =
MessageUtils.isListScrolledToBottom(nativeEvent)
if (isCloseToBottom && hasPreviousPage && !isFetchingPreviousPage) {
fetchPreviousPage()
return
}
},
}}
loadEarlier={true}
isLoadingEarlier={isFetchingNextPage || isRefetching}
…….
function isListScrolledToTop(nativeOnScrollEvent: any, fromTop = 80) {
const { layoutMeasurement, contentOffset, contentSize } = nativeOnScrollEvent
return (
contentSize.height - layoutMeasurement.height - fromTop <= contentOffset.y
)
}
function isListScrolledToBottom(nativeOnScrollEvent: any, fromBottom = 0) {
const { contentOffset } = nativeOnScrollEvent
return contentOffset.y <= fromBottom
}
Check out the video example of what is currently happening, would love to know if anyone else has come across the same problem
https://www.loom.com/share/79cb693334d549f5a8e89d9628e926f7?sid=77dc93cf-b9d9-41c8-93b0-86bbc12ce27d
I have tried updating the versions but no good
2
Answers
you must use
onLoadEarlier
props to handle loadMore,not onScroll
event.The issue is on the Flatlist component when using
inverted={true}
. Check this https://github.com/necolas/react-native-web/issues/1254In order to fix the above case I added
disableVirtualization={true}
to the GiftedChat. Or try to rotate Flistlist by style without using the inverted prop.Note – disableVirtualization prop is deprecated