FlatList Inverted ScrollWheel Fix

[tjbaron]

Fix for #995. Makes scroll wheel go in correct direction when FlatList is inverted. Note that desktop safari won't "bounce" with this implementation.

wheelDeltaY is for Safari and Chrome. deltaY is for Firefox.

[necolas]

Looks like this should be run on unmount too

[necolas]

We could avoid another call to get the node by passing it from the first site that gets the node

[necolas]

My thought is that this should probably be done in the platform ScrollView, rather than this component. I think this list passes all its props to ScrollView, even though ScrollView doesn't technical support that prop

[raphaelrk]

EDIT July 2019: have a better version of this code in a codesandbox link you can find here

Was running into this, came up with this hacky solution in my component with the flatlist until a fix is made:

  componentDidMount() {
    this._invertScrolling(true);
  }

  componentWillUnmount() {
    this._invertScrolling(false);
  }

  // in FlatList, add ref={ref => this._flatlistRef = ref}
  getScrollableNode = () => this._flatlistRef.getScrollableNode();

  _invertScrolling = (invert) => {
    this._scrollNode = this.getScrollableNode();
    if (invert) {
      this._scrollNode.addEventListener('wheel', this._invertedWheelEvent);
    } else {
      this._scrollNode.removeEventListener('wheel', this._invertedWheelEvent);
    }
  };

  _invertedWheelEvent = (e) => {
    if (this.props.horizontal) this._scrollNode.scrollLeft += (e.wheelDeltaX || -e.deltaX);
    else this._scrollNode.scrollTop += (e.wheelDeltaY || -e.deltaY);
    e.preventDefault();
  };

Unfortunately results in very janky scrolling (which I presume would also happen with this PR) which doesn't feel great on the chat screen I'm building.

onEndReached also isn't being called when I have inverted={true} and this does not fix it, but maybe that should be in a separate issue.

Wondering if anyone has any escape hatch solutions, e.g. dropping down to normal react and/or using something like react-window and/or using some css to anchor the messages to the bottom of the list.

[danalloway]

Trying to move this forward in regards to the feedback and original attempt I did some work on it over in #1241

[rodrigorm]

The patch on this PR work in my app. Great job!

[necolas]

Closing this PR due to inactivity and it not adequately solving the issue. Thanks for having a go