React.PropType with two possible shapes
<p><strong>Background</strong>: I'm trying to specify a prop type for a dimension spec where I can either specify an explicit value, or a min and max value to evaluate. This will be used by an image component that will evaluate if the image is an acceptable height and width for user generated input.</p>

<blockquote>
  <p>The abstract goal is to have a React props value resolve to one of two possible shapes.</p>
</blockquote>

<hr>

<h2>Each of the shapes work on their own</h2>

<p>an <em>explicit value</em> for width would have this shape:</p>

<pre><code>{
    width: PropTypes.shape({
        value: PropTypes.number.isRequired,
        error: PropTypes.string
    })
}
</code></pre>

<p>a <em>min and max</em> value would have this shape:</p>

<pre><code>{
    width: PropTypes.shape({
        min: {
            value: PropTypes.number.isRequired,
            error: PropTypes.string
        }, max: {
            value: PropTypes.number.isRequired,
            error: PropTypes.string
        }
    })
}
</code></pre>

<p><em>EDIT: As pointed out in the accepted answer, there is a bug in this block that I did not catch.  For some reason it was not giving me a run-time error, but this is not a working example of nested shapes, see the answer for the correct syntax.</em></p>

<p>If I try either of these methods and the properties match, everything works as expected <em>so I can safely assume errors are coming from the code below</em>.</p>

<hr>

<h2>What does not work</h2>

<p>I tried using an optionalUnion as seen in the <a href="https://facebook.github.io/react/docs/typechecking-with-proptypes.html" rel="nofollow noreferrer"><strong>React typechecking documentation</strong></a> via <strong>PropTypes.oneOfType</strong> with the syntax below.</p>

<pre><code>{
    width: PropTypes.oneOfType([
        PropTypes.shape({
            value: PropTypes.number.isRequired,
            error: PropTypes.string
        }), PropTypes.shape({
            min: {
                value: PropTypes.number.isRequired,
                error: PropTypes.string
            }, max: {
                value: PropTypes.number.isRequired,
                error: PropTypes.string
            }
        })
    ])
}
</code></pre>

<p>When I try this, I get the response</p>

<p><code>Warning: Failed propType: checker is not a function Check the render method of 'MyParentContainer'.</code></p>

<p>If I use either shape without the <code>PropTypes.oneOfType</code> method, no complaints in the debugger, everything runs as expected.  <code>PropTypes.oneOf</code> throws a seemingly worse error:</p>

<p><code>warning.js:45Warning: Failed propType: Invalid prop 'dimensions.width' of value '[object Object]' supplied to 'MyComponent', expected one of [null,null]. Check the render method of 'MyParentContainer'.</code></p>

<p>Does anyone know if this syntax is off or is this a limitation of PropTypes.oneOfType?  Is there a standard solution to this kind of problem?</p>