I need to use babel-plugin-transform-decorators-legacy with React-Native to enable @decorators. How does one configure React-Native / Babel to make this possible?

This is related to my previous question about how to get @decorators working in React-Native:

I need to use babel-plugin-transform-decorators-legacy with React-Native to enable @decorators. How does one configure React-Native / Babel to make this possible?

This is related to my previous question about how to get @decorators working in React-Native: https://stackoverflow.com/a/34271636/941058

• javascript
• react-native
• babeljs

4 Answers 4

Use official Babel presets

Install the official Babel presets for React Native applications:

npm i babel-preset-react-native --save-dev

Edit your .babelrc:

{
  "presets": ["react-native"]
}

Prior RN v21.0: Extend the original .babelrc from react-native

To avoid manipulating files in the node_modules directory, you should extend the original .babelrc.

By keeping your dependencies clean, there won't be any issues with upgrades or sharing the project.

{
    "extends": "react-native/packager/react-packager/.babelrc",
}

You would install the plugin at your projects root level then add the plugin to the .babelrc in node_modules/react-native/packager/react-packager/.babelrc

The issue with this work around to using @decorators is if you are working on a team for the app every developer will need to make the change to .babelrc since node_modules should not be checked into source.

As of Jan 2016, you can simply create a .babelrc file near index.ios.js and index.android.js that looks like:

{
  "plugins": [
    "transform-decorators"
  ]
}

You have to add it to your .babelrc in your react native folder in your node_modules folder.

This file: react-native/packager/react-packager/.babelrc.

Put it before the syntax-class-properties.

You also appear to need a .babelrc at the root level like suggested below.

    {
      "plugins": [
        "transform-decorators"
      ]
    }