How to generate documentation for React Native?

Question

I tested Doxygen and multiple GitHub projects (jsdoc, react-docgen, react-doc-generator using npm i -g like:

react-doc-generator ./ -o DOCUMENTATION.md
react-docgen --pretty -o out/reactdocgen.html ./
jsdoc ./src
doxywizard

But none really understand recent ES6 JavaScript and JSX for React Native (not even speaking of native code). I end up with useless documentation.

Of course, I tried to add comments (and \fn for doxygen), but comments are fully entered by hand (not generated) and sometimes code in documentation is not present.

/**
 * 
 * 
 * @class MainScreen
 * @extends {Component}
 */
class MainScreen extends Component {
    /**
     * 
     * \fn navigationOptions()
     * @static
     * @memberof MainScreen
     */

Finally I didn't find how to jsdoc a folder and subfolders (but test results on a commented file was subpar).

So I turn to React Native documentation gurus to ask: How do you generate documentation for React Native?

If it's from comments only, do you have a tool to generate comments from RN+ES6(+Native) code?

Bonus point: can we get automatically a diagram from import statements for instance? Like:

Answer 1

ESDoc can understand and document ES6 JavaScript and JSX for React Native. It will document the code with or without docblock comments. I used it with the ESDoc JSX Plugin. As others have mentioned in comments, there are even plugins that will support the latest ECMAScript proposals.

For an example of what you'll get, you could look at the redux-higher-order-reducers ES6 code documented using ESDoc.

Finally I didn't find how to jsdoc a folder and subfolders (but test results on a commented file was subpar).

You can specify which folder to document in your .esdoc.json config file. Here is an example that will only document code in the "src" folder

{
  "source": "./src",
  "destination": "./docs",
  "plugins": [
    {"name": "esdoc-standard-plugin"},
    {"name": "esdoc-jsx-plugin", "option": {"enable": true}}
  ]
}

Bonus point: can we get automatically a diagram from import statements for instance?

ESDoc does not do it directly, but it's quite easy to achieve it use the "manual" feature of ESDoc which allows you to include your own docs. Start by using something like madge to generate the diagram from import statements. For example:

./node_modules/.bin/madge --image manual/asset/graph.svg src/

Next create a file named manual/imports-diagram.md with the following contents:

# Diagram of imports
![Diagram of imports](asset/graph.svg)

Finally, change your ESDoc configuration to specify the user manual section:

{
  "source": "./src",
  "destination": "./docs",
  "plugins": [
    {
      "name": "esdoc-standard-plugin",
      "option": {
        "manual": {
          "asset": "./manual/asset",
          "files": [
            "./manual/imports-diagram.md"
          ]
        }
      }
    },
    {"name": "esdoc-jsx-plugin", "option": {"enable": true}}
  ]
}

Run esdoc again and the madge import diagram will be included in your docs.