First, let’s install our new tools:

npm i --save-dev react-native-typescript-transformer typescript tslib ts-jest

ts-jest is necessary only if you’re going to use jest for testing. If not, you can skip it.

I’m going to replace eslint with tslint, so I can uninstall it now:

npm uninstall --save-dev babel-eslint eslint eslint-plugin-react

If you have .eslintrc.js file you can delete it, we’re going to configure linting rules in a tslint.json file later on.

Because I will be using TypeScript for typing props, I also no longer need prop-types:

npm uninstall --save prop-types

Finally I installed typings for all the libraries I’m using:

npm install --save-dev @types/jest @types/react @types/react-native @types/react-navigation @types/react-redux @types/react-test-renderer

Here’s what my package.json diff looked like after all these changes:

react-native-typescript-transformer is the key element. It’s what we’ll use to transpile the code during build. To do that, I modified my app.json file, configuring Expo to use react-native-typescript-transformer when packaging, like that:

Finally, I created a tsconfig.json file containing all the compiler options:

After that you can test out the packager. Run npm start and press R to clear cache. Now open up the app in Expo on your mobile device. It should build correctly even though we haven’t yet actually written any typings. That may seem weird — TypeScript should return a whole bunch of errors. But this is actually a design decision made by react-native-typescript-transformer, to enable incremental building and quick reloading of code during development, even if it hasn’t been correctly typed. For actual typechecking you should rely on tsc and tslint . If you don’t have these already, you can install them globally:

npm i -g typescript tslint

Executing tsc in your project directory will now run your code through the transpiler, displaying any errors you need to fix. However for linting to work you need to have some rules first. You can use tslint --init to create a new tslint.json file and configure it to your taste. Here’s what mine ended up looking like:

For comparison, here’s my old .eslintrc.js file:

Now, using tslint -p tsconfig.json from your root directory will now check your code and print a list of all the errors. You can also install TSLint in your IDE which can use the same config file to display all the errors inside your editor as you’re writing new code.