react-native-tvos 0.80.1-0 → 0.81.0-0rc2

package/Libraries/Components/TV/TVEventControl.js

@@ -8,30 +8,31 @@
 'use strict';
 
 import NativeTVNavigationEventEmitter from '../../../src/private/specs_DEPRECATED/modules/NativeTVNavigationEventEmitter';
+import Platform from '../../Utilities/Platform';
 
 const TVEventControl = {
   enableTVMenuKey: () => {
-    NativeTVNavigationEventEmitter &&
+    Platform.isTV && NativeTVNavigationEventEmitter &&
       NativeTVNavigationEventEmitter.enableTVMenuKey();
   },
   disableTVMenuKey: () => {
-    NativeTVNavigationEventEmitter &&
+    Platform.isTV && NativeTVNavigationEventEmitter &&
       NativeTVNavigationEventEmitter.disableTVMenuKey();
   },
   enableTVPanGesture: () => {
-    NativeTVNavigationEventEmitter &&
+    Platform.isTV && NativeTVNavigationEventEmitter &&
       NativeTVNavigationEventEmitter.enableTVPanGesture();
   },
   disableTVPanGesture: () => {
-    NativeTVNavigationEventEmitter &&
+    Platform.isTV && NativeTVNavigationEventEmitter &&
       NativeTVNavigationEventEmitter.disableTVPanGesture();
   },
   enableGestureHandlersCancelTouches: () => {
-    NativeTVNavigationEventEmitter &&
+    Platform.isTV && NativeTVNavigationEventEmitter &&
       NativeTVNavigationEventEmitter.enableGestureHandlersCancelTouches();
   },
   disableGestureHandlersCancelTouches: () => {
-    NativeTVNavigationEventEmitter &&
+    Platform.isTV && NativeTVNavigationEventEmitter &&
       NativeTVNavigationEventEmitter.disableGestureHandlersCancelTouches();
   },
 };

package/Libraries/Components/TV/TVFocusGuideView.js

@@ -11,6 +11,7 @@
 import type {ViewProps} from '../View/ViewPropTypes';
 import type {ComponentOrHandleType} from './tagForComponentOrHandle';
 
+import Platform from '../../Utilities/Platform';
 import setAndForwardRef from '../../Utilities/setAndForwardRef';
 import View from '../View/View';
 import {Commands} from '../View/ViewNativeComponent';
