Skip to content

Instantly share code, notes, and snippets.

@sahrens
Created September 1, 2017 18:45
Show Gist options
  • Save sahrens/b3b2c615b5c62d018d15c2c43b6f903d to your computer and use it in GitHub Desktop.
Save sahrens/b3b2c615b5c62d018d15c2c43b6f903d to your computer and use it in GitHub Desktop.
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
style={{
padding: 4,
backgroundColor: color,
borderWidth: 1,
borderColor: 'rgba(0, 0, 0, 0.25)',
}}>
<Text>
{text}
</Text>
</View>;
return (
<FlatList
ItemSeparatorComponent={makeBar('lightskyblue', 'ItemSeparatorComponent')}
ListFooterComponent={makeBar('lightsteelblue', 'ListFooterComponent')}
ListHeaderComponent={makeBar('lightblue', 'ListHeaderComponent')}
data={Array(20).fill().map((_, ii) => ({
title: `Item ${ii}`,
text: 'Section s2',
key: ii,
}))}
renderItem={({item}) =>
<View style={{padding: 8}}>
<Text>
{item.title} - {item.text}
</Text>
</View>}
stickyHeaderIndices={[0]}
/>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment