React-native-web: Adopt RN's new list views

[necolas]

https://facebook.github.io/react-native/blog/2017/03/13/better-list-views.html

These new lists are easier to use and more performant. There shouldn't be much preventing them from being run on web.

(I quickly tried FlatList a few weeks ago but found it would render the entire list of data. It seemed to be an issue related to detecting the lower edge of the visible window.)

cc @sahrens

[RangerMauve]

This would be really awesome to have! List virtualizaton is a pain in the butt and many of the libraries I've sifted through for react were either overly complicated or buggy.

[sahrens]

So the way this is implemented is not really web compatible because it relies on the onLayout callback which would be very tricky to pollyfill efficiently on web. But if you require usage of getItemLayout, then you could probably build the same FlatList API on top of https://github.com/bvaughn/react-virtualized. I would suggest building an adapter for react-virtualized/List Grid and maybe doing some small refactoring, and change FlatList to use react-virtualized under the hood if the Platform.OS === web.

cc @bvaughn

[bvaughn]

Happy to support this effort if you run into any questions writing the adapter.

[necolas]

it relies on the onLayout callback

There's support for onLayout, which part do you think is problematic? FlatList mostly worked apart from a couple of issues that prevented it from correctly understanding how much content needed to be rendered.

[sahrens]

On cool, didn't know people polyfilled onLayout on View, that's awesome. Perhaps the problem is that the scroll view metrics aren't getting updated correctly? They come from the onScroll events, as well as onLayout and onContentSize listeners on the ScrollView. Might need some more polyfills?

[mogarick]

Hi @necolas,
just wanted to know if it is safe to use the new RN List Views. I've read only a couple of issues are present at the moment.
If it's is safe, do I need to update only react-web-native (I'm using 0.0.75 currently) or do I need to make something else?
Congratulations for this awesome library!

[necolas]

Moving this to the component backlog ticket - #91

[smkhalsa]

@necolas any update on using FlatList with React Native Web?