Added basic ListView component

[IjzerenHein]

This commit adds a basic ListView component implementation. It fully supports the DataSource api which is exposed by ListView.DataSource. This allows for running your react-native ListView code using react-native-web.

Things that are supported:

[X] ListView.DataSource (fully supported)
[X] SectionHeaders (ListView.props.renderSectionHeader & ListView.DataSource.cloneWithRowsAndSections)
[X] Header (ListView.props.renderHeader)
[X] Footer (ListView.props.renderFooter)
[X] Separators (ListView.props.renderSeparator)
[X] renderScrollComponent (ListView.props.renderScrollComponent)

Things are are not (yet) supported:

[ ] Infinite scrolling (only render content that is within a certain visible view)
[ ] Only re-render changed rows

The following props are defined but not (yet) used anywhere:

{
  initialListSize: PropTypes.number,
  onEndReached: PropTypes.func,
  onEndReachedThreshold: PropTypes.number,
  pageSize: PropTypes.number,
  scrollRenderAheadDistance: PropTypes.number,
  onChangeVisibleRows: PropTypes.func,
  removeClippedSubviews: PropTypes.bool,
  stickyHeaderIndices: PropTypes.arrayOf(PropTypes.number)
}

[necolas]

why isn't this class copy-pasted from react-native?

[IjzerenHein]

That particular class was build using flow types incorporated into the code. I (for some reason..) thought that was not supported by the react-native-web toolchain (I had done some spot-checks and could not find any flow enabled code), so instead made a port of it (the code is nearly identical though).
I've just checked and the original code compiles just fine and works as expected. I agree we should use that. I only had to change the require's as the top of the file to use:

var invariant = require('fbjs/lib/invariant');
var isEmpty = require('fbjs/lib/isEmpty');
var warning = require('fbjs/lib/warning');

Furthermore, the class throws a ton of linting errors because semi-colons are not allowed. I think it would be nice if we could drop code from 'react-native' in without having to remove all semi-colons (or change the require's).

[necolas]

react native is changing their fbjs requires to work like standard npm requires. you can add /* eslint disable */ to the top of the file as is done in other modules mirroring RN

[IjzerenHein]

Alright cool, I'll do that. It's probably gonna be tomorrow before I have time for this.

[IjzerenHein]

Hi, I've updated ListViewDataSource to the copy/pasted version of the original react-native code.
cheers

[MoOx]

I am interested by this ListView. Anything missing @necolas?
Maybe https://bvaughn.github.io/react-virtualized/ can help for the scroll/optimized rendering part?

[IjzerenHein]

For the record, I'm also working a new virtualized (infinite) scrollview implementation for javascript, supporting (sticky) section-headers, insert/remove/move animations, bottom alignment, etc.. I'll post progress here when I more to show.

[MoOx]

Why you don't work on react-virtualized, which seems like a pretty solid start? They have an open PR for the v7 which will remove some legacy things bvaughn/react-virtualized#206

[IjzerenHein]

@MoOx Cause I'm working on a different feature-set, I have a set of specific goals in my mind. It's not specifically aimed at react-native-web, but when done we could have a look whether it is a match. In terms of features I'm recreating what can be seen in this demo here:
https://rawgit.com/IjzerenHein/famous-flex-chat/master/dist/index.html

[codeheroics]

I'm interested by this ListView component. I tried merging the PR branch and the master branch and it worked like a charm for me after fixing a small conflict, which is great, compared to the current master which throws an error on new ListView.DataSource().

Can't it be merged as it is, and the missing performance-related features added later?

[mcampsall]

I love this project, thanks everyone for your contributions!

I am having difficulties getting the ListView to compile though. I manually created the files in this PR in my project and get the following error when running it:

Module parse failed: /Users/.../node_modules/react-native-web/dist/components/ListView/index.js Unexpected character '@' (10:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '@' (10:0)

it is pointing to this line:
@NativeMethodsDecorator

I am sorry if this is not the place for this, and thanks again for all your work.

EDIT: I realize I am missing all of the babel translated code at the top of the file, now to figure out how to get that in there...

[MoOx]

@mcampsall you need a babel plugin in your stack that will handle decorators as they are not in es2015 (and not in es2016). See https://babeljs.io/docs/plugins/transform-decorators/

[mcampsall]

Thanks @MoOx, that would likely work if I had added the files to the project correctly. What would the proper way to add this PR to my project?

[lacker]

+1 to getting this in - I'd like to use this in the main React Native docs for ListView. @necolas are there any missing features / tests that you'd want before merging this?

[necolas]

Thanks! I've merged this to unblock the work on the RN docs (install 0.0.28). We can iterate on ListView from here.

[lacker]

Thanks man I owe you one high five 😃

[damiaozi]

@MoOx how to use react-virtualized on web？

[MoOx]

Just consume it via npm. Default main of the package.json leads to a commonjs build. You should not have to do anything special. If you need more help, you should read the docs or contact the maintainer of this package, not here :)

[fukemy]

hi, how to install this pull request through npm?

[MoOx]

ListView has been remove from React Native, so it has been from React Native for web.

• 6c682bb
• NOTICE: API removals #1352
• ☂️ Lean Core facebook/react-native#23313