React Native | TypeScript | Expo CLI v2

September 2018

The latest version of Expo CLI (v2+) replaces the need for create-react-native-app and Expo XDE. The following recipe shows how to create a new Expo app and wire it for TypeScript.

Kudos to Jan Aagard and his version https://github.com/janaagaard75/expo-and-typescript that provided the inspiration.

WOMM™⁽¹⁾ version reference

App	Version
Node	10.11.0
TypeScript	3.0.3
Expo CLI	2.1.3
Expo	30.0.1

Recipe

Step 1: Install the latest version of Expo CLI and Typescript

$ yarn global add expo-cli
$ yarn global add typescript

Step 2: Create new app

$ expo init <newApp>
$ cd <newApp>

Step 3: Initialize TypeScript and update tsconfig.json

$ tsc --init

tsconfig.json

{
    "compilerOptions": {
        "target": "es2017",
        "module": "es2015",
        "lib": [
            "es2017"
        ],
        "jsx": "react-native",
        "sourceMap": true,
        "noEmit": true,
        "importHelpers": true,
        "moduleResolution": "node",
        "allowSyntheticDefaultImports": true,
    },
    "exclude": [
        "node_modules"
    ]
}

Step 4: Install react-native-typescript-transformer and configure app.json

$ yarn add -D typescript
$ yarn add -D react-native-typescript-transformer
# Optional ... make sure "importHelpers": true in tsconfig
$ yarn add tslib

app.json

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

Step 5: Add Typescript types

$ yarn add -D @types/react @types/react-native @types/expo @types/expo__vector-icons

Step 6: Rename App.js to App.tsx

Step 7: Start Expo

$ yarn start

Result

If you're having issues getting it started, have a look at the source code above. It produced the screenshot above.

---

Notes:

^{[1]: Works on My Machine}