React Native typescript configuration

rn-cli.config.js

var path = require('path');
module.exports = {
  getAssetExts() {
    return [
      'ts',
      'tsx'
    ]
  },
  getTransformModulePath() {
    return path.join(__dirname, 'transformer.js');
  },
}

transformer.js

'use strict';
let path = require('path');
let ts = require('typescript');
let tsConfig = require('./tsconfig.json');
let rnTransform = require('react-native/packager/transformer').transform;

function transform(data, callback) {
	// Do custom transformations
	let result = data.sourceCode;
	if (path.extname(data.filename) == '.tsx' || path.extname(data.filename) == '.ts') {
		try {
			result = ts.transpileModule(result, {compilerOptions: tsConfig.compilerOptions});
			result = result.outputText;
		} catch(e) {
			callback(e);
			return;
		}
	}

	// Pass the transformed source to the original react native transformer
	
	try {
		result = rnTransform(result, data.filename, data.options);
	} catch(e) {
		callback(e);
		return;
	}
	callback(null, result);
}

module.exports = transform;

Hi! Thanks for the gist. I'm having a bit trouble getting this to work though.

I've placed the two files in the root folder of my RN project, but the packager doesn't seem to be picking up the new transformer when I run for example react-native start or npm start. Is there anything else I should do?

@cbrevik - you need to ensure that you run with --config rn-cli.config.js