How to pass custom transformer to react-native-scripts


#1

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;

#2

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

"packagerOpts": {
  "transformer": "scalajsTransformer"
}

#3

@jesse, in this case, how do you identify “scalajsTransformer”? Is it a filename?


#4

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.


#5

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'];
  }
}

Integration with TypeScript / Mocha / other build processes
#6

SOLVED

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