@office-iss/react-native-win32 0.0.0-canary.30 → 0.0.0-canary.300

package/Libraries/Text/Text.js

@@ -1,302 +1,548 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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
+ * @flow strict-local
  * @format
  */
 
-'use strict';
-
-const DeprecatedTextPropTypes = require('../DeprecatedPropTypes/DeprecatedTextPropTypes');
-const React = require('react');
-const ReactNativeViewAttributes = require('../Components/View/ReactNativeViewAttributes');
-const TextAncestor = require('./TextAncestor');
-const Touchable = require('../Components/Touchable/Touchable');
-const UIManager = require('../ReactNative/UIManager');
-
-const createReactNativeComponentClass = require('../Renderer/shims/createReactNativeComponentClass');
-const nullthrows = require('nullthrows');
-const processColor = require('../StyleSheet/processColor');
-
-import type {PressEvent} from '../Types/CoreEventTypes';
-import type {HostComponent} from '../Renderer/shims/ReactNativeTypes';
+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';
 
-type ResponseHandlers = $ReadOnly<{|
-  onStartShouldSetResponder: () => boolean,
-  onResponderGrant: (event: PressEvent, dispatchID: string) => void,
-  onResponderMove: (event: PressEvent) => void,
-  onResponderRelease: (event: PressEvent) => void,
-  onResponderTerminate: (event: PressEvent) => void,
-  onResponderTerminationRequest: () => boolean,
-|}>;
+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';
 
-type Props = $ReadOnly<{|
-  ...TextProps,
-  forwardedRef: ?React.Ref<'RCTText' | 'RCTVirtualText'>,
-|}>;
-
-type State = {|
-  touchable: {|
-    touchState: ?string,
-    responderID: ?number,
-  |},
-  isHighlighted: boolean,
-  createResponderHandlers: () => ResponseHandlers,
-  responseHandlers: ?ResponseHandlers,
-|};
-
-const PRESS_RECT_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
-
-const viewConfig = {
-  validAttributes: {
-    ...ReactNativeViewAttributes.UIView,
-    isHighlighted: true,
-    numberOfLines: true,
-    ellipsizeMode: true,
-    allowFontScaling: true,
-    maxFontSizeMultiplier: true,
-    disabled: true,
-    selectable: true,
-    selectionColor: true,
-    adjustsFontSizeToFit: true,
-    minimumFontScale: true,
-    textBreakStrategy: true,
-    onTextLayout: true,
-    onInlineViewLayout: true,
-    dataDetectorType: true,
-  },
-  directEventTypes: {
-    topTextLayout: {
-      registrationName: 'onTextLayout',
-    },
-    topInlineViewLayout: {
-      registrationName: 'onInlineViewLayout',
-    },
-  },
-  uiViewClassName: 'RCTText',
-};
+export type {TextProps} from './TextProps';
+
+type TextForwardRef = React.ElementRef<
+  typeof NativeText | typeof NativeVirtualText,
+>;
 
 /**
- * A React component for displaying text.
+ * Text is the fundamental component for displaying text.
  *
- * See https://reactnative.dev/docs/text.html
+ * @see https://reactnative.dev/docs/text
  */
-class TouchableText extends React.Component<Props, State> {
-  static defaultProps = {
-    accessible: true,
-    allowFontScaling: true,
-    ellipsizeMode: 'tail',
-  };
-
-  touchableGetPressRectOffset: ?() => PressRetentionOffset;
-  touchableHandleActivePressIn: ?() => void;
-  touchableHandleActivePressOut: ?() => void;
-  touchableHandleLongPress: ?(event: PressEvent) => void;
-  touchableHandlePress: ?(event: PressEvent) => void;
-  touchableHandleResponderGrant: ?(
-    event: PressEvent,
-    dispatchID: string,
-  ) => void;
-  touchableHandleResponderMove: ?(event: PressEvent) => void;
-  touchableHandleResponderRelease: ?(event: PressEvent) => void;
-  touchableHandleResponderTerminate: ?(event: PressEvent) => void;
-  touchableHandleResponderTerminationRequest: ?() => boolean;
-
-  state = {
-    ...Touchable.Mixin.touchableGetInitialState(),
-    isHighlighted: false,
-    createResponderHandlers: this._createResponseHandlers.bind(this),
-    responseHandlers: null,
-  };
-
-  static getDerivedStateFromProps(
-    nextProps: Props,
-    prevState: State,
-  ): $Shape<State> | null {
-    return prevState.responseHandlers == null && isTouchable(nextProps)
-      ? {
-          responseHandlers: prevState.createResponderHandlers(),
-        }
-      : null;
-  }
-
-  static viewConfig = viewConfig;
+const TextImpl: component(
+  ref?: React.RefSetter<TextForwardRef>,
+  ...props: TextProps
+) = ({
+  ref: forwardedRef,
+  accessible,
+  accessibilityLabel,
+  accessibilityState,
+  allowFontScaling,
+  'aria-busy': ariaBusy,
+  'aria-checked': ariaChecked,
+  'aria-disabled': ariaDisabled,
+  'aria-expanded': ariaExpanded,
+  'aria-label': ariaLabel,
+  '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
+}: {
+  ref?: React.RefSetter<TextForwardRef>,
+  ...TextProps,
+}) => {
+  const _accessibilityLabel = ariaLabel ?? accessibilityLabel;
 
-  render(): React.Node {
-    let props = this.props;
-    if (isTouchable(props)) {
-      props = {
-        ...props,
-        ...this.state.responseHandlers,
-        isHighlighted: this.state.isHighlighted,
+  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,
       };
-    }
-    if (props.selectionColor != null) {
-      props = {
-        ...props,
-        selectionColor: processColor(props.selectionColor),
+    } 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 ? 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__) {
-      if (Touchable.TOUCH_TARGET_DEBUG && props.onPress != null) {
-        props = {
-          ...props,
-          style: [props.style, {color: 'magenta'}],
-        };
-      }
+      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-cast]
+        (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,
+            accessibilityLabel: _accessibilityLabel,
+            accessibilityState: _accessibilityState,
+            nativeID: _nativeID,
+            numberOfLines: _numberOfLines,
+            selectable: _selectable,
+            selectionColor: _selectionColor,
+            style: _style,
+            disabled: disabled,
+            children,
+          }}
+          textPressabilityProps={{
+            onLongPress,
+            onPress,
+            onPressIn,
+            onPressOut,
+            onResponderGrant,
+            onResponderMove,
+            onResponderRelease,
+            onResponderTerminate,
+            onResponderTerminationRequest,
+            onStartShouldSetResponder,
+            pressRetentionOffset,
+            suppressHighlighting,
+          }}
+        />
+      );
     }
