Skip to content

Fix flatlist on Safari iOS 15 #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
thienlnam merged 3 commits into from
Dec 14, 2021
Merged

Fix flatlist on Safari iOS 15 #3

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
31d1d9d
Fix flatlist bug where half of the content won't render on mobile saf…
azimgd Dec 13, 2021
947191f
Reset contentOffset as the inversion is done by css transform translate;
azimgd Dec 13, 2021
5548f3a
Comment computeWindowedRenderLimits reset behaviour;
azimgd Dec 14, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 29 additions & 9 deletions packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1203,6 +1203,12 @@ class VirtualizedList extends React.PureComponent<Props, State> {

_defaultRenderScrollComponent = props => {
const onRefresh = props.onRefresh;
const inversionStyle = this.props.inverted
? this.props.horizontal
? styles.rowReverse
: styles.columnReverse
: null;

if (this._isNestedWithSameOrientation()) {
// $FlowFixMe - Typing ReactNativeComponent revealed errors
return <View {...props} />;
Expand Down Expand Up @@ -1231,11 +1237,23 @@ class VirtualizedList extends React.PureComponent<Props, State> {
props.refreshControl
)
}
contentContainerStyle={StyleSheet.compose(
inversionStyle,
this.props.contentContainerStyle,
)}
/>
);
} else {
// $FlowFixMe Invalid prop usage
return <ScrollView {...props} />;
return (
<ScrollView
{...props}
contentContainerStyle={StyleSheet.compose(
inversionStyle,
this.props.contentContainerStyle,
)}
/>
);
}
};

Expand Down Expand Up @@ -1513,11 +1531,6 @@ class VirtualizedList extends React.PureComponent<Props, State> {
};

_onScroll = (e: Object) => {
var contentOffset = (this.props.inverted) ? {
x: - e.nativeEvent.contentOffset.x,
y: - e.nativeEvent.contentOffset.y,
} : e.nativeEvent.contentOffset

this._nestedChildLists.forEach(childList => {
childList.ref && childList.ref._onScroll(e);
});
Expand All @@ -1527,7 +1540,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
const timestamp = e.timeStamp;
let visibleLength = this._selectLength(e.nativeEvent.layoutMeasurement);
let contentLength = this._selectLength(e.nativeEvent.contentSize);
let offset = this._selectOffset(contentOffset);
let offset = this._selectOffset(e.nativeEvent.contentOffset);
let dOffset = offset - this._scrollMetrics.offset;

if (this._isNestedWithSameOrientation()) {
Expand Down Expand Up @@ -1703,6 +1716,13 @@ class VirtualizedList extends React.PureComponent<Props, State> {
this._getFrameMetricsApprox,
this._scrollMetrics,
);

// revert the state if calculations are off
// this would only happen on the inverted flatlist (probably a bug with overscroll-behavior)
// when scrolled from bottom all the way up until onEndReached is triggered
if (newState.first === newState.last) {
newState = state
}
}
}
} else {
Expand Down Expand Up @@ -2061,10 +2081,10 @@ function describeNestedLists(childList: {

const styles = StyleSheet.create({
verticallyInverted: {
flexDirection: 'column-reverse',
transform: [{scaleY: -1}],
},
horizontallyInverted: {
flexDirection: 'row-reverse',
transform: [{scaleX: -1}],
},
row: {
flexDirection: 'row',
Expand Down