Skip to content

An example of taking react-native's default template and making it work with typescript

Notifications You must be signed in to change notification settings

orta/react-native-45-typescript-example

Repository files navigation

This is the minimal possible setup to get a in memory version of React Native working with TypeScript support. The current techniques use a multi-step process, you save -> TypeScript creates JS file -> Babel sees JS file and compiles to ES5. This replaces that with a custom transformer that will either pass the file to Babel or the TypeScript compiler.

If you want to see a non-trivial production version: https://github.com/artsy/emission

This repo is the techniques inside that app replicated against a new project.


Steps required to make this project:

  • npm install -g react-native-cli
  • react-native init MyProject
  • cd MyProject
  • yarn add typescript --dev
  • yarn tsc -- --init
  • change tsconfig.json:
{
  "compilerOptions": {
    "target": "es5",  
    "module": "commonjs",
    "jsx": "react", 
    "strict": true  
  }
}
  • create - rn-cli.config.js
module.exports = {
  getSourceExts() {
    return ["js", "ts", "tsx"]
  },

  getTransformModulePath() {
    return require.resolve("./transformer")
  },
}

Making it feel good:

  • yarn add @types/react-native --dev

About

An example of taking react-native's default template and making it work with typescript

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published