Install docs for react-native

[mo22]

For typescript design:type metadata to be avaliable in react-native it is required to add some plugins to babel.config.js:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    'babel-plugin-transform-typescript-metadata',
    ['@babel/plugin-proposal-decorators', { legacy: true }]
  ],
};

Without this most transform still run fine but some produce different, weird results (a Map with Type() annotation for example).

Might make sense for the react-native (or babel) folks to add a section to the install docs with a hint.

[NoNameProvided]

I am not familiar with react-native so I would appreciate it if someone who has experience with class-transformer + react-native can open a PR to add some install instructions.

[lagoasoft-lucasschmidt]

Guys I am trying to make this to work ... when I add the @type decorator, it breaks the expo/react-native App. I tried all sorts of configs.

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      'babel-plugin-transform-typescript-metadata',
      ['@babel/plugin-proposal-decorators', { legacy: true }],
      ['@babel/plugin-proposal-class-properties', { loose: true }],
      '@babel/plugin-syntax-numeric-separator',
      [
        'module:react-native-dotenv',
        {
          moduleName: '@env',
          path: '.env',
          blacklist: null,
          whitelist: null,
          safe: false,
          allowUndefined: true,
        },
      ],
    ],
  };
};

@mo22 do you have any idea?

[lclarkg18]

It would definitely be great to get more support on the docs including an explanation of why we need to use the legacy present on the decorator plugin and why the experimeintalDecorators tsconfig flag is not enough, this post is the only way I managed to get it running.

As for @lagoasoft-lucasschmidt, make sure you've followed the rest of the installation guide including import 'reflect-metadata'; That's what I was missing. Also, I didn't actually need the class-properties plugin.

And make sure you re-run with --reset-cache each time.

[samavati]

I followed what exactly you wrote here but I getting the error again @lclarkg18

 ERROR  TypeError: , js engine: hermes
 ERROR  Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called., js engine: hermes