adding new prop to renderItem accessibilityCollectionItem

- remove the wrapper View and cellstyle flex: 1 - add prop accessibilityCollectionItem to FlatList renderItem to allow users set the accessibilityInformation - update rn-tester flatlist examples Follow up of 1a98f56 Related fabOnReact/react-native-notes#6 (comment)
fabOnReact · Mar 13, 2022 · 828fdd7 · 828fdd7
1 parent 4e64a52
commit 828fdd7
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 17 deletions.
diff --git a/Libraries/Lists/FlatList.js b/Libraries/Lists/FlatList.js
@@ -631,9 +631,10 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
                 };
 
                 const element = renderer({
-                  item: {...it, accessibilityCollectionItem},
+                  item: it,
                   index: index * numColumns + kk,
                   separators: info.separators,
+                  accessibilityCollectionItem,
                 });
 
                 return element != null ? (
@@ -651,7 +652,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
 
           return renderer({
             ...info,
-            item: {...info.item, accessibilityCollectionItem},
+            accessibilityCollectionItem,
           });
         }
       },
@@ -661,7 +662,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
   _getAccessibilityCollection = () => {
     const accessibilityCollectionProps = {
       itemCount: this.props.data ? this.props.data.length : 0,
-      //$FlowFixMe[incompatible-call] see https://bit.ly/3viYSh8
+      //$FlowFixMe[incompatible-call] see https://bit.ly/3MJiZLL
       rowCount: this._getItemCount(this.props.data),
       columnCount: numColumnsOrDefault(this.props.numColumns),
       hierarchical: false,
@@ -702,7 +703,6 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
 
 const styles = StyleSheet.create({
   row: {flexDirection: 'row'},
-  cellStyle: {flex: 1},
 });
 
 module.exports = FlatList;
diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-basic.js b/packages/rn-tester/js/examples/FlatList/FlatList-basic.js
@@ -280,7 +280,7 @@ class FlatListExample extends React.PureComponent<Props, State> {
         return (
           <View
             importantForAccessibility="yes"
-            accessibilityCollectionItem={item.accessibilityCollectionItem}
+            accessibilityCollectionItem={accessibilityCollectionItem}
             style={styles.card}>
             <ItemComponent
               item={item}

diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-multiColumn.js b/packages/rn-tester/js/examples/FlatList/FlatList-multiColumn.js
@@ -140,11 +140,11 @@ 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 = ({item, accessibilityCollectionItem}) => {
     return (
       <View
         importantForAccessibility="yes"
-        accessibilityCollectionItem={item.accessibilityCollectionItem}
+        accessibilityCollectionItem={accessibilityCollectionItem}
         style={styles.card}>
         <ItemComponent
           item={item}

diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-nested.js b/packages/rn-tester/js/examples/FlatList/FlatList-nested.js
@@ -51,20 +51,25 @@ const DATA = [
   },
 ];
 
-const Item = ({ title }) => (
-  <View style={styles.item}>
-    <Text style={styles.title}>{title}</Text>
+const Item = ({item, accessibilityCollectionItem}) => (
+  <View
+    importantForAccessibility="yes"
+    accessibilityCollectionItem={accessibilityCollectionItem}
+    style={styles.item}>
+      <Text style={styles.title}>{item.title}</Text>
   </View>
 );
 
-const renderItem = ({ item }) => <Item title={item.title} />;
+const renderItem = (props) => <Item {...props} />;
 
-const renderFlatList = ({ item }) => (
-  <View>
-    <Text>Flatlist {item}</Text>
-    <FlatList renderItem={renderItem} horizontal data={DATA} />
-  </View>
-);
+const renderFlatList = ({item}) => {
+  return (
+    <View>
+      <Text>Flatlist {item}</Text>
+      <FlatList renderItem={renderItem} horizontal data={DATA} />
+    </View>
+  );
+};
 
 const FlatListNested = () => {
   return (