Skip to content

Commit d50fd1a

Browse files
committed
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.
1 parent 3a11bff commit d50fd1a

File tree

1 file changed

+18
-4
lines changed

1 file changed

+18
-4
lines changed

Libraries/Lists/VirtualizedList.js

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -94,14 +94,18 @@ type RequiredProps = {|
9494
*/
9595
getItem: (data: any, index: number) => ?Item,
9696
/**
97-
* Determines how many items are in the data blob.
97+
* Determines how many items (rows) are in the data blob.
9898
*/
9999
getItemCount: (data: any) => number,
100+
/**
101+
* Determines how many cells are in the data blob
102+
*/
103+
getCellsInItemCount: (data: any) => number,
100104
/**
101105
* The number of columns used in FlatList.
102106
* The default of 1 is used in other components to calculate the accessibilityCollection prop.
103107
*/
104-
numColumns?: number,
108+
numColumns?: ?number,
105109
|};
106110
type OptionalProps = {|
107111
renderItem?: ?RenderItemType<Item>,
@@ -1254,16 +1258,26 @@ class VirtualizedList extends React.PureComponent<Props, State> {
12541258
);
12551259
}
12561260

1261+
_getCellsInItemCount = props => {
1262+
const {getCellsInItemCount, data} = props;
1263+
if (getCellsInItemCount) return getCellsInItemCount(data);
1264+
if (Array.isArray(data)) return data.length;
1265+
return 0;
1266+
};
1267+
12571268
_defaultRenderScrollComponent = props => {
12581269
const {getItemCount, data} = props;
12591270
const onRefresh = props.onRefresh;
12601271
const numColumns = numColumnsOrDefault(props.numColumns);
12611272
const accessibilityRole = Platform.select({
12621273
android: numColumns > 1 ? 'grid' : 'list',
12631274
});
1275+
const rowCount = getItemCount(data);
12641276
const accessibilityCollection = {
1265-
itemCount: data ? data.length : 0,
1266-
rowCount: getItemCount(data),
1277+
// over-ride _getCellsInItemCount to handle Objects or other data formats
1278+
// see commit
1279+
itemCount: this._getCellsInItemCount(props),
1280+
rowCount,
12671281
columnCount: numColumns,
12681282
hierarchical: false,
12691283
};

0 commit comments

Comments
 (0)