Skip to content

Instantly share code, notes, and snippets.

@sahrens
sahrens / gist:58057ff90c13268b62d0
Created May 1, 2015 20:26
React Native text crash
var TextBug = React.createClass({
getInitialState: function() {
return {seeMore: false};
},
render: function() {
return (
<Text
style={styles.container}
onPress={() => this.setState({seeMore: !this.state.seeMore})}>
<Text>Tap to see more (bugs).</Text>
This file contains any messages produced by compilers while
running configure, to aid debugging if configure makes a mistake.
It was created by watchman configure 3.3.0, which was
generated by GNU Autoconf 2.69. Invocation command line was
$ ./configure --disable-dependency-tracking --prefix=/usr/local/Cellar/watchman/HEAD --with-pcre
## --------- ##
## Platform. ##
Please note that these warnings are just used to help the Homebrew maintainers
with debugging if you file an issue. If everything you use Homebrew for is
working fine: please don't worry and just ignore them. Thanks!
Please note that these warnings are just used to help the Homebrew maintainers
with debugging if you file an issue. If everything you use Homebrew for is
working fine: please don't worry and just ignore them. Thanks!
@sahrens
sahrens / MultiRowListView
Created October 1, 2015 04:16
MultiRowListView is an experimental ListView with two potential optimizations - incremental row rendering via subrows, and React row recycling.
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule MultiRowListView
* @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 WindowedListView
* @flow
*/
'use strict';
var React = require('React');
var ScrollView = require('ScrollView');
@sahrens
sahrens / gist:b3b2c615b5c62d018d15c2c43b6f903d
Created September 1, 2017 18:45
Sticky Headers Jittery on Android repro
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
<br /><br />
# React Native: Animated
ReactEurope 2015, Paris - Spencer Ahrens - Facebook
<br /><br />
## Fluid Interactions
- People expect smooth, delightful experiences
@sahrens
sahrens / ViewabilityHelper.js
Created December 15, 2015 21:56
Helper class for WindowedListView
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule ViewabilityHelper
* @flow
*/
'use strict';
const ViewabilityConsts = {
VIEWABLE_PERCENT_THRESHOLD: 50,