Using ES7 static propTypes with React-Native - 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:
Run this: npm install babel-plugin-transform-class-properties
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.

Answer 5

Install the stage-0 Babel preset (npm i --save-dev babel-preset-stage-0) and add it to .babelrc file's presets section, e.g.:
{ "presets": ["react", "es2015", "babel-preset-stage-0"] }

Answer 6

See if that helps:
$ npm install babel-plugin-transform-decorators
navigate to /<your project root>/node_modules/react-native/packager/react-packager/.babelrc
Add "transform-decorators" to this list:
{
"retainLines": true,
"compact": true,
"comments": false,
"plugins": [
"syntax-async-functions",
"syntax-class-properties",
"syntax-trailing-function-commas",
"transform-class-properties",
"transform-es2015-arrow-functions",
"transform-es2015-block-scoping",
"transform-es2015-classes",
"transform-es2015-computed-properties",
"transform-es2015-constants",
"transform-es2015-destructuring",
["transform-es2015-modules-commonjs", {"strict": false, "allowTopLevelThis": true}],
"transform-es2015-parameters",
"transform-es2015-shorthand-properties",
"transform-es2015-spread",
"transform-es2015-template-literals",
"transform-flow-strip-types",
"transform-object-assign",
"transform-object-rest-spread",
"transform-react-display-name",
"transform-react-jsx",
"transform-regenerator",
"transform-es2015-for-of",
-->"**transform-decorators**"<--
],
"sourceMaps": false
}