chore: [TS] Transform TouchableHighlight from class to ForwardRef component

[retyui]

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(...) :

react-native/packages/react-native/Libraries/Components/Touchable/TouchableHighlight.js

Lines 382 to 391 in 44d59ea

	const Touchable: React.AbstractComponent<
	$ReadOnly<$Diff<Props, {|hostRef: React.Ref<typeof View>|}>>,
	React.ElementRef<typeof View>,
	> = React.forwardRef((props, hostRef) => (
	<TouchableHighlight {...props} hostRef={hostRef} />
	));
	Touchable.displayName = 'TouchableHighlight';
	module.exports = Touchable;

So the TS type isn't correct : (

<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

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

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

Also, it possible to use View as type:

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

Changelog:

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

Test Plan:

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

[facebook-github-bot]

@dmytrorykun has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

[facebook-github-bot]

@dmytrorykun merged this pull request in 401f2fb.

[github-actions]

This pull request was successfully merged by @retyui in 401f2fb.

^{When will my fix make it into a release? | How to file a pick request?}