How to pass custom transformer to react-native-scripts

The following worked for react-native init projects react-native start server --transformer scalajsTransformer . but react-native-scripts start server --transformer scalajsTransformer is not working :unamused:

scalajsTransformer.js

var transformer = require('react-native/packager/transformer');

function transform(src, filename, options) {
  options = options || {};
  console.log("fileName : "+ filename);
  if(filename.indexOf('scalajs-output-') > -1) {
  return {
        code: src,
        filename,
//        map: filename+".map",
      };
  } else {
   return transformer.transform(src,filename,options)
  }

}

module.exports.transform = transform;

You should be able to do this with the packagerOpts key in app.json

"packagerOpts": {
  "transformer": "scalajsTransformer"
}
1 Like

@jesse, in this case, how do you identify ā€œscalajsTransformerā€? Is it a filename?

Not sure how the React Native packager interprets it, Iā€™d take a look at the docs or source code there. Weā€™re just passing that as an argument to the React Native packager.

Hi,

I donā€™t know if you have it done but there is a nice tutorial for typescript and I imagine that you could use it as a example and do something similar.

Basically you have that transformer you @chandu01011 posted and a file rn-cli.config


module.exports = {  
  getTransformModulePath() {
    return require.resolve('react-native-typescript-transformer')
  },
  getSourceExts() {
    return ['ts', 'tsx'];
  }
}
1 Like

SOLVED

ScalaJS running on Expo: https://github.com/scalajs-react-interface/discuss/issues/1

1 Like