sahrens

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

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".

sahrens

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

const ViewabilityConsts = {
  VIEWABLE_PERCENT_THRESHOLD: 50,

sahrens

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

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

sahrens

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

sahrens

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

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

sahrens

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

#import "RKAsyncRocksDBStorage.h"

#include <string>

#import <Foundation/Foundation.h>

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

sahrens

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

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

sahrens

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

ReactEurope 2015, Paris - Spencer Ahrens - Facebook

<br /><br />

## Fluid Interactions

- People expect smooth, delightful experiences

sahrens

/**
 * 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