Incorrect view direction with default options on react-native-web

[hanayashiki]

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:

[TimMun]

I managed to get a workaround working... see these threads:
necolas/react-native-web#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()
    }
  }

[stale]

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.

[hanayashiki]

seems this problem is chrome-only

[sandy2008]

This is a problem of react-native-web.
necolas/react-native-web#995

[sandy2008]

seems this problem is chrome-only

We also need to consider arrow keys, page up/page down, home/end, and mousewheel drag.