Run a custom Babel transform with React-Native

Question

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

Answer 1

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",
}

Answer 2

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.