[VirtualList] Fix off-by-one errors when rendering window-sized items.

Libraries/Lists/VirtualizeUtils.js

@@ -26,7 +26,7 @@ function elementsThatOverlapOffsets(
   let outLength = 0;
   for (let ii = 0; ii < itemCount; ii++) {
     const frame = getFrameMetrics(ii);
-    const trailingOffset = frame.offset + frame.length;
+    const trailingOffset = frame.offset + Math.max(0, frame.length - 1);
     for (let kk = 0; kk < offsets.length; kk++) {
       if (out[kk] == null && trailingOffset >= offsets[kk]) {
         out[kk] = ii;
@@ -99,7 +99,7 @@ function computeWindowedRenderLimits(
   // in the direction of scroll. Total overscan area is capped, which should cap memory consumption
   // too.
   const visibleBegin = Math.max(0, offset);
-  const visibleEnd = visibleBegin + visibleLength;
+  const visibleEnd = visibleBegin + Math.max(0, visibleLength - 1);
   const overscanLength = (windowSize - 1) * visibleLength;
 
   // Considering velocity seems to introduce more churn than it's worth.
@@ -124,6 +124,8 @@ function computeWindowedRenderLimits(
   }
 
   // Find the indices that correspond to the items at the render boundaries we're targeting.
+  // visibleBegin and visibleEnd represent the first and last visible pixel,
+  // so first and last represent the first and last visible component, as well.
   let [overscanFirst, first, last, overscanLast] = elementsThatOverlapOffsets(
     [overscanBegin, visibleBegin, visibleEnd, overscanEnd],
     props.getItemCount(props.data),

Libraries/Lists/__tests__/VirtualizeUtils-test.js

@@ -59,14 +59,14 @@ describe('elementsThatOverlapOffsets', function() {
     const offsets = [150, 250, 900];
     const frames = [
       {offset: 0, length: 50},
-      {offset: 50, length: 200},
+      {offset: 50, length: 200}, // Doesn't actually hit the 250 offset, since it only goes to pixel 249
       {offset: 250, length: 600},
       {offset: 850, length: 100},
       {offset: 950, length: 150},
     ];
     expect(
       elementsThatOverlapOffsets(offsets, frames.length, ii => frames[ii]),
-    ).toEqual([1, 1, 3]);
+    ).toEqual([1, 2, 3]);
   });
   it('handles out of bounds', function() {
     const offsets = [150, 900];
@@ -90,4 +90,15 @@ describe('elementsThatOverlapOffsets', function() {
       elementsThatOverlapOffsets(offsets, frames.length, ii => frames[ii]);
     }).toThrowErrorMatchingSnapshot();
   });
+  it('handles off-by-one edge case', function() {
+    const offsets = [100, 199, 200];
+    const frames = [
+      {offset: 0, length: 100},
+      {offset: 100, length: 100},
+      {offset: 200, length: 100},
+    ];
+    expect(
+      elementsThatOverlapOffsets(offsets, frames.length, (ii) => frames[ii])
+    ).toEqual([1, 1, 2]);
+  });  
 });