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

[retyui]

Summary:

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

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

Lines 326 to 335 in f7eaf63

	const Touchable: React.AbstractComponent<
	Props,
	React.ElementRef<typeof Animated.View>,
	> = React.forwardRef((props, ref) => (
	<TouchableOpacity {...props} hostRef={ref} />
	));
	Touchable.displayName = 'TouchableOpacity';
	module.exports = Touchable;

So the TS type isn't correct : (

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

---

Breaking changes

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

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

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

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

Also, it possible to use View as type:

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

Changelog:

[GENERAL] [BREAKING] - [Typescript] Transform TouchableOpacity 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 3d00549.

[github-actions]

This pull request was successfully merged by @retyui in 3d00549.

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