From ea12c4c3d0bc555d7b2a59968f80b509b3ec14f3 Mon Sep 17 00:00:00 2001
From: Nick Gerleman <ngerlem@meta.com>
Date: Mon, 8 May 2023 15:49:50 -0700
Subject: [PATCH] Fixup fbsource for `$ArrayLike` FlatList data (#37314)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/37314

Turns out we never transitioned fbsource to an API change we made for FlatList, due to mismatched `.js` and `.js.flow` files.

Inside of RN, `$ArrayLike` in Flow, unlike `ArrayLike` in TypeScript, treats `length` as writable. So we wrap that in `$ReadOnly`. Another option might be to inline our own version, since it is not the only [case where they differ](https://fb.workplace.com/groups/flow/permalink/24328911383397481/).

In product code, the changes end up impacting:
1. `getItemLayout` is no longer typed to receive a mutable array. I changed all of the incompatible explicit type parameters from `Array<ItemT>` to `Iterable<ItemT>`.
2. Flow has a harder time inferring destructured `data` in examples that were passing `any` to FlatList, so I needed to give some type hints where `data` was previously untyped
3. Replace some `$FlowFixMe[incompatible-type]` with `$FlowFixMe[incompatible-type-arg]`

Changelog: [Internal]

Reviewed By: lunaleaps

Differential Revision: D45665199

fbshipit-source-id: 59aa908e277a27f7ca88acb48de493d2782517a9
---
 packages/react-native/Libraries/Lists/FlatList.js             | 4 ++--
 packages/react-native/Libraries/Lists/FlatList.js.flow        | 4 ++--
 .../js/examples/TurboModule/NativeCxxModuleExampleExample.js  | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/react-native/Libraries/Lists/FlatList.js b/packages/react-native/Libraries/Lists/FlatList.js
index ddb929e6a80..63e2de28382 100644
--- a/packages/react-native/Libraries/Lists/FlatList.js
+++ b/packages/react-native/Libraries/Lists/FlatList.js
@@ -36,7 +36,7 @@ type RequiredProps<ItemT> = {|
    * An array (or array-like list) of items to render. Other data types can be
    * used by targeting VirtualizedList directly.
    */
-  data: ?$ArrayLike<ItemT>,
+  data: ?$ReadOnly<$ArrayLike<ItemT>>,
 |};
 type OptionalProps<ItemT> = {|
   /**
@@ -91,7 +91,7 @@ type OptionalProps<ItemT> = {|
    * specify `ItemSeparatorComponent`.
    */
   getItemLayout?: (
-    data: ?$ArrayLike<ItemT>,
+    data: ?$ReadOnly<$ArrayLike<ItemT>>,
     index: number,
   ) => {
     length: number,
diff --git a/packages/react-native/Libraries/Lists/FlatList.js.flow b/packages/react-native/Libraries/Lists/FlatList.js.flow
index 304a1006182..7228c75461c 100644
--- a/packages/react-native/Libraries/Lists/FlatList.js.flow
+++ b/packages/react-native/Libraries/Lists/FlatList.js.flow
@@ -27,14 +27,14 @@ type RequiredProps<ItemT> = {|
    * For simplicity, data is just a plain array. If you want to use something else, like an
    * immutable list, use the underlying `VirtualizedList` directly.
    */
-  data: ?$ReadOnlyArray<ItemT>,
+  data: ?$ReadOnly<$ArrayLike<ItemT>>,
 |};
 type OptionalProps<ItemT> = {|
   renderItem?: ?RenderItemType<ItemT>,
   columnWrapperStyle?: ViewStyleProp,
   extraData?: any,
   getItemLayout?: (
-    data: ?Array<ItemT>,
+    data: ?$ReadOnly<$ArrayLike<ItemT>>,
     index: number,
   ) => {
     length: number,
diff --git a/packages/rn-tester/js/examples/TurboModule/NativeCxxModuleExampleExample.js b/packages/rn-tester/js/examples/TurboModule/NativeCxxModuleExampleExample.js
index 9e18022e84c..3aeb55e8040 100644
--- a/packages/rn-tester/js/examples/TurboModule/NativeCxxModuleExampleExample.js
+++ b/packages/rn-tester/js/examples/TurboModule/NativeCxxModuleExampleExample.js
@@ -231,7 +231,7 @@ class NativeCxxModuleExampleExample extends React.Component<{||}, State> {
           </TouchableOpacity>
         </View>
         <FlatList
-          // $FlowFixMe[incompatible-type]
+          // $FlowFixMe[incompatible-type-arg]
           data={Object.keys(this._tests)}
           keyExtractor={item => item}
           renderItem={({item}: {item: Examples, ...}) => (