From a65744fd4ad74a2de5bb5f1705aabd2b7c11841d Mon Sep 17 00:00:00 2001
From: Jakub Piasecki <piaseckijakub@meta.com>
Date: Tue, 6 May 2025 05:42:29 -0700
Subject: [PATCH] Unify ref usages in TS type tests (#51117)

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

Changelog: [Internal]

Reviewed By: huntie

Differential Revision: D74240080

fbshipit-source-id: 5cc7042b5ac1515887d20b72a0b7d96cc8313ed7
---
 .../types/__typetests__/animated.tsx           | 18 +++++++++++-------
 .../react-native/types/__typetests__/index.tsx | 16 ++++++++--------
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/packages/react-native/types/__typetests__/animated.tsx b/packages/react-native/types/__typetests__/animated.tsx
index 7bee861b77c..b3e939c004b 100644
--- a/packages/react-native/types/__typetests__/animated.tsx
+++ b/packages/react-native/types/__typetests__/animated.tsx
@@ -31,7 +31,10 @@ class Comp extends React.Component<CompProps> {
   }
 }
 
-const ForwardComp = React.forwardRef<View, CompProps>(({width}, ref) => {
+const ForwardComp = React.forwardRef<
+  React.ComponentRef<typeof View>,
+  CompProps
+>(({width}, ref) => {
   function f1(): boolean {
     return true;
   }
@@ -53,7 +56,7 @@ function TestAnimatedAPI() {
   const v2 = new Animated.Value(0);
 
   // Ref
-  const AnimatedViewRef = React.useRef<View>(null);
+  const AnimatedViewRef = React.useRef<React.ComponentRef<typeof View>>(null);
 
   AnimatedViewRef.current &&
     AnimatedViewRef.current.measure(() => {
@@ -62,15 +65,15 @@ function TestAnimatedAPI() {
 
   const AnimatedComp = Animated.createAnimatedComponent(Comp);
 
-  const AnimatedCompRef = React.useRef<Comp>(null);
+  const AnimatedCompRef = React.useRef<React.ComponentRef<typeof Comp>>(null);
 
   AnimatedCompRef.current && AnimatedCompRef.current.f1();
 
   const AnimatedForwardComp = Animated.createAnimatedComponent(ForwardComp);
 
   const AnimatedForwardCompRef =
-    React.useRef<React.ElementRef<typeof ForwardComp>>(null);
-  const ForwardCompRef = React.useRef<View>(null);
+    React.useRef<React.ComponentRef<typeof ForwardComp>>(null);
+  const ForwardCompRef = React.useRef<React.ComponentRef<typeof View>>(null);
 
   AnimatedForwardCompRef.current &&
     AnimatedForwardCompRef.current.measure(() => {
@@ -168,8 +171,9 @@ function TestAnimatedAPI() {
   });
 
   const AnimatedView = Animated.createAnimatedComponent(View);
-  const ref = React.useRef<View>(null);
-  const legacyRef = React.useRef<Animated.LegacyRef<View>>(null);
+  const ref = React.useRef<React.ComponentRef<typeof View>>(null);
+  const legacyRef =
+    React.useRef<Animated.LegacyRef<React.ComponentRef<typeof View>>>(null);
 
   return (
     <View ref={ref}>
diff --git a/packages/react-native/types/__typetests__/index.tsx b/packages/react-native/types/__typetests__/index.tsx
index 9eb4e0a054c..1e38a43b119 100644
--- a/packages/react-native/types/__typetests__/index.tsx
+++ b/packages/react-native/types/__typetests__/index.tsx
@@ -429,8 +429,8 @@ class CustomView extends React.Component {
 class Welcome extends React.Component<
   ElementProps<View> & {color: string; bgColor?: null | undefined | string}
 > {
-  rootViewRef = React.createRef<View>();
-  customViewRef = React.createRef<CustomView>();
+  rootViewRef = React.createRef<React.ComponentRef<typeof View>>();
+  customViewRef = React.createRef<React.ComponentRef<typeof CustomView>>();
 
   testNativeMethods() {
     if (this.rootViewRef.current != null) {
@@ -498,7 +498,7 @@ function TouchableTest() {
 }
 
 export class TouchableHighlightTest extends React.Component {
-  buttonRef = React.createRef<React.ElementRef<typeof TouchableHighlight>>();
+  buttonRef = React.createRef<React.ComponentRef<typeof TouchableHighlight>>();
 
   render() {
     return (
@@ -525,7 +525,7 @@ export class TouchableHighlightTest extends React.Component {
 }
 
 export class TouchableOpacityTest extends React.Component {
-  buttonRef = React.createRef<React.ElementRef<typeof TouchableOpacity>>();
+  buttonRef = React.createRef<React.ComponentRef<typeof TouchableOpacity>>();
 
   render() {
     return (
@@ -720,7 +720,7 @@ export class PressableTest extends React.Component<{}> {
 }
 
 // App State
-function appStateListener(state: string) {
+function appStateListener(state?: string) {
   console.log('New state: ' + state);
 }
 
@@ -1575,7 +1575,7 @@ class BridgedComponentTest extends React.Component {
 }
 
 const SafeAreaViewTest = () => {
-  const viewRef = React.createRef<React.ElementRef<typeof View>>();
+  const viewRef = React.createRef<React.ComponentRef<typeof View>>();
 
   return (
     <>
@@ -1600,7 +1600,7 @@ const SafeAreaViewTest = () => {
 };
 
 const SwitchRefTest = () => {
-  const switchRef = React.createRef<React.ElementRef<typeof Switch>>();
+  const switchRef = React.createRef<React.ComponentRef<typeof Switch>>();
 
   return (
     <>
@@ -2103,7 +2103,7 @@ const AccessibilityCustomActionsTest = () => {
 
 // DrawerLayoutAndroidTest
 export class DrawerLayoutAndroidTest extends React.Component {
-  drawerRef = React.createRef<DrawerLayoutAndroid>();
+  drawerRef = React.createRef<React.ComponentRef<typeof DrawerLayoutAndroid>>();
 
   readonly styles = StyleSheet.create({
     container: {