diff --git a/Libraries/Lists/FlatList.js b/Libraries/Lists/FlatList.js index 605250933e88de..66ebe02dbe1b3c 100644 --- a/Libraries/Lists/FlatList.js +++ b/Libraries/Lists/FlatList.js @@ -600,6 +600,13 @@ class FlatList extends React.PureComponent, void> { } }; + const defaultAccessibilityCollectionItem = { + rowSpan: 1, + columnIndex: 0, + columnSpan: 1, + heading: false, + }; + return { /* $FlowFixMe[invalid-computed-prop] (>=0.111.0 site=react_native_fb) * This comment suppresses an error found when Flow v0.111 was deployed. @@ -611,24 +618,23 @@ class FlatList extends React.PureComponent, void> { Array.isArray(item), 'Expected array of items with numColumns > 1', ); + return ( {item.map((it, kk) => { const itemIndex = index * numColumns + kk; const accessibilityCollectionItem = { + ...defaultAccessibilityCollectionItem, rowIndex: index, - rowSpan: 1, columnIndex: itemIndex % numColumns, - columnSpan: 1, - heading: false, itemIndex: itemIndex, }; + const accessibleItem = {...it, accessibilityCollectionItem}; const element = renderer({ - item: it, + item: accessibleItem, index: index * numColumns + kk, separators: info.separators, - accessibilityCollectionItem: accessibilityCollectionItem, }); return element != null ? ( @@ -641,15 +647,16 @@ class FlatList extends React.PureComponent, void> { const {index} = info; const accessibilityCollectionItem = { + ...defaultAccessibilityCollectionItem, rowIndex: index, - rowSpan: 1, - columnIndex: 0, - columnSpan: 1, - heading: false, itemIndex: index, }; + const accessibleInfo = { + ...info, + item: {...info.item, accessibilityCollectionItem}, + }; - return renderer({info, accessibilityCollectionItem}); + return renderer(accessibleInfo); } }, }; diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-basic.js b/packages/rn-tester/js/examples/FlatList/FlatList-basic.js index 259daccc7b45ac..613c7f1321b11a 100644 --- a/packages/rn-tester/js/examples/FlatList/FlatList-basic.js +++ b/packages/rn-tester/js/examples/FlatList/FlatList-basic.js @@ -276,17 +276,22 @@ class FlatListExample extends React.PureComponent { /* $FlowFixMe[invalid-computed-prop] (>=0.111.0 site=react_native_fb) * This comment suppresses an error found when Flow v0.111 was deployed. * To see the error, delete this comment and run Flow. */ - [flatListPropKey]: ({item, separators}) => { + [flatListPropKey]: ({item, separators, accessibilityCollectionItem}) => { return ( - + + + ); }, }; diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-multiColumn.js b/packages/rn-tester/js/examples/FlatList/FlatList-multiColumn.js index 7b199aa1a9c876..69b6649c31e059 100644 --- a/packages/rn-tester/js/examples/FlatList/FlatList-multiColumn.js +++ b/packages/rn-tester/js/examples/FlatList/FlatList-multiColumn.js @@ -140,15 +140,13 @@ class MultiColumnExample extends React.PureComponent< getItemLayout(data, index).length + 2 * (CARD_MARGIN + BORDER_WIDTH); return {length, offset: length * index, index}; } - _renderItemComponent = (props: any) => { - const {item, accessibilityCollectionItem} = props; + _renderItemComponent = ({item}: RenderItemProps) => { return (