Spencer Ahrens sahrens

A Better ListView for React Native

I have a proposal for some new APIs, and a first draft on an implementation (first diff: D4412469). Salient points on the new APIs:

Two easy-to-use components: FlatList and SectionList. I have found that separating the section API out makes things a lot cleaner for both cases.
One shared underlying implementation, VirtualizedList, which has an API similar to react-virtualized and uses getter functions to be very flexible and supports any kind of data structure such as a plain array or an immutable list.
Naming adjustments to make it horizontal agnostic, e.g. "Item" instead of "Row".

	ScreenCast from physical Pixel device: https://youtu.be/D7FO0D9YNFE

	const FlatList = require('FlatList');
	const React = require('React');
	const Text = require('Text');
	const View = require('View');

	function renderList(): React.Node {
	const makeBar = (color, text) => () =>
	<View

	/**
	* Copyright 2004-present Facebook. All Rights Reserved.
	*
	* @providesModule ViewabilityHelper
	* @flow
	*/
	'use strict';

	const ViewabilityConsts = {
	VIEWABLE_PERCENT_THRESHOLD: 50,

	/**
	* Copyright 2004-present Facebook. All Rights Reserved.
	*
	* @providesModule WindowedListView
	* @flow
	*/
	'use strict';

	var React = require('React');
	var ScrollView = require('ScrollView');

	This is almost certainly the wrong approach. I wanted to try and get CoreAnimation-based
	animations working because they should be the smoothest and most performant, but I think
	there are too many limitations. Most notably, it can't update layout properties like
	left/top. I think a better approach would be to make a custom animation runner, similar
	to POP, that drives the animations from native by manually updating the properties,
	potentially on the shadow views to trigger layout updates.


	changeset: 840371:5f08152ca3e1
	bookmark: animated_nativeCannedAnimations

	/**
	* Copyright 2004-present Facebook. All Rights Reserved.
	*
	* @providesModule RecyclingListView
	* @flow
	*/
	'use strict';

	var React = require('React');
	var ScrollView = require('ScrollView');

	// Copyright 2004-present Facebook. All Rights Reserved.

	#import "RKAsyncRocksDBStorage.h"

	#include <string>

	#import <Foundation/Foundation.h>

	#import <FBReactKit/RCTConvert.h>
	#import <FBReactKit/RCTLog.h>

	/**
	* Copyright 2004-present Facebook. All Rights Reserved.
	*
	* @providesModule MultiRowListView
	* @flow
	*/
	'use strict';

	var React = require('React');
	var ScrollView = require('ScrollView');

	<br /><br />
	# React Native: Animated

	ReactEurope 2015, Paris - Spencer Ahrens - Facebook

	<br /><br />

	## Fluid Interactions

	- People expect smooth, delightful experiences

	/**
	* The examples provided by Facebook are for non-commercial testing and
	* evaluation purposes only.
	*
	* Facebook reserves all rights not expressly granted.
	*
	* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
	* OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
	* FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
	* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN