skip to Main Content

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


  1. you must use onLoadEarlier props to handle loadMore, not onScroll event.

    Login or Signup to reply.
  2. The issue is on the Flatlist component when using inverted={true}. Check this https://github.com/necolas/react-native-web/issues/1254
    In 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

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search