Using ES7 static propTypes with React-Native

Question

When I'm launching my project using React-Native default packager, I have this error: Unexpected token on this line:

static propTypes = {
   /// ...
};

I took a look on React-Native issues on GitHub, but I didn't find a solution.

Any suggestion?

Answer 1

React-Native packager use Babel for transfer ES6 and ES7, but NOT ALL features. The enable list is here. In your case, class-props is not enabled by default in RN packager. You can use Babel to compiler your code before packager, or just enable it in the packager setting. See this official doc for more information.

Answer 2

Try appending your propTypes to your class:

var MyClass extends React.Component {
....
}

MyClass.propTypes = {
.... /* enter proptypes here */
}

Answer 3

After @Fomahaut answer, I keep looking on Facebook's GitHub repository and found this issue: https://github.com/facebook/react-native/issues/2182

• Create a .babelrc file at the project's root directory
• Add more rules to Babel

Example:

    {
      "retainLines": true,
      "compact": true,
      "comments": false,
      "whitelist": [
        "es6.arrowFunctions",
        "es6.blockScoping",
        "es6.classes",
        "es6.constants",
        "es6.destructuring",
        "es6.forOf",
        "es6.modules",
        "es6.parameters",
        "es6.properties.computed",
        "es6.properties.shorthand",
        "es6.spread",
        "es6.tailCall",
        "es6.templateLiterals",
        "es6.regex.unicode",
        "es6.regex.sticky",
        "es7.asyncFunctions",
        "es7.classProperties",
        "es7.comprehensions",
        "es7.decorators",
        "es7.exponentiationOperator",
        "es7.exportExtensions",
        "es7.functionBind",
        "es7.objectRestSpread",
        "es7.trailingFunctionCommas",
        "regenerator",
        "flow",
        "react",
        "react.displayName"
        ],
      "sourceMaps": false
    }

Answer 4

According to this answer, you need to install a plugin for class properties as of Babel 6.

As of Babel 6, you now need the transform-class-properties plugin to support class properties.

Steps:

1. Run this: npm install babel-plugin-transform-class-properties
2. Add this to your .babelrc: "plugins": ["transform-class-properties"] (Note, it's a plugin, not a transform; so don't put it in the "presets" list.)

Worked for me.