Typescript Decorators are not working as expected in React Native

Viewed 325

I'm trying to use my own typescript dependency ioc-service-container in a react native typescript project.

The dependency uses typescript property decorators, like this:

const service = new Service();
ServiceContainer.set('service', () => service);

class Foo {
  @inject
  service!: Service;
}

This works fine for reactJS, Vue & Node backends. But it does not work in react native. The property service from Foo is still undefined. After some debugging I found out, that the passed property to the inject-decorator is an empty object not the class Foo.

I think the problem is bable transforming my code ... but I'm not sure.

babel.config.js:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    ['@babel/plugin-proposal-decorators', { 'legacy': true }], // required for @boundMethod decorator
  ],
};

tsconfig.json:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    // ...
    "experimentalDecorators": true,
  }
}

0 Answers
Related