fix forwardRef displayName on Text and View

Reviewed By: TheSavior

Differential Revision: D8342852

fbshipit-source-id: 5af80edfd5de5b6d6ea6fdc24abf8931f767c812

Author: sahrens

Libraries/Components/View/View.js

@@ -32,19 +32,24 @@ const RCTView = requireNativeComponent('RCTView');
 
 let ViewToExport = RCTView;
 if (__DEV__) {
+  const View = (props: Props, forwardedRef: ?React.Ref<'RCTView'>) => {
+    return (
+      <TextAncestor.Consumer>
+        {hasTextAncestor => {
+          invariant(
+            !hasTextAncestor,
+            'Nesting of <View> within <Text> is not currently supported.',
+          );
+          return <RCTView {...props} ref={forwardedRef} />;
+        }}
+      </TextAncestor.Consumer>
+    );
+  };
+  View.displayName = 'View'; // TODO(T30332650) remove bug workaround
   // $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet.
-  ViewToExport = React.forwardRef((props, ref) => (
-    <TextAncestor.Consumer>
-      {hasTextAncestor => {
-        invariant(
-          !hasTextAncestor,
-          'Nesting of <View> within <Text> is not currently supported.',
-        );
-        return <RCTView {...props} ref={ref} />;
-      }}
-    </TextAncestor.Consumer>
-  ));
-  ViewToExport.displayName = 'View';
+  ViewToExport = React.forwardRef(View);
 }
 
-module.exports = ((ViewToExport: any): Class<NativeComponent<ViewProps>>);
+module.exports = ((ViewToExport: $FlowFixMe): Class<
+  NativeComponent<ViewProps>,
+>);

Libraries/Text/Text.js

@@ -261,13 +261,17 @@ const RCTVirtualText =
         uiViewClassName: 'RCTVirtualText',
       }));
 
+const Text = (
+  props: TextProps,
+  forwardedRef: ?React.Ref<'RCTText' | 'RCTVirtualText'>,
+) => {
+  return <TouchableText {...props} forwardedRef={forwardedRef} />;
+};
+Text.displayName = 'Text'; // TODO(T30332650) remove bug workaround
 // $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet.
-const Text = React.forwardRef((props, ref) => (
-  <TouchableText {...props} forwardedRef={ref} />
-));
-Text.displayName = 'Text';
+const TextToExport = React.forwardRef(Text);
 
 // TODO: Deprecate this.
-Text.propTypes = TextPropTypes;
+TextToExport.propTypes = TextPropTypes;
 
-module.exports = ((Text: any): Class<NativeComponent<TextProps>>);
+module.exports = (TextToExport: Class<NativeComponent<TextProps>>);

jest/mockComponent.js

@@ -18,7 +18,12 @@ module.exports = (moduleName, instanceMethods) => {
 
   const Component = class extends SuperClass {
     render() {
-      const name = RealComponent.displayName || RealComponent.name;
+      const name =
+        RealComponent.displayName ||
+        RealComponent.name ||
+        (RealComponent.render // handle React.forwardRef
+          ? RealComponent.render.displayName || RealComponent.render.name
+          : 'Unknown');
 
       const props = Object.assign({}, RealComponent.defaultProps);