+
     return (
-      <TextAncestor.Consumer>
-        {hasTextAncestor =>
-          hasTextAncestor ? (
-            <RCTVirtualText {...props} ref={props.forwardedRef} />
-          ) : (
-            <TextAncestor.Provider value={true}>
-              <RCTText {...props} ref={props.forwardedRef} />
-            </TextAncestor.Provider>
-          )
-        }
-      </TextAncestor.Consumer>
+      <NativeVirtualText
+        {...restProps}
+        accessibilityLabel={_accessibilityLabel}
+        accessibilityState={_accessibilityState}
+        nativeID={_nativeID}
+        numberOfLines={_numberOfLines}
+        ref={forwardedRef}
+        selectable={_selectable}
+        selectionColor={_selectionColor}
+        style={_style}
+        disabled={disabled}>
+        {children}
+      </NativeVirtualText>
     );
   }
 
-  _createResponseHandlers(): ResponseHandlers {
-    return {
-      onStartShouldSetResponder: (): boolean => {
-        const {onStartShouldSetResponder} = this.props;
-        const shouldSetResponder =
-          (onStartShouldSetResponder == null
-            ? false
-            : onStartShouldSetResponder()) || isTouchable(this.props);
-
-        if (shouldSetResponder) {
-          this._attachTouchHandlers();
-        }
-        return shouldSetResponder;
-      },
-      onResponderGrant: (event: PressEvent, dispatchID: string): void => {
-        nullthrows(this.touchableHandleResponderGrant)(event, dispatchID);
-        if (this.props.onResponderGrant != null) {
-          this.props.onResponderGrant.call(this, event, dispatchID);
-        }
-      },
-      onResponderMove: (event: PressEvent): void => {
-        nullthrows(this.touchableHandleResponderMove)(event);
-        if (this.props.onResponderMove != null) {
-          this.props.onResponderMove.call(this, event);
-        }
-      },
-      onResponderRelease: (event: PressEvent): void => {
-        nullthrows(this.touchableHandleResponderRelease)(event);
-        if (this.props.onResponderRelease != null) {
-          this.props.onResponderRelease.call(this, event);
-        }
-      },
-      onResponderTerminate: (event: PressEvent): void => {
-        nullthrows(this.touchableHandleResponderTerminate)(event);
-        if (this.props.onResponderTerminate != null) {
-          this.props.onResponderTerminate.call(this, event);
-        }
-      },
-      onResponderTerminationRequest: (): boolean => {
-        const {onResponderTerminationRequest} = this.props;
-        if (!nullthrows(this.touchableHandleResponderTerminationRequest)()) {
-          return false;
-        }
-        if (onResponderTerminationRequest == null) {
-          return true;
-        }
-        return onResponderTerminationRequest();
-      },
-    };
+  // 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};
   }
 
