How to use MobX with decorators in React Native 0.57?

Question

I'm using MobX in my react-native application.

After upgrading to 0.56 I used the solution provided in the following answer: https://stackoverflow.com/a/51234815/5597641

However, it no longer works for 0.57. Any ideas on the .babelrc configuration will help...

Answer 1

After some time, I have found a working configuration for making MobX work with React Native 0.57. The problem is with the new module:metro-react-native-babel-preset introduced in 0.57. We need to use @babel/plugin-transform-flow-strip-types plugin to overcome this issue...

Here is the working .babelrc configuration

{ 
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [
        ["@babel/plugin-transform-flow-strip-types"],
        ["@babel/plugin-proposal-decorators", { "legacy": true}],
        ["@babel/plugin-proposal-class-properties", { "loose": true}]
    ]
}

and package.json dependencies:

"dependencies": {
    "babel-plugin-transform-flow-strip-types": "^6.22.0",
    "mobx": "^5.5.0",
    "mobx-react": "^5.2.8",
    "mobx-state-tree": "^3.5.0",
    "native-base": "^2.8.1",
    "react": "16.5.0",
    "react-native": "0.57.1",
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-proposal-decorators": "^7.1.2",
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.48.0",
    "react-test-renderer": "16.5.0"
  }

After installing the required dependencies follow the Workaround 2 in the following comment https://github.com/facebook/react-native/issues/20150#issue-340235017