ForwardRef supports propTypes

packages/react/src/ReactElementValidator.js

@@ -16,7 +16,11 @@ import lowPriorityWarning from 'shared/lowPriorityWarning';
 import describeComponentFrame from 'shared/describeComponentFrame';
 import isValidElementType from 'shared/isValidElementType';
 import getComponentName from 'shared/getComponentName';
-import {getIteratorFn, REACT_FRAGMENT_TYPE} from 'shared/ReactSymbols';
+import {
+  getIteratorFn,
+  REACT_FORWARD_REF_TYPE,
+  REACT_FRAGMENT_TYPE,
+} from 'shared/ReactSymbols';
 import checkPropTypes from 'prop-types/checkPropTypes';
 import warning from 'fbjs/lib/warning';
 
@@ -44,6 +48,14 @@ if (__DEV__) {
       return element.type;
     } else if (element.type === REACT_FRAGMENT_TYPE) {
       return 'React.Fragment';
+    } else if (
+      typeof element.type === 'object' &&
+      element.type !== null &&
+      element.type.$$typeof === REACT_FORWARD_REF_TYPE
+    ) {
+      const functionName =
+        element.type.render.displayName || element.type.render.name || '';
+      return functionName !== '' ? `ForwardRef(${functionName})` : 'ForwardRef';
     } else {
       return element.type.displayName || element.type.name || 'Unknown';
     }
@@ -213,30 +225,39 @@ function validateChildKeys(node, parentType) {
  * @param {ReactElement} element
  */
 function validatePropTypes(element) {
-  const componentClass = element.type;
-  if (typeof componentClass !== 'function') {
+  const type = element.type;
+  let name, propTypes;
+  if (typeof type === 'function') {
+    // Class or functional component
+    name = type.displayName || type.name;
+    propTypes = type.propTypes;
+  } else if (
+    typeof type === 'object' &&
+    type !== null &&
+    type.$$typeof === REACT_FORWARD_REF_TYPE
+  ) {
+    // ForwardRef
+    const functionName = type.render.displayName || type.render.name || '';
+    name = functionName !== '' ? `ForwardRef(${functionName})` : 'ForwardRef';
+    propTypes = type.propTypes;
+  } else {
     return;
   }
-  const name = componentClass.displayName || componentClass.name;
-  const propTypes = componentClass.propTypes;
   if (propTypes) {
     currentlyValidatingElement = element;
     checkPropTypes(propTypes, element.props, 'prop', name, getStackAddendum);
     currentlyValidatingElement = null;
-  } else if (
-    componentClass.PropTypes !== undefined &&
-    !propTypesMisspellWarningShown
-  ) {
+  } else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) {
     propTypesMisspellWarningShown = true;
     warning(
       false,
       'Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?',
       name || 'Unknown',
     );
   }
-  if (typeof componentClass.getDefaultProps === 'function') {
+  if (typeof type.getDefaultProps === 'function') {
     warning(
-      componentClass.getDefaultProps.isReactClassApproved,
+      type.getDefaultProps.isReactClassApproved,
       'getDefaultProps is only used on classic React.createClass ' +
         'definitions. Use a static property named `defaultProps` instead.',
     );

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

@@ -10,11 +10,13 @@
 'use strict';
 
 describe('forwardRef', () => {
+  let PropTypes;
   let React;
   let ReactNoop;
 
   beforeEach(() => {
     jest.resetModules();
+    PropTypes = require('prop-types');
     React = require('react');
     ReactNoop = require('react-noop-renderer');
   });
@@ -70,6 +72,51 @@ describe('forwardRef', () => {
     expect(ref.current).toBe(null);
   });
 
+  it('should support propTypes and defaultProps', () => {
+    function FunctionalComponent({forwardedRef, optional, required}) {
+      return (
+        <div ref={forwardedRef}>
+          {optional}
+          {required}
+        </div>
+      );
+    }
+
+    const RefForwardingComponent = React.forwardRef(function NamedFunction(
+      props,
+      ref,
+    ) {
+      return <FunctionalComponent {...props} forwardedRef={ref} />;
+    });
+    RefForwardingComponent.propTypes = {
+      optional: PropTypes.string,
+      required: PropTypes.string.isRequired,
+    };
+    RefForwardingComponent.defaultProps = {
+      optional: 'default',
+    };
+
+    const ref = React.createRef();
+
+    ReactNoop.render(
+      <RefForwardingComponent ref={ref} optional="foo" required="bar" />,
+    );
+    ReactNoop.flush();
+    expect(ref.current.children).toEqual([{text: 'foo'}, {text: 'bar'}]);
+
+    ReactNoop.render(<RefForwardingComponent ref={ref} required="foo" />);
+    ReactNoop.flush();
+    expect(ref.current.children).toEqual([{text: 'default'}, {text: 'foo'}]);
+
+    expect(() =>
+      ReactNoop.render(<RefForwardingComponent ref={ref} optional="foo" />),
+    ).toWarnDev(
+      'Warning: Failed prop type: The prop `required` is marked as required in ' +
+        '`ForwardRef(NamedFunction)`, but its value is `undefined`.\n' +
+        '    in ForwardRef(NamedFunction) (at **)',
+    );
+  });
+
   it('should warn if not provided a callback during creation', () => {
     expect(() => React.forwardRef(undefined)).toWarnDev(
       'forwardRef requires a render function but was given undefined.',