-  /**
-   * Lazily attaches Touchable.Mixin handlers.
-   */
-  _attachTouchHandlers(): void {
-    if (this.touchableGetPressRectOffset != null) {
-      return;
-    }
-    for (const key in Touchable.Mixin) {
-      if (typeof Touchable.Mixin[key] === 'function') {
-        (this: any)[key] = Touchable.Mixin[key].bind(this);
+  const _accessible = Platform.select({
+    ios: accessible !== false,
+    android:
+      accessible == null ? onPress != null || onLongPress != null : accessible,
+    default: accessible,
+  });
+
+  let nativeText = null;
+  if (isPressable) {
+    nativeText = (
+      <NativePressableText
+        ref={forwardedRef}
+        textProps={{
+          ...restProps,
+          accessibilityLabel: _accessibilityLabel,
+          accessibilityState: _accessibilityState,
+          accessible: _accessible,
+          allowFontScaling: allowFontScaling !== false,
+          disabled: _disabled,
+          ellipsizeMode: ellipsizeMode ?? 'tail',
+          nativeID: _nativeID,
+          numberOfLines: _numberOfLines,
+          selectable: _selectable,
+          selectionColor: _selectionColor,
+          style: _style,
+          children,
+        }}
+        textPressabilityProps={{
+          onLongPress,
+          onPress,
+          onPressIn,
+          onPressOut,
+          onResponderGrant,
+          onResponderMove,
+          onResponderRelease,
+          onResponderTerminate,
+          onResponderTerminationRequest,
+          onStartShouldSetResponder,
+          pressRetentionOffset,
+          suppressHighlighting,
+        }}
+      />
+    );
+  } else {
+    nativeText = (
+      <NativeText
+        {...restProps}
+        accessibilityLabel={_accessibilityLabel}
+        accessibilityState={_accessibilityState}
+        accessible={_accessible}
+        allowFontScaling={allowFontScaling !== false}
+        disabled={_disabled}
+        ellipsizeMode={ellipsizeMode ?? 'tail'}
+        nativeID={_nativeID}
+        numberOfLines={_numberOfLines}
+        ref={forwardedRef}
+        selectable={_selectable}
+        selectionColor={_selectionColor}
+        style={_style}>
+        {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;
       }
     }
-    this.touchableHandleActivePressIn = (): void => {
-      if (!this.props.suppressHighlighting && isTouchable(this.props)) {
-        this.setState({isHighlighted: true});
-      }
-    };
-    this.touchableHandleActivePressOut = (): void => {
-      if (!this.props.suppressHighlighting && isTouchable(this.props)) {
-        this.setState({isHighlighted: false});
-      }
-    };
-    this.touchableHandlePress = (event: PressEvent): void => {
-      if (this.props.onPress != null) {
-        this.props.onPress(event);
-      }
-    };
-    this.touchableHandleLongPress = (event: PressEvent): void => {
-      if (this.props.onLongPress != null) {
-        this.props.onLongPress(event);
-      }
-    };
-    this.touchableGetPressRectOffset = (): PressRetentionOffset =>
-      this.props.pressRetentionOffset == null
-        ? PRESS_RECT_OFFSET
-        : this.props.pressRetentionOffset;
+    if (!hasNonTextChild) {
+      return nativeText;
+    }
+  } else if (typeof children !== 'object') {
+    return nativeText;
   }
+
+  return <TextAncestorContext value={true}>{nativeText}</TextAncestorContext>;
+};
+
+TextImpl.displayName = 'Text';
+
+type TextPressabilityProps = $ReadOnly<{
+  onLongPress?: ?(event: GestureResponderEvent) => mixed,
+  onPress?: ?(event: GestureResponderEvent) => mixed,
+  onPressIn?: ?(event: GestureResponderEvent) => mixed,
+  onPressOut?: ?(event: GestureResponderEvent) => mixed,
+  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],
+  );
 }
 
-const isTouchable = (props: Props): boolean =>
-  props.onPress != null ||
-  props.onLongPress != null ||
-  props.onStartShouldSetResponder != null;
-
-const RCTText = createReactNativeComponentClass(
-  viewConfig.uiViewClassName,
-  () => viewConfig,
-);
-
-const RCTVirtualText =
-  UIManager.getViewManagerConfig('RCTVirtualText') == null
-    ? RCTText
-    : createReactNativeComponentClass('RCTVirtualText', () => ({
-        validAttributes: {
-          ...ReactNativeViewAttributes.UIView,
-          isHighlighted: true,
-          maxFontSizeMultiplier: true,
-        },
-        uiViewClassName: 'RCTVirtualText',
-      }));
-
-const Text = (
-  props: TextProps,
-  forwardedRef: ?React.Ref<'RCTText' | 'RCTVirtualText'>,
-) => {
-  return <TouchableText {...props} forwardedRef={forwardedRef} />;
+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}
+    />
+  );
 };
-const TextToExport = React.forwardRef(Text);
-TextToExport.displayName = 'Text';
-
-// TODO: Deprecate this.
-/* $FlowFixMe(>=0.89.0 site=react_native_fb) This comment suppresses an error
- * found when Flow v0.89 was deployed. To see the error, delete this comment
- * and run Flow. */
-TextToExport.propTypes = DeprecatedTextPropTypes;
-
-type TextStatics = $ReadOnly<{|
-  propTypes: typeof DeprecatedTextPropTypes,
-|}>;
-
-module.exports = ((TextToExport: any): React.AbstractComponent<
-  TextProps,
-  React.ElementRef<HostComponent<TextProps>>,
-> &
-  TextStatics);
+
+/**
+ * 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;