@office-iss/react-native-win32 0.0.0-canary.31 → 0.0.0-canary.310

package/Libraries/Text/Text.win32.js

@@ -0,0 +1,1001 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import type {TextStyleProp} from '../StyleSheet/StyleSheet';
+import type {____TextStyle_Internal as TextStyleInternal} from '../StyleSheet/StyleSheetTypes';
+import type {GestureResponderEvent} from '../Types/CoreEventTypes';
+import type {NativeTextProps} from './TextNativeComponent';
+import type {PressRetentionOffset, TextProps} from './TextProps';
+
+import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
+import * as PressabilityDebug from '../Pressability/PressabilityDebug';
+import usePressability from '../Pressability/usePressability';
+import flattenStyle from '../StyleSheet/flattenStyle';
+import processColor from '../StyleSheet/processColor';
+import Platform from '../Utilities/Platform';
+import TextAncestorContext from './TextAncestorContext';
+import {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,
+>;
+
+/**
+ * Text is the fundamental component for displaying text.
+ *
+ * @see https://reactnative.dev/docs/text
+ */
+let _TextImpl;
+if (ReactNativeFeatureFlags.reduceDefaultPropsInText()) {
+  const TextImplNoDefaultProps: component(
+    ref?: React.RefSetter<TextForwardRef>,
+    ...props: TextProps
+  ) = ({
+    ref: forwardedRef,
+    accessible,
+    accessibilityLabel,
+    accessibilityRole,
+    accessibilityState,
+    allowFontScaling,
+    'aria-busy': ariaBusy,
+    'aria-checked': ariaChecked,
+    'aria-disabled': ariaDisabled,
+    'aria-expanded': ariaExpanded,
+    'aria-hidden': ariaHidden,
+    'aria-label': ariaLabel,
+    'aria-selected': ariaSelected,
+    // #[ Win32
+    'aria-level': ariaLevel,
+    'aria-multiselectable': ariaMultiselectable,
+    'aria-posinset': ariaPosinset,
+    'aria-required': ariaRequired,
+    'aria-setsize': ariaSetsize,
+    'aria-controls': ariaControls,
+    'aria-describedby': ariaDescribedBy,
+    'aria-description': ariaDescription,
+    accessibilityLevel,
+    accessibilityPositionInSet,
+    accessibilitySetSize,
+    accessibilityControls,
+    accessibilityDescribedBy,
+    accessibilityDescription,
+    // #] Win32
+    children,
+    ellipsizeMode,
+    disabled,
+    id,
+    nativeID,
+    numberOfLines,
+    onLongPress,
+    onPress,
+    onPressIn,
+    onPressOut,
+    onResponderGrant,
+    onResponderMove,
+    onResponderRelease,
+    onResponderTerminate,
+    onResponderTerminationRequest,
+    onStartShouldSetResponder,
+    pressRetentionOffset,
+    role,
+    selectable,
+    selectionColor,
+    suppressHighlighting,
+    style,
+    ...restProps
+  }: {
+    ref?: React.RefSetter<TextForwardRef>,
+    ...TextProps,
+  }) => {
+    const processedProps = restProps as {
+      ...NativeTextProps,
+    };
+    const _accessibilityLabel = ariaLabel ?? accessibilityLabel;
+    // #Win32 [
+    const _accessibilityControls = ariaControls ?? accessibilityControls;
+    const _accessibilityDescribedBy =
+      ariaDescribedBy ?? accessibilityDescribedBy;
+    const _accessibilityDescription =
+      ariaDescription ?? accessibilityDescription;
+    const _accessibilityLevel = ariaLevel ?? accessibilityLevel;
+    const _accessibilityPositionInSet =
+      ariaPosinset ?? accessibilityPositionInSet;
+    const _accessibilitySetSize = ariaSetsize ?? accessibilitySetSize;
+    // ] #Win32
+
+    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,
+          // #Win32 [
+          multiselectable:
+            ariaMultiselectable ?? accessibilityState?.multiselectable,
+          required: ariaRequired ?? accessibilityState?.required,
+          // ] #Win32
+          selected: ariaSelected ?? _accessibilityState.selected,
+        };
+      } else {
+        _accessibilityState = {
+          busy: ariaBusy,
+          checked: ariaChecked,
+          disabled: ariaDisabled,
+          expanded: ariaExpanded,
+          // #Win32 [
+          multiselectable: ariaMultiselectable,
+          required: ariaRequired,
+          // ] #Win32
+          selected: ariaSelected,
+        };
+      }
+    }
+
+    const _accessibilityStateDisabled = _accessibilityState?.disabled;
+    const _disabled = disabled ?? _accessibilityStateDisabled;
+
+    // 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 (
+      _accessibilityState != null &&
+      _disabled !== _accessibilityStateDisabled &&
+      ((_disabled != null && _disabled !== false) ||
+        (_accessibilityStateDisabled != null &&
+          _accessibilityStateDisabled !== false))
+    ) {
+      _accessibilityState.disabled = _disabled;
+    }
+
+    if (ariaHidden !== undefined) {
+      processedProps.accessibilityElementsHidden = ariaHidden;
+      if (ariaHidden === true) {
+        processedProps.importantForAccessibility = 'no-hide-descendants';
+      }
+    }
+
+    const _accessible = Platform.select({
+      ios: accessible !== false,
+      android:
+        accessible == null
+          ? onPress != null || onLongPress != null
+          : accessible,
+      default: accessible !== false, // [Windows #13996 - default value is accessible !== false]
+    });
+
+    const isPressable =
+      (onPress != null ||
+        onLongPress != null ||
+        onStartShouldSetResponder != null) &&
+      _disabled !== true;
+
+    const shouldUseLinkRole =
+      ReactNativeFeatureFlags.shouldUseLinkRoleForPressableText() &&
+      isPressable &&
+      accessibilityRole == null &&
+      role == null;
+
+    const _accessibilityRole =
+      accessibilityRole ?? (shouldUseLinkRole ? 'link' : undefined);
+
+    const _role = shouldUseLinkRole ? undefined : role;
+
+    // TODO: Move this processing to the view configuration.
+    const _selectionColor =
+      selectionColor != null ? processColor(selectionColor) : undefined;
+
+    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;
+
+    let processedStyle = flattenStyle<TextStyleProp>(_style);
+    if (processedStyle != null) {
+      let overrides: ?{...TextStyleInternal} = null;
+      if (typeof processedStyle.fontWeight === 'number') {
+        overrides = overrides || ({}: {...TextStyleInternal});
+        overrides.fontWeight =
+          // $FlowFixMe[incompatible-type]
+          (String(processedStyle.fontWeight): TextStyleInternal['fontWeight']);
+      }
+
+      if (processedStyle.userSelect != null) {
+        _selectable = userSelectToSelectableMap[processedStyle.userSelect];
+        overrides = overrides || ({}: {...TextStyleInternal});
+        overrides.userSelect = undefined;
+      }
+
+      if (processedStyle.verticalAlign != null) {
+        overrides = overrides || ({}: {...TextStyleInternal});
+        overrides.textAlignVertical =
+          verticalAlignToTextAlignVerticalMap[processedStyle.verticalAlign];
+        overrides.verticalAlign = undefined;
+      }
+
+      if (overrides != null) {
+        // $FlowFixMe[incompatible-type]
+        _style = [_style, overrides];
+      }
+    }
+
+    const _nativeID = id ?? nativeID;
+
+    if (_accessibilityLabel !== undefined) {
+      processedProps.accessibilityLabel = _accessibilityLabel;
+    }
+    if (_accessibilityRole !== undefined) {
+      processedProps.accessibilityRole = _accessibilityRole;
+    }
+    if (_accessibilityState !== undefined) {
+      processedProps.accessibilityState = _accessibilityState;
+    }
+    if (_nativeID !== undefined) {
+      processedProps.nativeID = _nativeID;
+    }
+    if (_numberOfLines !== undefined) {
+      processedProps.numberOfLines = _numberOfLines;
+    }
+    if (_selectable !== undefined) {
+      processedProps.selectable = _selectable;
+    }
+    if (_style !== undefined) {
+      processedProps.style = _style;
+    }
+    if (_selectionColor !== undefined) {
+      processedProps.selectionColor = _selectionColor;
+    }
+    if (_role !== undefined) {
+      processedProps.role = _role;
+    }
+
+    // [Windows accessibility properties
+    if (_accessibilityControls !== undefined) {
+      processedProps.accessibilityControls = _accessibilityControls;
+    }
+
+    if (_accessibilityDescribedBy !== undefined) {
+      processedProps.accessibilityDescribedBy = _accessibilityDescribedBy;
+    }
+
+    if (_accessibilityDescription !== undefined) {
+      processedProps.accessibilityDescription = _accessibilityDescription;
+    }
+
+    if (_accessibilityLevel !== undefined) {
+      processedProps.accessibilityLevel = _accessibilityLevel;
+    }
+    if (_accessibilityPositionInSet !== undefined) {
+      processedProps.accessibilityPositionInSet = _accessibilityPositionInSet;
+    }
+    if (_accessibilitySetSize !== undefined) {
+      processedProps.accessibilitySetSize = _accessibilitySetSize;
+    }
+    // ]
+
+    let textPressabilityProps: ?TextPressabilityProps;
+    if (isPressable) {
+      textPressabilityProps = {
+        onLongPress,
+        onPress,
+        onPressIn,
+        onPressOut,
+        onResponderGrant,
+        onResponderMove,
+        onResponderRelease,
+        onResponderTerminate,
+        onResponderTerminationRequest,
+        onStartShouldSetResponder,
+        pressRetentionOffset,
+        suppressHighlighting,
+      };
+    }
+
+    const hasTextAncestor = useContext(TextAncestorContext);
+    if (hasTextAncestor) {
+      processedProps.disabled = disabled;
+      processedProps.children = children;
+      if (isPressable) {
+        return (
+          <NativePressableVirtualText
+            ref={forwardedRef}
+            textProps={processedProps}
+            textPressabilityProps={textPressabilityProps ?? {}}
+          />
+        );
+      }
+      return <NativeVirtualText {...processedProps} ref={forwardedRef} />;
+    }
+
+    let nativeText = null;
+
+    processedProps.accessible = _accessible;
+    processedProps.allowFontScaling = allowFontScaling !== false;
+    processedProps.disabled = _disabled;
+    processedProps.ellipsizeMode = ellipsizeMode ?? 'tail';
+    processedProps.children = children;
+
+    if (isPressable) {
+      nativeText = (
+        <NativePressableText
+          ref={forwardedRef}
+          textProps={processedProps}
+          textPressabilityProps={textPressabilityProps ?? {}}
+        />
+      );
+    } else {
+      nativeText = <NativeText {...processedProps} ref={forwardedRef} />;
+    }
+
+    if (children == null) {
+      return nativeText;
+    }
+
+    // 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 `TextAncestorContext` 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;
+    }
+
+    return <TextAncestorContext value={true}>{nativeText}</TextAncestorContext>;
+  };
+  _TextImpl = TextImplNoDefaultProps;
+} else {
+  const TextImplLegacy: component(
+    ref?: React.RefSetter<TextForwardRef>,
+    ...props: TextProps
+  ) = ({
+    ref: forwardedRef,
+    accessible,
+    accessibilityElementsHidden,
+    importantForAccessibility,
+    accessibilityLabel,
+    accessibilityRole,
+    accessibilityState,
+    allowFontScaling,
+    'aria-busy': ariaBusy,
+    'aria-checked': ariaChecked,
+    'aria-disabled': ariaDisabled,
+    'aria-expanded': ariaExpanded,
+    'aria-hidden': ariaHidden,
+    'aria-label': ariaLabel,
+    'aria-selected': ariaSelected,
+    //#[ Win32
+    'aria-controls': ariaControls,
+    'aria-describedby': ariaDescribedBy,
+    'aria-description': ariaDescription,
+    'aria-level': ariaLevel,
+    'aria-multiselectable': ariaMultiselectable,
+    'aria-posinset': ariaPosinset,
+    'aria-required': ariaRequired,
+    'aria-setsize': ariaSetsize,
+    accessibilityLevel,
+    accessibilityPositionInSet,
+    accessibilitySetSize,
+    accessibilityControls,
+    accessibilityDescribedBy,
+    accessibilityDescription,
+    // #] Win32
+    children,
+    ellipsizeMode,
+    disabled,
+    id,
+    nativeID,
+    numberOfLines,
+    onLongPress,
+    onPress,
+    onPressIn,
+    onPressOut,
+    onResponderGrant,
+    onResponderMove,
+    onResponderRelease,
+    onResponderTerminate,
+    onResponderTerminationRequest,
+    onStartShouldSetResponder,
+    pressRetentionOffset,
+    role,
+    selectable,
+    selectionColor,
+    suppressHighlighting,
+    style,
+    ...restProps
+  }: {
+    ref?: React.RefSetter<TextForwardRef>,
+    ...TextProps,
+  }) => {
+    const _accessibilityLabel = ariaLabel ?? accessibilityLabel;
+    //#[ Win32
+    const _accessibilityControls = ariaControls ?? accessibilityControls;
+    const _accessibilityDescribedBy =
+      ariaDescribedBy ?? accessibilityDescribedBy;
+    const _accessibilityDescription =
+      ariaDescription ?? accessibilityDescription;
+    const _accessibilityLevel = ariaLevel ?? accessibilityLevel;
+    const _accessibilityPositionInSet =
+      ariaPosinset ?? accessibilityPositionInSet;
+    const _accessibilitySetSize = ariaSetsize ?? accessibilitySetSize;
+    //#] Win32
+
+    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,
+          //#[Win32
+          multiselectable:
+            ariaMultiselectable ?? accessibilityState?.multiselectable,
+          required: ariaRequired ?? accessibilityState?.required,
+          // #] Win32
+          selected: ariaSelected ?? _accessibilityState.selected,
+        };
+      } else {
+        _accessibilityState = {
+          busy: ariaBusy,
+          checked: ariaChecked,
+          disabled: ariaDisabled,
+          expanded: ariaExpanded,
+          // #[ Win32
+          multiselectable: ariaMultiselectable,
+          required: ariaRequired,
+          // #]win32
+          selected: ariaSelected,
+        };
+      }
+    }
+
+    const _accessibilityStateDisabled = _accessibilityState?.disabled;
+    const _disabled = disabled ?? _accessibilityStateDisabled;
+
+    let _accessibilityElementsHidden =
+      ariaHidden ?? accessibilityElementsHidden;
+    let _importantForAccessibility = importantForAccessibility;
+    if (ariaHidden === true) {
+      _importantForAccessibility = 'no-hide-descendants';
+    }
+
+    const isPressable =
+      (onPress != null ||
+        onLongPress != null ||
+        onStartShouldSetResponder != null) &&
+      _disabled !== true;
+
+    const shouldUseLinkRole =
+      ReactNativeFeatureFlags.shouldUseLinkRoleForPressableText() &&
+      isPressable &&
+      accessibilityRole == null &&
+      role == null;
+
+    const _accessibilityRole =
+      accessibilityRole ?? (shouldUseLinkRole ? 'link' : undefined);
+
+    const _role = shouldUseLinkRole ? undefined : role;
+
+    // TODO: Move this processing to the view configuration.
+    const _selectionColor =
+      selectionColor != null ? processColor(selectionColor) : undefined;
+
+    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;
+
+    let processedStyle = flattenStyle<TextStyleProp>(_style);
+    if (processedStyle != null) {
+      let overrides: ?{...TextStyleInternal} = null;
+      if (typeof processedStyle.fontWeight === 'number') {
+        overrides = overrides || ({}: {...TextStyleInternal});
+        overrides.fontWeight =
+          // $FlowFixMe[incompatible-type]
+          (processedStyle.fontWeight.toString(): TextStyleInternal['fontWeight']);
+      }
+
+      if (processedStyle.userSelect != null) {
+        _selectable = userSelectToSelectableMap[processedStyle.userSelect];
+        overrides = overrides || ({}: {...TextStyleInternal});
+        overrides.userSelect = undefined;
+      }
+
+      if (processedStyle.verticalAlign != null) {
+        overrides = overrides || ({}: {...TextStyleInternal});
+        overrides.textAlignVertical =
+          verticalAlignToTextAlignVerticalMap[processedStyle.verticalAlign];
+        overrides.verticalAlign = undefined;
+      }
+
+      if (overrides != null) {
+        // $FlowFixMe[incompatible-type]
+        _style = [_style, overrides];
+      }
+    }
+
+    const _nativeID = id ?? nativeID;
+
+    const hasTextAncestor = useContext(TextAncestorContext);
+    if (hasTextAncestor) {
+      if (isPressable) {
+        return (
+          <NativePressableVirtualText
+            ref={forwardedRef}
+            textProps={{
+              ...restProps,
+              accessibilityElementsHidden: _accessibilityElementsHidden,
+              accessibilityLabel: _accessibilityLabel,
+              accessibilityRole: _accessibilityRole,
+              accessibilityState: _accessibilityState,
+              importantForAccessibility: _importantForAccessibility,
+              // #[ Win32
+              accessibilityControls: _accessibilityControls,
+              accessibilityDescribedBy: _accessibilityDescribedBy,
+              accessibilityDescription: _accessibilityDescription,
+              accessibilityLevel: _accessibilityLevel,
+              accessibilityPositionInSet: _accessibilityPositionInSet,
+              accessibilitySetSize: _accessibilitySetSize,
+              // #] Win32
+              nativeID: _nativeID,
+              numberOfLines: _numberOfLines,
+              selectable: _selectable,
+              selectionColor: _selectionColor,
+              style: _style,
+              disabled: disabled,
+              role: _role,
+              children,
+            }}
+            textPressabilityProps={{
+              onLongPress,
+              onPress,
+              onPressIn,
+              onPressOut,
+              onResponderGrant,
+              onResponderMove,
+              onResponderRelease,
+              onResponderTerminate,
+              onResponderTerminationRequest,
+              onStartShouldSetResponder,
+              pressRetentionOffset,
+              suppressHighlighting,
+            }}
+          />
+        );
+      }
+
+      return (
+        <NativeVirtualText
+          {...restProps}
+          accessibilityElementsHidden={_accessibilityElementsHidden}
+          accessibilityLabel={_accessibilityLabel}
+          accessibilityRole={_accessibilityRole}
+          accessibilityState={_accessibilityState}
+          importantForAccessibility={_importantForAccessibility}
+          // #[ Win32
+          accessibilityControls={_accessibilityControls}
+          accessibilityDescribedBy={_accessibilityDescribedBy}
+          accessibilityDescription={_accessibilityDescription}
+          accessibilityLevel={_accessibilityLevel}
+          accessibilityPositionInSet={_accessibilityPositionInSet}
+          accessibilitySetSize={_accessibilitySetSize}
+          // #] Win32
+          nativeID={_nativeID}
+          numberOfLines={_numberOfLines}
+          ref={forwardedRef}
+          selectable={_selectable}
+          selectionColor={_selectionColor}
+          style={_style}
+          disabled={disabled}
+          role={_role}>
+          {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 #13996 - default value is accessible !== false]
+    });
+
+    let nativeText = null;
+    if (isPressable) {
+      nativeText = (
+        <NativePressableText
+          ref={forwardedRef}
+          textProps={{
+            ...restProps,
+            accessibilityElementsHidden: _accessibilityElementsHidden,
+            accessibilityLabel: _accessibilityLabel,
+            accessibilityRole: _accessibilityRole,
+            accessibilityState: _accessibilityState,
+            accessible: _accessible,
+            allowFontScaling: allowFontScaling !== false,
+            disabled: _disabled,
+            ellipsizeMode: ellipsizeMode ?? 'tail',
+            importantForAccessibility: _importantForAccessibility,
+            nativeID: _nativeID,
+            numberOfLines: _numberOfLines,
+            selectable: _selectable,
+            selectionColor: _selectionColor,
+            style: _style,
+            role: _role,
+            children,
+          }}
+          textPressabilityProps={{
+            onLongPress,
+            onPress,
+            onPressIn,
+            onPressOut,
+            onResponderGrant,
+            onResponderMove,
+            onResponderRelease,
+            onResponderTerminate,
+            onResponderTerminationRequest,
+            onStartShouldSetResponder,
+            pressRetentionOffset,
+            suppressHighlighting,
+          }}
+        />
+      );
+    } else {
+      nativeText = (
+        <NativeText
+          {...restProps}
+          accessibilityElementsHidden={_accessibilityElementsHidden}
+          accessibilityLabel={_accessibilityLabel}
+          accessibilityRole={_accessibilityRole}
+          accessibilityState={_accessibilityState}
+          accessible={_accessible}
+          allowFontScaling={allowFontScaling !== false}
+          disabled={_disabled}
+          ellipsizeMode={ellipsizeMode ?? 'tail'}
+          importantForAccessibility={_importantForAccessibility}
+          nativeID={_nativeID}
+          numberOfLines={_numberOfLines}
+          ref={forwardedRef}
+          selectable={_selectable}
+          selectionColor={_selectionColor}
+          style={_style}
+          role={_role}>
+          {children}
+        </NativeText>
+      );
+    }
+
+    if (children == null) {
+      return nativeText;
+    }
+
+    // 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 `TextAncestorContext` 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;
+    }
+
+    return <TextAncestorContext value={true}>{nativeText}</TextAncestorContext>;
+  };
+  _TextImpl = TextImplLegacy;
+}
+
+const TextImpl: component(
+  ref?: React.RefSetter<TextForwardRef>,
+  ...props: TextProps
+) = _TextImpl;
+
+TextImpl.displayName = 'Text';
+
+type TextPressabilityProps = $ReadOnly<{
+  onLongPress?: ?(event: GestureResponderEvent) => unknown,
+  onPress?: ?(event: GestureResponderEvent) => unknown,
+  onPressIn?: ?(event: GestureResponderEvent) => unknown,
+  onPressOut?: ?(event: GestureResponderEvent) => unknown,
+  onResponderGrant?: ?(event: GestureResponderEvent) => void,
+  onResponderMove?: ?(event: GestureResponderEvent) => void,
+  onResponderRelease?: ?(event: GestureResponderEvent) => void,
+  onResponderTerminate?: ?(event: GestureResponderEvent) => 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;
+
+    // Updating isHighlighted causes unnecessary re-renders for platforms that don't use it
+    // in the best case, and cause issues with text selection in the worst case. Forcing
+    // the isHighlighted prop to false on all platforms except iOS.
+    if (Platform.OS === 'ios') {
+      _onPressIn = (event: GestureResponderEvent) => {
+        setHighlighted(suppressHighlighting == null || !suppressHighlighting);
+        onPressIn?.(event);
+      };
+
+      _onPressOut = (event: GestureResponderEvent) => {
+        setHighlighted(false);
+        onPressOut?.(event);
+      };
+    }
+
+    return {
+      disabled: false,
+      pressRectOffset: pressRetentionOffset,
+      onLongPress,
+      onPress,
+      onPressIn: _onPressIn,
+      onPressOut: _onPressOut,
+    };
+  }, [
+    pressRetentionOffset,
+    onLongPress,
+    onPress,
+    onPressIn,
+    onPressOut,
+    suppressHighlighting,
+  ]);
+
+  // Init the pressability class
+  const eventHandlers = usePressability(config);
+
+  // Create NativeText event handlers which proxy events to pressability
+  const eventHandlersForText = useMemo(
+    () =>
+      eventHandlers == null
+        ? null
+        : {
+            onResponderGrant(event: GestureResponderEvent) {
+              eventHandlers.onResponderGrant(event);
+              if (onResponderGrant != null) {
+                onResponderGrant(event);
+              }
+            },
+            onResponderMove(event: GestureResponderEvent) {
+              eventHandlers.onResponderMove(event);
+              if (onResponderMove != null) {
+                onResponderMove(event);
+              }
+            },
+            onResponderRelease(event: GestureResponderEvent) {
+              eventHandlers.onResponderRelease(event);
+              if (onResponderRelease != null) {
+                onResponderRelease(event);
+              }
+            },
+            onResponderTerminate(event: GestureResponderEvent) {
+              eventHandlers.onResponderTerminate(event);
+              if (onResponderTerminate != null) {
+                onResponderTerminate(event);
+              }
+            },
+            onClick: eventHandlers.onClick,
+            onResponderTerminationRequest:
+              onResponderTerminationRequest != null
+                ? onResponderTerminationRequest
+                : eventHandlers.onResponderTerminationRequest,
+            onStartShouldSetResponder:
+              onStartShouldSetResponder != null
+                ? onStartShouldSetResponder
+                : eventHandlers.onStartShouldSetResponder,
+          },
+    [
+      eventHandlers,
+      onResponderGrant,
+      onResponderMove,
+      onResponderRelease,
+      onResponderTerminate,
+      onResponderTerminationRequest,
+      onStartShouldSetResponder,
+    ],
+  );
+
+  // Return the highlight state and NativeText event handlers
+  return useMemo(
+    () => [isHighlighted, eventHandlersForText],
+    [isHighlighted, eventHandlersForText],
+  );
+}
+
+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,
+}: {
+  ref?: React.RefSetter<TextForwardRef>,
+  ...NativePressableTextProps,
+}) => {
+  const [isHighlighted, eventHandlersForText] = useTextPressability(
+    textPressabilityProps,
+  );
+
+  return (
+    <NativeVirtualText
+      {...textProps}
+      {...eventHandlersForText}
+      isHighlighted={isHighlighted}
+      isPressable={true}
+      ref={forwardedRef}
+    />
+  );
+};
+
+/**
+ * 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.
+ */
+const NativePressableText: component(
+  ref: React.RefSetter<TextForwardRef>,
+  ...props: NativePressableTextProps
+) = ({
+  ref: forwardedRef,
+  textProps,
+  textPressabilityProps,
+}: {
+  ref?: React.RefSetter<TextForwardRef>,
+  ...NativePressableTextProps,
+}) => {
+  const [isHighlighted, eventHandlersForText] = useTextPressability(
+    textPressabilityProps,
+  );
+
+  return (
+    <NativeText
+      {...textProps}
+      {...eventHandlersForText}
+      isHighlighted={isHighlighted}
+      isPressable={true}
+      ref={forwardedRef}
+    />
+  );
+};
+
+const userSelectToSelectableMap = {
+  auto: true,
+  text: true,
+  none: false,
+  contain: true,
+  all: true,
+};
+
+const verticalAlignToTextAlignVerticalMap = {
+  auto: 'auto',
+  top: 'top',
+  bottom: 'bottom',
+  middle: 'center',
+} as const;
+
+export default TextImpl;