honor displayName set on ForwardRef if available (facebook#13615)

* add failing test

* honor displayName set on ForwardRef if available

Since React.forwardRef returns a component object, some users
(including styled-components and react-native) are starting to
decorate them with various statics including displayName.

This adjusts React's various name-getters to honor this if set and
surface the name in warnings and hopefully DevTools.

* fix typing

* Refine later

Author: quantizor

packages/react/src/ReactElementValidator.js

@@ -197,7 +197,9 @@ function validatePropTypes(element) {
   ) {
     // ForwardRef
     const functionName = type.render.displayName || type.render.name || '';
-    name = functionName !== '' ? `ForwardRef(${functionName})` : 'ForwardRef';
+    name =
+      type.displayName ||
+      (functionName !== '' ? `ForwardRef(${functionName})` : 'ForwardRef');
     propTypes = type.propTypes;
   } else {
     return;

packages/react/src/__tests__/forwardRef-test.js

@@ -181,4 +181,33 @@ describe('forwardRef', () => {
       {withoutStack: true},
     );
   });
+
+  it('should honor a displayName if set on the forwardRef wrapper in warnings', () => {
+    const Component = props => <div {...props} />;
+
+    const RefForwardingComponent = React.forwardRef((props, ref) => (
+      <Component {...props} forwardedRef={ref} />
+    ));
+
+    RefForwardingComponent.displayName = 'Foo';
+
+    RefForwardingComponent.propTypes = {
+      optional: PropTypes.string,
+      required: PropTypes.string.isRequired,
+    };
+
+    RefForwardingComponent.defaultProps = {
+      optional: 'default',
+    };
+
+    const ref = React.createRef();
+
+    expect(() =>
+      ReactNoop.render(<RefForwardingComponent ref={ref} optional="foo" />),
+    ).toWarnDev(
+      'Warning: Failed prop type: The prop `required` is marked as required in ' +
+        '`Foo`, but its value is `undefined`.\n' +
+        '    in Foo (at **)',
+    );
+  });
 });

packages/shared/getComponentName.js

@@ -66,9 +66,10 @@ function getComponentName(type: mixed): string | null {
       case REACT_FORWARD_REF_TYPE:
         const renderFn = (type.render: any);
         const functionName = renderFn.displayName || renderFn.name || '';
-        return functionName !== ''
-          ? `ForwardRef(${functionName})`
-          : 'ForwardRef';
+        return (
+          (type: any).displayName ||
+          (functionName !== '' ? `ForwardRef(${functionName})` : 'ForwardRef')
+        );
     }
     if (typeof type.then === 'function') {
       const thenable: Thenable<mixed> = (type: any);