Commit 3d00549
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
- types/__typetests__
Lines changed: 4 additions & 15 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 | | |
| |||
79 | 76 | | |
80 | 77 | | |
81 | 78 | | |
82 | | - | |
83 | | - | |
84 | | - | |
85 | | - | |
86 | | - | |
87 | | - | |
88 | | - | |
89 | | - | |
90 | | - | |
91 | | - | |
92 | | - | |
| 79 | + | |
| 80 | + | |
| 81 | + | |
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
485 | 485 | | |
486 | 486 | | |
487 | 487 | | |
| 488 | + | |
| 489 | + | |
488 | 490 | | |
489 | 491 | | |
490 | 492 | | |
| 493 | + | |
| 494 | + | |
| 495 | + | |
| 496 | + | |
| 497 | + | |
| 498 | + | |
| 499 | + | |
| 500 | + | |
| 501 | + | |
| 502 | + | |
| 503 | + | |
| 504 | + | |
| 505 | + | |
| 506 | + | |
| 507 | + | |
491 | 508 | | |
492 | 509 | | |
493 | 510 | | |
| |||
0 commit comments