react-native-windows 0.80.0 → 0.81.0-preview.1

package/Libraries/Components/TextInput/TextInput.windows.js

@@ -11,6 +11,8 @@
 import type {HostInstance} from '../../../src/private/types/HostInstance';
 import type {____TextStyle_Internal as TextStyleInternal} from '../../StyleSheet/StyleSheetTypes';
 import type {
+  BlurEvent,
+  FocusEvent,
   KeyEvent, // Windows
   MouseEvent, // Windows
   GestureResponderEvent,
@@ -64,7 +66,7 @@ import TextInputState from './TextInputState';
 import invariant from 'invariant';
 import nullthrows from 'nullthrows';
 import * as React from 'react';
-import {useCallback, useLayoutEffect, useRef, useState} from 'react';
+import {useCallback, useLayoutEffect, useMemo, useRef, useState} from 'react';
 
 let AndroidTextInput;
 let AndroidTextInputCommands;
@@ -100,10 +102,12 @@ else if (Platform.OS === 'windows') {
 
 export type {
   AutoCapitalize,
+  BlurEvent,
   EnterKeyHintType,
   EnterKeyHintTypeAndroid,
   EnterKeyHintTypeIOS,
   EnterKeyHintTypeOptions,
+  FocusEvent,
   InputModeOptions,
   KeyboardType,
   KeyboardTypeAndroid,
@@ -472,6 +476,7 @@ function InternalTextInput(props: TextInputProps): React.Node {
       */
       if (instance != null) {
         // $FlowFixMe[prop-missing] - See the explanation above.
+        // $FlowFixMe[unsafe-object-assign] - Intentional mutation of ref instance
         Object.assign(instance, {
           clear(): void {
             if (inputRef.current != null) {
@@ -549,14 +554,14 @@ function InternalTextInput(props: TextInputProps): React.Node {
     });
   };
 
-  const _onFocus = (event: TextInputFocusEvent) => {
+  const _onFocus = (event: FocusEvent) => {
     TextInputState.focusInput(inputRef.current);
     if (props.onFocus) {
       props.onFocus(event);
     }
   };
 
-  const _onBlur = (event: TextInputBlurEvent) => {
+  const _onBlur = (event: BlurEvent) => {
     TextInputState.blurInput(inputRef.current);
     if (props.onBlur) {
       props.onBlur(event);
@@ -613,7 +618,7 @@ function InternalTextInput(props: TextInputProps): React.Node {
     rejectResponderTermination,
   } = props;
 
-  const config = React.useMemo(
+  const config = useMemo(
     () => ({
       hitSlop,
       onPress: (event: GestureResponderEvent) => {
@@ -655,6 +660,10 @@ function InternalTextInput(props: TextInputProps): React.Node {
       for (const el of props.keyDownEvents) {
         if (
           event.nativeEvent.code === el.code &&
+          event.nativeEvent.ctrlKey === Boolean(el.ctrlKey) &&
+          event.nativeEvent.shiftKey === Boolean(el.shiftKey) &&
+          event.nativeEvent.altKey === Boolean(el.altKey) &&
+          event.nativeEvent.metaKey === Boolean(el.metaKey) &&
           el.handledEventPhase === eventPhase.Bubbling
         ) {
           event.stopPropagation();
@@ -668,7 +677,14 @@ function InternalTextInput(props: TextInputProps): React.Node {
     if (props.keyUpEvents && event.isPropagationStopped() !== true) {
       // $FlowFixMe - keyDownEvents was already checked to not be undefined
       for (const el of props.keyUpEvents) {
-        if (event.nativeEvent.code === el.code && el.handledEventPhase === 3) {
+        if (
+          event.nativeEvent.code === el.code &&
+          event.nativeEvent.ctrlKey === Boolean(el.ctrlKey) &&
+          event.nativeEvent.shiftKey === Boolean(el.shiftKey) &&
+          event.nativeEvent.altKey === Boolean(el.altKey) &&
+          event.nativeEvent.metaKey === Boolean(el.metaKey) &&
+          el.handledEventPhase === 3
+        ) {
           event.stopPropagation();
         }
       }
@@ -680,7 +696,14 @@ function InternalTextInput(props: TextInputProps): React.Node {
     if (props.keyDownEvents && event.isPropagationStopped() !== true) {
       // $FlowFixMe - keyDownEvents was already checked to not be undefined
       for (const el of props.keyDownEvents) {
-        if (event.nativeEvent.code === el.code && el.handledEventPhase === 1) {
+        if (
+          event.nativeEvent.code === el.code &&
+          event.nativeEvent.ctrlKey === Boolean(el.ctrlKey) &&
+          event.nativeEvent.shiftKey === Boolean(el.shiftKey) &&
+          event.nativeEvent.altKey === Boolean(el.altKey) &&
+          event.nativeEvent.metaKey === Boolean(el.metaKey) &&
+          el.handledEventPhase === 1
+        ) {
           event.stopPropagation();
         }
       }
@@ -692,7 +715,14 @@ function InternalTextInput(props: TextInputProps): React.Node {
     if (props.keyUpEvents && event.isPropagationStopped() !== true) {
       // $FlowFixMe - keyDownEvents was already checked to not be undefined
       for (const el of props.keyUpEvents) {
-        if (event.nativeEvent.code === el.code && el.handledEventPhase === 1) {
+        if (
+          event.nativeEvent.code === el.code &&
+          event.nativeEvent.ctrlKey === Boolean(el.ctrlKey) &&
+          event.nativeEvent.shiftKey === Boolean(el.shiftKey) &&
+          event.nativeEvent.altKey === Boolean(el.altKey) &&
+          event.nativeEvent.metaKey === Boolean(el.metaKey) &&
+          el.handledEventPhase === 1
+        ) {
           event.stopPropagation();
         }
       }
@@ -929,7 +959,7 @@ const enterKeyHintToReturnTypeMap = {
   previous: 'previous',
   search: 'search',
   send: 'send',
-};
+} as const;
 
 const inputModeToKeyboardTypeMap = {
   none: 'default',
@@ -937,10 +967,11 @@ const inputModeToKeyboardTypeMap = {
   decimal: 'decimal-pad',
   numeric: 'number-pad',
   tel: 'phone-pad',
-  search: Platform.OS === 'ios' ? 'web-search' : 'default',
+  search:
+    Platform.OS === 'ios' ? ('web-search' as const) : ('default' as const),
   email: 'email-address',
   url: 'url',
-};
+} as const;
 
 // Map HTML autocomplete values to Android autoComplete values
 const autoCompleteWebToAutoCompleteAndroidMap = {
@@ -974,7 +1005,7 @@ const autoCompleteWebToAutoCompleteAndroidMap = {
   'tel-country-code': 'tel-country-code',
   'tel-national': 'tel-national',
   username: 'username',
-};
+} as const;
 
 // Map HTML autocomplete values to iOS textContentType values
 const autoCompleteWebToTextContentTypeMap = {
@@ -1014,29 +1045,30 @@ const autoCompleteWebToTextContentTypeMap = {
   tel: 'telephoneNumber',
   url: 'URL',
   username: 'username',
-};
+} as const;
 
-const ExportedForwardRef: component(
+const TextInput: component(
   ref?: React.RefSetter<TextInputInstance>,
   ...props: React.ElementConfig<typeof InternalTextInput>
-) = React.forwardRef(function TextInput(
-  {
-    allowFontScaling = true,
-    rejectResponderTermination = true,
-    underlineColorAndroid = 'transparent',
-    autoComplete,
-    textContentType,
-    readOnly,
-    editable,
-    enterKeyHint,
-    returnKeyType,
-    inputMode,
-    showSoftInputOnFocus,
-    keyboardType,
-    ...restProps
-  },
-  forwardedRef: React.RefSetter<TextInputInstance>,
-) {
+) = function TextInput({
+  ref: forwardedRef,
+  allowFontScaling = true,
+  rejectResponderTermination = true,
+  underlineColorAndroid = 'transparent',
+  autoComplete,
+  textContentType,
+  readOnly,
+  editable,
+  enterKeyHint,
+  returnKeyType,
+  inputMode,
+  showSoftInputOnFocus,
+  keyboardType,
+  ...restProps
+}: {
+  ref?: React.RefSetter<TextInputInstance>,
+  ...React.ElementConfig<typeof InternalTextInput>,
+}) {
   return (
     <InternalTextInput
       allowFontScaling={allowFontScaling}
@@ -1065,8 +1097,7 @@ const ExportedForwardRef: component(
           : Platform.OS === 'ios' &&
               autoComplete &&
               autoComplete in autoCompleteWebToTextContentTypeMap
-            ? // $FlowFixMe[invalid-computed-prop]
-              // $FlowFixMe[prop-missing]
+            ? // $FlowFixMe[prop-missing]
               autoCompleteWebToTextContentTypeMap[autoComplete]
             : textContentType
       }
@@ -1074,12 +1105,12 @@ const ExportedForwardRef: component(
       forwardedRef={forwardedRef}
     />
   );
-});
+};
 
-ExportedForwardRef.displayName = 'TextInput';
+TextInput.displayName = 'TextInput';
 
 // $FlowFixMe[prop-missing]
-ExportedForwardRef.State = {
+TextInput.State = {
   currentlyFocusedInput: TextInputState.currentlyFocusedInput,
 
   currentlyFocusedField: TextInputState.currentlyFocusedField,
@@ -1105,7 +1136,7 @@ const verticalAlignToTextAlignVerticalMap = {
   top: 'top',
   bottom: 'bottom',
   middle: 'center',
-};
+} as const;
 
 // $FlowFixMe[unclear-type] Unclear type. Using `any` type is not safe.
-export default ExportedForwardRef as any as TextInputType;
+export default TextInput as any as TextInputType;

package/Libraries/Components/TextInput/TextInputState.js

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict-local
+ * @format
  */
 
 // This class is responsible for coordinating the "focused" state for

package/Libraries/Components/TextInput/TextInputState.windows.js

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict-local
+ * @format
  */
 
 // This class is responsible for coordinating the "focused" state for

package/Libraries/Components/TextInput/WindowsTextInputNativeComponent.js

@@ -10,11 +10,7 @@
 
 import type {HostComponent} from '../../../src/private/types/HostComponent';
 import type {PartialViewConfig} from '../../Renderer/shims/ReactNativeTypes';
-import type {
-  ColorValue,
-  TextStyleProp,
-  ViewStyleProp,
-} from '../../StyleSheet/StyleSheet';
+import type {ColorValue, TextStyleProp} from '../../StyleSheet/StyleSheet';
 import type {
   BubblingEventHandler,
   DirectEventHandler,
@@ -636,24 +632,12 @@ export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
 export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
   uiViewClassName: 'WindowsTextInput',
   bubblingEventTypes: {
-    topBlur: {
-      phasedRegistrationNames: {
-        bubbled: 'onBlur',
-        captured: 'onBlurCapture',
-      },
-    },
     topEndEditing: {
       phasedRegistrationNames: {
         bubbled: 'onEndEditing',
         captured: 'onEndEditingCapture',
       },
     },
-    topFocus: {
-      phasedRegistrationNames: {
-        bubbled: 'onFocus',
-        captured: 'onFocusCapture',
-      },
-    },
     topKeyPress: {
       phasedRegistrationNames: {
         bubbled: 'onKeyPress',

package/Libraries/Components/ToastAndroid/NativeToastAndroid.js

@@ -9,5 +9,4 @@
  */
 
 export * from '../../../src/private/specs_DEPRECATED/modules/NativeToastAndroid';
-import NativeToastAndroid from '../../../src/private/specs_DEPRECATED/modules/NativeToastAndroid';
-export default NativeToastAndroid;
+export {default} from '../../../src/private/specs_DEPRECATED/modules/NativeToastAndroid';

package/Libraries/Components/ToastAndroid/ToastAndroid.android.js

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict-local
+ * @format
  */
 
 import NativeToastAndroid from './NativeToastAndroid';

package/Libraries/Components/ToastAndroid/ToastAndroid.ios.js

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict-local
+ * @format
  */
 
 import ToastAndroidFallback from './ToastAndroidFallback';

package/Libraries/Components/ToastAndroid/ToastAndroid.js

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict-local
+ * @format
  */
 
 // NOTE: This file supports backwards compatibility of subpath (deep) imports

package/Libraries/Components/ToastAndroid/ToastAndroid.js.flow

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict-local
+ * @format
  */
 
 /**

package/Libraries/Components/ToastAndroid/ToastAndroidFallback.js

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict-local
+ * @format
  */
 
 'use strict';

package/Libraries/Components/Touchable/BoundingDimensions.js

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict-local
+ * @format
  */
 
 'use strict';

package/Libraries/Components/Touchable/PooledClass.js

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow
+ * @format
  */
 
 'use strict';

package/Libraries/Components/Touchable/Position.js

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict-local
+ * @format
  */
 
 'use strict';

package/Libraries/Components/Touchable/Touchable.js

@@ -10,7 +10,11 @@
 
 import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
 import type {ColorValue} from '../../StyleSheet/StyleSheet';
-import type {GestureResponderEvent} from '../../Types/CoreEventTypes';
+import type {
+  BlurEvent,
+  FocusEvent,
+  GestureResponderEvent,
+} from '../../Types/CoreEventTypes';
 
 import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
 import UIManager from '../../ReactNative/UIManager';
@@ -589,7 +593,7 @@ const TouchableMixinImpl = {
    */
   /* $FlowFixMe[missing-this-annot] The 'this' type annotation(s) required by
    * Flow's LTI update could not be added via codemod */
-  touchableHandleFocus: function (e: Event) {
+  touchableHandleFocus: function (e: FocusEvent) {
     this.props.onFocus && this.props.onFocus(e);
   },
 
@@ -603,7 +607,7 @@ const TouchableMixinImpl = {
    */
   /* $FlowFixMe[missing-this-annot] The 'this' type annotation(s) required by
    * Flow's LTI update could not be added via codemod */
-  touchableHandleBlur: function (e: Event) {
+  touchableHandleBlur: function (e: BlurEvent) {
     this.props.onBlur && this.props.onBlur(e);
   },
 
@@ -869,11 +873,15 @@ const TouchableMixinImpl = {
       curState === States.NOT_RESPONDER &&
       nextState === States.RESPONDER_INACTIVE_PRESS_IN;
 
+    /* $FlowFixMe[invalid-computed-prop] Natural Inference rollout. See
+     * https://fburl.com/workplace/6291gfvu */
     const isActiveTransition = !IsActive[curState] && IsActive[nextState];
     if (isInitialTransition || isActiveTransition) {
       this._remeasureMetricsOnActivation();
     }
 
+    /* $FlowFixMe[invalid-computed-prop] Natural Inference rollout. See
+     * https://fburl.com/workplace/6291gfvu */
     if (IsPressingIn[curState] && signal === Signals.LONG_PRESS_DETECTED) {
       this.touchableHandleLongPress && this.touchableHandleLongPress(e);
     }
@@ -884,13 +892,19 @@ const TouchableMixinImpl = {
       this._endHighlight(e);
     }
 
+    /* $FlowFixMe[invalid-computed-prop] Natural Inference rollout. See
+     * https://fburl.com/workplace/6291gfvu */
     if (IsPressingIn[curState] && signal === Signals.RESPONDER_RELEASE) {
       const hasLongPressHandler = !!this.props.onLongPress;
       const pressIsLongButStillCallOnPress =
+        /* $FlowFixMe[invalid-computed-prop] Natural Inference rollout. See
+         * https://fburl.com/workplace/6291gfvu */
         IsLongPressingIn[curState] && // We *are* long pressing.. // But either has no long handler
         (!hasLongPressHandler || !this.touchableLongPressCancelsPress()); // or we're told to ignore it.
 
       const shouldInvokePress =
+        /* $FlowFixMe[invalid-computed-prop] Natural Inference rollout. See
+         * https://fburl.com/workplace/6291gfvu */
         !IsLongPressingIn[curState] || pressIsLongButStillCallOnPress;
       if (shouldInvokePress && this.touchableHandlePress) {
         if (!newIsHighlight && !curIsHighlight) {

package/Libraries/Components/Touchable/Touchable.windows.js

@@ -10,7 +10,11 @@
 
 import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
 import type {ColorValue} from '../../StyleSheet/StyleSheet';
-import type {GestureResponderEvent} from '../../Types/CoreEventTypes';
+import type {
+  BlurEvent,
+  FocusEvent,
+  GestureResponderEvent,
+} from '../../Types/CoreEventTypes';
 
 import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
 import UIManager from '../../ReactNative/UIManager';
@@ -594,7 +598,7 @@ const TouchableMixinImpl = {
    */
   /* $FlowFixMe[missing-this-annot] The 'this' type annotation(s) required by
    * Flow's LTI update could not be added via codemod */
-  touchableHandleFocus: function (e: Event) {
+  touchableHandleFocus: function (e: FocusEvent) {
     this.props.onFocus && this.props.onFocus(e);
   },
 
@@ -608,7 +612,7 @@ const TouchableMixinImpl = {
    */
   /* $FlowFixMe[missing-this-annot] The 'this' type annotation(s) required by
    * Flow's LTI update could not be added via codemod */
-  touchableHandleBlur: function (e: Event) {
+  touchableHandleBlur: function (e: BlurEvent) {
     this.props.onBlur && this.props.onBlur(e);
   },
 
@@ -874,11 +878,15 @@ const TouchableMixinImpl = {
       curState === States.NOT_RESPONDER &&
       nextState === States.RESPONDER_INACTIVE_PRESS_IN;
 
+    /* $FlowFixMe[invalid-computed-prop] Natural Inference rollout. See
+     * https://fburl.com/workplace/6291gfvu */
     const isActiveTransition = !IsActive[curState] && IsActive[nextState];
     if (isInitialTransition || isActiveTransition) {
       this._remeasureMetricsOnActivation();
     }
 
+    /* $FlowFixMe[invalid-computed-prop] Natural Inference rollout. See
+     * https://fburl.com/workplace/6291gfvu */
     if (IsPressingIn[curState] && signal === Signals.LONG_PRESS_DETECTED) {
       this.touchableHandleLongPress && this.touchableHandleLongPress(e);
     }
@@ -889,13 +897,19 @@ const TouchableMixinImpl = {
       this._endHighlight(e);
     }
 
+    /* $FlowFixMe[invalid-computed-prop] Natural Inference rollout. See
+     * https://fburl.com/workplace/6291gfvu */
     if (IsPressingIn[curState] && signal === Signals.RESPONDER_RELEASE) {
       const hasLongPressHandler = !!this.props.onLongPress;
       const pressIsLongButStillCallOnPress =
+        /* $FlowFixMe[invalid-computed-prop] Natural Inference rollout. See
+         * https://fburl.com/workplace/6291gfvu */
         IsLongPressingIn[curState] && // We *are* long pressing.. // But either has no long handler
         (!hasLongPressHandler || !this.touchableLongPressCancelsPress()); // or we're told to ignore it.
 
       const shouldInvokePress =
+        /* $FlowFixMe[invalid-computed-prop] Natural Inference rollout. See
+         * https://fburl.com/workplace/6291gfvu */
         !IsLongPressingIn[curState] || pressIsLongButStillCallOnPress;
       if (shouldInvokePress && this.touchableHandlePress) {
         if (!newIsHighlight && !curIsHighlight) {

package/Libraries/Components/Touchable/TouchableBounce.js

@@ -221,9 +221,15 @@ class TouchableBounce extends React.Component<
   }
 }
 
-export default (React.forwardRef((props, hostRef: React.RefSetter<mixed>) => (
-  <TouchableBounce {...props} hostRef={hostRef} />
-)): component(
+export default (function TouchableBounceWrapper({
+  ref: hostRef,
+  ...props
+}: {
+  ref: React.RefSetter<mixed>,
+  ...$ReadOnly<Omit<TouchableBounceProps, 'hostRef'>>,
+}) {
+  return <TouchableBounce {...props} hostRef={hostRef} />;
+} as component(
   ref: React.RefSetter<mixed>,
   ...props: $ReadOnly<Omit<TouchableBounceProps, 'hostRef'>>
 ));

package/Libraries/Components/Touchable/TouchableBounce.windows.js

@@ -228,9 +228,15 @@ class TouchableBounce extends React.Component<
   }
 }
 
-export default (React.forwardRef((props, hostRef: React.RefSetter<mixed>) => (
-  <TouchableBounce {...props} hostRef={hostRef} />
-)): component(
+export default (function TouchableBounceWrapper({
+  ref: hostRef,
+  ...props
+}: {
+  ref: React.RefSetter<mixed>,
+  ...$ReadOnly<Omit<TouchableBounceProps, 'hostRef'>>,
+}) {
+  return <TouchableBounce {...props} hostRef={hostRef} />;
+} as component(
   ref: React.RefSetter<mixed>,
   ...props: $ReadOnly<Omit<TouchableBounceProps, 'hostRef'>>
 ));

package/Libraries/Components/Touchable/TouchableHighlight.js

@@ -9,6 +9,7 @@
  */
 
 import type {ColorValue} from '../../StyleSheet/StyleSheet';
+import type {AccessibilityState} from '../View/ViewAccessibility';
 import type {TouchableWithoutFeedbackProps} from './TouchableWithoutFeedback';
 
 import View from '../../Components/View/View';
@@ -19,6 +20,7 @@ import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
 import StyleSheet, {type ViewStyleProp} from '../../StyleSheet/StyleSheet';
 import Platform from '../../Utilities/Platform';
 import * as React from 'react';
+import {cloneElement} from 'react';
 
 type AndroidProps = $ReadOnly<{
   nextFocusDown?: ?number,
@@ -29,6 +31,9 @@ type AndroidProps = $ReadOnly<{
 }>;
 
 type IOSProps = $ReadOnly<{
+  /**
+   * @deprecated Use `focusable` instead
+   */
   hasTVPreferredFocus?: ?boolean,
 }>;
 
@@ -305,7 +310,7 @@ class TouchableHighlightImpl extends React.Component<
     const {onBlur, onFocus, ...eventHandlersWithoutBlurAndFocus} =
       this.state.pressability.getEventHandlers();
 
-    const accessibilityState =
+    const accessibilityState: ?AccessibilityState =
       this.props.disabled != null
         ? {
             ...this.props.accessibilityState,
@@ -371,7 +376,7 @@ class TouchableHighlightImpl extends React.Component<
         testID={this.props.testID}
         ref={this.props.hostRef}
         {...eventHandlersWithoutBlurAndFocus}>
-        {React.cloneElement(child, {
+        {cloneElement(child, {
           style: StyleSheet.compose(
             child.props.style,
             this.state.extraStyles?.child,
@@ -408,9 +413,13 @@ class TouchableHighlightImpl extends React.Component<
 const TouchableHighlight: component(
   ref?: React.RefSetter<React.ElementRef<typeof View>>,
   ...props: $ReadOnly<Omit<TouchableHighlightProps, 'hostRef'>>
-) = React.forwardRef((props, hostRef) => (
-  <TouchableHighlightImpl {...props} hostRef={hostRef} />
-));
+) = ({
+  ref: hostRef,
+  ...props
+}: {
+  ref?: React.RefSetter<React.ElementRef<typeof View>>,
+  ...$ReadOnly<Omit<TouchableHighlightProps, 'hostRef'>>,
+}) => <TouchableHighlightImpl {...props} hostRef={hostRef} />;
 
 TouchableHighlight.displayName = 'TouchableHighlight';