🐛 (VirtualizedList) fix VirtualizedList with initialScrollIndex not r…

…endering all items when da… Use this._hasDoneInitialScroll instead of this._scrollMetrics.offset to determine if the initial scroll is done. The offset can sometimes be 0 even after the scrollToIndex method is called to scroll to the initialScrollIndex: for example when the content does not fill the list.
facebook · Apr 20, 2022 · 2335afb · 2335afb
1 parent 2265f04
commit 2335afb
Show file tree

Hide file tree

Showing 2 changed files with 117 additions and 19 deletions.
diff --git a/Libraries/Lists/VirtualizedList.js b/Libraries/Lists/VirtualizedList.js
@@ -1754,7 +1754,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
           // we'll wipe out the initialNumToRender rendered elements starting at initialScrollIndex.
           // So let's wait until we've scrolled the view to the right place. And until then,
           // we will trust the initialScrollIndex suggestion.
-          if (!this.props.initialScrollIndex || this._scrollMetrics.offset) {
+          if (!this.props.initialScrollIndex || this._hasDoneInitialScroll) {
             newState = computeWindowedRenderLimits(
               this.props.data,
               this.props.getItemCount,

diff --git a/Libraries/Lists/__tests__/__snapshots__/VirtualizedList-test.js.snap b/Libraries/Lists/__tests__/__snapshots__/VirtualizedList-test.js.snap
@@ -2293,12 +2293,12 @@ exports[`does not adjust render area with non-zero initialScrollIndex until scro
 >
   <View>
     <View
-      style={
-        Object {
-          "height": 10,
-        }
-      }
-    />
+      style={null}
+    >
+      <MockCellItem
+        value={0}
+      />
+    </View>
     <View
       style={null}
     >
@@ -2335,12 +2335,103 @@ exports[`does not adjust render area with non-zero initialScrollIndex until scro
       />
     </View>
     <View
-      style={
-        Object {
-          "height": 140,
-        }
-      }
-    />
+      style={null}
+    >
+      <MockCellItem
+        value={6}
+      />
+    </View>
+    <View
+      style={null}
+    >
+      <MockCellItem
+        value={7}
+      />
+    </View>
+    <View
+      style={null}
+    >
+      <MockCellItem
+        value={8}
+      />
+    </View>
+    <View
+      style={null}
+    >
+      <MockCellItem
+        value={9}
+      />
+    </View>
+    <View
+      style={null}
+    >
+      <MockCellItem
+        value={10}
+      />
+    </View>
+    <View
+      style={null}
+    >
+      <MockCellItem
+        value={11}
+      />
+    </View>
+    <View
+      style={null}
+    >
+      <MockCellItem
+        value={12}
+      />
+    </View>
+    <View
+      style={null}
+    >
+      <MockCellItem
+        value={13}
+      />
+    </View>
+    <View
+      style={null}
+    >
+      <MockCellItem
+        value={14}
+      />
+    </View>
+    <View
+      style={null}
+    >
+      <MockCellItem
+        value={15}
+      />
+    </View>
+    <View
+      style={null}
+    >
+      <MockCellItem
+        value={16}
+      />
+    </View>
+    <View
+      style={null}
+    >
+      <MockCellItem
+        value={17}
+      />
+    </View>
+    <View
+      style={null}
+    >
+      <MockCellItem
+        value={18}
+      />
+    </View>
+    <View
+      style={null}
+    >
+      <MockCellItem
+        value={19}
+      />
+    </View>
   </View>
 </RCTScrollView>
 `;
@@ -3302,12 +3393,19 @@ exports[`renders new items when data is updated with non-zero initialScrollIndex
       />
     </View>
     <View
-      style={
-        Object {
-          "height": 20,
-        }
-      }
-    />
+      style={null}
+    >
+      <MockCellItem
+        value={2}
+      />
+    </View>
+    <View
+      style={null}
+    >
+      <MockCellItem
+        value={3}
+      />
+    </View>
   </View>
 </RCTScrollView>
 `;