{"id":11805,"library":"react-native-typescript-transformer","title":"React Native TypeScript Transformer","description":"This package, `react-native-typescript-transformer`, provides a mechanism for transpiling TypeScript files within React Native applications. It functions by configuring the React Native packager (Metro) to use the TypeScript compiler directly for transformation, enabling seamless usage of TypeScript with React Native versions starting from 0.45. The current stable version is 1.2.13. However, it is largely considered superseded and deprecated for new projects or existing projects on React Native 0.57 and above, as modern React Native CLI (`react-native init --template typescript`) configures Babel for TypeScript transpilation by default. The key differentiator is its use of the TypeScript compiler for transpilation, unlike Babel which only strips types, requiring a separate `tsc --noEmit` command for type checking. Release cadence is infrequent, reflecting its deprecated status for current development practices.","status":"deprecated","version":"1.2.13","language":"javascript","source_language":"en","source_url":"https://github.com/ds300/react-native-typescript-transformer","tags":["javascript"],"install":[{"cmd":"npm install react-native-typescript-transformer","lang":"bash","label":"npm"},{"cmd":"yarn add react-native-typescript-transformer","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native-typescript-transformer","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime environment for the transformer; peer dependency.","package":"react-native","optional":false},{"reason":"The TypeScript compiler used for transformation; peer dependency.","package":"typescript","optional":false}],"imports":[{"note":"This package is a Metro/packager transformer configured via `metro.config.js` or `rn-cli.config.js` and is not directly imported into application code. The primary interaction is via `require.resolve`.","wrong":"import transformer from 'react-native-typescript-transformer'","symbol":"transformer.babelTransformerPath","correct":"module.exports = { transformer: { babelTransformerPath: require.resolve('react-native-typescript-transformer') } }"},{"note":"Used for React Native versions older than 0.57 in `rn-cli.config.js` configuration.","symbol":"getTransformModulePath","correct":"module.exports = { getTransformModulePath() { return require.resolve('react-native-typescript-transformer'); } }"},{"note":"Often configured alongside `getTransformModulePath` for older React Native versions to ensure `.ts` and `.tsx` files are recognized by the packager.","symbol":"getSourceExts","correct":"module.exports = { getSourceExts() { return ['ts', 'tsx']; } }"}],"quickstart":{"code":"{\n  // tsconfig.json\n  \"compilerOptions\": {\n    \"target\": \"es2015\",\n    \"jsx\": \"react\",\n    \"noEmit\": true,\n    \"moduleResolution\": \"node\",\n    \"importHelpers\": true // Optional, for tslib\n  },\n  \"exclude\": [\n    \"node_modules\"\n  ]\n}\n\n// metro.config.js (for RN >= 0.59)\nmodule.exports = {\n  transformer: {\n    babelTransformerPath: require.resolve('react-native-typescript-transformer')\n  },\n  resolver: {\n    sourceExts: ['js', 'jsx', 'ts', 'tsx', 'json', 'node']\n  }\n};\n\n// Add dev dependencies\n// yarn add --dev react-native-typescript-transformer typescript @types/react @types/react-native","lang":"typescript","description":"This quickstart configures `tsconfig.json` and `metro.config.js` to enable TypeScript compilation for React Native >= 0.59 projects using this transformer, along with necessary dev dependencies."},"warnings":[{"fix":"For new projects, use `react-native init --template typescript`. For existing projects, migrate to Babel-based TypeScript setup as detailed in official React Native documentation or community gists (e.g., linked in the README).","message":"This package is largely deprecated. For new React Native projects or existing projects on RN 0.57+, it is recommended to use `react-native init MyProject --template typescript` which uses Babel for TypeScript transpilation, or follow Babel-based migration guides.","severity":"deprecated","affected_versions":">=0.57.0"},{"fix":"Integrate `tsc --noEmit` into your development workflow (e.g., as a pre-commit hook or watch command) and CI/CD pipelines.","message":"When using Babel for TypeScript transpilation (the recommended modern approach), Babel does not perform type checking. You must run the TypeScript compiler (`tsc --noEmit`) separately as a linter or for CI checks to catch type errors.","severity":"gotcha","affected_versions":">=0.57.0"},{"fix":"Avoid these specific TypeScript features when using Babel for transpilation. For bracket-style assertions, use `x as Foo` instead. This transformer, if used, supports these features by compiling with `tsc`.","message":"Babel transpilation for TypeScript does not support certain advanced language features: namespaces, bracket-style type assertions (e.g., `<Foo>x`) when JSX is enabled, enums spanning multiple declarations (enum merging), and legacy import/export syntax (`import foo = require(...)`).","severity":"gotcha","affected_versions":">=0.57.0"},{"fix":"Keep your root entry point files as JavaScript. You can import TypeScript components from these files.","message":"The platform-specific entry files (e.g., `index.ios.js`, `index.android.js`, `index.js`) must remain JavaScript files (`.js`) and cannot be converted to TypeScript (`.ts` or `.tsx`).","severity":"gotcha","affected_versions":">=0.45.0"},{"fix":"Consult the package README for the correct `metro.config.js` or `rn-cli.config.js` structure corresponding to your specific React Native version.","message":"The configuration for this transformer in the React Native packager (Metro) changed significantly across different React Native versions. RN < 0.57 uses `getTransformModulePath()` and `getSourceExts()`, while RN >= 0.57 uses `transformer.babelTransformerPath`.","severity":"breaking","affected_versions":">=0.45.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Run `yarn add --dev react-native-typescript-transformer typescript` and ensure your `metro.config.js` or `rn-cli.config.js` correctly references the package.","cause":"The package `react-native-typescript-transformer` is not installed or Metro cannot find it in your `node_modules`.","error":"Error: Unable to resolve module `react-native-typescript-transformer`"},{"fix":"Check your `metro.config.js` for syntax errors. Verify your React Native version and use the corresponding configuration structure from the package documentation (e.g., for RN < 0.57, use `getTransformModulePath`).","cause":"Your `metro.config.js` is malformed, or you are trying to use the newer `transformer.babelTransformerPath` syntax with an older React Native version that expects `getTransformModulePath()`.","error":"TypeError: Cannot read property 'babelTransformerPath' of undefined"},{"fix":"Run `tsc --noEmit --watch` in a separate terminal during development, or integrate `tsc --noEmit` into your build script or CI/CD pipeline to perform type checking.","cause":"The build process is using Babel (which only strips types) or the `noEmit: true` option in `tsconfig.json` prevents `tsc` from generating output, but you are not running `tsc` separately for type checking.","error":"Type errors not reported in console during `react-native run-android/ios`"}],"ecosystem":"npm"}