React-native-gifted-chat: Incorrect view direction with default options on react-native-web

Created on 6 Jul 2020 · 5Comments · Source: FaridSafi/react-native-gifted-chat

Issue Description

The scolling direction is reversed.

Steps to Reproduce / Code Snippets

<GiftedChat
    messages={[...]}
    loadEarlier
    user={{
        _id: 114514,
    }}
    wrapInSafeArea={false}
    isKeyboardInternallyHandled={false}
    onSend={...}
/>

Expected Results

When mouse wheel scrolls down, the message container scrolls down.

Additional Information

Nodejs version:
React version: v12.14.0
React Native version: "react-native-web": "0.13.1",
react-native-gifted-chat version: "0.16.3"
Platform(s) (iOS, Android, or both?): web
TypeScript version:

wontfix

Source

hanayashiki

Most helpful comment

I managed to get a workaround working... see these threads:
https://github.com/necolas/react-native-web/issues/995
https://codesandbox.io/s/react-native-dsyse?file=/src/App.js

You'd need to access the inner FlatList ref within GiftedChat. Assuming your GiftedChat ref is this.giftedChatRef you can do something like let listViewRef = this.giftedChatRef._messageContainerRef, then apply the invertedWheelEvent code from the codesandbox link. Make sure your refs are not null when the listener is attached

Mine looks something like this:

  componentDidMount = () => {
      let listViewRef = this.giftedChatRef._messageContainerRef

      if (listViewRef.current) {
        listViewRef.current.getScrollableNode().addEventListener('wheel', this.invertedWheelEvent)
        listViewRef.current.setNativeProps({
          style: {
            transform: "translate3d(0,0,0) scaleY(-1)"
          }
        })
      }
  }

  componentWillUnmount = () => {
    let listViewRef = this.giftedChatRef._messageContainerRef
    if (listViewRef.current) {
      listViewRef.current.getScrollableNode().removeEventListener('wheel', this.invertedWheelEvent)
    }
  }

  invertedWheelEvent = (e) => {
    let listViewRef = this.giftedChatRef._messageContainerRef
    if (listViewRef.current) {
      listViewRef.current.getScrollableNode().scrollTop -= e.deltaY;
      e.preventDefault()
    }
  }

TimMun on 9 Jul 2020

👍3

All 5 comments

I managed to get a workaround working... see these threads:
https://github.com/necolas/react-native-web/issues/995
https://codesandbox.io/s/react-native-dsyse?file=/src/App.js

Mine looks something like this:

  componentDidMount = () => {
      let listViewRef = this.giftedChatRef._messageContainerRef

      if (listViewRef.current) {
        listViewRef.current.getScrollableNode().addEventListener('wheel', this.invertedWheelEvent)
        listViewRef.current.setNativeProps({
          style: {
            transform: "translate3d(0,0,0) scaleY(-1)"
          }
        })
      }
  }

  componentWillUnmount = () => {
    let listViewRef = this.giftedChatRef._messageContainerRef
    if (listViewRef.current) {
      listViewRef.current.getScrollableNode().removeEventListener('wheel', this.invertedWheelEvent)
    }
  }

  invertedWheelEvent = (e) => {
    let listViewRef = this.giftedChatRef._messageContainerRef
    if (listViewRef.current) {
      listViewRef.current.getScrollableNode().scrollTop -= e.deltaY;
      e.preventDefault()
    }
  }

TimMun on 9 Jul 2020

👍3

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.