react-native-windows 0.81.1 → 0.82.0-preview.1

package/Libraries/Text/Text.js

@@ -14,6 +14,7 @@ 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';
@@ -35,156 +36,519 @@ type TextForwardRef = React.ElementRef<
  *
  * @see https://reactnative.dev/docs/text
  */
-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;
-
-  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,
+let _TextImpl;
+if (ReactNativeFeatureFlags.reduceDefaultPropsInText()) {
+  const TextImplNoDefaultProps: 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-hidden': ariaHidden,
+    '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 processedProps = restProps as {
+      ...NativeTextProps,
+    };
+    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;
+
+    // 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,
+    });
+
+    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__) {
+        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 (_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;
+    }
+
+    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 {
-      _accessibilityState = {
-        busy: ariaBusy,
-        checked: ariaChecked,
-        disabled: ariaDisabled,
-        expanded: ariaExpanded,
-        selected: ariaSelected,
-      };
+      nativeText = <NativeText {...processedProps} ref={forwardedRef} />;
     }
-  }
 
-  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 `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;
+    }
 
-  // TODO: Move this processing to the view configuration.
-  const _selectionColor =
-    selectionColor != null ? processColor(selectionColor) : undefined;
+    return <TextAncestorContext value={true}>{nativeText}</TextAncestorContext>;
+  };
+  _TextImpl = TextImplNoDefaultProps;
+} else {
+  const TextImplLegacy: component(
+    ref?: React.RefSetter<TextForwardRef>,
+    ...props: TextProps
+  ) = ({
+    ref: forwardedRef,
+    accessible,
+    accessibilityElementsHidden,
+    importantForAccessibility,
+    accessibilityLabel,
+    accessibilityState,
+    allowFontScaling,
+    'aria-busy': ariaBusy,
+    'aria-checked': ariaChecked,
+    'aria-disabled': ariaDisabled,
+    'aria-expanded': ariaExpanded,
+    'aria-hidden': ariaHidden,
+    '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;
+
+    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,
+        };
+      }
+    }
 
-  let _style = style;
-  if (__DEV__) {
-    if (PressabilityDebug.isEnabled() && onPress != null) {
-      _style = [style, {color: 'magenta'}];
+    const _accessibilityStateDisabled = _accessibilityState?.disabled;
+    const _disabled = disabled ?? _accessibilityStateDisabled;
+
+    let _accessibilityElementsHidden =
+      ariaHidden ?? accessibilityElementsHidden;
+    let _importantForAccessibility = importantForAccessibility;
+    if (ariaHidden === true) {
+      _importantForAccessibility = 'no-hide-descendants';
     }
-  }
 
-  let _numberOfLines = numberOfLines;
-  if (_numberOfLines != null && !(_numberOfLines >= 0)) {
+    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__) {
-      console.error(
-        `'numberOfLines' in <Text> must be a non-negative number, received: ${_numberOfLines}. The value will be set to 0.`,
-      );
+      if (PressabilityDebug.isEnabled() && onPress != null) {
+        _style = [style, {color: 'magenta'}];
+      }
     }
-    _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']);
+
+    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;
     }
 
-    if (processedStyle.userSelect != null) {
-      _selectable = userSelectToSelectableMap[processedStyle.userSelect];
-      overrides = overrides || ({}: {...TextStyleInternal});
-      overrides.userSelect = undefined;
+    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];
+      }
     }
 
-    if (processedStyle.verticalAlign != null) {
-      overrides = overrides || ({}: {...TextStyleInternal});
-      overrides.textAlignVertical =
-        verticalAlignToTextAlignVerticalMap[processedStyle.verticalAlign];
-      overrides.verticalAlign = undefined;
+    const _nativeID = id ?? nativeID;
+
+    const hasTextAncestor = useContext(TextAncestorContext);
+    if (hasTextAncestor) {
+      if (isPressable) {
+        return (
+          <NativePressableVirtualText
+            ref={forwardedRef}
+            textProps={{
+              ...restProps,
+              accessibilityElementsHidden: _accessibilityElementsHidden,
+              accessibilityLabel: _accessibilityLabel,
+              accessibilityState: _accessibilityState,
+              importantForAccessibility: _importantForAccessibility,
+              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 (
+        <NativeVirtualText
+          {...restProps}
+          accessibilityElementsHidden={_accessibilityElementsHidden}
+          accessibilityLabel={_accessibilityLabel}
+          accessibilityState={_accessibilityState}
+          importantForAccessibility={_importantForAccessibility}
+          nativeID={_nativeID}
+          numberOfLines={_numberOfLines}
+          ref={forwardedRef}
+          selectable={_selectable}
+          selectionColor={_selectionColor}
+          style={_style}
+          disabled={disabled}>
+          {children}
+        </NativeVirtualText>
+      );
     }
 
-    if (overrides != null) {
-      // $FlowFixMe[incompatible-type]
-      _style = [_style, overrides];
+    // 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 _nativeID = id ?? nativeID;
+    const _accessible = Platform.select({
+      ios: accessible !== false,
+      android:
+        accessible == null
+          ? onPress != null || onLongPress != null
+          : accessible,
+      default: accessible,
+    });
 
-  const hasTextAncestor = useContext(TextAncestorContext);
-  if (hasTextAncestor) {
+    let nativeText = null;
     if (isPressable) {
-      return (
-        <NativePressableVirtualText
+      nativeText = (
+        <NativePressableText
           ref={forwardedRef}
           textProps={{
             ...restProps,
+            accessibilityElementsHidden: _accessibilityElementsHidden,
             accessibilityLabel: _accessibilityLabel,
             accessibilityState: _accessibilityState,
+            accessible: _accessible,
+            allowFontScaling: allowFontScaling !== false,
+            disabled: _disabled,
+            ellipsizeMode: ellipsizeMode ?? 'tail',
+            importantForAccessibility: _importantForAccessibility,
             nativeID: _nativeID,
             numberOfLines: _numberOfLines,
             selectable: _selectable,
             selectionColor: _selectionColor,
             style: _style,
-            disabled: disabled,
             children,
           }}
           textPressabilityProps={{
@@ -203,127 +567,63 @@ const TextImpl: component(
           }}
         />
       );
+    } else {
+      nativeText = (
+        <NativeText
+          {...restProps}
+          accessibilityElementsHidden={_accessibilityElementsHidden}
+          accessibilityLabel={_accessibilityLabel}
+          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}>
+          {children}
+        </NativeText>
+      );
     }
 
-    return (
-      <NativeVirtualText
-        {...restProps}
-        accessibilityLabel={_accessibilityLabel}
-        accessibilityState={_accessibilityState}
-        nativeID={_nativeID}
-        numberOfLines={_numberOfLines}
-        ref={forwardedRef}
-        selectable={_selectable}
-        selectionColor={_selectionColor}
-        style={_style}
-        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,
-  });
-
-  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;
-      }
+    if (children == null) {
+      return nativeText;
     }
-    if (!hasNonTextChild) {
+
+    // 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;
     }
-  } else if (typeof children !== 'object') {
-    return nativeText;
-  }
 
-  return <TextAncestorContext value={true}>{nativeText}</TextAncestorContext>;
-};
+    return <TextAncestorContext value={true}>{nativeText}</TextAncestorContext>;
+  };
+  _TextImpl = TextImplLegacy;
+}
+
+const TextImpl: component(
+  ref?: React.RefSetter<TextForwardRef>,
+  ...props: TextProps
+) = _TextImpl;
 
 TextImpl.displayName = 'Text';