Route selectable text through NativeSelectableText (#55678)

Summary:
Pull Request resolved: #55678

Wire up the JS side to use the new SelectableTextViewManager native component. When enablePreparedTextLayout() is on, NativeSelectableText resolves to RCTSelectableText, routing selectable text through ReactTextView instead of PreparedLayoutTextView. When the flag is off, NativeSelectableText falls back to NativeText, so behavior is identical to before.

Refactor NativePressableText and NativePressableVirtualText from arrow function component expressions to component declarations (PressableText and PressableVirtualText). PressableText now accepts a selectable prop to choose between NativeSelectableText and NativeText.

Add a check(!isSelectable) guard in PreparedLayoutTextViewManager.setSelectable since selectable text now routes to SelectableTextViewManager instead.

Changelog:
[Internal]

Reviewed By: javache

Differential Revision: D93829401

Author: NickGerleman

packages/react-native/Libraries/Text/Text.js

@@ -22,14 +22,18 @@ import processColor from '../StyleSheet/processColor';
 import StyleSheet from '../StyleSheet/StyleSheet';
 import Platform from '../Utilities/Platform';
 import TextAncestorContext from './TextAncestorContext';
-import {NativeText, NativeVirtualText} from './TextNativeComponent';
+import {
+  NativeSelectableText,
+  NativeText,
+  NativeVirtualText,
+} from './TextNativeComponent';
 import * as React from 'react';
 import {useContext, useMemo, useState} from 'react';
 
 export type {TextProps} from './TextProps';
 
 type TextForwardRef = React.ElementRef<
-  typeof NativeText | typeof NativeVirtualText,
+  typeof NativeText | typeof NativeVirtualText | typeof NativeSelectableText,
 >;
 
 /**
@@ -269,7 +273,7 @@ const TextImpl: component(
     processedProps.children = children;
     if (isPressable) {
       return (
-        <NativePressableVirtualText
+        <PressableVirtualText
           ref={forwardedRef}
           textProps={processedProps}
           textPressabilityProps={textPressabilityProps ?? {}}
@@ -289,14 +293,20 @@ const TextImpl: component(
 
   if (isPressable) {
     nativeText = (
-      <NativePressableText
+      <PressableText
         ref={forwardedRef}
+        selectable={_selectable}
         textProps={processedProps}
         textPressabilityProps={textPressabilityProps ?? {}}
       />
     );
   } else {
-    nativeText = <NativeText {...processedProps} ref={forwardedRef} />;
+    nativeText =
+      _selectable === true ? (
+        <NativeSelectableText {...processedProps} ref={forwardedRef} />
+      ) : (
+        <NativeText {...processedProps} ref={forwardedRef} />
+      );
   }
 
   if (children == null) {
@@ -463,28 +473,17 @@ function useTextPressability({
   );
 }
 
-type NativePressableTextProps = Readonly<{
-  textProps: NativeTextProps,
-  textPressabilityProps: TextPressabilityProps,
-}>;
-
 /**
  * Wrap the NativeVirtualText component and initialize pressability.
  *
  * This logic is split out from the main Text component to enable the more
  * expensive pressability logic to be only initialized when needed.
  */
-const NativePressableVirtualText: component(
-  ref: React.RefSetter<TextForwardRef>,
-  ...props: NativePressableTextProps
-) = ({
-  ref: forwardedRef,
-  textProps,
-  textPressabilityProps,
-}: {
+component PressableVirtualText(
   ref?: React.RefSetter<TextForwardRef>,
-  ...NativePressableTextProps,
-}) => {
+  textProps: NativeTextProps,
+  textPressabilityProps: TextPressabilityProps,
+) {
   const [isHighlighted, eventHandlersForText] = useTextPressability(
     textPressabilityProps,
   );
@@ -495,42 +494,40 @@ const NativePressableVirtualText: component(
       {...eventHandlersForText}
       isHighlighted={isHighlighted}
       isPressable={true}
-      ref={forwardedRef}
+      ref={ref}
     />
   );
-};
+}
 
 /**
- * Wrap the NativeText component and initialize pressability.
+ * Wrap a NativeText component and initialize pressability.
  *
  * This logic is split out from the main Text component to enable the more
  * expensive pressability logic to be only initialized when needed.
  */
-const NativePressableText: component(
-  ref: React.RefSetter<TextForwardRef>,
-  ...props: NativePressableTextProps
-) = ({
-  ref: forwardedRef,
-  textProps,
-  textPressabilityProps,
-}: {
+component PressableText(
   ref?: React.RefSetter<TextForwardRef>,
-  ...NativePressableTextProps,
-}) => {
+  selectable?: ?boolean,
+  textProps: NativeTextProps,
+  textPressabilityProps: TextPressabilityProps,
+) {
   const [isHighlighted, eventHandlersForText] = useTextPressability(
     textPressabilityProps,
   );
 
+  const NativeComponent =
+    selectable === true ? NativeSelectableText : NativeText;
+
   return (
-    <NativeText
+    <NativeComponent
       {...textProps}
       {...eventHandlersForText}
       isHighlighted={isHighlighted}
       isPressable={true}
-      ref={forwardedRef}
+      ref={ref}
     />
   );
-};
+}
 
 const userSelectToSelectableMap = {
   auto: true,

packages/react-native/Libraries/Text/TextNativeComponent.js

@@ -13,6 +13,7 @@ import type {ProcessedColorValue} from '../StyleSheet/processColor';
 import type {GestureResponderEvent} from '../Types/CoreEventTypes';
 import type {TextProps} from './TextProps';
 
+import {enablePreparedTextLayout} from '../../src/private/featureflags/ReactNativeFeatureFlags';
 import {createViewConfig} from '../NativeComponent/ViewConfig';
 import UIManager from '../ReactNative/UIManager';
 import createReactNativeComponentClass from '../Renderer/shims/createReactNativeComponentClass';
@@ -54,7 +55,7 @@ const textViewConfig = {
     },
   },
   uiViewClassName: 'RCTText',
-};
+} as const;
 
 const virtualTextViewConfig = {
   validAttributes: {
@@ -63,7 +64,7 @@ const virtualTextViewConfig = {
     maxFontSizeMultiplier: true,
   },
   uiViewClassName: 'RCTVirtualText',
-};
+} as const;
 
 /**
  * `NativeText` is an internal React Native host component, and is exported to
@@ -77,16 +78,22 @@ const virtualTextViewConfig = {
 // and <View> wrappers so that we no longer have any reason to export these APIs.
 export const NativeText: HostComponent<NativeTextProps> =
   (createReactNativeComponentClass('RCTText', () =>
-    /* $FlowFixMe[incompatible-type] Natural Inference rollout. See
-     * https://fburl.com/workplace/6291gfvu */
     createViewConfig(textViewConfig),
   ): any);
 
 export const NativeVirtualText: HostComponent<NativeTextProps> =
   !global.RN$Bridgeless && !UIManager.hasViewManagerConfig('RCTVirtualText')
     ? NativeText
     : (createReactNativeComponentClass('RCTVirtualText', () =>
-        /* $FlowFixMe[incompatible-type] Natural Inference rollout. See
-         * https://fburl.com/workplace/6291gfvu */
         createViewConfig(virtualTextViewConfig),
       ): any);
