Skip to content

Commit 401f2fb

Browse files
retyuifacebook-github-bot
authored andcommitted
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: #44038 Test Plan: See: `packages/react-native/types/__typetests__/index.tsx` Reviewed By: NickGerleman Differential Revision: D56015309 Pulled By: dmytrorykun fbshipit-source-id: fee346536787a5921626ed69a4c01da2b599dc2f
1 parent 3d00549 commit 401f2fb

File tree

2 files changed

+31
-10
lines changed

2 files changed

+31
-10
lines changed

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

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,9 @@
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';
1411
import {ColorValue, StyleProp} from '../../StyleSheet/StyleSheet';
1512
import {ViewStyle} from '../../StyleSheet/StyleSheetTypes';
16-
import {TouchableMixin} from './Touchable';
13+
import {View} from '../../Components/View/View';
1714
import {TouchableWithoutFeedbackProps} from './TouchableWithoutFeedback';
1815

1916
/**
@@ -60,9 +57,6 @@ export interface TouchableHighlightProps extends TouchableWithoutFeedbackProps {
6057
*
6158
* @see https://reactnative.dev/docs/touchablehighlight
6259
*/
63-
declare class TouchableHighlightComponent extends React.Component<TouchableHighlightProps> {}
64-
declare const TouchableHighlightBase: Constructor<NativeMethods> &
65-
Constructor<TimerMixin> &
66-
Constructor<TouchableMixin> &
67-
typeof TouchableHighlightComponent;
68-
export class TouchableHighlight extends TouchableHighlightBase {}
60+
export const TouchableHighlight: React.ForwardRefExoticComponent<
61+
React.PropsWithoutRef<TouchableHighlightProps> & React.RefAttributes<View>
62+
>;

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,7 @@ import {
106106
TextStyle,
107107
TouchableNativeFeedback,
108108
TouchableOpacity,
109+
TouchableHighlight,
109110
TouchableWithoutFeedback,
110111
UIManager,
111112
View,
@@ -484,6 +485,32 @@ function TouchableTest() {
484485
}
485486
}
486487

488+
export class TouchableHighlightTest extends React.Component {
489+
buttonRef = React.createRef<React.ElementRef<typeof TouchableHighlight>>();
490+
491+
render() {
492+
return (
493+
<>
494+
<TouchableHighlight ref={this.buttonRef} />
495+
<TouchableHighlight
496+
ref={ref => {
497+
ref?.focus();
498+
ref?.blur();
499+
ref?.measure(
500+
(x, y, width, height, pageX, pageY): number =>
501+
x + y + width + height + pageX + pageY,
502+
);
503+
ref?.measureInWindow(
504+
(x, y, width, height): number => x + y + width + height,
505+
);
506+
ref?.setNativeProps({focusable: false});
507+
}}
508+
/>
509+
</>
510+
);
511+
}
512+
}
513+
487514
export class TouchableOpacityTest extends React.Component {
488515
buttonRef = React.createRef<React.ElementRef<typeof TouchableOpacity>>();
489516

0 commit comments

Comments
 (0)