mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
D N
401f2fbb14
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: https://github.com/facebook/react-native/pull/44038 Test Plan: See: `packages/react-native/types/__typetests__/index.tsx` Reviewed By: NickGerleman Differential Revision: D56015309 Pulled By: dmytrorykun fbshipit-source-id: fee346536787a5921626ed69a4c01da2b599dc2f