From e708010d18f938e2d6b6424cfc9485d8e5dd2800 Mon Sep 17 00:00:00 2001
From: Tim Yung <yungsters@fb.com>
Date: Wed, 9 May 2018 00:47:57 -0700
Subject: [PATCH] RN: Switch `Text` to `React.forwardRef`

Reviewed By: sahrens

Differential Revision: D7902262

fbshipit-source-id: 218f95cde6d77f21d9362a2f2bd47c5f83d5ee15
---
 .../TouchableHighlight-test.js.snap           |  3 ---
 Libraries/Text/Text.js                        | 26 +++++++++++++------
 jest/mockComponent.js                         |  4 +++
 jest/setup.js                                 |  2 +-
 4 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableHighlight-test.js.snap b/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableHighlight-test.js.snap
index 4596f0307d0e8d..6028d74aaa8a21 100644
--- a/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableHighlight-test.js.snap
+++ b/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
diff --git a/Libraries/Text/Text.js b/Libraries/Text/Text.js
index adde971751b74b..1dcac7c1a759dc 100644
--- a/Libraries/Text/Text.js
+++ b/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>);
diff --git a/jest/mockComponent.js b/jest/mockComponent.js
index bdc16d805dcbcc..e22c34ccaa4391 100644
--- a/jest/mockComponent.js
+++ b/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);
   }
diff --git a/jest/setup.js b/jest/setup.js
index 2aef9f1b39fe58..18cb7dfbddd7f6 100644
--- a/jest/setup.js
+++ b/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))