Removing container View in renderItem

facebook#33180 (comment) >What's the reason for adding this cellStyle here? - we are adding a [View container][1] to each [cell][2] ([renderItem prop][3]) - `{flex: 1}` makes the container View take the full width of the parent container https://reactnative.dev/docs/flexbox#flex >[flex](https://reactnative.dev/docs/layout-props#flex) will define how your items are going to “fill” over the available space along your main axis. Space will be divided according to each element's flex property. | without `{flex: 1}` | with `{flex: 1}` | |:-------------------------:|:-------------------------:| | <img src="https://user-images.githubusercontent.com/24992535/157849508-1958558b-f3b1-4ae1-ab4e-a36c1991ad78.png" width="250" />| <img src="https://user-images.githubusercontent.com/24992535/157849671-7382a7a8-3299-4b88-ab94-7b1c5b8eb9ec.png" width="250" /> | [1]: https://github.com/fabriziobertoglio1987/react-native/blob/70e83a2cbb4f81ea373f3876abd9caf9f35a50a3/Libraries/Lists/FlatList.js#L628-L630 "the View container added to each cell" [2]: https://github.com/fabriziobertoglio1987/react-native/blob/70e83a2cbb4f81ea373f3876abd9caf9f35a50a3/Libraries/Lists/FlatList.js#L581-L601 "the logic responsible to render cells (renderItem prop)" [3]: https://reactnative.dev/docs/next/flatlist#required-renderitem "renderItem prop" original post fabOnReact/react-native-notes#6 (comment)
fabOnReact · Mar 13, 2022 · 4c3182a · 4c3182a
1 parent 6bc0f5a
commit 4c3182a
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 15 deletions.
diff --git a/Libraries/Lists/FlatList.js b/Libraries/Lists/FlatList.js
@@ -624,19 +624,13 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
                   itemIndex: itemIndex,
                 };
 
-                const element = (
-                  // $FlowFixMe[prop-missing] https://bit.ly/3viYSh8
-                  <View
-                    importantForAccessibility="yes"
-                    style={styles.cellStyle}
-                    accessibilityCollectionItem={accessibilityCollectionItem}>
-                    {renderer({
-                      item: it,
-                      index: index * numColumns + kk,
-                      separators: info.separators,
-                    })}
-                  </View>
-                );
+                const element = renderer({
+                  item: it,
+                  index: index * numColumns + kk,
+                  separators: info.separators,
+                  accessibilityCollectionItem: accessibilityCollectionItem,
+                });
+
                 return element != null ? (
                   <React.Fragment key={kk}>{element}</React.Fragment>
                 ) : null;

diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-multiColumn.js b/packages/rn-tester/js/examples/FlatList/FlatList-multiColumn.js
@@ -140,10 +140,15 @@ class MultiColumnExample extends React.PureComponent<
       getItemLayout(data, index).length + 2 * (CARD_MARGIN + BORDER_WIDTH);
     return {length, offset: length * index, index};
   }
-  _renderItemComponent = ({item}: RenderItemProps<any | Item>) => {
+  _renderItemComponent = (props: any) => {
+    const {item, accessibilityCollectionItem} = props;
     return (
-      <View style={styles.card}>
+      <View
+        importantForAccessibility="yes"
+        accessibilityCollectionItem={accessibilityCollectionItem}
+        style={styles.card}>
         <ItemComponent
+          {...props}
           item={item}
           fixedHeight={this.state.fixedHeight}
           onPress={this._pressItem}