From 31d1d9d1db6f1e873f58a32e50748eadd4c845fa Mon Sep 17 00:00:00 2001
From: Azim Gadzhiagayev <me@azimgd.com>
Date: Mon, 13 Dec 2021 23:52:09 +0500
Subject: [PATCH 1/3] Fix flatlist bug where half of the content won't render
 on mobile safari (ios 15);

---
 .../react-native/VirtualizedList/index.js     | 29 +++++++++++++++++--
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js b/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js
index 91dac46da..4d78f6339 100644
--- a/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js
+++ b/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js
@@ -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} />;
@@ -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,
+          )}
+        />
+      );
     }
   };
 
@@ -1703,6 +1721,11 @@ class VirtualizedList extends React.PureComponent<Props, State> {
               this._getFrameMetricsApprox,
               this._scrollMetrics,
             );
+
+            // revert the state if calculations are off
+            if (newState.first === newState.last) {
+              newState = state
+            }
           }
         }
       } else {
@@ -2061,10 +2084,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',

From 947191f0fd5d43fcb5731e60fc3652e40fc7315d Mon Sep 17 00:00:00 2001
From: Azim Gadzhiagayev <me@azimgd.com>
Date: Tue, 14 Dec 2021 00:39:21 +0500
Subject: [PATCH 2/3] Reset contentOffset as the inversion is done by css
 transform translate;

---
 .../src/vendor/react-native/VirtualizedList/index.js       | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js b/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js
index 4d78f6339..163fdaf8c 100644
--- a/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js
+++ b/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js
@@ -1531,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);
     });
@@ -1545,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()) {

From 5548f3ab68f5dfac293e9592e0efd6ed61c3b50e Mon Sep 17 00:00:00 2001
From: Azim Gadzhiagayev <me@azimgd.com>
Date: Tue, 14 Dec 2021 08:40:14 +0500
Subject: [PATCH 3/3] Comment computeWindowedRenderLimits reset behaviour;

---
 .../src/vendor/react-native/VirtualizedList/index.js            | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js b/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js
index 163fdaf8c..1a1e27db6 100644
--- a/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js
+++ b/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js
@@ -1718,6 +1718,8 @@ class VirtualizedList extends React.PureComponent<Props, State> {
             );
 
             // 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
             }