diff --git a/packages/react-native/Libraries/Lists/FlatList.js b/packages/react-native/Libraries/Lists/FlatList.js index f34fe50f8721ee..383f9618751014 100644 --- a/packages/react-native/Libraries/Lists/FlatList.js +++ b/packages/react-native/Libraries/Lists/FlatList.js @@ -565,11 +565,7 @@ class FlatList extends React.PureComponent, void> { 'array with 1-%s columns; instead, received a single item.', numColumns, ); - return items - .map((item, kk) => - keyExtractor(((item: $FlowFixMe): ItemT), index * numColumns + kk), - ) - .join(':'); + return `row-index-${index}`; } // $FlowFixMe[incompatible-call] Can't call keyExtractor with an array @@ -642,7 +638,8 @@ class FlatList extends React.PureComponent, void> { const renderProp = (info: RenderItemProps) => { if (cols > 1) { - const {item, index} = info; + const { item, index } = info; + const keyExtractor = this.props.keyExtractor ?? defaultKeyExtractor; invariant( Array.isArray(item), 'Expected array of items with numColumns > 1', @@ -650,6 +647,7 @@ class FlatList extends React.PureComponent, void> { return ( {item.map((it, kk) => { + const key = keyExtractor(it, index * cols + kk); const element = render({ // $FlowFixMe[incompatible-call] item: it, @@ -657,7 +655,7 @@ class FlatList extends React.PureComponent, void> { separators: info.separators, }); return element != null ? ( - {element} + {element} ) : null; })} diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-multiColumn.js b/packages/rn-tester/js/examples/FlatList/FlatList-multiColumn.js index 89e124c6dc33b8..6cc7cf5dd2f829 100644 --- a/packages/rn-tester/js/examples/FlatList/FlatList-multiColumn.js +++ b/packages/rn-tester/js/examples/FlatList/FlatList-multiColumn.js @@ -27,7 +27,14 @@ const { } = require('../../components/ListExampleShared'); const RNTesterPage = require('../../components/RNTesterPage'); const React = require('react'); -const {Alert, FlatList, StyleSheet, Text, View} = require('react-native'); +const { + Alert, + FlatList, + StyleSheet, + Text, + View, + Pressable, +} = require('react-native'); const infoLog = require('react-native/Libraries/Utilities/infoLog'); class MultiColumnExample extends React.PureComponent< @@ -63,6 +70,24 @@ class MultiColumnExample extends React.PureComponent< _setBooleanValue: string => boolean => void = key => value => this.setState({[key]: value}); + _removeThirdItem = () => { + let clonedData = [...this.state.data]; + clonedData.splice(3, 1); + this.setState(state => ({ + ...state, + data: clonedData, + })); + }; + + _removeFifthItem = () => { + let clonedData = [...this.state.data]; + clonedData.splice(5, 1); + this.setState(state => ({ + ...state, + data: clonedData, + })); + }; + render(): React.Node { const filterRegex = new RegExp(String(this.state.filterText), 'i'); const filter = (item: any | Item) => @@ -103,6 +128,14 @@ class MultiColumnExample extends React.PureComponent< this._setBooleanValue('logViewable'), )} + + + Remove item #3 + + + Remove item #5 + +