+
+export const NativeSelectableText: HostComponent<NativeTextProps> =
+  enablePreparedTextLayout()
+    ? (createReactNativeComponentClass('RCTSelectableText', () =>
+        createViewConfig({
+          ...textViewConfig,
+          uiViewClassName: 'RCTSelectableText',
+        }),
+      ): any)
+    : NativeText;

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/PreparedLayoutTextViewManager.kt

@@ -118,8 +118,9 @@ internal class PreparedLayoutTextViewManager :
 
   @ReactProp(name = "selectable", defaultBoolean = false)
   fun setSelectable(view: PreparedLayoutTextView, isSelectable: Boolean): Unit {
-    // T222052152: Implement fine-grained text selection for PreparedLayoutTextView
-    // view.setTextIsSelectable(isSelectable);
+    check(!isSelectable) {
+      "selectable Text should use SelectableTextViewManager instead of PreparedLayoutViewManager"
+    }
   }
 
   @ReactProp(name = "selectionColor", customType = "Color")

packages/react-native/ReactNativeApi.d.ts

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<70e87b8481aeab750e8c747d9d4d28b1>>
+ * @generated SignedSource<<4d9de6bc6082c3ea5b39b8a5b685ac68>>
  *
  * This file was generated by scripts/js-api/build-types/index.js.
  */
@@ -321,6 +321,7 @@ declare const NativeModules: typeof NativeModules_default
 declare let NativeModules_default: {
   [moduleName: string]: any
 }
+declare const NativeSelectableText: HostComponent<NativeTextProps>
 declare const NativeText: HostComponent<NativeTextProps>
 declare const NativeTouchable:
   | typeof TouchableNativeFeedback
@@ -3366,6 +3367,7 @@ declare type NativeScrollVelocity = {
   readonly x: number
   readonly y: number
 }
+declare type NativeSelectableText = typeof NativeSelectableText
 declare type NativeSwitchChangeEvent = {
   readonly target: Int32
   readonly value: boolean
@@ -5157,7 +5159,7 @@ declare type TextContentType =
   | "URL"
   | "username"
 declare type TextForwardRef = React.ComponentRef<
-  typeof NativeText | typeof NativeVirtualText
+  typeof NativeSelectableText | typeof NativeText | typeof NativeVirtualText
 >
 declare type TextInput = typeof TextInput
 declare type TextInputAndroidProps = {
@@ -5992,7 +5994,7 @@ export {
   AlertOptions, // a0cdac0f
   AlertType, // 5ab91217
   AndroidKeyboardEvent, // e03becc8
-  Animated, // ed7eb912
+  Animated, // f39d3c6f
   AppConfig, // ebddad4b
   AppRegistry, // 6cdee1d6
   AppState, // 12012be5
@@ -6212,7 +6214,7 @@ export {
   TVViewPropsIOS, // 330ce7b5
   TargetedEvent, // 16e98910
   TaskProvider, // 266dedf2
-  Text, // e55ac2e2
+  Text, // 0620c789
   TextContentType, // 239b3ecc
   TextInput, // 2e89b91d
   TextInputAndroidProps, // 3f09ce49