From d50fd1a68112f40f4be3ac3aa4d67f96df33e387 Mon Sep 17 00:00:00 2001
From: fabriziobertoglio1987 <fabrizio.bertoglio@gmail.com>
Date: Tue, 15 Mar 2022 14:35:38 +0800
Subject: [PATCH] adding prop getCellsInItemCount to VirtualizedList

getItemCount does not calculate the exact number of accessible
collection Items (cells) of a virtualized list

for example, a list can have 2 columns and 2 rows, but only 3 items.
getItemCount would return the number of rows 2 and not the number of
items 3.

+--------+--------+
| item 1 | item 2 |
+--------+--------+
| item 3 |        |
+--------+--------+

the result is calculated by dividing data.lenght / numColumns

https://github.com/fabriziobertoglio1987/react-native/blob/3a11bff4be8ef30b73faad1167fe45ef0de6d2cc/Libraries/Lists/FlatList.js#L508-L515

```javascript
  _getItemCount = (data: ?Array<ItemT>): number => {
    if (data) {
      const numColumns = numColumnsOrDefault(this.props.numColumns);
      return numColumns > 1 ? Math.ceil(data.length / numColumns) : data.length;
    } else {
      return 0;
    }
  };
```

https://github.com/fabriziobertoglio1987/react-native-notes/blob/3a11bff4be8ef30b73faad1167fe45ef0de6d2cc/Libraries/Lists/VirtualizedList.js#L87-L91

```
  /**
   * The default accessor functions assume this is an Array<{key: string} | {id: string}> but you can override
   * getItem, getItemCount, and keyExtractor to handle any type of index-based data.
   */
  data?: any,
  /**
   * Determines how many items are in the data blob.
   */
  getItemCount: (data: any) => number,
```

this commit adds a prop getCellsInItemCount which calculates by default
the correct number of items in a VirtualizedList when using data of type
Array, but allows developers to over-ride this method and calculate the
number of items/cells in the list with other data types.
---
 Libraries/Lists/VirtualizedList.js | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/Libraries/Lists/VirtualizedList.js b/Libraries/Lists/VirtualizedList.js
index 11f1f36c072564..f4da2dbd1a2a3f 100644
--- a/Libraries/Lists/VirtualizedList.js
+++ b/Libraries/Lists/VirtualizedList.js
@@ -94,14 +94,18 @@ type RequiredProps = {|
    */
   getItem: (data: any, index: number) => ?Item,
   /**
-   * Determines how many items are in the data blob.
+   * Determines how many items (rows) are in the data blob.
    */
   getItemCount: (data: any) => number,
+  /**
+   * Determines how many cells are in the data blob
+   */
+  getCellsInItemCount: (data: any) => number,
   /**
    * The number of columns used in FlatList.
    * The default of 1 is used in other components to calculate the accessibilityCollection prop.
    */
-  numColumns?: number,
+  numColumns?: ?number,
 |};
 type OptionalProps = {|
   renderItem?: ?RenderItemType<Item>,
@@ -1254,6 +1258,13 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     );
   }
 
+  _getCellsInItemCount = props => {
+    const {getCellsInItemCount, data} = props;
+    if (getCellsInItemCount) return getCellsInItemCount(data);
+    if (Array.isArray(data)) return data.length;
+    return 0;
+  };
+
   _defaultRenderScrollComponent = props => {
     const {getItemCount, data} = props;
     const onRefresh = props.onRefresh;
@@ -1261,9 +1272,12 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     const accessibilityRole = Platform.select({
       android: numColumns > 1 ? 'grid' : 'list',
     });
+    const rowCount = getItemCount(data);
     const accessibilityCollection = {
-      itemCount: data ? data.length : 0,
-      rowCount: getItemCount(data),
+      // over-ride _getCellsInItemCount to handle Objects or other data formats
+      // see commit
+      itemCount: this._getCellsInItemCount(props),
+      rowCount,
       columnCount: numColumns,
       hierarchical: false,
     };