Fix copy and paste order bug created by inverted FlatList

packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap

@@ -159,7 +159,7 @@ exports[`components/Text prop "numberOfLines" value is set 1`] = `
 
 exports[`components/Text prop "numberOfLines" value is set to one 1`] = `
 <div
-  class="css-text-901oao css-textMultiLine-cens5h"
+  class="css-text-901oao css-textOneLine-nfaoni"
   dir="auto"
 />
 `;

packages/react-native-web/src/exports/Text/index.js

@@ -73,11 +73,12 @@ const Text: React.AbstractComponent<TextProps, HTMLElement & PlatformMethods> =
     const classList = [
       classes.text,
       hasTextAncestor === true && classes.textHasAncestor,
-      numberOfLines != null && classes.textMultiLine
+      numberOfLines === 1 && classes.textOneLine,
+      numberOfLines != null && numberOfLines > 1 && classes.textMultiLine
     ];
     const style = [
       props.style,
-      numberOfLines != null && { WebkitLineClamp: numberOfLines },
+      numberOfLines != null && numberOfLines > 1 && { WebkitLineClamp: numberOfLines },
       selectable === true && styles.selectable,
       selectable === false && styles.notSelectable,
       onPress && styles.pressable
@@ -179,6 +180,13 @@ const classes = css.create({
     font: 'inherit',
     whiteSpace: 'inherit'
   },
+  textOneLine: {
+    maxWidth: '100%',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'pre',
+    wordWrap: 'normal'
+  },
   // See #13
   textMultiLine: {
     display: '-webkit-box',

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

@@ -361,6 +361,14 @@ type State = {
 class VirtualizedList extends React.PureComponent<Props, State> {
   static contextType: typeof VirtualizedListContext = VirtualizedListContext;
 
+  pushOrUnshift(input: Array<any>, item: Item) {
+    if (this.props.inverted) {
+      input.unshift(item)
+    } else {
+      input.push(item)
+    }
+  }
+
   // scrollToEnd may be janky without getItemLayout prop
   scrollToEnd(params?: ?{animated?: ?boolean, ...}) {
     const animated = params ? params.animated : true;
@@ -707,7 +715,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
       );
     } else if (this.props.onViewableItemsChanged) {
       const onViewableItemsChanged = this.props.onViewableItemsChanged
-      this._viewabilityTuples.push({
+      this.pushOrUnshift(this._viewabilityTuples, {
         viewabilityHelper: new ViewabilityHelper(this.props.viewabilityConfig),
         onViewableItemsChanged,
       });
@@ -807,9 +815,9 @@ class VirtualizedList extends React.PureComponent<Props, State> {
       const key = keyExtractor(item, ii);
       this._indicesToKeys.set(ii, key);
       if (stickyIndicesFromProps.has(ii + stickyOffset)) {
-        stickyHeaderIndices.push(cells.length);
+        this.pushOrUnshift(stickyHeaderIndices, cells.length);
       }
-      cells.push(
+      this.pushOrUnshift(cells, 
         <CellRenderer
           CellRendererComponent={CellRendererComponent}
           ItemSeparatorComponent={ii < end ? ItemSeparatorComponent : undefined}
@@ -879,15 +887,15 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     const stickyHeaderIndices = [];
     if (ListHeaderComponent) {
       if (stickyIndicesFromProps.has(0)) {
-        stickyHeaderIndices.push(0);
+        this.pushOrUnshift(stickyHeaderIndices, 0);
       }
       const element = React.isValidElement(ListHeaderComponent) ? (
         ListHeaderComponent
       ) : (
         // $FlowFixMe
         <ListHeaderComponent />
       );
-      cells.push(
+      this.pushOrUnshift(cells,
         <VirtualizedListCellContextProvider
           cellKey={this._getCellKey() + '-header'}
           key="$header">
@@ -936,7 +944,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
                 stickyBlock.offset -
                 initBlock.offset -
                 (this.props.initialScrollIndex ? 0 : initBlock.length);
-              cells.push(
+              this.pushOrUnshift(cells,
                 /* $FlowFixMe(>=0.111.0 site=react_native_fb) This comment
                  * suppresses an error found when Flow v0.111 was deployed. To
                  * see the error, delete this comment and run Flow. */
@@ -953,7 +961,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
               const trailSpace =
                 this._getFrameMetricsApprox(first).offset -
                 (stickyBlock.offset + stickyBlock.length);
-              cells.push(
+              this.pushOrUnshift(cells,
                 /* $FlowFixMe(>=0.111.0 site=react_native_fb) This comment
                  * suppresses an error found when Flow v0.111 was deployed. To
                  * see the error, delete this comment and run Flow. */
@@ -969,7 +977,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
           const firstSpace =
             this._getFrameMetricsApprox(first).offset -
             (initBlock.offset + initBlock.length);
-          cells.push(
+          this.pushOrUnshift(cells,
             /* $FlowFixMe(>=0.111.0 site=react_native_fb) This comment
              * suppresses an error found when Flow v0.111 was deployed. To see
              * the error, delete this comment and run Flow. */
@@ -1006,7 +1014,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
           endFrame.offset +
           endFrame.length -
           (lastFrame.offset + lastFrame.length);
-        cells.push(
+        this.pushOrUnshift(cells,
           /* $FlowFixMe(>=0.111.0 site=react_native_fb) This comment suppresses
            * an error found when Flow v0.111 was deployed. To see the error,
            * delete this comment and run Flow. */
@@ -1022,7 +1030,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
         // $FlowFixMe
         <ListEmptyComponent />
       )): any);
-      cells.push(
+      this.pushOrUnshift(cells,
         React.cloneElement(element, {
           key: '$empty',
           onLayout: event => {
@@ -1042,7 +1050,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
         // $FlowFixMe
         <ListFooterComponent />
       );
-      cells.push(
+      this.pushOrUnshift(cells,
         <VirtualizedListCellContextProvider
           cellKey={this._getFooterCellKey()}
           key="$footer">
@@ -1195,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} />;
@@ -1223,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,
+          )}
+        />
+      );
     }
   };
 
@@ -1367,7 +1393,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
        * error found when Flow v0.68 was deployed. To see the error delete this
        * comment and run Flow. */
       if (frame.inLayout) {
-        framesInLayout.push(frame);
+        this.pushOrUnshift(framesInLayout, frame);
       }
     }
     const windowTop = this._getFrameMetricsApprox(this.state.first).offset;
@@ -1690,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 {