Make FlatList works with body as scroll view

[slestang]

I want to re-use a component between my react-native App and my react Web App; it's a list of posts that we can scroll indefinitely down to load more posts (à la Twitter).

On the App this component is fullscreen, but on the Web it is just one column of a dashboard. The older posts need to be loaded when the whole page/body scroll down.

Do to so it isn't supported if I understood correctly this paragraph .

Following this comment I hack a system that listen to window scroll event and call the VirtualizedList _onScroll() with a fake event.

This works most of time but sometimes I end up with onEndReached being call in loop until all posts are loaded :-(

  componentDidMount() {
    window.addEventListener('scroll', this.debouncedOnScroll);
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.debouncedOnScroll);
  }

  onScroll = e => {
    const rec = this.messagesBox.getBoundingClientRect();
    const { left, top, /*right, bottom, x, y,*/ width, height } = rec;
    const fakeEvent = {
      nativeEvent: {
        contentOffset: {
          x: -left,
          y: -top,
        },
        contentSize: {
          height,
          width,
        },
        layoutMeasurement: {
          height: window.innerHeight,
          width: window.innerWidth,
        },
      },
      timeStamp: e.timeStamp,
    };
    this.flatList._listRef._onScroll(fakeEvent);
  };

  debouncedOnScroll = debounce(this.onScroll, 50);

  render() {
    const { messages, onEndReached } = this.props;

    return (
      <div ref={elem => (this.messagesBox = elem)}>
        <FlatList
          ref={elem => (this.flatList = elem)}
          data={messages}
          extraData={this.state}
          keyExtractor={keyExtractor}
          initialNumToRender={20}
          onEndReached={onEndReached}
          onEndReachedThreshold={0.5}
          renderItem={({ item: message }) => (
            <Message message={message} />
          )}
        />
      </div>
    );
  }

Do you see a better way to do that without modifying react-native-web?

Would you accept PR that add this feature?

If it is the case, my understanding of the project is very limited but I think we will need a way to override ScrollViewClass in ScrollView with a specific implementation that listen to touch, scroll... events on body instead of a nested View. Does that seems the right way?

[necolas]

See #829 for more about the need to integrate with the responder system with any attempt to do this