Commit 401f2fb
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- packages/react-native
- Libraries/Components/Touchable
- types/__typetests__
2 files changed
+31
-10
lines changedLines changed: 4 additions & 10 deletions
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
8 | 8 | | |
9 | 9 | | |
10 | 10 | | |
11 | | - | |
12 | | - | |
13 | | - | |
14 | 11 | | |
15 | 12 | | |
16 | | - | |
| 13 | + | |
17 | 14 | | |
18 | 15 | | |
19 | 16 | | |
| |||
60 | 57 | | |
61 | 58 | | |
62 | 59 | | |
63 | | - | |
64 | | - | |
65 | | - | |
66 | | - | |
67 | | - | |
68 | | - | |
| 60 | + | |
| 61 | + | |
| 62 | + | |
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
106 | 106 | | |
107 | 107 | | |
108 | 108 | | |
| 109 | + | |
109 | 110 | | |
110 | 111 | | |
111 | 112 | | |
| |||
484 | 485 | | |
485 | 486 | | |
486 | 487 | | |
| 488 | + | |
| 489 | + | |
| 490 | + | |
| 491 | + | |
| 492 | + | |
| 493 | + | |
| 494 | + | |
| 495 | + | |
| 496 | + | |
| 497 | + | |
| 498 | + | |
| 499 | + | |
| 500 | + | |
| 501 | + | |
| 502 | + | |
| 503 | + | |
| 504 | + | |
| 505 | + | |
| 506 | + | |
| 507 | + | |
| 508 | + | |
| 509 | + | |
| 510 | + | |
| 511 | + | |
| 512 | + | |
| 513 | + | |
487 | 514 | | |
488 | 515 | | |
489 | 516 | | |
| |||
0 commit comments