From 401f2fbb14b1cfea93220810cce79b47720ecc72 Mon Sep 17 00:00:00 2001
From: D N <4661784+retyui@users.noreply.github.com>
Date: Thu, 11 Apr 2024 14:21:55 -0700
Subject: [PATCH] chore: [TS] Transform `TouchableHighlight` from `class` to
 `ForwardRef` component (#44038)

Summary:
If you check the source of truth `packages/react-native/Libraries/Components/Touchable/TouchableHighlight.js` I'll find that `TouchableHighlight` is a result of `React.forwardRef(...)` :

https://github.com/facebook/react-native/blob/44d59ea6f9a1705487314e33de52f7056651ba25/packages/react-native/Libraries/Components/Touchable/TouchableHighlight.js#L382-L391

So the TS type isn't correct : (

```tsx
<TouchableHighlight ref={ref => {   }} />
//                     ^^^ ref should be a `View` (but now it's `TouchableHighlight`)
```

 ---

**Breaking  changes**

As `TouchableHighlight` isn't class anymore it can't be used as value & type

```tsx
import {TouchableHighlight} from 'react-native';
const ref = useRef<TouchableHighlight>();
//                ^^^ TS2749: TouchableHighlight refers to a value, but is being used as a type here.
//                            Did you mean typeof TouchableHighlight?
```

**Recommend solution:** use build-in react type `React.ElementRef`

```diff
-const ref = useRef<TouchableHighlight>();
+const ref = useRef<React.ElementRef<typeof TouchableHighlight>>();
```

Also, it possible to use `View` as type:

```diff
-const ref = useRef<TouchableHighlight>();
+const ref = useRef<View>();
```

## Changelog:

[GENERAL] [BREAKING] - [Typescript] Transform TouchableHighlight from JS class to ForwardRef component

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

Test Plan: See: `packages/react-native/types/__typetests__/index.tsx`

Reviewed By: NickGerleman

Differential Revision: D56015309

Pulled By: dmytrorykun

fbshipit-source-id: fee346536787a5921626ed69a4c01da2b599dc2f
---
 .../Touchable/TouchableHighlight.d.ts         | 14 +++-------
 .../types/__typetests__/index.tsx             | 27 +++++++++++++++++++
 2 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/packages/react-native/Libraries/Components/Touchable/TouchableHighlight.d.ts b/packages/react-native/Libraries/Components/Touchable/TouchableHighlight.d.ts
index b9faa3a8798..e2ba567d2e0 100644
--- a/packages/react-native/Libraries/Components/Touchable/TouchableHighlight.d.ts
+++ b/packages/react-native/Libraries/Components/Touchable/TouchableHighlight.d.ts
@@ -8,12 +8,9 @@
  */
 
 import type * as React from 'react';
-import {Constructor} from '../../../types/private/Utilities';
-import {TimerMixin} from '../../../types/private/TimerMixin';
-import {NativeMethods} from '../../../types/public/ReactNativeTypes';
 import {ColorValue, StyleProp} from '../../StyleSheet/StyleSheet';
 import {ViewStyle} from '../../StyleSheet/StyleSheetTypes';
-import {TouchableMixin} from './Touchable';
+import {View} from '../../Components/View/View';
 import {TouchableWithoutFeedbackProps} from './TouchableWithoutFeedback';
 
 /**
@@ -60,9 +57,6 @@ export interface TouchableHighlightProps extends TouchableWithoutFeedbackProps {
  *
  * @see https://reactnative.dev/docs/touchablehighlight
  */
-declare class TouchableHighlightComponent extends React.Component<TouchableHighlightProps> {}
-declare const TouchableHighlightBase: Constructor<NativeMethods> &
-  Constructor<TimerMixin> &
-  Constructor<TouchableMixin> &
-  typeof TouchableHighlightComponent;
-export class TouchableHighlight extends TouchableHighlightBase {}
+export const TouchableHighlight: React.ForwardRefExoticComponent<
+  React.PropsWithoutRef<TouchableHighlightProps> & React.RefAttributes<View>
+>;
diff --git a/packages/react-native/types/__typetests__/index.tsx b/packages/react-native/types/__typetests__/index.tsx
index c68dae4b027..67476ab6c54 100644
--- a/packages/react-native/types/__typetests__/index.tsx
+++ b/packages/react-native/types/__typetests__/index.tsx
@@ -106,6 +106,7 @@ import {
   TextStyle,
   TouchableNativeFeedback,
   TouchableOpacity,
+  TouchableHighlight,
   TouchableWithoutFeedback,
   UIManager,
   View,
@@ -484,6 +485,32 @@ function TouchableTest() {
   }
 }
 
+export class TouchableHighlightTest extends React.Component {
+  buttonRef = React.createRef<React.ElementRef<typeof TouchableHighlight>>();
+
+  render() {
+    return (
+      <>
+        <TouchableHighlight ref={this.buttonRef} />
+        <TouchableHighlight
+          ref={ref => {
+            ref?.focus();
+            ref?.blur();
+            ref?.measure(
+              (x, y, width, height, pageX, pageY): number =>
+                x + y + width + height + pageX + pageY,
+            );
+            ref?.measureInWindow(
+              (x, y, width, height): number => x + y + width + height,
+            );
+            ref?.setNativeProps({focusable: false});
+          }}
+        />
+      </>
+    );
+  }
+}
+
 export class TouchableOpacityTest extends React.Component {
   buttonRef = React.createRef<React.ElementRef<typeof TouchableOpacity>>();