Skip to content

Commit 3d00549

Browse files
retyuifacebook-github-bot
authored andcommitted
chore: [TS] Transform TouchableOpacity from class to ForwardRef component (#44030)
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(...)` : https://github.com/facebook/react-native/blob/f7eaf63881b23216c06ab3c81ea94d0312cd6a7b/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js#L326-L335 So the TS type isn't correct : ( ```tsx <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 ```tsx 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` ```diff -const ref = useRef<TouchableOpacity>(); +const ref = useRef<React.ElementRef<typeof TouchableOpacity>>(); ``` Also, it possible to use `View` as type: ```diff -const ref = useRef<TouchableOpacity>(); +const ref = useRef<View>(); ``` ## Changelog: [GENERAL] [BREAKING] - [Typescript] Transform `TouchableOpacity` from JS `class` to `ForwardRef` component Pull Request resolved: #44030 Test Plan: See: `packages/react-native/types/__typetests__/index.tsx` Reviewed By: NickGerleman Differential Revision: D56017133 Pulled By: dmytrorykun fbshipit-source-id: 58f4c1a14c9b3bd2407ea6c825a90b355acb16bb
1 parent 46b6453 commit 3d00549

2 files changed

Lines changed: 21 additions & 15 deletions

File tree

packages/react-native/Libraries/Components/Touchable/TouchableOpacity.d.ts

Lines changed: 4 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,7 @@
88
*/
99

1010
import type * as React from 'react';
11-
import {Constructor} from '../../../types/private/Utilities';
12-
import {TimerMixin} from '../../../types/private/TimerMixin';
13-
import {NativeMethods} from '../../../types/public/ReactNativeTypes';
14-
import {TouchableMixin} from './Touchable';
11+
import {View} from '../../Components/View/View';
1512
import {TouchableWithoutFeedbackProps} from './TouchableWithoutFeedback';
1613

1714
export interface TVProps {
@@ -79,14 +76,6 @@ export interface TouchableOpacityProps
7976
*
8077
* @see https://reactnative.dev/docs/touchableopacity
8178
*/
82-
declare class TouchableOpacityComponent extends React.Component<TouchableOpacityProps> {}
83-
declare const TouchableOpacityBase: Constructor<TimerMixin> &
84-
Constructor<TouchableMixin> &
85-
Constructor<NativeMethods> &
86-
typeof TouchableOpacityComponent;
87-
export class TouchableOpacity extends TouchableOpacityBase {
88-
/**
89-
* Animate the touchable to a new opacity.
90-
*/
91-
setOpacityTo: (value: number) => void;
92-
}
79+
export const TouchableOpacity: React.ForwardRefExoticComponent<
80+
React.PropsWithoutRef<TouchableOpacityProps> & React.RefAttributes<View>
81+
>;

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -485,9 +485,26 @@ function TouchableTest() {
485485
}
486486

487487
export class TouchableOpacityTest extends React.Component {
488+
buttonRef = React.createRef<React.ElementRef<typeof TouchableOpacity>>();
489+
488490
render() {
489491
return (
490492
<>
493+
<TouchableOpacity ref={this.buttonRef} />
494+
<TouchableOpacity
495+
ref={ref => {
496+
ref?.focus();
497+
ref?.blur();
498+
ref?.measure(
499+
(x, y, width, height, pageX, pageY): number =>
500+
x + y + width + height + pageX + pageY,
501+
);
502+
ref?.measureInWindow(
503+
(x, y, width, height): number => x + y + width + height,
504+
);
505+
ref?.setNativeProps({focusable: false});
506+
}}
507+
/>
491508
<TouchableOpacity focusable={false} />
492509
<TouchableOpacity rejectResponderTermination={true} />
493510
<TouchableOpacity

0 commit comments

Comments
 (0)