Add optional reference to the TouchableHighlight and new types test (facebook#49591)

Summary:
Pull Request resolved: facebook#49591

Changelog:
[Internal] - Added optional reference to the TouchableHighlight and new types test

Reviewed By: huntie

Differential Revision: D69984286

fbshipit-source-id: f6757720d0914ea3da3a32c824eb9aaeb5a1f39b

Author: coado

packages/react-native/Libraries/Components/Touchable/TouchableHighlight.js

@@ -32,11 +32,7 @@ type IOSProps = $ReadOnly<{
   hasTVPreferredFocus?: ?boolean,
 }>;
 
-type Props = $ReadOnly<{
-  ...TouchableWithoutFeedbackProps,
-  ...AndroidProps,
-  ...IOSProps,
-
+type TouchableHighlightBaseProps = $ReadOnly<{
   /**
    * Determines what the opacity of the wrapped view should be when touch is active.
    */
@@ -62,6 +58,13 @@ type Props = $ReadOnly<{
   hostRef: React.RefSetter<React.ElementRef<typeof View>>,
 }>;
 
+type TouchableHighlightProps = $ReadOnly<{
+  ...TouchableWithoutFeedbackProps,
+  ...AndroidProps,
+  ...IOSProps,
+  ...TouchableHighlightBaseProps,
+}>;
+
 type ExtraStyles = $ReadOnly<{
   child: ViewStyleProp,
   underlay: ViewStyleProp,
@@ -168,7 +171,10 @@ type State = $ReadOnly<{
  * ```
  *
  */
-class TouchableHighlight extends React.Component<Props, State> {
+class TouchableHighlightImpl extends React.Component<
+  TouchableHighlightProps,
+  State,
+> {
   _hideTimeout: ?TimeoutID;
   _isMounted: boolean = false;
 
@@ -383,7 +389,7 @@ class TouchableHighlight extends React.Component<Props, State> {
     this.state.pressability.configure(this._createPressabilityConfig());
   }
 
-  componentDidUpdate(prevProps: Props, prevState: State) {
+  componentDidUpdate(prevProps: TouchableHighlightProps, prevState: State) {
     this.state.pressability.configure(this._createPressabilityConfig());
   }
 
@@ -396,13 +402,13 @@ class TouchableHighlight extends React.Component<Props, State> {
   }
 }
 
-const Touchable: component(
-  ref: React.RefSetter<React.ElementRef<typeof View>>,
-  ...props: $ReadOnly<$Diff<Props, {+hostRef: mixed}>>
+const TouchableHighlight: component(
+  ref?: React.RefSetter<React.ElementRef<typeof View>>,
+  ...props: $ReadOnly<$Diff<TouchableHighlightProps, {+hostRef: mixed}>>
 ) = React.forwardRef((props, hostRef) => (
-  <TouchableHighlight {...props} hostRef={hostRef} />
+  <TouchableHighlightImpl {...props} hostRef={hostRef} />
 ));
 
-Touchable.displayName = 'TouchableHighlight';
+TouchableHighlight.displayName = 'TouchableHighlight';
 
-export default Touchable;
+export default TouchableHighlight;

packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap

@@ -3372,10 +3372,7 @@ exports[`public API should not change unintentionally Libraries/Components/Touch
 type IOSProps = $ReadOnly<{
   hasTVPreferredFocus?: ?boolean,
 }>;
-type Props = $ReadOnly<{
-  ...TouchableWithoutFeedbackProps,
-  ...AndroidProps,
-  ...IOSProps,
+type TouchableHighlightBaseProps = $ReadOnly<{
   activeOpacity?: ?number,
   underlayColor?: ?ColorValue,
   style?: ?ViewStyleProp,
@@ -3384,11 +3381,17 @@ type Props = $ReadOnly<{
   testOnly_pressed?: ?boolean,
   hostRef: React.RefSetter<React.ElementRef<typeof View>>,
 }>;
-declare const Touchable: component(
-  ref: React.RefSetter<React.ElementRef<typeof View>>,
-  ...props: $ReadOnly<$Diff<Props, { +hostRef: mixed }>>
+type TouchableHighlightProps = $ReadOnly<{
+  ...TouchableWithoutFeedbackProps,
+  ...AndroidProps,
+  ...IOSProps,
+  ...TouchableHighlightBaseProps,
+}>;
+declare const TouchableHighlight: component(
+  ref?: React.RefSetter<React.ElementRef<typeof View>>,
+  ...props: $ReadOnly<$Diff<TouchableHighlightProps, { +hostRef: mixed }>>
 );
-declare export default typeof Touchable;
+declare export default typeof TouchableHighlight;
 "
 `;
 

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

@@ -490,6 +490,7 @@ export class TouchableHighlightTest extends React.Component {
   render() {
     return (
       <>
+        <TouchableHighlight />
         <TouchableHighlight ref={this.buttonRef} />
         <TouchableHighlight
           ref={ref => {