Use better size for adjacent area

Author: NickGerleman

Libraries/Lists/VirtualizedList.js

@@ -771,8 +771,11 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     // Keep the items around the last focused rendered, to allow for keyboard
     // navigation
     if (lastFocusedItem) {
-      const first = Math.max(0, lastFocusedItem - 1);
-      const last = Math.min(itemCount - 1, lastFocusedItem + 1);
+      const bufferAroundItem = Math.round(
+        initialNumToRenderOrDefault(props.initialNumToRender) / 2,
+      );
+      const first = Math.max(0, lastFocusedItem - bufferAroundItem);
+      const last = Math.min(itemCount - 1, lastFocusedItem + bufferAroundItem);
       renderMask.addCells({first, last});
     }
 

Libraries/Lists/__tests__/VirtualizedList-test.js

@@ -1446,14 +1446,14 @@ it('renders windowSize derived region at bottom', () => {
 });
 
 it('keeps last focused item rendered', () => {
-  const items = generateItems(20);
+  const items = generateItems(40);
   const ITEM_HEIGHT = 10;
 
   let component;
   ReactTestRenderer.act(() => {
     component = ReactTestRenderer.create(
       <VirtualizedList
-        initialNumToRender={1}
+        initialNumToRender={5}
         windowSize={1}
         {...baseItemProps(items)}
         {...fixedHeightItemLayoutProps(ITEM_HEIGHT)}
@@ -1464,39 +1464,45 @@ it('keeps last focused item rendered', () => {
   ReactTestRenderer.act(() => {
     simulateLayout(component, {
       viewport: {width: 10, height: 50},
-      content: {width: 10, height: 200},
+      content: {width: 10, height: 400},
     });
 
     performAllBatches();
   });
 
   ReactTestRenderer.act(() => {
-    component.getInstance()._onCellFocusCapture(3);
+    simulateScroll(component, {x: 0, y: 100});
+    performAllBatches();
   });
 
   ReactTestRenderer.act(() => {
-    simulateScroll(component, {x: 0, y: 150});
+    component.getInstance()._onCellFocusCapture(10);
+  });
+
+  ReactTestRenderer.act(() => {
+    simulateScroll(component, {x: 0, y: 350});
     performAllBatches();
   });
 
-  // Cells 1-4 should remain rendered after scrolling to the bottom of the list
+  // Cell 10, and `initialNumToRender` / 2 cells on each side, should remain
+  // rendered
   expect(component).toMatchSnapshot();
 
   ReactTestRenderer.act(() => {
-    component.getInstance()._onCellFocusCapture(17);
+    component.getInstance()._onCellFocusCapture(37);
   });
 
-  // Cells 2-4 should no longer be rendered after focus is moved to the end of
-  // the list
+  // Cells around 10 should no longer be rendered after focus is moved to the
+  // end of the list
   expect(component).toMatchSnapshot();
 
   ReactTestRenderer.act(() => {
     simulateScroll(component, {x: 0, y: 0});
     performAllBatches();
   });
 
-  // Cells 16-18 should remain rendered after scrolling back to the top of the
-  // list
+  // Cell 37, and `initialNumToRender` / 2 cells on each side, should remain
+  // rendered
   expect(component).toMatchSnapshot();
 });