[fix] VirtualizedList sticky header support

The way that sticky headers work on web requires the ScrollView to apply
'position:sticky' to a clone of the element. This wasn't working for
VirtualizedList because the style prop was not passed to the default
CellRendererComponent implementation.

Fix #1066
Close #1122
This commit is contained in:
Bruno Lemos
2018-09-30 03:26:56 -03:00
committed by Nicolas Gallagher
parent 8e7d31cff5
commit d841db2337

View File

@@ -1562,6 +1562,7 @@ class CellRenderer extends React.Component<
renderItem: renderItemType,
},
prevCellKey: ?string,
style: ?DangerouslyImpreciseStyleProp,
},
$FlowFixMeState,
> {
@@ -1630,6 +1631,7 @@ class CellRenderer extends React.Component<
index,
inversionStyle,
parentProps,
style,
} = this.props;
const {renderItem, getItemLayout} = parentProps;
invariant(renderItem, 'no renderItem!');
@@ -1649,9 +1651,9 @@ class CellRenderer extends React.Component<
);
const cellStyle = inversionStyle
? horizontal
? [{flexDirection: 'row-reverse'}, inversionStyle]
: [{flexDirection: 'column-reverse'}, inversionStyle]
: horizontal ? [{flexDirection: 'row'}, inversionStyle] : inversionStyle;
? [styles.rowReverse, inversionStyle, style]
: [styles.columnReverse, inversionStyle, style]
: horizontal ? [styles.row, inversionStyle, style] : [inversionStyle, style];
if (!CellRendererComponent) {
return (
<View style={cellStyle} onLayout={onLayout}>
@@ -1702,6 +1704,15 @@ const styles = StyleSheet.create({
horizontallyInverted: {
transform: [{scaleX: -1}],
},
row: {
flexDirection: 'row'
},
rowReverse: {
flexDirection: 'row-reverse'
},
columnReverse: {
flexDirection: 'column-reverse'
}
});
export default VirtualizedList;