Text: Cleanup Native Component Configuration

Summary:
Cleans up the native component configuration for `RCTText` and `RCTVirtualText`.

This //does// lead to a breaking change because `Text.viewConfig` will no longer exist. However, I think this is acceptable because `viewConfig` has already long stopped being an exported prop on other core components (e.g. `View`).

Changelog:
[General][Removed] - `Text.viewConfig` is no longer exported.

Reviewed By: shergin

Differential Revision: D23708205

fbshipit-source-id: 1ad0b0772735834d9162a65d9434a9bbbd142416

Author: yungsters

Libraries/Text/Text.js

@@ -10,14 +10,13 @@
 
 'use strict';
 
+import {NativeText, NativeVirtualText} from './TextNativeComponent';
+
 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');
 
@@ -27,7 +26,7 @@ import type {PressRetentionOffset, TextProps} from './TextProps';
 
 type ResponseHandlers = $ReadOnly<{|
   onStartShouldSetResponder: () => boolean,
-  onResponderGrant: (event: PressEvent, dispatchID: string) => void,
+  onResponderGrant: (event: PressEvent) => void,
   onResponderMove: (event: PressEvent) => void,
   onResponderRelease: (event: PressEvent) => void,
   onResponderTerminate: (event: PressEvent) => void,
@@ -36,7 +35,7 @@ type ResponseHandlers = $ReadOnly<{|
 
 type Props = $ReadOnly<{|
   ...TextProps,
-  forwardedRef: ?React.Ref<'RCTText' | 'RCTVirtualText'>,
+  forwardedRef: ?React.Ref<typeof NativeText | typeof NativeVirtualText>,
 |}>;
 
 type State = {|
@@ -51,36 +50,6 @@ type State = {|
 
 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,
-    android_hyphenationFrequency: true,
-  },
-  directEventTypes: {
-    topTextLayout: {
-      registrationName: 'onTextLayout',
-    },
-    topInlineViewLayout: {
-      registrationName: 'onInlineViewLayout',
-    },
-  },
-  uiViewClassName: 'RCTText',
-};
-
 /**
  * A React component for displaying text.
  *
@@ -122,21 +91,19 @@ class TouchableText extends React.Component<Props, State> {
       : null;
   }
 
-  static viewConfig = viewConfig;
-
   render(): React.Node {
-    let props = this.props;
-    if (isTouchable(props)) {
+    let {forwardedRef, selectionColor, ...props} = this.props;
+    if (isTouchable(this.props)) {
       props = {
         ...props,
         ...this.state.responseHandlers,
         isHighlighted: this.state.isHighlighted,
       };
     }
-    if (props.selectionColor != null) {
+    if (selectionColor != null) {
       props = {
         ...props,
-        selectionColor: processColor(props.selectionColor),
+        selectionColor: processColor(selectionColor),
       };
     }
     if (__DEV__) {
@@ -151,16 +118,17 @@ class TouchableText extends React.Component<Props, State> {
       <TextAncestor.Consumer>
         {hasTextAncestor =>
           hasTextAncestor ? (
-            <RCTVirtualText
+            // $FlowFixMe[prop-missing] For the `onClick` workaround.
+            <NativeVirtualText
               {...props}
               // This is used on Android to call a nested Text component's press handler from the context menu.
               // TODO T75145059 Clean this up once Text is migrated off of Touchable
               onClick={props.onPress}
-              ref={props.forwardedRef}
+              ref={forwardedRef}
             />
           ) : (
             <TextAncestor.Provider value={true}>
-              <RCTText {...props} ref={props.forwardedRef} />
+              <NativeText {...props} ref={forwardedRef} />
             </TextAncestor.Provider>
           )
         }
@@ -263,26 +231,9 @@ const isTouchable = (props: Props): boolean =>
   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'>,
+  forwardedRef: ?React.Ref<typeof NativeText | typeof NativeVirtualText>,
 ) => {
   return <TouchableText {...props} forwardedRef={forwardedRef} />;
 };

Libraries/Text/TextNativeComponent.js

@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+'use strict';
+
+import ReactNativeViewAttributes from '../Components/View/ReactNativeViewAttributes';
+import UIManager from '../ReactNative/UIManager';
+import {type HostComponent} from '../Renderer/shims/ReactNativeTypes';
+import createReactNativeComponentClass from '../Renderer/shims/createReactNativeComponentClass';
+import {type ProcessedColorValue} from '../StyleSheet/processColor';
+import {type TextProps} from './TextProps';
+
+type NativeTextProps = $ReadOnly<{
+  ...TextProps,
+  isHighlighted?: ?boolean,
+  selectionColor?: ?ProcessedColorValue,
+}>;
+
+export const NativeText: HostComponent<NativeTextProps> = (createReactNativeComponentClass(
+  'RCTText',
+  () => ({
+    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',
+  }),
+): any);
+
+export const NativeVirtualText: HostComponent<NativeTextProps> =
+  UIManager.getViewManagerConfig('RCTVirtualText') == null
+    ? NativeText
+    : (createReactNativeComponentClass('RCTVirtualText', () => ({
+        validAttributes: {
+          ...ReactNativeViewAttributes.UIView,
+          isHighlighted: true,
+          maxFontSizeMultiplier: true,
+        },
+        uiViewClassName: 'RCTVirtualText',
+      })): any);