RN: Switch Text to React.forwardRef

Reviewed By: sahrens

Differential Revision: D7902262

fbshipit-source-id: 218f95cde6d77f21d9362a2f2bd47c5f83d5ee15

Libraries/Components/Touchable/__tests__/__snapshots__/TouchableHighlight-test.js.snap

@@ -22,9 +22,6 @@ exports[`TouchableHighlight renders correctly 1`] = `
   tvParallaxProperties={undefined}
 >
   <Text
-    accessible={true}
-    allowFontScaling={true}
-    ellipsizeMode="tail"
     style={null}
   >
     Touchable

Libraries/Text/Text.js

@@ -11,7 +11,6 @@
 'use strict';
 
 const React = require('React');
-const ReactNative = require('ReactNative');
 const ReactNativeViewAttributes = require('ReactNativeViewAttributes');
 const TextAncestor = require('TextAncestor');
 const TextPropTypes = require('TextPropTypes');
@@ -23,6 +22,7 @@ const nullthrows = require('fbjs/lib/nullthrows');
 const processColor = require('processColor');
 
 import type {PressEvent} from 'CoreEventTypes';
+import type {NativeComponent} from 'ReactNative';
 import type {PressRetentionOffset, TextProps} from 'TextProps';
 
 type ResponseHandlers = $ReadOnly<{|
@@ -34,7 +34,10 @@ type ResponseHandlers = $ReadOnly<{|
   onResponderTerminationRequest: () => boolean,
 |}>;
 
-type Props = TextProps;
+type Props = $ReadOnly<{
+  ...TextProps,
+  forwardedRef: ?React.Ref<NativeComponent<TextProps, any>>,
+}>;
 
 type State = {|
   touchable: {|
@@ -70,9 +73,7 @@ const viewConfig = {
  *
  * See https://facebook.github.io/react-native/docs/text.html
  */
-class Text extends ReactNative.NativeComponent<Props, State> {
-  static propTypes = TextPropTypes;
-
+class TouchableText extends React.Component<Props, State> {
   static defaultProps = {
     accessible: true,
     allowFontScaling: true,
@@ -138,10 +139,10 @@ class Text extends ReactNative.NativeComponent<Props, State> {
       <TextAncestor.Consumer>
         {hasTextAncestor =>
           hasTextAncestor ? (
-            <RCTVirtualText {...props} />
+            <RCTVirtualText {...props} ref={props.forwardedRef} />
           ) : (
             <TextAncestor.Provider value={true}>
-              <RCTText {...props} />
+              <RCTText {...props} ref={props.forwardedRef} />
             </TextAncestor.Provider>
           )
         }
@@ -260,4 +261,13 @@ const RCTVirtualText =
         uiViewClassName: 'RCTVirtualText',
       }));
 
-module.exports = Text;
+// $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet.
+const Text = React.forwardRef((props, ref) => (
+  <TouchableText {...props} forwardedRef={ref} />
+));
+Text.displayName = 'Text';
+
+// TODO: Deprecate this.
+Text.propTypes = TextPropTypes;
+
+module.exports = ((Text: any): NativeComponent<TextProps, any>);

jest/mockComponent.js

@@ -28,6 +28,10 @@ module.exports = (moduleName, instanceMethods) => {
     }
   };
 
+  if (RealComponent.propTypes != null) {
+    Component.propTypes = RealComponent.propTypes;
+  }
+
   if (instanceMethods != null) {
     Object.assign(Component.prototype, instanceMethods);
   }

jest/setup.js

@@ -35,7 +35,7 @@ jest.setMock('ErrorUtils', require('ErrorUtils'));
 jest
   .mock('InitializeCore', () => {})
   .mock('Image', () => mockComponent('Image'))
-  .mock('Text', () => mockComponent('Text'))
+  .mock('Text', () => mockComponent('Text', MockNativeMethods))
   .mock('TextInput', () => mockComponent('TextInput'))
   .mock('Modal', () => mockComponent('Modal'))
   .mock('View', () => mockComponent('View', MockNativeMethods))