Skip to content

Commit

Permalink
adding prop getCellsInItemCount to VirtualizedList
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
fabOnReact committed Mar 15, 2022
1 parent 3a11bff commit d50fd1a
Showing 1 changed file with 18 additions and 4 deletions.
22 changes: 18 additions & 4 deletions Libraries/Lists/VirtualizedList.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>,
Expand Down Expand Up @@ -1254,16 +1258,26 @@ 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;
const numColumns = numColumnsOrDefault(props.numColumns);
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,
};
Expand Down

0 comments on commit d50fd1a

Please sign in to comment.