Bugfix - FlatList keyExtractor for multicolumn layout

packages/react-native/Libraries/Lists/FlatList.js

@@ -565,11 +565,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, 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,22 +638,24 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
 
     const renderProp = (info: RenderItemProps<ItemT>) => {
       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',
         );
         return (
           <View style={StyleSheet.compose(styles.row, columnWrapperStyle)}>
             {item.map((it, kk) => {
+              const key = keyExtractor(it, index * cols + kk);
               const element = render({
                 // $FlowFixMe[incompatible-call]
                 item: it,
                 index: index * cols + kk,
                 separators: info.separators,
               });
               return element != null ? (
-                <React.Fragment key={kk}>{element}</React.Fragment>
+                <React.Fragment key={key}>{element}</React.Fragment>
               ) : null;
             })}
           </View>

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'),
             )}
           </View>
+          <View style={styles.row}>
+            <Pressable onPress={this._removeThirdItem} style={styles.button}>
+              <Text>Remove item #3</Text>
+            </Pressable>
+            <Pressable onPress={this._removeFifthItem} style={styles.button}>
+              <Text>Remove item #5</Text>
+            </Pressable>
+          </View>
         </View>
         <SeparatorComponent />
         <FlatList
@@ -204,6 +237,11 @@ const styles = StyleSheet.create({
   searchRow: {
     padding: 10,
   },
+  button: {
+    backgroundColor: 'lightblue',
+    padding: 10,
+    margin: 10,
+  },
 });
 
 export default ({