From 0ca2ba082de06c054b23ce96692fbcd1c45d9931 Mon Sep 17 00:00:00 2001
From: Sam Zhou <samzhou19815@meta.com>
Date: Wed, 6 Nov 2024 18:14:19 -0800
Subject: [PATCH] Fix final few problematic `React.ElementRef` in react-native
 (#47473)

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

For example,

```
declare function C<T>(ref: React.RefSetter<Set<T>>): React.Node;

type T = React.ElementRef<typeof C>
```

Previously Flow will evaluate `T` to `Set<mixed>`, by automatically replacing generic types with their upper bounds. But in the future it might be replaced with `empty`.

This diff cleans up instances like this in react-native codebase.

Changelog: [Internal]

Reviewed By: alexmckenley

Differential Revision: D65562571

fbshipit-source-id: bca2f4f022a5a23a5aa40886f5661899cb315f2e
---
 .../Animated/components/AnimatedSectionList.js     |  4 +++-
 .../__snapshots__/public-api-test.js.snap          |  2 +-
 .../js/examples/FlatList/FlatList-basic.js         | 14 +++-----------
 .../js/examples/Touchable/TouchableExample.js      |  7 +++----
 4 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/packages/react-native/Libraries/Animated/components/AnimatedSectionList.js b/packages/react-native/Libraries/Animated/components/AnimatedSectionList.js
index 5b2f80c2c53..c7b47147931 100644
--- a/packages/react-native/Libraries/Animated/components/AnimatedSectionList.js
+++ b/packages/react-native/Libraries/Animated/components/AnimatedSectionList.js
@@ -8,6 +8,7 @@
  * @format
  */
 
+import type {SectionBase} from '../../Lists/SectionList';
 import type {AnimatedComponentType} from '../createAnimatedComponent';
 
 import SectionList from '../../Lists/SectionList';
@@ -16,5 +17,6 @@ import * as React from 'react';
 
 export default (createAnimatedComponent(SectionList): AnimatedComponentType<
   React.ElementConfig<typeof SectionList>,
-  React.ElementRef<typeof SectionList>,
+  // $FlowExpectedError[unclear-type]
+  SectionList<SectionBase<any>>,
 >);
diff --git a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap
index 9412916deb8..0dcbaf39eb3 100644
--- a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap
+++ b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap
@@ -707,7 +707,7 @@ declare export default typeof AnimatedScrollView;
 exports[`public API should not change unintentionally Libraries/Animated/components/AnimatedSectionList.js 1`] = `
 "declare export default AnimatedComponentType<
   React.ElementConfig<typeof SectionList>,
-  React.ElementRef<typeof SectionList>,
+  SectionList<SectionBase<any>>,
 >;
 "
 `;
diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-basic.js b/packages/rn-tester/js/examples/FlatList/FlatList-basic.js
index 0d7860a8a4d..84d6e614917 100644
--- a/packages/rn-tester/js/examples/FlatList/FlatList-basic.js
+++ b/packages/rn-tester/js/examples/FlatList/FlatList-basic.js
@@ -12,8 +12,7 @@
 
 import type {Item} from '../../components/ListExampleShared';
 import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
-import type {AnimatedComponentType} from 'react-native/Libraries/Animated/createAnimatedComponent';
-import typeof FlatListType from 'react-native/Libraries/Lists/FlatList';
+import type FlatList from 'react-native/Libraries/Lists/FlatList';
 import type {RenderItemProps} from 'react-native/Libraries/Lists/VirtualizedList';
 
 import {
@@ -300,14 +299,7 @@ class FlatListExample extends React.PureComponent<Props, State> {
       </RNTesterPage>
     );
   }
-  _captureRef = (
-    ref: React.ElementRef<
-      AnimatedComponentType<
-        React.ElementConfig<FlatListType>,
-        React.ElementRef<FlatListType>,
-      >,
-    > | null,
-  ) => {
+  _captureRef = (ref: FlatList<mixed> | null) => {
     this._listRef = ref;
   };
   // $FlowFixMe[missing-local-annot]
@@ -431,7 +423,7 @@ class FlatListExample extends React.PureComponent<Props, State> {
     }));
   };
 
-  _listRef: React.ElementRef<typeof Animated.FlatList> | null;
+  _listRef: FlatList<mixed> | null;
 }
 
 const styles = StyleSheet.create({
diff --git a/packages/rn-tester/js/examples/Touchable/TouchableExample.js b/packages/rn-tester/js/examples/Touchable/TouchableExample.js
index ca97f24a118..aa069309b09 100644
--- a/packages/rn-tester/js/examples/Touchable/TouchableExample.js
+++ b/packages/rn-tester/js/examples/Touchable/TouchableExample.js
@@ -314,7 +314,7 @@ function TouchableNativeMethodChecker<
   T: component(ref?: React.RefSetter<any>, ...any),
 >(props: {|Component: T, name: string|}): React.Node {
   const [status, setStatus] = useState<?boolean>(null);
-  const ref = useRef<?React.ElementRef<T>>(null);
+  const ref = useRef<any>(null);
 
   useEffect(() => {
     setStatus(ref.current != null && typeof ref.current.measure === 'function');
@@ -557,9 +557,8 @@ const TouchableTouchSoundDisabled = () => {
   );
 };
 
-// $FlowFixMe[missing-local-annot]
-function TouchableOnFocus<T: component(ref?: React.RefSetter<any>, ...any)>() {
-  const ref = useRef<?React.ElementRef<T> | {focus: Function}>(null);
+function TouchableOnFocus() {
+  const ref = useRef<?{focus(): void, ...}>(null);
   const [isFocused, setIsFocused] = useState<string | boolean>(false);
   const [focusStatus, setFocusStatus] = useState(
     'This touchable is not focused.',