@@ -73,35 +74,39 @@ function TVFocusGuideView(
 
   const setDestinations = React.useCallback(
     (destinations: ?(ComponentOrHandleType[])) => {
-      const dests: number[] = (destinations || [])
-        .map((destination: any) => tagForComponentOrHandle(destination))
-        .filter(Boolean);
-
-      if (focusGuideRef.current != null) {
-        Commands.setDestinations(focusGuideRef.current, dests);
+      if (Platform.isTV) {
+        const dests: number[] = (destinations || [])
+          .map((destination: any) => tagForComponentOrHandle(destination))
+          .filter(Boolean);
+  
+        if (focusGuideRef.current != null) {
+          Commands.setDestinations(focusGuideRef.current, dests);
+        }
       }
     },
     [],
   );
 
-  const _setNativeRef = setAndForwardRef({
-    getForwardedRef: () => forwardedRef,
-    setLocalRef: ref => {
-      focusGuideRef.current = ref;
-
-      // This is a hack. Ideally we would forwardRef to the underlying
-      // host component. However, since TVFocusGuide has its own methods that can be
-      // called as well, if we used the standard forwardRef then these
-      // methods wouldn't be accessible
-      //
-      // Here we mutate the ref, so that the user can use the standard native
-      // methods like `focus()`, `blur()`, etc. while also having access to
-      // imperative methods of this component like `setDestinations()`.
-      if (ref) {
-        ref.setDestinations = setDestinations;
-      }
-    },
-  });
+  const _setNativeRef = React.useMemo(() => {
+    return setAndForwardRef({
+      getForwardedRef: () => forwardedRef,
+      setLocalRef: ref => {
+        focusGuideRef.current = ref;
+
+        // This is a hack. Ideally we would forwardRef to the underlying
+        // host component. However, since TVFocusGuide has its own methods that can be
+        // called as well, if we used the standard forwardRef then these
+        // methods wouldn't be accessible
+        //
+        // Here we mutate the ref, so that the user can use the standard native
+        // methods like `focus()`, `blur()`, etc. while also having access to
+        // imperative methods of this component like `setDestinations()`.
+        if (ref) {
+          ref.setDestinations = setDestinations;
+        }
+      },
+    })
+  }, [forwardedRef, setDestinations]);
 
   React.useEffect(() => {
     if (destinationsProp !== null && destinationsProp !== undefined) {

package/Libraries/Components/TextInput/AndroidTextInputNativeComponent.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,
@@ -67,7 +63,7 @@ export type ReturnKeyType =
 
 export type SubmitBehavior = 'submit' | 'blurAndSubmit' | 'newline';
 
-export type NativeProps = $ReadOnly<{
+export type AndroidTextInputNativeProps = $ReadOnly<{
   // This allows us to inherit everything from ViewProps except for style (see below)
   // This must be commented for Fabric codegen to work.
   ...Omit<ViewProps, 'style'>,
@@ -610,7 +606,7 @@ export type NativeProps = $ReadOnly<{
   text?: ?string,
 }>;
 
-type NativeType = HostComponent<NativeProps>;
+type NativeType = HostComponent<AndroidTextInputNativeProps>;
 
 type NativeCommands = TextInputNativeCommands<NativeType>;
 
@@ -729,10 +725,11 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
   },
 };
 
-let AndroidTextInputNativeComponent = NativeComponentRegistry.get<NativeProps>(
-  'AndroidTextInput',
-  () => __INTERNAL_VIEW_CONFIG,
-);
+let AndroidTextInputNativeComponent =
+  NativeComponentRegistry.get<AndroidTextInputNativeProps>(
+    'AndroidTextInput',
+    () => __INTERNAL_VIEW_CONFIG,
+  );
 
 // flowlint-next-line unclear-type:off
-export default ((AndroidTextInputNativeComponent: any): HostComponent<NativeProps>);
+export default ((AndroidTextInputNativeComponent: any): HostComponent<AndroidTextInputNativeProps>);

package/Libraries/Components/TextInput/RCTInputAccessoryViewNativeComponent.js

@@ -4,10 +4,9 @@
  * 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
  */
 
 export * from '../../../src/private/specs_DEPRECATED/components/RCTInputAccessoryViewNativeComponent';
-import RCTInputAccessoryViewNativeComponent from '../../../src/private/specs_DEPRECATED/components/RCTInputAccessoryViewNativeComponent';
-export default RCTInputAccessoryViewNativeComponent;
+export {default} from '../../../src/private/specs_DEPRECATED/components/RCTInputAccessoryViewNativeComponent';

package/Libraries/Components/TextInput/RCTTextInputViewConfig.js

@@ -14,7 +14,7 @@ import {ConditionallyIgnoredEventHandlers} from '../../NativeComponent/ViewConfi
 
 type PartialViewConfigWithoutName = Omit<PartialViewConfig, 'uiViewClassName'>;
 
-const RCTTextInputViewConfig = {
+const RCTTextInputViewConfig: PartialViewConfigWithoutName = {
   bubblingEventTypes: {
     topBlur: {
       phasedRegistrationNames: {

package/Libraries/Components/TextInput/TextInput.flow.js

@@ -18,11 +18,7 @@ import type {
 } from '../../Types/CoreEventTypes';
 import type {ViewProps} from '../View/ViewPropTypes';
 
-import {
-  type ColorValue,
-  type TextStyleProp,
-  type ViewStyleProp,
-} from '../../StyleSheet/StyleSheet';
+import {type ColorValue, type TextStyleProp} from '../../StyleSheet/StyleSheet';
 import * as React from 'react';
 
 /**
@@ -1035,7 +1031,7 @@ type TextInputBaseProps = $ReadOnly<{
 }>;
 
 export type TextInputProps = $ReadOnly<{
-  ...Omit<ViewProps, 'style'>,
+  ...Omit<ViewProps, 'style' | 'experimental_accessibilityOrder'>,
   ...TextInputIOSProps,
   ...TextInputAndroidProps,
   ...TextInputBaseProps,

package/Libraries/Components/TextInput/TextInput.js

@@ -55,7 +55,7 @@ import usePressability from '../../Pressability/usePressability';
 import flattenStyle from '../../StyleSheet/flattenStyle';
 import StyleSheet, {type TextStyleProp} from '../../StyleSheet/StyleSheet';
 import Text from '../../Text/Text';
-import TextAncestor from '../../Text/TextAncestor';
+import TextAncestorContext from '../../Text/TextAncestorContext';
 import Platform from '../../Utilities/Platform';
 import useMergeRefs from '../../Utilities/useMergeRefs';
 import warnOnce from '../../Utilities/warnOnce';
@@ -63,7 +63,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;
@@ -583,7 +583,7 @@ function InternalTextInput(props: TextInputProps): React.Node {
     rejectResponderTermination,
   } = props;
 
-  const config = React.useMemo(
+  const config = useMemo(
     () => ({
       hitSlop,
       onPress: (event: GestureResponderEvent) => {
@@ -783,9 +783,7 @@ function InternalTextInput(props: TextInputProps): React.Node {
       />
     );
   }
-  return (
-    <TextAncestor.Provider value={true}>{textInput}</TextAncestor.Provider>
-  );
+  return <TextAncestorContext value={true}>{textInput}</TextAncestorContext>;
 }
 
 const enterKeyHintToReturnTypeMap = {
@@ -796,7 +794,7 @@ const enterKeyHintToReturnTypeMap = {
   previous: 'previous',
   search: 'search',
   send: 'send',
-};
+} as const;
 
 const inputModeToKeyboardTypeMap = {
   none: 'default',
@@ -804,10 +802,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 = {
@@ -841,7 +840,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 = {
@@ -881,29 +880,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}
@@ -933,8 +933,7 @@ const ExportedForwardRef: component(
           : Platform.OS === 'ios' &&
               autoComplete &&
               autoComplete in autoCompleteWebToTextContentTypeMap
-            ? // $FlowFixMe[invalid-computed-prop]
-              // $FlowFixMe[prop-missing]
+            ? // $FlowFixMe[prop-missing]
               autoCompleteWebToTextContentTypeMap[autoComplete]
             : textContentType
       }
@@ -942,12 +941,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,
@@ -973,7 +972,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/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';
@@ -572,7 +576,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);
   },
 
@@ -586,7 +590,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);
   },
 
@@ -852,11 +856,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);
     }
@@ -867,13 +875,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/TouchableHighlight.js

@@ -10,6 +10,7 @@
 
 import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {TVParallaxPropertiesType} from '../TV/TVViewPropTypes';
+import type {AccessibilityState} from '../View/ViewAccessibility';
 import type {TouchableWithoutFeedbackProps} from './TouchableWithoutFeedback';
 
 import View from '../../Components/View/View';
@@ -21,6 +22,7 @@ import StyleSheet, {type ViewStyleProp} from '../../StyleSheet/StyleSheet';
 import Platform from '../../Utilities/Platform';
 import tagForComponentOrHandle from '../TV/tagForComponentOrHandle';
 import * as React from 'react';
+import {cloneElement} from 'react';
 
 type AndroidProps = $ReadOnly<{
   nextFocusDown?: ?number,
@@ -31,6 +33,9 @@ type AndroidProps = $ReadOnly<{
 }>;
 
 type IOSProps = $ReadOnly<{
+  /**
+   * @deprecated Use `focusable` instead
+   */
   hasTVPreferredFocus?: ?boolean,
   isTVSelectable?: ?boolean,
   tvParallaxProperties?: TVParallaxPropertiesType,
@@ -45,9 +50,6 @@ type TouchableHighlightBaseProps = $ReadOnly<{
   /**
    * Determines what the opacity of the wrapped view should be when touch is active.
    */
-  ...React.ElementConfig<TouchableWithoutFeedback>,
-  ...AndroidProps,
-  ...IOSProps,
   activeOpacity?: ?number,
   /**
    * The color of the underlay that will show through when the touch is active.
@@ -318,10 +320,9 @@ class TouchableHighlightImpl extends React.Component<
 
     // BACKWARD-COMPATIBILITY: Focus and blur events were never supported before
     // adopting `Pressability`, so preserve that behavior.
-    const {onBlur, onFocus, ...eventHandlersWithoutBlurAndFocus} =
-      this.state.pressability.getEventHandlers();
+    const eventHandlers = this.state.pressability.getEventHandlers();
 
-    const accessibilityState =
+    const accessibilityState: ?AccessibilityState =
       this.props.disabled != null
         ? {
             ...this.props.accessibilityState,
@@ -390,8 +391,8 @@ class TouchableHighlightImpl extends React.Component<
         nativeID={this.props.id ?? this.props.nativeID}
         testID={this.props.testID}
         ref={this.props.hostRef}
-        {...eventHandlersWithoutBlurAndFocus}>
-        {React.cloneElement(child, {
+        {...eventHandlers}>
+        {cloneElement(child, {
           style: StyleSheet.compose(
             child.props.style,
             this.state.extraStyles?.child,
@@ -428,9 +429,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';
 

package/Libraries/Components/Touchable/TouchableNativeFeedback.js

@@ -23,12 +23,14 @@ import tagForComponentOrHandle from '../TV/tagForComponentOrHandle';
 import {Commands} from '../View/ViewNativeComponent';
 import invariant from 'invariant';
 import * as React from 'react';
+import {cloneElement} from 'react';
 
-type TVProps = {
+type TouchableNativeFeedbackTVProps = {
   /**
    * *(Apple TV only)* TV preferred focus (see documentation for the View component).
    *
    * @platform ios
+   * @deprecated Use `focusable` instead
    */
   hasTVPreferredFocus?: ?boolean,
 
@@ -70,7 +72,7 @@ type TVProps = {
 
 export type TouchableNativeFeedbackProps = $ReadOnly<{
   ...TouchableWithoutFeedbackProps,
-  ...TVProps,
+  ...TouchableNativeFeedbackTVProps,
   /**
    * Determines the type of background drawable that's going to be used to display feedback.
    * It takes an object with type property and extra data depending on the type.
@@ -335,7 +337,7 @@ class TouchableNativeFeedback extends React.Component<
 
     const accessibilityLabel =
       this.props['aria-label'] ?? this.props.accessibilityLabel;
-    return React.cloneElement(
+    return cloneElement(
       element,
       {
         ...eventHandlersWithoutBlurAndFocus,