Skip to content

Commit d841db2

Browse files
brunolemosnecolas
authored andcommitted
[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
1 parent 8e7d31c commit d841db2

File tree

1 file changed

+14
-3
lines changed
  • packages/react-native-web/src/vendor/react-native/VirtualizedList

1 file changed

+14
-3
lines changed

packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1562,6 +1562,7 @@ class CellRenderer extends React.Component<
15621562
renderItem: renderItemType,
15631563
},
15641564
prevCellKey: ?string,
1565+
style: ?DangerouslyImpreciseStyleProp,
15651566
},
15661567
$FlowFixMeState,
15671568
> {
@@ -1630,6 +1631,7 @@ class CellRenderer extends React.Component<
16301631
index,
16311632
inversionStyle,
16321633
parentProps,
1634+
style,
16331635
} = this.props;
16341636
const {renderItem, getItemLayout} = parentProps;
16351637
invariant(renderItem, 'no renderItem!');
@@ -1649,9 +1651,9 @@ class CellRenderer extends React.Component<
16491651
);
16501652
const cellStyle = inversionStyle
16511653
? horizontal
1652-
? [{flexDirection: 'row-reverse'}, inversionStyle]
1653-
: [{flexDirection: 'column-reverse'}, inversionStyle]
1654-
: horizontal ? [{flexDirection: 'row'}, inversionStyle] : inversionStyle;
1654+
? [styles.rowReverse, inversionStyle, style]
1655+
: [styles.columnReverse, inversionStyle, style]
1656+
: horizontal ? [styles.row, inversionStyle, style] : [inversionStyle, style];
16551657
if (!CellRendererComponent) {
16561658
return (
16571659
<View style={cellStyle} onLayout={onLayout}>
@@ -1702,6 +1704,15 @@ const styles = StyleSheet.create({
17021704
horizontallyInverted: {
17031705
transform: [{scaleX: -1}],
17041706
},
1707+
row: {
1708+
flexDirection: 'row'
1709+
},
1710+
rowReverse: {
1711+
flexDirection: 'row-reverse'
1712+
},
1713+
columnReverse: {
1714+
flexDirection: 'column-reverse'
1715+
}
17051716
});
17061717

17071718
export default VirtualizedList;

0 commit comments

Comments
 (0)