From 965145ddf1f0abfbffae22b6be21c02742572214 Mon Sep 17 00:00:00 2001
From: D N <4661784+retyui@users.noreply.github.com>
Date: Thu, 11 Apr 2024 10:04:46 +0200
Subject: [PATCH] chore: [TS] Transform TouchableHighlight from class to
 ForwardRef component

---
 .../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 b9faa3a8798f..e2ba567d2e0f 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 9f4ec9ed7476..74e2a1fcfe2b 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 {
   render() {
     return (