How can I declare a PropType corresponding to a nullable number?

I'm looking for a PropType that means

"this is required, and it will either be a number or be null"

In other words, what I have now is

PropTypes.number.isRequired

but that throws a warning if a null value gets passed in, yet I want null to be an acceptable value.

Just use:

PropTypes.number

By default all prop types aren't required (i.e. allow null or undefined) unless you pop a .isRequired on the end of them.

You can see the full docs for proptypes here:

• https://reactjs.org/docs/typechecking-with-proptypes.html

You simply could use:

PropTypes.number

and in defaultProps:

yourPropName: null

Currently prop-types library don't allow this. The way i get around this is using a custom validation function

MyComponent.propTypes = {
  nullableArray: function(props, propName, componentName) {
    const { propName: data } = props;

    if (data === undefined) {
      return new Error(`Undefined ${propName} is not allowed`);
    }

    if (data !== null) {
      return; //this is allow when data is loading
    }

    if (!_.isArray(data)) {
      return new Error(`${propName} must be an array`);
    }
  }
};

You can make another step further to create a high order function to generate the validation function. this should get you started

generateRequiredOrNullValidationFunction = expectedType => {
  if (expectedType !== "array") {
    return Error(`Unexpected ${expectedType}`);
  }

  return function(props, propName, componentName) {
    const { [propName]: data } = props;

    if (data === undefined) {
      return new Error(`Undefined ${propName} is not allowed`);
    }

    if (data !== null) {
      return; //this is allow when data is loading
    }

    if (expectedType === "array" && !_.isArray(data)) {
      return new Error(`${propName} must be an array`);
    }
  };
};

In this snippet, expectedType is a enumeration such as bool , array, number ...

To help with this quite common issue, I created a clean and fully-typed wrapper called better-prop-types:

import BetterPropTypes from 'better-prop-types'

// ...

MyComponent.propTypes = {
  aProp: BetterPropTypes.string.isRequiredButNullable,
}