react-native-windows 0.75.3 → 0.76.0-preview.1

package/Libraries/Text/Text.windows.js

@@ -4,13 +4,13 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * #7149 should be strict local
- * @flow
+ * @flow strict-local
  * @format
  */
 
 import type {PressEvent} from '../Types/CoreEventTypes';
-import type {TextProps} from './TextProps';
+import type {NativeTextProps} from './TextNativeComponent';
+import type {PressRetentionOffset, TextProps} from './TextProps';
 
 import * as PressabilityDebug from '../Pressability/PressabilityDebug';
 import usePressability from '../Pressability/usePressability';
@@ -22,105 +22,435 @@ import {NativeText, NativeVirtualText} from './TextNativeComponent';
 import * as React from 'react';
 import {useContext, useMemo, useState} from 'react';
 
-const View = require('../Components/View/View');
+const View = require('../Components/View/View'); // [Windows]
 import {type TextStyleProp, type ViewStyleProp} from '../StyleSheet/StyleSheet'; // [Windows]
 
+type TextForwardRef = React.ElementRef<
+  typeof NativeText | typeof NativeVirtualText,
+>;
+
 /**
  * Text is the fundamental component for displaying text.
  *
  * @see https://reactnative.dev/docs/text
  */
-const Text: React.AbstractComponent<
-  TextProps,
-  React.ElementRef<typeof NativeText | typeof NativeVirtualText>,
-> = React.forwardRef((props: TextProps, forwardedRef) => {
-  const {
-    accessible,
-    accessibilityLabel,
-    accessibilityLevel, // Windows
-    accessibilityPosInSet, // Windows
-    accessibilitySetSize, // Windows
-    accessibilityState,
-    allowFontScaling,
-    'aria-busy': ariaBusy,
-    'aria-checked': ariaChecked,
-    'aria-disabled': ariaDisabled,
-    'aria-expanded': ariaExpanded,
-    'aria-label': ariaLabel,
-    'aria-level': ariaLevel, // Windows
-    'aria-posinset': ariaPosinset, // Windows
-    'aria-setsize': ariaSetsize, // Windows
-    'aria-selected': ariaSelected,
-    ellipsizeMode,
-    disabled,
-    id,
-    nativeID,
-    numberOfLines,
-    onLongPress,
-    onPress,
-    onPressIn,
-    onPressOut,
-    onResponderGrant,
-    onResponderMove,
-    onResponderRelease,
-    onResponderTerminate,
-    onResponderTerminationRequest,
-    onStartShouldSetResponder,
-    pressRetentionOffset,
-    selectable,
-    selectionColor,
-    suppressHighlighting,
-    style,
-    ...restProps
-  } = props;
+const Text: React.AbstractComponent<TextProps, TextForwardRef> =
+  React.forwardRef(
+    (
+      {
+        accessible,
+        accessibilityLabel,
+        accessibilityLevel, // Windows
+        accessibilityPosInSet, // Windows
+        accessibilitySetSize, // Windows
+        accessibilityState,
+        allowFontScaling,
+        'aria-busy': ariaBusy,
+        'aria-checked': ariaChecked,
+        'aria-disabled': ariaDisabled,
+        'aria-expanded': ariaExpanded,
+        'aria-label': ariaLabel,
+        'aria-level': ariaLevel, // Windows
+        'aria-posinset': ariaPosinset, // Windows
+        'aria-setsize': ariaSetsize, // Windows
+        'aria-selected': ariaSelected,
+        children,
+        ellipsizeMode,
+        disabled,
+        id,
+        nativeID,
+        numberOfLines,
+        onLongPress,
+        onPress,
+        onPressIn,
+        onPressOut,
+        onResponderGrant,
+        onResponderMove,
+        onResponderRelease,
+        onResponderTerminate,
+        onResponderTerminationRequest,
+        onStartShouldSetResponder,
+        pressRetentionOffset,
+        selectable,
+        selectionColor,
+        suppressHighlighting,
+        style,
+        ...restProps
+      }: TextProps,
+      forwardedRef,
+    ) => {
+      const _accessibilityLabel = ariaLabel ?? accessibilityLabel;
+      const _accessibilityLevel = ariaLevel ?? accessibilityLevel; // Windows
+      const _accessibilityPosInSet = ariaPosinset ?? accessibilityPosInSet; // Windows
+      const _accessibilitySetSize = ariaSetsize ?? accessibilitySetSize; // Windows
 
-  const [isHighlighted, setHighlighted] = useState(false);
+      let _accessibilityState: ?TextProps['accessibilityState'] =
+        accessibilityState;
+      if (
+        ariaBusy != null ||
+        ariaChecked != null ||
+        ariaDisabled != null ||
+        ariaExpanded != null ||
+        ariaSelected != null
+      ) {
+        if (_accessibilityState != null) {
+          _accessibilityState = {
+            busy: ariaBusy ?? _accessibilityState.busy,
+            checked: ariaChecked ?? _accessibilityState.checked,
+            disabled: ariaDisabled ?? _accessibilityState.disabled,
+            expanded: ariaExpanded ?? _accessibilityState.expanded,
+            selected: ariaSelected ?? _accessibilityState.selected,
+          };
+        } else {
+          _accessibilityState = {
+            busy: ariaBusy,
+            checked: ariaChecked,
+            disabled: ariaDisabled,
+            expanded: ariaExpanded,
+            selected: ariaSelected,
+          };
+        }
+      }
 
-  const _accessibilityLabel = ariaLabel ?? accessibilityLabel;
-
-  let _accessibilityState: ?TextProps['accessibilityState'] =
-    accessibilityState;
-  if (
-    ariaBusy != null ||
-    ariaChecked != null ||
-    ariaDisabled != null ||
-    ariaExpanded != null ||
-    ariaSelected != null
-  ) {
-    if (_accessibilityState != null) {
-      _accessibilityState = {
-        busy: ariaBusy ?? _accessibilityState.busy,
-        checked: ariaChecked ?? _accessibilityState.checked,
-        disabled: ariaDisabled ?? _accessibilityState.disabled,
-        expanded: ariaExpanded ?? _accessibilityState.expanded,
-        selected: ariaSelected ?? _accessibilityState.selected,
-      };
-    } else {
-      _accessibilityState = {
-        busy: ariaBusy,
-        checked: ariaChecked,
-        disabled: ariaDisabled,
-        expanded: ariaExpanded,
-        selected: ariaSelected,
+      const _accessibilityStateDisabled = _accessibilityState?.disabled;
+      const _disabled = disabled ?? _accessibilityStateDisabled;
+
+      const isPressable =
+        (onPress != null ||
+          onLongPress != null ||
+          onStartShouldSetResponder != null) &&
+        _disabled !== true;
+
+      // TODO: Move this processing to the view configuration.
+      const _selectionColor =
+        selectionColor == null ? null : processColor(selectionColor);
+
+      let _style = style;
+      if (__DEV__) {
+        if (PressabilityDebug.isEnabled() && onPress != null) {
+          _style = [style, {color: 'magenta'}];
+        }
+      }
+
+      let _numberOfLines = numberOfLines;
+      if (_numberOfLines != null && !(_numberOfLines >= 0)) {
+        if (__DEV__) {
+          console.error(
+            `'numberOfLines' in <Text> must be a non-negative number, received: ${_numberOfLines}. The value will be set to 0.`,
+          );
+        }
+        _numberOfLines = 0;
+      }
+
+      let _selectable = selectable;
+
+      const processedStyle = flattenStyle(_style);
+      if (processedStyle != null) {
+        if (typeof processedStyle.fontWeight === 'number') {
+          // $FlowFixMe[cannot-write]
+          processedStyle.fontWeight = processedStyle.fontWeight.toString();
+        }
+
+        if (processedStyle.userSelect != null) {
+          _selectable = userSelectToSelectableMap[processedStyle.userSelect];
+          // $FlowFixMe[cannot-write]
+          delete processedStyle.userSelect;
+        }
+
+        if (processedStyle.verticalAlign != null) {
+          // $FlowFixMe[cannot-write]
+          processedStyle.textAlignVertical =
+            verticalAlignToTextAlignVerticalMap[processedStyle.verticalAlign];
+          // $FlowFixMe[cannot-write]
+          delete processedStyle.verticalAlign;
+        }
+      }
+
+      const _nativeID = id ?? nativeID;
+
+      const hasTextAncestor = useContext(TextAncestor);
+      if (hasTextAncestor) {
+        if (isPressable) {
+          return (
+            <NativePressableVirtualText
+              ref={forwardedRef}
+              textProps={{
+                ...restProps,
+                accessibilityLabel: _accessibilityLabel,
+                accessibilityState: _accessibilityState,
+                accessibilityLevel: _accessibilityLevel, // Windows
+                accessibilityPosInSet: _accessibilityPosInSet, // Windows
+                accessibilitySetSize: _accessibilitySetSize, // Windows
+                nativeID: _nativeID,
+                numberOfLines: _numberOfLines,
+                selectable: _selectable,
+                selectionColor: _selectionColor,
+                style: processedStyle,
+                disabled: disabled,
+                children,
+              }}
+              textPressabilityProps={{
+                onLongPress,
+                onPress,
+                onPressIn,
+                onPressOut,
+                onResponderGrant,
+                onResponderMove,
+                onResponderRelease,
+                onResponderTerminate,
+                onResponderTerminationRequest,
+                onStartShouldSetResponder,
+                pressRetentionOffset,
+                suppressHighlighting,
+              }}
+            />
+          );
+        }
+
+        return (
+          <NativeVirtualText
+            {...restProps}
+            accessibilityLabel={_accessibilityLabel}
+            accessibilityState={_accessibilityState}
+            accessibilityLevel={_accessibilityLevel} // Windows
+            accessibilityPosInSet={_accessibilityPosInSet} // Windows
+            accessibilitySetSize={_accessibilitySetSize} // Windows
+            isHighlighted={false}
+            isPressable={false}
+            nativeID={_nativeID}
+            numberOfLines={_numberOfLines}
+            ref={forwardedRef}
+            selectable={_selectable}
+            selectionColor={_selectionColor}
+            style={processedStyle}
+            disabled={disabled}>
+            {children}
+          </NativeVirtualText>
+        );
+      }
+
+      // If the disabled prop and accessibilityState.disabled are out of sync but not both in
+      // falsy states we need to update the accessibilityState object to use the disabled prop.
+      if (
+        _disabled !== _accessibilityStateDisabled &&
+        ((_disabled != null && _disabled !== false) ||
+          (_accessibilityStateDisabled != null &&
+            _accessibilityStateDisabled !== false))
+      ) {
+        _accessibilityState = {..._accessibilityState, disabled: _disabled};
+      }
+
+      const _accessible = Platform.select({
+        ios: accessible !== false,
+        android:
+          accessible == null
+            ? onPress != null || onLongPress != null
+            : accessible,
+        default: accessible !== false, // [Windows]
+      });
+
+      let nativeText = null;
+      if (isPressable) {
+        nativeText = (
+          <NativePressableText
+            ref={forwardedRef}
+            textProps={{
+              ...restProps,
+              accessibilityLabel: _accessibilityLabel,
+              accessibilityState: _accessibilityState,
+              accessibilityLevel: _accessibilityLevel, // Windows
+              accessibilityPosInSet: _accessibilityPosInSet, // Windows
+              accessibilitySetSize: _accessibilitySetSize, // Windows
+              accessible: _accessible,
+              allowFontScaling: allowFontScaling !== false,
+              disabled: _disabled,
+              ellipsizeMode: ellipsizeMode ?? 'tail',
+              nativeID: _nativeID,
+              numberOfLines: _numberOfLines,
+              selectable: _selectable,
+              selectionColor: _selectionColor,
+              style: processedStyle,
+              children,
+            }}
+            textPressabilityProps={{
+              onLongPress,
+              onPress,
+              onPressIn,
+              onPressOut,
+              onResponderGrant,
+              onResponderMove,
+              onResponderRelease,
+              onResponderTerminate,
+              onResponderTerminationRequest,
+              onStartShouldSetResponder,
+              pressRetentionOffset,
+              suppressHighlighting,
+            }}
+          />
+        );
+      } else {
+        nativeText = (
+          <NativeText
+            {...restProps}
+            accessibilityLabel={_accessibilityLabel}
+            accessibilityState={_accessibilityState}
+            accessibilityLevel={_accessibilityLevel} // Windows
+            accessibilityPosInSet={_accessibilityPosInSet} // Windows
+            accessibilitySetSize={_accessibilitySetSize} // Windows
+            accessible={_accessible}
+            allowFontScaling={allowFontScaling !== false}
+            disabled={_disabled}
+            ellipsizeMode={ellipsizeMode ?? 'tail'}
+            isHighlighted={false}
+            nativeID={_nativeID}
+            numberOfLines={_numberOfLines}
+            ref={forwardedRef}
+            selectable={_selectable}
+            selectionColor={_selectionColor}
+            style={processedStyle}>
+            {children}
+          </NativeText>
+        );
+      }
+
+      // [Windows
+      // $FlowFixMe[unclear-type]
+      let styleProps: ViewStyleProp = (style: any); // Flow style type casting
+      if (
+        global.RN$Bridgeless !== true && // [Windows] Fabric text handles borders, but on paper we need to wrap it in an extra view
+        styleProps &&
+        styleProps.borderColor != null &&
+        (styleProps.borderWidth != null ||
+          styleProps.borderBottomWidth != null ||
+          styleProps.borderEndWidth != null ||
+          styleProps.borderLeftWidth != null ||
+          styleProps.borderRightWidth != null ||
+          styleProps.borderStartWidth != null ||
+          styleProps.borderTopWidth != null)
+      ) {
+        let textStyleProps = Array.isArray(styleProps)
+        ? // $FlowFixMe[underconstrained-implicit-instantiation]
+          flattenStyle(styleProps)
+        : styleProps;
+        let {
+          // $FlowFixMe[prop-missing]
+          margin,
+          // $FlowFixMe[prop-missing]
+          marginBottom,
+          // $FlowFixMe[prop-missing]
+          marginEnd,
+          // $FlowFixMe[prop-missing]
+          marginHorizontal,
+          // $FlowFixMe[prop-missing]
+          marginLeft,
+          // $FlowFixMe[prop-missing]
+          marginRight,
+          // $FlowFixMe[prop-missing]
+          marginStart,
+          // $FlowFixMe[prop-missing]
+          marginTop,
+          // $FlowFixMe[prop-missing]
+          marginVertical,
+          // $FlowFixMe[prop-missing]
+          padding,
+          // $FlowFixMe[prop-missing]
+          paddingBottom,
+          // $FlowFixMe[prop-missing]
+          paddingEnd,
+          // $FlowFixMe[prop-missing]
+          paddingHorizontal,
+          // $FlowFixMe[prop-missing]
+          paddingLeft,
+          // $FlowFixMe[prop-missing]
+          paddingRight,
+          // $FlowFixMe[prop-missing]
+          paddingStart,
+          // $FlowFixMe[prop-missing]
+          paddingTop,
+          // $FlowFixMe[prop-missing]
+          paddingVertical,
+          // $FlowFixMe[not-an-object]
+          ...rest
+        } = textStyleProps != null ? textStyleProps : {}
+      return (
+        <View style={styleProps}><TextAncestor.Provider value={true}>{nativeText}</TextAncestor.Provider></View>
+      );
       };
-    }
-  }
+      // Windows]
 
-  const _accessibilityStateDisabled = _accessibilityState?.disabled;
-  const _disabled = disabled ?? _accessibilityStateDisabled;
+      if (children == null) {
+        return nativeText;
+      }
 
-  const isPressable =
-    (onPress != null ||
-      onLongPress != null ||
-      onStartShouldSetResponder != null) &&
-    _disabled !== true;
+      // If the children do not contain a JSX element it would not be possible to have a
+      // nested `Text` component so we can skip adding the `TextAncestor` context wrapper
+      // which has a performance overhead. Since we do this for performance reasons we need
+      // to keep the check simple to avoid regressing overall perf. For this reason the
+      // `children.length` constant is set to `3`, this should be a reasonable tradeoff
+      // to capture the majority of `Text` uses but also not make this check too expensive.
+      /*
+      if (Array.isArray(children) && children.length <= 3) {
+        let hasNonTextChild = false;
+        for (let child of children) {
+          if (child != null && typeof child === 'object') {
+            hasNonTextChild = true;
+            break;
+          }
+        }
+        if (!hasNonTextChild) {
+          return nativeText;
+        }
+      } else if (typeof children !== 'object') {
+        return nativeText;
+      }
+      */
 
-  const initialized = useLazyInitialization(isPressable);
-  const config = useMemo(() => {
-    if (!initialized) {
-      return null;
-    }
+      return (
+        <TextAncestor.Provider value={true}>{nativeText}</TextAncestor.Provider>
+      );
+    },
+  );
+
+Text.displayName = 'Text';
 
+type TextPressabilityProps = $ReadOnly<{
+  onLongPress?: ?(event: PressEvent) => mixed,
+  onPress?: ?(event: PressEvent) => mixed,
+  onPressIn?: ?(event: PressEvent) => mixed,
+  onPressOut?: ?(event: PressEvent) => mixed,
+  onResponderGrant?: ?(event: PressEvent) => void,
+  onResponderMove?: ?(event: PressEvent) => void,
+  onResponderRelease?: ?(event: PressEvent) => void,
+  onResponderTerminate?: ?(event: PressEvent) => void,
+  onResponderTerminationRequest?: ?() => boolean,
+  onStartShouldSetResponder?: ?() => boolean,
+  pressRetentionOffset?: ?PressRetentionOffset,
+  suppressHighlighting?: ?boolean,
+}>;
+
+/**
+ * Hook that handles setting up Pressability of Text components.
+ *
+ * NOTE: This hook is relatively expensive so it should only be used absolutely necessary.
+ */
+function useTextPressability({
+  onLongPress,
+  onPress,
+  onPressIn,
+  onPressOut,
+  onResponderGrant,
+  onResponderMove,
+  onResponderRelease,
+  onResponderTerminate,
+  onResponderTerminationRequest,
+  onStartShouldSetResponder,
+  pressRetentionOffset,
+  suppressHighlighting,
+}: TextPressabilityProps) {
+  const [isHighlighted, setHighlighted] = useState(false);
+
+  // Setup pressability config and wrap callbacks needs to track the highlight state.
+  const config = useMemo(() => {
     let _onPressIn = onPressIn;
     let _onPressOut = onPressOut;
 
@@ -140,7 +470,7 @@ const Text: React.AbstractComponent<
     }
 
     return {
-      disabled: !isPressable,
+      disabled: false,
       pressRectOffset: pressRetentionOffset,
       onLongPress,
       onPress,
@@ -148,8 +478,6 @@ const Text: React.AbstractComponent<
       onPressOut: _onPressOut,
     };
   }, [
-    initialized,
-    isPressable,
     pressRetentionOffset,
     onLongPress,
     onPress,
@@ -158,7 +486,10 @@ const Text: React.AbstractComponent<
     suppressHighlighting,
   ]);
 
+  // Init the pressability class
   const eventHandlers = usePressability(config);
+
+  // Create NativeText event handlers which proxy events to pressability
   const eventHandlersForText = useMemo(
     () =>
       eventHandlers == null
@@ -209,222 +540,67 @@ const Text: React.AbstractComponent<
     ],
   );
 
-  // TODO: Move this processing to the view configuration.
-  const _selectionColor =
-    selectionColor == null ? null : processColor(selectionColor);
-
-  let _style = style;
-  if (__DEV__) {
-    if (PressabilityDebug.isEnabled() && onPress != null) {
-      _style = [style, {color: 'magenta'}];
-    }
-  }
+  // Return the highlight state and NativeText event handlers
+  return useMemo(
+    () => [isHighlighted, eventHandlersForText],
+    [isHighlighted, eventHandlersForText],
+  );
+}
 
-  let _numberOfLines = numberOfLines;
-  if (_numberOfLines != null && !(_numberOfLines >= 0)) {
-    if (__DEV__) {
-      console.error(
-        `'numberOfLines' in <Text> must be a non-negative number, received: ${_numberOfLines}. The value will be set to 0.`,
-      );
-    }
-    _numberOfLines = 0;
-  }
-
-  let _selectable = selectable;
-  const processedStyle = flattenStyle(_style);
-  if (processedStyle != null) {
-    if (typeof processedStyle.fontWeight === 'number') {
-      // $FlowFixMe[cannot-write]
-      processedStyle.fontWeight = processedStyle.fontWeight.toString();
-    }
+type NativePressableTextProps = $ReadOnly<{
+  textProps: NativeTextProps,
+  textPressabilityProps: TextPressabilityProps,
+}>;
 
-    if (processedStyle.userSelect != null) {
-      _selectable = userSelectToSelectableMap[processedStyle.userSelect];
-      // $FlowFixMe[cannot-write]
-      delete processedStyle.userSelect;
-    }
+/**
+ * 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: React.AbstractComponent<
+  NativePressableTextProps,
+  TextForwardRef,
+> = React.forwardRef(({textProps, textPressabilityProps}, forwardedRef) => {
+  const [isHighlighted, eventHandlersForText] = useTextPressability(
+    textPressabilityProps,
+  );
 
-    if (processedStyle.verticalAlign != null) {
-      // $FlowFixMe[cannot-write]
-      processedStyle.textAlignVertical =
-        verticalAlignToTextAlignVerticalMap[processedStyle.verticalAlign];
-      // $FlowFixMe[cannot-write]
-      delete processedStyle.verticalAlign;
-    }
-  }
-
-  const _nativeID = id ?? nativeID;
-
-  // If the disabled prop and accessibilityState.disabled are out of sync but not both in
-  // falsy states we need to update the accessibilityState object to use the disabled prop.
-  if (
-    _disabled !== _accessibilityStateDisabled &&
-    ((_disabled != null && _disabled !== false) ||
-      (_accessibilityStateDisabled != null &&
-        _accessibilityStateDisabled !== false))
-  ) {
-    _accessibilityState = {..._accessibilityState, disabled: _disabled};
-  }
-
-  const _accessible = Platform.select({
-    ios: accessible !== false,
-    android:
-      accessible == null ? onPress != null || onLongPress != null : accessible,
-    default: accessible !== false,
-  });
-
-  const hasTextAncestor = useContext(TextAncestor);
-  if (hasTextAncestor) {
-    return (
-      <NativeVirtualText
-        {...restProps}
-        {...eventHandlersForText}
-        accessibilityLabel={_accessibilityLabel}
-        accessibilityState={_accessibilityState}
-        accessibilityLevel={ariaLevel ?? accessibilityLevel} // Windows
-        accessibilityPosInSet={ariaPosinset ?? accessibilityPosInSet} // Windows
-        accessibilitySetSize={ariaSetsize ?? accessibilitySetSize} // Windows
-        isHighlighted={isHighlighted}
-        isPressable={isPressable}
-        nativeID={_nativeID}
-        numberOfLines={_numberOfLines}
-        ref={forwardedRef}
-        selectable={_selectable}
-        selectionColor={_selectionColor}
-        style={processedStyle}
-      />
-    );
-  // [Windows] Following else statement forked due to PR #5740
-  } else {
-    let styleProps: ViewStyleProp = (style: any);
-    if (
-      global.RN$Bridgeless !== true && // [Windows] Fabric text handles borders, but on paper we need to wrap it in an extra view
-      styleProps &&
-      styleProps.borderColor &&
-      (styleProps.borderWidth ||
-        styleProps.borderBottomWidth ||
-        styleProps.borderEndWidth ||
-        styleProps.borderLeftWidth ||
-        styleProps.borderRightWidth ||
-        styleProps.borderStartWidth ||
-        styleProps.borderTopWidth)
-    ) {
-      let textStyleProps = Array.isArray(styleProps)
-        ? // $FlowFixMe[underconstrained-implicit-instantiation]
-          flattenStyle(styleProps)
-        : styleProps;
-      let {
-        // $FlowFixMe[prop-missing]
-        margin,
-        // $FlowFixMe[prop-missing]
-        marginBottom,
-        // $FlowFixMe[prop-missing]
-        marginEnd,
-        // $FlowFixMe[prop-missing]
-        marginHorizontal,
-        // $FlowFixMe[prop-missing]
-        marginLeft,
-        // $FlowFixMe[prop-missing]
-        marginRight,
-        // $FlowFixMe[prop-missing]
-        marginStart,
-        // $FlowFixMe[prop-missing]
-        marginTop,
-        // $FlowFixMe[prop-missing]
-        marginVertical,
-        // $FlowFixMe[prop-missing]
-        padding,
-        // $FlowFixMe[prop-missing]
-        paddingBottom,
-        // $FlowFixMe[prop-missing]
-        paddingEnd,
-        // $FlowFixMe[prop-missing]
-        paddingHorizontal,
-        // $FlowFixMe[prop-missing]
-        paddingLeft,
-        // $FlowFixMe[prop-missing]
-        paddingRight,
-        // $FlowFixMe[prop-missing]
-        paddingStart,
-        // $FlowFixMe[prop-missing]
-        paddingTop,
-        // $FlowFixMe[prop-missing]
-        paddingVertical,
-        // $FlowFixMe[not-an-object]
-        ...rest
-      } = textStyleProps != null ? textStyleProps : {};
-
-      let {style, ...textPropsLessStyle} = props;
-      return (
-        <View style={styleProps}>
-          <TextAncestor.Provider value={true}>
-            <NativeText
-              {...textPropsLessStyle}
-              {...eventHandlersForText}
-              accessibilityLabel={_accessibilityLabel}
-              accessibilityLevel={ariaLevel ?? accessibilityLevel} // Windows
-              accessibilityPosInSet={ariaPosinset ?? accessibilityPosInSet} // Windows
-              accessibilitySetSize={ariaSetsize ?? accessibilitySetSize} // Windows
-              accessibilityState={_accessibilityState}
-              accessible={_accessible}
-              allowFontScaling={allowFontScaling !== false}
-              disabled={_disabled}
-              ellipsizeMode={ellipsizeMode ?? 'tail'}
-              isHighlighted={isHighlighted}
-              nativeID={_nativeID}
-              numberOfLines={_numberOfLines}
-              ref={forwardedRef}
-              selectable={_selectable}
-              selectionColor={_selectionColor}
-              style={processedStyle}
-            />
-          </TextAncestor.Provider>
-        </View>
-      );
-    } else {
-      return (
-        <TextAncestor.Provider value={true}>
-          <NativeText
-            {...restProps}
-            {...eventHandlersForText}
-            accessibilityLabel={_accessibilityLabel}
-            accessibilityLevel={ariaLevel ?? accessibilityLevel} // Windows
-            accessibilityPosInSet={ariaPosinset ?? accessibilityPosInSet} // Windows
-            accessibilitySetSize={ariaSetsize ?? accessibilitySetSize} // Windows
-            accessibilityState={_accessibilityState}
-            accessible={_accessible}
-            allowFontScaling={allowFontScaling !== false}
-            disabled={_disabled}
-            ellipsizeMode={ellipsizeMode ?? 'tail'}
-            isHighlighted={isHighlighted}
-            nativeID={_nativeID}
-            numberOfLines={_numberOfLines}
-            ref={forwardedRef}
-            selectable={_selectable}
-            selectionColor={_selectionColor}
-            style={processedStyle}
-          />
-        </TextAncestor.Provider>
-      );
-    }
-  }
-  // [Windows #5740]
+  return (
+    <NativeVirtualText
+      {...textProps}
+      {...eventHandlersForText}
+      isHighlighted={isHighlighted}
+      isPressable={true}
+      ref={forwardedRef}
+    />
+  );
 });
 
-Text.displayName = 'Text';
-
 /**
- * Returns false until the first time `newValue` is true, after which this will
- * always return true. This is necessary to lazily initialize `Pressability` so
- * we do not eagerly create one for every pressable `Text` component.
+ * Wrap the 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.
  */
-function useLazyInitialization(newValue: boolean): boolean {
-  const [oldValue, setValue] = useState(newValue);
-  if (!oldValue && newValue) {
-    setValue(newValue);
-  }
-  return oldValue;
-}
+const NativePressableText: React.AbstractComponent<
+  NativePressableTextProps,
+  TextForwardRef,
+> = React.forwardRef(({textProps, textPressabilityProps}, forwardedRef) => {
+  const [isHighlighted, eventHandlersForText] = useTextPressability(
+    textPressabilityProps,
+  );
+
+  return (
+    <NativeText
+      {...textProps}
+      {...eventHandlersForText}
+      isHighlighted={isHighlighted}
+      isPressable={true}
+      ref={forwardedRef}
+    />
+  );
+});
 
 const userSelectToSelectableMap = {
   auto: true,