Fix flatlist bug where half of the content won't render on mobile safari (ios 15);

Author: azimgd

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',