draft - invert flatlist without using transform

fabOnReact · Jul 6, 2022 · 5b2cb47 · 5b2cb47
1 parent 3da3d82
commit 5b2cb47
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 44 deletions.
diff --git a/Libraries/Lists/VirtualizedList.js b/Libraries/Lists/VirtualizedList.js
@@ -794,7 +794,6 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     stickyIndicesFromProps: Set<number>,
     first: number,
     last: number,
-    inversionStyle: ViewStyleProp,
   ) {
     const {
       CellRendererComponent,
@@ -813,7 +812,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     const end = getItemCount(data) - 1;
     let prevCellKey;
     last = Math.min(end, last);
-    for (let ii = first; ii <= last; ii++) {
+    const pushCell = ii => {
       const item = getItem(data, ii);
       const key = this._keyExtractor(item, ii);
       this._indicesToKeys.set(ii, key);
@@ -831,7 +830,6 @@ class VirtualizedList extends React.PureComponent<Props, State> {
           getItemLayout={getItemLayout}
           horizontal={horizontal}
           index={ii}
-          inversionStyle={inversionStyle}
           item={item}
           key={key}
           prevCellKey={prevCellKey}
@@ -845,6 +843,15 @@ class VirtualizedList extends React.PureComponent<Props, State> {
         />,
       );
       prevCellKey = key;
+    };
+    if (this.props.inverted) {
+      for (let ii = last; ii >= first; ii--) {
+        pushCell(ii);
+      }
+    } else {
+      for (let ii = first; ii <= last; ii++) {
+        pushCell(ii);
+      }
     }
   }
 
@@ -899,11 +906,6 @@ class VirtualizedList extends React.PureComponent<Props, State> {
       this.props;
     const {data, horizontal} = this.props;
     const isVirtualizationDisabled = this._isVirtualizationDisabled();
-    const inversionStyle = this.props.inverted
-      ? horizontalOrDefault(this.props.horizontal)
-        ? styles.horizontallyInverted
-        : styles.verticallyInverted
-      : null;
     const cells = [];
     const stickyIndicesFromProps = new Set(this.props.stickyHeaderIndices);
     const stickyHeaderIndices = [];
@@ -924,10 +926,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
           key="$header">
           <View
             onLayout={this._onLayoutHeader}
-            style={StyleSheet.compose(
-              inversionStyle,
-              this.props.ListHeaderComponentStyle,
-            )}>
+            style={this.props.ListHeaderComponentStyle}>
             {
               // $FlowFixMe[incompatible-type] - Typing ReactNativeComponent revealed errors
               element
@@ -945,14 +944,16 @@ class VirtualizedList extends React.PureComponent<Props, State> {
         ? -1
         : initialNumToRenderOrDefault(this.props.initialNumToRender) - 1;
       const {first, last} = this.state;
-      this._pushCells(
-        cells,
-        stickyHeaderIndices,
-        stickyIndicesFromProps,
-        0,
-        lastInitialIndex,
-        inversionStyle,
-      );
+      if (!this.props.inverted) {
+        this._pushCells(
+          cells,
+          stickyHeaderIndices,
+          stickyIndicesFromProps,
+          0,
+          lastInitialIndex,
+        );
+        this.scrollToOffset({offset: 0, animated: false});
+      }
       const firstAfterInitial = Math.max(lastInitialIndex + 1, first);
       if (!isVirtualizationDisabled && first > lastInitialIndex + 1) {
         let insertedStickySpacer = false;
@@ -976,7 +977,6 @@ class VirtualizedList extends React.PureComponent<Props, State> {
                 stickyIndicesFromProps,
                 ii,
                 ii,
-                inversionStyle,
               );
               const trailSpace =
                 this.__getFrameMetricsApprox(first).offset -
@@ -1005,8 +1005,17 @@ class VirtualizedList extends React.PureComponent<Props, State> {
         stickyIndicesFromProps,
         firstAfterInitial,
         last,
-        inversionStyle,
       );
+      if (this.props.inverted) {
+        this._pushCells(
+          cells,
+          stickyHeaderIndices,
+          stickyIndicesFromProps,
+          0,
+          lastInitialIndex,
+        );
+        this.scrollToEnd({animated: false});
+      }
       if (!this._hasWarned.keys && _usedIndexForKey) {
         console.warn(
           'VirtualizedList: missing keys for items, make sure to specify a key or id property on each ' +
@@ -1051,7 +1060,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
               element.props.onLayout(event);
             }
           },
-          style: StyleSheet.compose(inversionStyle, element.props.style),
+          style: element.props.style,
         }),
       );
     }
@@ -1069,10 +1078,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
           key="$footer">
           <View
             onLayout={this._onLayoutFooter}
-            style={StyleSheet.compose(
-              inversionStyle,
-              this.props.ListFooterComponentStyle,
-            )}>
+            style={this.props.ListFooterComponentStyle}>
             {
               // $FlowFixMe[incompatible-type] - Typing ReactNativeComponent revealed errors
               element
@@ -1098,9 +1104,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
           ? this.props.invertStickyHeaders
           : this.props.inverted,
       stickyHeaderIndices,
-      style: inversionStyle
-        ? [inversionStyle, this.props.style]
-        : this.props.style,
+      style: this.props.style,
     };
 
     this._hasMore =
@@ -1952,7 +1956,6 @@ type CellRendererProps = {
   },
   horizontal: ?boolean,
   index: number,
-  inversionStyle: ViewStyleProp,
   item: Item,
   // This is extracted by ScrollViewStickyHeader
   onCellLayout: (event: Object, cellKey: string, index: number) => void,
@@ -2089,7 +2092,6 @@ class CellRenderer extends React.Component<
       horizontal,
       item,
       index,
-      inversionStyle,
       renderItem,
     } = this.props;
     const element = this._renderElement(
@@ -2111,26 +2113,16 @@ class CellRenderer extends React.Component<
       : ItemSeparatorComponent && (
           <ItemSeparatorComponent {...this.state.separatorProps} />
         );
-    const cellStyle = inversionStyle
-      ? horizontal
-        ? [styles.rowReverse, inversionStyle]
-        : [styles.columnReverse, inversionStyle]
-      : horizontal
-      ? [styles.row, inversionStyle]
-      : inversionStyle;
     const result = !CellRendererComponent ? (
       /* $FlowFixMe[incompatible-type-arg] (>=0.89.0 site=react_native_fb) *
         This comment suppresses an error found when Flow v0.89 was deployed. *
         To see the error, delete this comment and run Flow. */
-      <View style={cellStyle} onLayout={onLayout}>
+      <View onLayout={onLayout}>
         {element}
         {itemSeparator}
       </View>
     ) : (
-      <CellRendererComponent
-        {...this.props}
-        style={cellStyle}
-        onLayout={onLayout}>
+      <CellRendererComponent {...this.props} onLayout={onLayout}>
         {element}
         {itemSeparator}
       </CellRendererComponent>

diff --git a/packages/rn-tester/js/examples/FlatList/BaseFlatListExample.js b/packages/rn-tester/js/examples/FlatList/BaseFlatListExample.js
@@ -32,6 +32,11 @@ const DATA = [
   'Beer',
   'Cheesecake',
   'Ice Cream',
+  'Spaghetti Carbonara',
+  'Margherita',
+  'Diavola',
+  'Ravioli Mamma Mia',
+  'Bresaola',
 ];
 
 const Item = ({item, separators}: RenderItemProps<string>) => {