Adding TypeScript to React-Native Expo project

Question

I am trying to add TypeScript to a React-Native Expo project and get the following error if I rename any file abc.js to abc.tsx :

I have been following the instructions at:

• https://facebook.github.io/react-native/blog/2018/05/07/using-typescript-with-react-native
• https://medium.com/@rintoj/react-native-with-typescript-40355a90a5d7

How can I address this?

---

rn-cli.config.js

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

tsconfig.json

{
"compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "jsx": "react",
    "outDir": "./dist",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "allowSyntheticDefaultImports": true,
    //"strict": true,
    "skipLibCheck": true,
    "declaration": true,
    "noUnusedLocals": true
},
"exclude": [
    "node_modules"
]
}

Answer 1

TS/TSX files work out of the box with expo v31 but you'll probably want to include

Package TypeScript types

yarn add @types/expo @types/react @types/react-native -D

Custom tsconfig.json

Create tsconfig.json in the root directory next to package.json . It enforces strict mode and includes App.tsx (to replace App.js ) and "custom_types" directory to add types for npm packages that don't include them.

// Defaults from https://blogs.msdn.microsoft.com/typescript/2018/08/27/typescript-and-babel-7/
// Added "jsx": "react-native".
// Added ["App.tsx", "custom_types"] to "include".
{
  "compilerOptions": {
    // Target latest version of ECMAScript.
    "target": "esnext",
    // Search under node_modules for non-relative imports.
    "moduleResolution": "node",
    // Output react-native code.
    "jsx": "react-native",
    // Don't emit; allow Babel to transform files.
    "noEmit": true,
    // Enable strictest settings like strictNullChecks & noImplicitAny.
    "strict": true,
    // Disallow features that require cross-file information for emit.
    "isolatedModules": true,
    // Import non-ES modules as default imports.
    "esModuleInterop": true
  },
  "include": ["src", "App.tsx", "custom_types"]
}

Answer 2

With version 31 + typescript can be add much more easily https://docs.expo.io/versions/latest/guides/typescript/

First install the dev dependencies react-native-typescript-transformer

You need to add in your app.json file this config. This will make expo know you use ts.

 "packagerOpts": {
      "sourceExts": [
        "ts",
        "tsx"
      ],
      "transformer": "node_modules/react-native-typescript-transformer/index.js"
    },

Stop expo and restart after doing these changes.

If you use vanilla react-native the rn-cli.config.js file is the response, but here in expo this is how I make it work.

Answer 3

Expo 31 has built-in support for TypeScript: just name your component files with .tsx instead of .js .

The only exception is App.js – this file must be a .js file. However, you can still import other .tsx files from App.js with no extra steps.