Skip to content

Instantly share code, notes, and snippets.

@sahrens
sahrens / gist:b3b2c615b5c62d018d15c2c43b6f903d
Created Sep 1, 2017
Sticky Headers Jittery on Android repro
View gist:b3b2c615b5c62d018d15c2c43b6f903d
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
View BetterListView.md

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
sahrens / ViewabilityHelper.js
Created Dec 15, 2015
Helper class for WindowedListView
View ViewabilityHelper.js
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule ViewabilityHelper
* @flow
*/
'use strict';
const ViewabilityConsts = {
VIEWABLE_PERCENT_THRESHOLD: 50,
View WIP - WindowedListView.js
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule WindowedListView
* @flow
*/
'use strict';
var React = require('React');
var ScrollView = require('ScrollView');
View Off-thread JS Animations
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
sahrens / RecyclingListView.js
Created Oct 15, 2015
Early RecyclingListView prototype
View RecyclingListView.js
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule RecyclingListView
* @flow
*/
'use strict';
var React = require('React');
var ScrollView = require('ScrollView');
@sahrens
sahrens / gist:ae3ad0889c608ecd51aa
Created Oct 14, 2015
Partial RocksDB React Native AsyncStorage module
View gist:ae3ad0889c608ecd51aa
// 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
sahrens / MultiRowListView
Created Oct 1, 2015
MultiRowListView is an experimental ListView with two potential optimizations - incremental row rendering via subrows, and React row recycling.
View MultiRowListView
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule MultiRowListView
* @flow
*/
'use strict';
var React = require('React');
var ScrollView = require('ScrollView');
View ReactNative: Animated - slides
<br /><br />
# React Native: Animated
ReactEurope 2015, Paris - Spencer Ahrens - Facebook
<br /><br />
## Fluid Interactions
- People expect smooth, delightful experiences
@sahrens
sahrens / React Native: Animated - Code
Last active Jul 4, 2020
Example code from ReactEurope 2015 talk - React Native: Animated
View React Native: Animated - Code
/**
* 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