add Typescript to React Native

README.md

Add to devDependencies in package.json:

• @types/react
• @types/react-native
• react-native-typescript-transformer
• typescript

yarn add --dev typescript react-native-typescript-transformer @types/react @types/react-native

Create rn-cli.config.js and tsconfig.json in the root of your project.

rn-cli.config.js

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

tsconfig.json:

{
    "compilerOptions": {
        "target": "es2015",
        "jsx": "react",
        "noEmit": true,
        "moduleResolution": "node",
        "allowSyntheticDefaultImports": true
    },
    "exclude": [
        "node_modules"
    ]
}

Change App.js to App.tsx

App.tsx

- type Props = {}
+ interface Props { }
+ interface State { }

- export default class App extends React<Props>
+ export default class App extends React<Props, State> {
  // ...
}