Nested union type in react-native docs

[brentvatne]

In ViewStyleProps I would like to change transform to the following:

  transform: ReactPropTypes.arrayOf(
    ReactPropTypes.oneOfType([
      ReactPropTypes.shape({rotation: ReactPropTypes.number}),
      ReactPropTypes.shape({scaleX: ReactPropTypes.number}),
      ReactPropTypes.shape({scaleY: ReactPropTypes.number}),
      ReactPropTypes.shape({translateX: ReactPropTypes.number}),
      ReactPropTypes.shape({translateY: ReactPropTypes.number})
    ])
  ),

The current output from docgen is this:

I would prefer for it to be this:

@fkling - am I doing something incorrectly here? If a patch is necessary, could you point me in the right direction?

Thanks!

Related: facebook/react-native#1157

[fkling]

I assume that whatever renders the docs is not set up to render unions. The output from react-docgen should be something like

    "transform": {
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "union",
          "value": [
            {
              "name": "shape",
              "value": {
                "rotation": {
                  "name": "number"
                }
              }
            },
            {
              "name": "shape",
              "value": {
                "scaleX": {
                  "name": "number"
                }
              }
            },
            {
              "name": "shape",
              "value": {
                "scaleY": {
                  "name": "number"
                }
              }
            },
            {
              "name": "shape",
              "value": {
                "translateX": {
                  "name": "number"
                }
              }
            },
            {
              "name": "shape",
              "value": {
                "translateY": {
                  "name": "number"
                }
              }
            }
          ]
        }
      },
      "required": false,
      "description": ""
    }
  }

So all you have to do is iterate over value and build the output you want.

[brentvatne]

Thanks! Fixed here: facebook/react-native#1181

[fkling]

Awesome!

[mikeaustin]

I'm using styleguidist which uses react-docgen, but it still outputs "union" for Flow types such as ("foo" | "bar"). Is there a plugin or patch or something to make it list the union types?

I realize this in an old thread, but if there is an answer, I assume it would be useful to others.